feat(menu): migrate to spectrum-tokens + add new features #1942
Conversation
This file contains 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
BREAKING CHANGE: migrates the Menu to `@adobe/spectrum-tokens`
pfulton
added
released-beta
|
🚀 Deployed on https://pr-1942--spectrum-css.netlify.app |
Make .spectrum-Menu--sizeM the default; move its custom properties to the parent class, and move sizing styles underneath the parent class custom property definitions.
Add color declaration wherever there is 'fill', per SWC request. Because "using fill to set the colour of icons in the menu css isn't compatible with the way we process our icons, so the icons aren't colouring properly or changing depending on the state".
Selected menu items with checkmark were shifting 2 pixels as compared to the non-selected menu items. Looking over the updated design, the text-to-control-* tokens are used for the space between the checkmark and the text.
When a section heading was above menu items, it previously looked strange because of the lack of space. The sectionHeading also needs top and bottom padding.
Replace unnecessary CJK style rules with a change to the relevant custom property values.
- Simplify high contrast mode styles. Less custom properties are needed. - Fix for hover causing things to disappear on collapsible items. Fix may need to be replaced later with one that addresses the regular styles for children of menu-item being applied to the nested menu items in the collapsible variant. - Remove skin.css as part of tokens migration. Its rules should already be handled now by the index.css.
Updates the Menu stories to account for additional variants on the docs and changes to markup. Adds several new stories.
- Use state class naming instead of modifier class naming for is-selected and is-selectable. - Show focus indicator line only with :focus-visible for keyboard focus - Simplify RTL/LTR change of focus indicator with scalar custom prop
Add story for drill-in variant. Also makes isSelectable false by default and change some stories to set it to false to better align with docs examples.
In the collapsible variant, style rules applying to children of a menu item were also applying to the nested menu child items. This was causing some issues with high contrast hovers and could also be noticed by changing a mod like --mod-menu-item-label-content-color-hover and then hovering over the parent menu item in the collapsible variant (this would also change the color of all the child menu items).
The displayed submenu for the drill-in example was not how submenus should be displayed per the guidelines. They need to be positioned, and are shown as being within another popover. Showing this adjacent menu like this could cause some confusion as to its usage; the adjacent menu was not positioned properly and does not have any separate styles within the CSS for doing so.
For the collapsible variant: The child menu items under a parent menu item that contains a workflow icon should not show extra indentation, otherwise it looks like a different tier when next to a menu item without an icon. Confirmed with design team. All sub-items are now indented to after the chevron and the start of the parent item text/heading.
Add Collapsible story to menu in Storybook, based on example from docs example.
Add control for t-shirt sizing to menu stories. Adds the size class to various elements.
Fixes for several issues with the menu that is displayed in the docs site search results, and theme/scale/direction popovers. - Makes the adjacentText classes the default margin, allowing them to be removed (which fixes checkbox spacing in theme/scale popovers). - Fixes extra top and bottom margin appearing in menu for docs theme/scale popovers. This was showing user agent values for top and bottom margin. In production, they were previously set to a popover padding token, which added more space than on the design (popover component already has padding). - Fixes search results menu showing incorrectly because of difference in the JS created markup related to section headers.
5 tasks
|
New beta published: |
Zero out the margin-inline-end for the chevron used at the end of the drill-in menu items.
|
New beta published: |
Update divider margin-block to agree with newly added token for the divider height. Sets minimum tokens package version to 11.0.2 where this --spectrum-menu-item-section-divider-height token was added.
Replace medium divider with small divider in examples and storybook markup. Updates migration guide to note the change. Removes unnecessary large divider possibility from CSS, as that should never be used here according to divider guidelines.
Fix migration guide section no appearing in docs because it was named 'section' and not 'sections' in the YML. Adds new standard section about -mod custom properties.
|
New beta published: |
pfulton
added
run_vrt
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
How and where has this been tested?
Screenshots
To-do list