-
Notifications
You must be signed in to change notification settings - Fork 207
feat(action-menu): S2 migration [CSS-1160] #4085
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(action-menu): S2 migration [CSS-1160] #4085
Conversation
📚 Branch previewPR #4085 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4085/index.html. |
File metricsSummaryTotal size: 1.43 MB* Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.
File change detailsactionbutton
actiongroup
actionmenu
menu
popover
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
2729f84
to
779e411
Compare
🦋 Changeset detectedLatest commit: 1f94719 The changes in this PR will be included in the next version bump. This PR includes changesets to release 6 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 |
635f709
to
242929c
Compare
4baa099
to
eb8cde2
Compare
313ee43
to
3babcfa
Compare
4d618da
to
f3fa4d4
Compare
f2ef53c
to
409436c
Compare
dbd613f
to
00038a9
Compare
3f6dad6
to
94e9252
Compare
Dismissing stale review after latest changes
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I looked at this quickly and noted that the popover issues from before are resolved! 🎉 Really, really nice work!
I did check out Coachmark after I checked out Action menu and Popover, and I'm seeing a similar issue there, but only after switching on "has action menu":
It's also visible from the docs page.
94e9252
to
d8fc6e3
Compare
b6ed5e8
to
14ad6aa
Compare
faeccb5
to
d1c459a
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This looks awesome! Just have a few minor questions. ✨
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm seeing this as well — do we need to increase the height for that Coachmark example? ✨
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I wanted to leave the comments I had so far! I need to go through the menu and popover changes a little more thoroughly tomorrow!
}, | ||
menuArgs: { | ||
customStyles: { | ||
"--mod-menu-inline-size": "max-content", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You may have already left a comment somewhere about this, but instead of using the mod here, is it possible to use a --spectrum
custom property? If we're going to remove mods, would it make sense to not introduce another place where one is being used?
There's a couple more menu mods in the PlaceholderIcons
args as well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think removing the mods in some of these more complex components are going to be a bigger project and I didn't want to expand the scope of action menu by addressing that quite yet.
5e7ce3d
to
367d76f
Compare
367d76f
to
1f94719
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was too slow reviewing, but didn't want my comments to be lost!
${Template({ | ||
...args, | ||
hasPopup: "true", | ||
hasLongPress: true, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do we need an isOpen
arg in any of the tests? Not sure if it's valuable, especially if other args are already covering the style changes.
}, | ||
items: { table: { disable: true } }, | ||
menuArgs: { table: { disable: true } }, | ||
triggerArgs: { table: { disable: true } }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I go back and forth on the removal of the iconName
control from the table. We have a story that demonstrates that users have the ability to change the icon, but then removed the control so users can't experiment, so I'm split.
Anyways, I don't think it's blocking this PR from merging, but I did want to share some thoughts.
triggerArgs: { | ||
iconName: "More", | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think this is necessary since we use this exact More icon in the default args.
@@ -1,4 +1,4 @@ | |||
import { Template as ActionMenu } from "@spectrum-css/actionmenu/stories/template.js"; | |||
import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js"; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Does changing this from action menu to just an action button imply anything for SWC? I only ask because the Figma specs for coachmark do specify coachmark being composed with a menu. I don't think it does, but this markup change will be noted in the component analysis, so we'll just have to be sure that we review those docs and clarify that the SWC component as is should still use an action menu.

I also could be thinking too hard about it all.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I just removed the full implementation here for demonstration purposes but it doesn't change the end-result for SWC.
Description
This PR:
@spectrum-css/actionmenu
component that composesActionButton
,Popover
, andMenu
to present action lists from a trigger.@spectrum-css/actionbutton
and@spectrum-css/actiongroup
to treat selection via.is-selected
as well as:where([aria-pressed="true"], [aria-expanded="true"])
to cover more accessibility use-cases while keeping selector specificity low.@spectrum-css/menu
to align with Spectrum 2 specifications and accessibility improvements.Design references:
Includes a changeset with the following bumps:
How and where has this been tested?
Action menu
stories (default, long-press, placements).Menu
stories for focus indicators, CJK line-height, external link/drill-in icons, thumbnails, and forced-colors behavior.Action button
andAction group
selected visuals using.is-selected
,[aria-pressed="true"]
, and[aria-expanded="true"]
.Validation steps
isOpen
and confirm popover/menu spacing and placement reflect updates..is-selected
, setaria-pressed="true"
, andaria-expanded="true"
; confirm identical visuals due to:where(...)
..is-selected
and ARIA attributes.Screenshots
To-do list
Notes for reviewers
:where([aria-pressed],[aria-expanded])
to avoid specificity issues and broaden accessibility support.References
https://github.com/changesets/changesets
https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-Token-specs?node-id=19758-3424