Skip to content

chore(menu): update to SHINE styles - #2046

Merged
dancormier merged 28 commits into
betafrom
SPARK-71/menu
Nov 20, 2025
Merged

chore(menu): update to SHINE styles#2046
dancormier merged 28 commits into
betafrom
SPARK-71/menu

Conversation

@dancormier

@dancormier dancormier commented Nov 12, 2025

Copy link
Copy Markdown
Contributor

SPARK-71


This PR updates the Menu component to match updated SHINE styles (Figma) and adds a Svelte version of the component.

For the Svelte component, I made the choice to go with child components much like we do with PostSummary. I'm not 100% on this approach and would appreciate any thoughts/opinions here.

How to test

  • View the component and verify it renders as expected
    • Please read the docs and provide feedback
  • Go to the Svelte component and verify it renders as expected
  • Run tests and verify they pass (excluding visual tests which will be updated before merge)

TODO before merge

  • Verify docs are reasonably updated
  • Regenerate visual regression test images

@changeset-bot

changeset-bot Bot commented Nov 12, 2025

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 27e1da8

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

@netlify

netlify Bot commented Nov 12, 2025

Copy link
Copy Markdown

Deploy Preview for stacks-svelte ready!

Name Link
🔨 Latest commit 27e1da8
🔍 Latest deploy log https://app.netlify.com/projects/stacks-svelte/deploys/691f81700a1f9d0008bc2f37
😎 Deploy Preview https://deploy-preview-2046--stacks-svelte.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify

netlify Bot commented Nov 12, 2025

Copy link
Copy Markdown

Deploy Preview for stacks ready!

Name Link
🔨 Latest commit 27e1da8
🔍 Latest deploy log https://app.netlify.com/projects/stacks/deploys/691f817009f83200082e3dcb
😎 Deploy Preview https://deploy-preview-2046--stacks.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@dancormier
dancormier marked this pull request as ready for review November 12, 2025 22:47

@giamir giamir left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @dancormier. I have left few comments and suggestions.

The examples for this component show radio group versions as well as a selected state. Both of these are subject to change after this PR is merged and once work is done on the radio component (SPARK-77).

Do we have a follow up ticket for updating the Menu component once Radio and Checkbox have been implemented?
Crazy thought, should we leave the MenuItemControl Svelte subcomponent out of scope for this PR since it will reuse Radio and Checkbox (do the work as part of the follow up ticket)?

Comment thread packages/stacks-docs/product/components/menus.html
Comment thread packages/stacks-classic/lib/components/menu/menu.less Outdated
Comment thread packages/stacks-svelte/src/components/Menu/Menu.stories.svelte Outdated
Comment thread packages/stacks-svelte/src/components/Menu/Menu.stories.svelte Outdated
Comment thread packages/stacks-svelte/src/components/Menu/MenuItem.svelte
Comment thread packages/stacks-docs/_data/menu.json
Comment thread packages/stacks-svelte/src/components/Menu/Menu.svelte
Comment thread packages/stacks-svelte/src/components/Menu/MenuItemControl.svelte Outdated
Comment thread packages/stacks-svelte/src/components/Menu/MenuItemControl.svelte Outdated
@dancormier
dancormier requested a review from giamir November 17, 2025 18:14

@giamir giamir left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work @dancormier. ❤️
I only had a small clarifying comment. Apart from that I think we should be good to merge. Thank you.

--_me-action-bg: unset;
--_me-action-fc: var(--black-500);
--_me-item-p: var(--su8);
// Less variables for check svg fill color

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@dancormier
dancormier merged commit 5e49f0b into beta Nov 20, 2025
18 checks passed
@dancormier
dancormier deleted the SPARK-71/menu branch November 20, 2025 21:08
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants