`Button` - Fix color of Buttons within Modal triggered from SideNav or AppHeader (HDS-5572) #3335

KristinLBradley · 2025-10-28T23:45:58Z

📌 Summary

If merged, this PR prevents inheritance of dark color styles on Buttons within Modals (actually DialogPrimitive) triggered within the SideNav or AppHeader

Showcase previews:

🛠️ Detailed description

Update SideNav & AppHeader styles to prevent Button & Dropdown contained in a DialogPrimitive from inheriting dark theme.
SideNav & AppHeader Showcase: Add examples of nested Button, Dropdown, & SuperSelect content within DialogPrimitive, etc.

📸 Screenshots

SideNav Showcase example added:

AppHeader Showcase example added:

BEFORE:

AFTER:

🔗 External links

Jira ticket: HDS-5572

👀 Component checklist

Percy was checked for any visual regression
A changelog entry was added via Changesets if needed (see templates here)

💬 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.

…ggered from within the SideNav or AppHeader

vercel · 2025-10-28T23:46:09Z

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

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Oct 31, 2025 5:05pm
hds-website	Ready	Preview	Oct 31, 2025 5:05pm

showcase/app/components/mock/app/sidebar/side-nav.gts

KristinLBradley · 2025-10-28T23:55:26Z

showcase/app/components/mock/app/sidebar/side-nav.gts

+                </M.Footer>
+              </:modal>
+            </ModalWithTrigger>
+          </SNL.Item>


I added a rough example for testing. Should I refine it a bit more? Currently, it just uses a plain unstyled button to trigger the Modal.

I can add an example Modal triggered within the AppHeader as well.

Would it make sense to add specific examples to the SideNav and AppHeader in which we add not just the modal, but also the flyout, the dropdown and the super select, to make sure their styles are not overwritten?

I removed the Modal code from the AppFrame demo and added examples to the SideNav Showcase.

Should we add dark theming styles to the SuperSelect when used directly within the SideNav content?

(Or perhaps since there's been no call for this yet from consumers and we are also working towards adding true theming, it's not really necessary)

If the examples I added in the SideNav demo look good, I can add similar examples to the AppHeader Showcase.

Yes, they look good. The only thing I would do, is to minimize the demo code added (we're targeting mainly the buttons, so no need to have a full realistic demo; eg, the fake content in the flyout is not necessary)

I simplified the examples including adding a new code fragment with a simplified SuperSelect example.

I will update the AppHeader Showcase to include similar examples next.

AppHeader Showcase examples added: https://hds-showcase-git-kristin-hds-5572-fix-modal-bu-8bf325-hashicorp.vercel.app/components/app-header#with-nested-button-content

KristinLBradley · 2025-10-28T23:57:08Z

packages/components/src/styles/components/side-nav/header.scss

+      .ember-basic-dropdown-trigger * *,
+      .ember-basic-dropdown-content * *,
+      .hds-dialog-primitive__wrapper *
+    ) {


Chaining CSS :not selectors like this isn't ideal. I could experiment to try to come up with something better, or else we could see if we can find a better solution using the upcoming theming options.

…ontent examples to SideNav Showcase

…xamples

…owcase

…rget dimension requirements

KristinLBradley · 2025-10-30T23:00:41Z

I was seeing an accessibility failure on links using the "shw-frame__open-link" class name:

not ok 6 Chrome 140.0 - [1682 ms] - Acceptance | components/app-header: Components/app-header page passes automated a11y checks
    ---
        stack: >
            Error: The page should have no accessibility violations. Violations:
            [serious]: All touch targets must be 24px large, or leave sufficient space 
            Violated 1 time. Offending nodes are: 
            <a class="shw-frame__open-link" href="/layouts/app-frame/frameless/demo-full-app-frame-with-app-header-and-app-side-nav" target="_blank" rel="noopener noreferrer">
            https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI
            To rerun this specific failure, use the following query params: &testId=15a171ce&enableA11yAudit=true
                at DEFAULT_REPORTER (http://localhost:7357/assets/test-support.js:2199:13)
                at async Object.<anonymous> (http://localhost:7357/assets/tests.js:91:7)

I saw that this class name was used on links containing an icon to open full page demos in a new screen:

I updated the "shw-frame__open-link" CSS to expand the size of the target area from the current 16px x 16px. The a11y check was then passing locally so I pushed up to the PR. This then triggered a Percy diff on a different text-based link:

Before style update:

The previous width of 16px by 16px wasn't working on the text based link as it is styled to display inline rather than as a block.

Summary of issues:

So anyway, I'm not sure why that a11y test failure started happening suddenly in the first place and hadn't been happening before. But also two such different elements shouldn't be using the same class name which relies upon the width and height failing for the text-based inline link.

KristinLBradley · 2025-10-30T23:13:02Z

showcase/app/styles/showcase-components/frame.scss

+  > .hds-icon {
+    width: 16px;
+    height: 16px;
+  }


I made these changes to fix an a11y test failure complaining about the touch target size being too small. After making the change I saw that this class is applied to 2 different types of links:

icon-based link:

text-based link:

My updates to the styles caused the text-based link to display as a block when previously it had ignored the width and height styles.

It seems the class name should be removed from the text-based link and a different class and styles should be added if needed.

I replaced the class name on the link in the AdvancedTable Showcase and added some basic styles to style the link color the same. (May want to make an official "ShwLink" component or something sometime, but for now I just wanted to keep the link visually the same as it had been previously.)

HDS-5572 Fix inheritance of color styles for Buttons witin Modals tri…

4633e25

…ggered from within the SideNav or AppHeader

hashibot-hds added packages/components showcase labels Oct 28, 2025

vercel bot deployed to Preview – hds-website October 28, 2025 23:46 View deployment

Fix color inheritance for Buttons in Modal

dae122c

KristinLBradley commented Oct 28, 2025

View reviewed changes

showcase/app/components/mock/app/sidebar/side-nav.gts Outdated Show resolved Hide resolved

Update showcase/app/components/mock/app/sidebar/side-nav.gts

8518743

vercel bot deployed to Preview – hds-showcase October 28, 2025 23:51 View deployment

KristinLBradley commented Oct 28, 2025

View reviewed changes

vercel bot deployed to Preview – hds-website October 28, 2025 23:56 View deployment

KristinLBradley commented Oct 28, 2025

View reviewed changes

HDS-5572 Remove Modal example from AppFrame demo, add nested Button c…

70c026b

…ontent examples to SideNav Showcase

vercel bot deployed to Preview – hds-showcase October 29, 2025 18:38 View deployment

vercel bot deployed to Preview – hds-website October 29, 2025 18:40 View deployment

KristinLBradley requested a review from didoo October 29, 2025 18:53

KristinLBradley changed the title ~~Button - Fix color of Buttons used inside Modal triggered from SideNav or AppHeader (HDS-5572)~~ Button - Fix color of Buttons within Modal triggered from SideNav or AppHeader (HDS-5572) Oct 30, 2025

HDS-5572 Simplify content in SideNav nested Button content Showcase e…

fd1af58

…xamples

vercel bot deployed to Preview – hds-showcase October 30, 2025 18:54 View deployment

vercel bot deployed to Preview – hds-website October 30, 2025 18:57 View deployment

HDS-5572 Add nested Button and Modal content examples to AppHeader Sh…

f7927e9

…owcase

vercel bot deployed to Preview – hds-showcase October 30, 2025 20:38 View deployment

Fix color inheritance for Buttons in DialogPrimitive

72e143a

vercel bot deployed to Preview – hds-showcase October 30, 2025 20:41 View deployment

vercel bot deployed to Preview – hds-website October 30, 2025 20:45 View deployment

HDS-5572 Update styles for Show Frame open link to meet a11y touch ta…

74daf21

…rget dimension requirements

vercel bot deployed to Preview – hds-showcase October 30, 2025 22:28 View deployment

vercel bot deployed to Preview – hds-website October 30, 2025 22:31 View deployment

KristinLBradley commented Oct 30, 2025

View reviewed changes

HDS-5572 Add separate styling for link in AdvancedTable Showcase

425e11a

vercel bot deployed to Preview – hds-showcase October 31, 2025 17:03 View deployment

vercel bot deployed to Preview – hds-website October 31, 2025 17:05 View deployment

KristinLBradley marked this pull request as ready for review October 31, 2025 17:30

KristinLBradley requested a review from a team as a code owner October 31, 2025 17:30

Button - Fix color of Buttons within Modal triggered from SideNav or AppHeader (HDS-5572) #3335

Are you sure you want to change the base?

Button - Fix color of Buttons within Modal triggered from SideNav or AppHeader (HDS-5572) #3335

Uh oh!

Conversation

KristinLBradley commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

Showcase previews:

🛠️ Detailed description

📸 Screenshots

🔗 External links

👀 Component checklist

Uh oh!

vercel bot commented Oct 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KristinLBradley Oct 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KristinLBradley Oct 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KristinLBradley commented Oct 30, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

`Button` - Fix color of Buttons within Modal triggered from SideNav or AppHeader (HDS-5572) #3335

`Button` - Fix color of Buttons within Modal triggered from SideNav or AppHeader (HDS-5572) #3335

KristinLBradley commented Oct 28, 2025 •

edited

Loading

vercel bot commented Oct 28, 2025 •

edited

Loading

KristinLBradley Oct 29, 2025 •

edited

Loading

KristinLBradley Oct 30, 2025 •

edited

Loading