[Project Solar / Phase 1 / Components] DialogPrimitive/Modal/Flyout carbonization

[didoo]

📌 Summary

This PR intends to finalize the "carbonization" of the DialogPrimitive, Modal, and Flyout components.

🛠️ Detailed description

In this PR I have:

• added showcase pages for utilities/dialog-primitive and components/flyout
  • components/modal was done during the dry-run phase
• added few design tokens for dialog-primitive and modal
• made a few tweaks to the DialogPrimitive, Modal and Flyout components
• added fix for the DismissButton position when carbonized (following [Project Solar / Phase 1 / Components] DismissButton carbonization #3665)
• removed unnecessary box-shadow overrides (now it’s handled at tokens level, following [Project solar / Phase 1 / Foundations] Elevation #3693)
• updated the tokens for DialogPrimitive to align with most recent Figma variables for the component
• updated showcase for carbonized Flyout by using equivalent web component (SidePanel from IBM 4 Products)
• re-generated files in output

👀 Previews:

• DialogPrimitive: https://hds-showcase-git-project-solar-phase-1hds-6126-e02631-hashicorp.vercel.app/carbonization/utilities/dialog-primitive
• Modal: https://hds-showcase-git-project-solar-phase-1hds-6126-e02631-hashicorp.vercel.app/carbonization/components/modal
• Flyout: https://hds-showcase-git-project-solar-phase-1hds-6126-e02631-hashicorp.vercel.app/carbonization/components/flyout

🔗 External links

Jira tickets:

• https://hashicorp.atlassian.net/browse/HDS-6126
• https://hashicorp.atlassian.net/browse/HDS-6098
• https://hashicorp.atlassian.net/browse/HDS-6085

Figma file: https://www.figma.com/design/GWMDKHuGr98DFxSptH6vgj/-LJ--Token-Migration

---

👀 Component checklist

• Percy was checked for any visual regression
  • Note: the subtle differences in the DialogPrimitive and Modal screenshots are due to the fact that we added a 1px transparent border to the dialog primitive, which slightly shifts the layout of the element; this is not an issue in production code, since the component in horizontally/vertically centered in the screen

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist

• If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
• If applicable, I've worked with GRC to document the impact of any changes to security controls.
  Examples of changes to controls include access controls, encryption, logging, etc.
• If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
  Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hds-showcase	Ready	Preview	Mar 31, 2026 0:39am
hds-website	Ready	Preview	Mar 31, 2026 0:39am

[dchyun]

@didoo I've carbonized the DismissButton which is used inside components here. If you would like to cherry pick those changes you can get them from #3665

[didoo]

@didoo I've carbonized the DismissButton which is used inside components here. If you would like to cherry pick those changes you can get them from #3665

@dchyun probably I could rebase this branch on yours, or viceversa, so we can see the overall effect of both carbonizations (it's used also in the Alert, and hence the Toast, components(

[didoo]

@dchyun update: I've rebased this PR on #3665

[jorytindall]

This is looking largely pretty good to me, but I have a few questions:

• What is that comparison component on the Flyout showcase page withe the borders in the Header/Footer? Is that something coming from Carbon? I guess it's making me question some of my strategy of trying to kind of mimic the Modal for all of the styling
• I thought the Dismiss Button was already migrated, but it doesn't look like any of the interactive states are working to test. Actually looking this it looks like pointer events are just disabled for the showcase pages, is this right?
• I think the Tagline has the incorrect font-size, what I have is 12px

[didoo]

This is looking largely pretty good to me, but I have a few questions:

• What is that comparison component on the Flyout showcase page withe the borders in the Header/Footer? Is that something coming from Carbon?

@jorytindall it's the SidePanel from the Carbon for Products library:

• https://pages.github.ibm.com/carbon/ibm-products/components/side-panel/usage/
• https://ibm-products-web-components.carbondesignsystem.com/?path=/story/components-sidepanel--slide-over
• https://ibm-products.carbondesignsystem.com/?path=/story/components-sidepanel--slide-in

I guess it's making me question some of my strategy of trying to kind of mimic the Modal for all of the styling

If you refer to the horizontal dividers it's because they have some animations/special transitions: see this example and scroll the content of the sidepane/flyout https://ibm-products-web-components.carbondesignsystem.com/?path=/story/components-sidepanel--with-static-title

• I thought the Dismiss Button was already migrated, but it doesn't look like any of the interactive states are working to test. Actually looking this it looks like pointer events are just disabled for the showcase pages, is this right?

Yes I have disabled the "click" otherwise it would remove the Modal/Flyout from the page if one accidentally (or intentionally) clicks it :)

• I think the Tagline has the incorrect font-size, what I have is 12px

Fixed. I have now added component-level tokens for the Tagline for font-size/line-height (but I don't see them in the Figma variables? 🤔) and more importantly the foreground color (Neutral 500 for HDS, and so "faint", but Text Primary in CDS; I don't think you have this differentiation, right?)

[jorytindall]

Thanks for the context on this, following up on a few things:

• Horizontal dividers in the Carbon SidePanel: looking at the examples you shared, these only seem to appear when the height of the content is greater than the height of the viewport and the content scrolls. I'm not going to change anything in the component for now
• Dismiss buttons: sounds good, that's what I thought!
• Tagline: I've also updated the DialogPrimitive to map to CDS text-primary instead of the default mapping for faint, that's a nice catch.

[KristinLBradley]

Looks good!