StepperNav - Stacking context style fix #3176
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
dchyun
commented
Sep 12, 2025
dchyun
commented
Sep 12, 2025
didoo
reviewed
Sep 12, 2025
| $progress-bar-animation-duration: 0.25s; | ||
|
|
||
| .hds-stepper-nav { | ||
| .hds-stepper-nav__progress-bar { |
Contributor
Author
|
@didoo Updated to add a new testing example to the stepper nav page and remove the app frame stepper example. |
Contributor
📦 RC Packages PublishedLatest commit: d98bd8c Published 2 packages@hashicorp/[email protected]@hashicorp/[email protected] |
| class="shw-component-stepper-nav-mock-z-index" | ||
| /> | ||
| </SG.Item> | ||
| </Shw::Grid> |
Contributor
|
Percy diff looks as I would expect so if it's also as you expect I would approve it to clear the error. @dchyun |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 Summary
If merged, this PR would fix an issue with the
StepperNavwhere components used inside its steps are having their z-index not properly respected.🛠️ Detailed description
Originally an issue was raised in the context of the usage of a modal inside the StepperNav. When the modal was open its overlay did not cover the AppSideNav.
The issue is that the
hds-stepper-navelement usesisolation: isolateto properly set styles for the progress bar of the steps. However, step content, such as a modal, is a child of this element, and thus has its stacking context reset when used inside the StepperNav. This causes anyz-indexstyles to not work as expected.The
isolation: isolateis needed for the progress bar styles because the progress bar must havez-index: -1in order to appear behind the step numbers, but whenisolation: isolateis not added the progress bar can appear hidden when a background color is applied behind it because of the -1 z-index.The solution here was to restructure the StepperNav DOM to have a new element
hds-stepper-nav__progress-barthat included all the styling needed for the progress bar. This means theisolation: isolatecan be removed from thehds-stepper-navand no longer gets applied to its step content.📸 Screenshots
Before
After
🔗 External links
Jira ticket: HDS-5486
👀 Component checklist
💬 Please consider using conventional comments when reviewing this PR.
📋 PCI review checklist
Examples of changes to controls include access controls, encryption, logging, etc.
Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.