Extend <Stepper> with an indicator-only "rail" layout variant.#13103
Open
JakePT wants to merge 10 commits into
Open
Extend <Stepper> with an indicator-only "rail" layout variant.#13103JakePT wants to merge 10 commits into
JakePT wants to merge 10 commits into
Conversation
🎭 Playwright reports for 32d9ea4: 📚 Storybook for 32d9ea4: 📦 Build files for 32d9ea4:
|
JakePT
marked this pull request as ready for review
July 13, 2026 14:23
JakePT
commented
Jul 13, 2026
| } | ||
|
|
||
| .googlesitekit-stepper--rail { | ||
| --googlesitekit-stepper-size: 18px; |
Collaborator
Author
There was a problem hiding this comment.
In Figma these are 16.5px, but the active step renders poorly at this size even on 2x displays because the full layout would require padding with quarter-pixels.
18px worked the best across resolutions, matched the layout size in the design, doesn't require special handling for 2x displays, and kept the inner and inactive circle sizes consistent as per the design.
Collaborator
There was a problem hiding this comment.
Thanks @JakePT. I think this is correct anyway, as the full size of the vector appears to be 18px in Figma designs too.
Collaborator
Author
There was a problem hiding this comment.
@nfmohit If you zoom in you'll see some white space though. The green circle itself is 16.5px.
Collaborator
There was a problem hiding this comment.
You're right. I think we can disregard that. LGTM 👍
Collaborator
Author
|
Failing tests appear to be unrelated. |
|
Size Change: 0 B Total Size: 3.71 MB ℹ️ View Unchanged
|
…oogle/site-kit-wp into enhancement/12949-stepper-rail-variant.
Collaborator
Author
|
@ankitrox I've corrected the breakpoint and updated the VRT references. Passing back to you before checks finish because the changes are small, but pass back to me if something unexpectedly fails. Thanks! |
nfmohit
requested changes
Jul 22, 2026
| } | ||
|
|
||
| .googlesitekit-stepper--rail { | ||
| --googlesitekit-stepper-size: 18px; |
Collaborator
There was a problem hiding this comment.
Thanks @JakePT. I think this is correct anyway, as the full size of the vector appears to be 18px in Figma designs too.
nfmohit
requested changes
Jul 22, 2026
| align-items: stretch; | ||
| column-gap: 14px; | ||
| display: grid; | ||
| gap: 12px 14px; |
Collaborator
There was a problem hiding this comment.
Sorry, I'm probably missing something here, but could you clarify why the 14px column gap is needed here?
Collaborator
Author
There was a problem hiding this comment.
@nfmohit It's supposed to be the gap between the dot and the text, I think it's left there from an early experiment with subgrid, but it meant that the column gap was incorrect so I've fixed that. I also fixed a small issue I caught where the line was underneath the active dot.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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
Addresses issue:
<Stepper>with an indicator-only "rail" layout variant #12949Relevant technical choices
PR Author Checklist
Do not alter or remove anything below. The following sections will be managed by moderators only.
Code Reviewer Checklist
Merge Reviewer Checklist