[stepper] Include StepConnector inside Step element#48492
[stepper] Include StepConnector inside Step element#48492silviuaavram merged 2 commits intomui:masterfrom
Conversation
Deploy previewhttps://deploy-preview-48492--material-ui.netlify.app/ Bundle size
Check out the code infra dashboard for more information about this PR. |
silviuaavram
force-pushed
the
fix/stepper-markup
branch
from
a0678f6 to
c70deb4
Compare
There was a problem hiding this comment.
Pull request overview
This PR updates the Material UI Stepper/Step rendering and layout so that the StepConnector is rendered inside each Step (instead of being a sibling between steps), and adjusts horizontal non-alternativeLabel spacing accordingly.
Changes:
- Render the connector inside
StepRootfor steps after the first (index !== 0). - Add horizontal, non-
alternativeLabellayout styling to support the new connector placement (grid layout inStep,gapinStepper).
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/mui-material/src/Stepper/Stepper.js | Adds gap styling for horizontal non-alternativeLabel steppers to preserve spacing with the new connector DOM placement. |
| packages/mui-material/src/Step/Step.js | Moves connector rendering inside StepRoot and introduces hasConnector-driven styling (grid layout) for horizontal non-alternativeLabel steps. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
silviuaavram
changed the title
|
This seems to work and I agree with the approach. Thank you for spending the time @silviuaavram ❤️. While you're at it, could you add the missing aria-label on the progress bar example like I did in my PR? If not no worries. |
|
Did that here #48494 Any reason why not adding it to the dots one as well? @ArmandRedgate |
|
@silviuaavram only that that was the only one that triggered my scanner. Not sure why. |
Includes the StepConnector inside the Step element at all times. This is done to ensure we only have
<li>elements inside the<ol>stepper element. The<div>elements from the connectors now are part of the<li>.Updated the styles to keep the non-alternativeLabel variant the same visually.
Follow up for #48397