feat(navigation): update to new SHINE visuals #2043
Conversation
🦋 Changeset detectedLatest commit: 29efe57 The changes in this PR will be included in the next version bump. Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for stacks-svelte ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Looking really good! A couple of things that jump out at me seeing this nav in the Stacks docs (small nitpick stuff) 1.Documentation improvements optional
|
I added a tonal button in one of the horizontal examples but it won't look great until the button PR is merged in beta.
I have added the badge in one of the examples but similarly it won't look good until the badge PR is merged. At the moment the height of the small badge is enough to mess up the 42px overall height of the navigation item containing it. This should not be a problem though with the new badge design that has considerably less height. 
I left this out for now since it was working this way also in the previous version of the docs. We can always add it at a later stage |
|
CGuindon
left a comment
CGuindon
left a comment
There was a problem hiding this comment.
Forgot to add my comment through the request change — see above
For the caret, I'd suggest using a pseudo-element much like I did on Menu (see 8c4c113). The gist is that the SVG(s) will need to be hard coded into the Less with a Less variable to define the fill on a per-mode basis. I'd expect something like this: .s-navigation {
…
// Less variables for check svg fill color
@me-bg-image-fill: .set-black()[default];
@me-bg-image-fill-dark: .set-white()[default];
@me-bg-image-fill-esc: escape("@{me-bg-image-fill}"); // color escaped for URL usage
@me-bg-image-fill-dark-esc: escape("@{me-bg-image-fill-dark}"); // color escaped for URL usage
--_na-after-bg-image: url("data:image/svg+xml… fill='@{me-bg-image-fill-esc}'…");
// CONTEXTUAL STYLES
.dark-mode({
--_na-after-bg-image: url("data:image/svg+xml… fill='@{me-bg-image-fill-dark-esc}'…");
});
…
& &--item {
&__dropdown {
&:after {
background-image: var(--_na-after-bg-image);
content: "";
display: inline-block;
height: var(--su16);
margin-left: auto;
width: var(--su16);
}
…
}
}
}I know it seems a little weird, but it's the best approach I've found for applying our colors to background SVGs while still supporting our color modes. It's much more reasonable when the color is monochromatic, like it is here. Let me know if this makes sense and if you'd like any more help. Happy to do so 🙂 |
|
@dancormier for the caret I think I found a solution that could be slightly more elegant (unless I am missing something). |
dancormier
left a comment
dancormier
left a comment
There was a problem hiding this comment.
Great work here @giamir!
|
The only thing I noticed was that the background on this bottom part of the documentation example should be white (not grey?) but I'm going to approve anyway since the actual component looks great! 
|
SPARK-105
Figma
Consult the new stacks classic component in the preview docs.
And the new stacks svelte component in storybook
Unresolved minor points (for another ticket potentially):
tablistandtab, we could iterate on it once there is a concrete use case for. It is also a purely accessibility matter.Complex example using Svelte in Storybook (inspired by the new SHINE sidebar)
I spent some time putting this example together because it saved us few ping pongs with the engineers trying to implement it and realize things were missing. @CGuindon could you confirm that this is the desired animation behavior we want in the new SHINE sidebar?
Screen.Recording.2025-11-20.at.13.33.59.mov