fix(menu): convert menu icon stories to class-based components for proper theme rendering #5402
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
🦋 Changeset detectedLatest commit: d51fb1a The changes in this PR will be included in the next version bump. This PR includes changesets to release 84 packages
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 |
Branch previewReview the following VRT differencesWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
If the changes are expected, update the |
Tachometer resultsChromemenu permalinktest-basic
Firefoxmenu permalinktest-basic
|
Rajdeepc
changed the title
Rajdeepc
changed the title
|
Note: This change has been made for the design to sign off on our Menu fast follows, but to make it more robust we would need to update our context Switcher(System Resolver) to also cascade the context of system down to slotted content also. Lit's context API doesn't allow this out of the box but we can update SystemResolverController to extend this capability. |
Rajdeepc
changed the title
Rajdeepc
changed the title
Rajdeepc
changed the title
Rajdeepc
changed the title
added 2 commits
May 9, 2025 18:18
…adobe/spectrum-web-components into rajdeep/menu-system-aware-icons
nikkimk
approved these changes
May 9, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
This PR addresses an issue where icons in menu components weren't rendering correctly when used in functional stories. The solution converts functional story components to class-based components that extend LitElement.
Why this works with a class based approach
The LitElement class creates a proper rendering context. In contrast, functional stories don't create their own component boundaries and can struggle with proper slot assignment and theme inheritance when dealing with complex nesting of web components.
Changes
menuItemWithDescriptionfrom a functional component to a class-based componentheadersAndIconsfrom a functional component to a class-based componentWithIconscomponent structure to properly render iconsIssue
Previously, icons in menu components weren't properly responding to theme changes and occasionally failed to render when used in slotted contexts in functional stories. This was due to lifecycle timing issues and lack of proper shadow DOM encapsulation in functional components.
Root cause TODO
Icon components require proper component lifecycle hooks and shadow DOM contexts to initialize correctly. Functional stories lack the component lifecycle methods (connectedCallback, updated, etc.) needed for proper icon registration and theme context propagation.
Related issue(s)
How has this been tested?
Menu with Description
Menu with Icons
Selects with Icons
Did it pass in Desktop?
Did it pass in Mobile?
Did it pass in iPad?
Screenshots (if appropriate)
Types of changes
Checklist
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against
main.