Enterprise Nav: SideNav & AppHeader—Improve scoping for dark theme styling

[KristinLBradley]

📌 Summary

If merged, this PR adds additional scoping to dark theme styles for Button & Dropdown components within the SideNav & AppHeader so when nested within a Dropdown they will not inherit the dark theme.

🛠️ Detailed description

Included changes:

• Scoped styles to apply dark theme styling to Buttons and Dropdowns within SideNav & AppHeader only when they are not nested within another Dropdown
• Added Showcase examples of Button & Dropdown nested within another Dropdown within SideNav & AppHeader

📸 Screenshots

SIDE-NAV NESTED ELEMENTS

APP-HEADER NESTED ELMENTS

🔗 External links

• Jira ticket: HDS-3793
• Bug example in Vault: UI: bump HDS to 4.7.0 vault#28151

---

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Aug 23, 2024 8:14pm
hds-website	✅ Ready (Inspect)	Visit Preview	Aug 23, 2024 8:14pm

[alex-ju]

I think this is a pragmatic solution. Would you be able to test this in Vault to make sure we're addressing their issue? (just read your comments in Slack).

And don't forget to add a changelog entry for this fix

[shleewhite]

Looks good to me!

[KristinLBradley]

I think this is a pragmatic solution. Would you be able to test this in Vault to make sure we're addressing their issue? (just read your comments in Slack).

And don't forget to add a changelog entry for this fix

Unfortunately, this will not resolve their particular issue as they used custom components with custom styling for their dropdown and buttons within the SideNav. However, if they update their code to use HDS components in the future it will fix the issue. So while this update will not fix Vault's immediate issue on its own, it will prevent similar issues for other product teams (as long as they use HDS components) and it will help the Vault team if they update their code in the future.