feat(actionbutton): s2 migration by mdt2 · Pull Request #2669 · adobe/spectrum-css

mdt2 · 2024-04-17T16:17:10Z

Description

Migrates Action Button to Spectrum 2 design specifications. Includes:

Medium is now the default size and .spectrum-Switch--sizeM has been removed.
Includes the Spectrum 2 down state transform.
The component border was not removed to continue support for Windows High Contrast Mode (WHCM), but the color was adjusted to transparent and the mod custom properties were removed so as not to interfere with WHCM accessibility. High contrast styles have been refactored and improved.
Background and content colors were updated.
Mod custom properties have been adjusted. See changeset.
Removes "Static black - emphasized" and "Static white - emphasized" from tests, as these combinations are not supported (additional docs and storybook control conditionals are added to clarify).
Some selectors to target the icon + text button and the icon-only button have been simplified using :has, since it is now used and supported in our library. This removes some overly complex calc() functions used for inline spacing, uses the design tokens more directly, and removes the previously documented need for the component's child elements to use a specific source order.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Compare ActionButton Storybook to the design specs to ensure correct tokens are used (S2 spec is above, but I also found this Figma file to be useful while making these changes)
Check that all variants and states are being shown correctly in the testing preview -- Note, you may want to reference this Figma file from design
StaticWhite and StaticBlack don't have an emphasized selected state and the emphasized control isn't shown on these stories
WHCM is looking good
Down state is working correctly
Quiet + disabled + selected looks the same as default disabled + selected (with background color); per design guidance

Regression testing

Expected diffs of note: "Static black - emphasized" and "Static white - emphasized" are removed from tests.

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

VRTs have been run and looked at.
Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

github-actions · 2024-04-17T16:19:39Z

🚀 Deployed on https://pr-2669--spectrum-css.netlify.app

github-actions · 2024-04-17T16:20:02Z

File metrics

Summary

Total size: 1.37 MB^*

Package	Size	Minified	Gzipped
actionbutton	23.98 KB	22.92 KB	3.07 KB

actionbutton

Filename	Head	Minified	Gzipped	Compared to base
index.css	23.98 KB	22.92 KB	3.07 KB	🔴 ⬆ 0.75 KB
metadata.json	10.30 KB	-	-	🟢 ⬇ 0.21 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

rise-erpelding

Hi, this is looking really good!

S2 Token spec appears to match, mostly
- The only thing I noticed here was that I didn't see a cjk line height being applied, and I think there is one in the spec
- I also didn't look very closely at spacing since we'd previously talked about that not matching the spec, but I can if you'd like me to!
Static white and static black don't have emphasized styling/no control is visible in Storybook ✅
WHCM is looking good, both light and dark ✅
- I did have a question though, there is no style differentiation for selected hover state as there is for non-forced-colors, it's the same purple/cyan color for selected as it is for selected & hover. It's already like this in prod, so nothing that was introduced here. Is that something that would be worthwhile to fix here, to give it a different border color or something like that on hover?
All variants and states are being shown in the testing preview ✅

mdt2 · 2024-04-18T19:07:45Z

Thanks Rise! To document some context here, when you say "didn't look very closely at spacing since we'd previously talked about that not matching the spec" we're talking about the top to edge spacing tokens, which don't seem to be needed since we're using display: flex. I also didn't make updates to the icon only spacing since visually it looks like the spec even though we're not using the spec tokens to avoid causing more work for SWC.

jawinn

Excellent work! ⭐ I did not notice any issues after going through the validation steps and comparing against the Figma.

changeset-bot · 2024-04-29T16:15:10Z

🦋 Changeset detected

Latest commit: 0254045

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/actionbutton	Major

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

Fixes the issue where the static black and white, quiet, selected, and disabled state in the testing grid was showing the static quiet background color instead of the static disabled background color.

The noted readability backplate issue was present on more than just the selected state; it was just difficult to see without contrasting colors. So this has been moved to the default, along with setting default system color values.

Refactors high contrast styles and custom properties to remove unnecessary variables, and adds some documentation.

Keep the previous S1 behavior of setting the line-height to the full component height. This prevents Thai diacritics from being cut off (see existing Storybook test). Note: this line-height is taller than both line-height-100 and cjk-line-height-100 listed on the design spec. Using those had resulted in the diacritics cutting off again.

Adjust some selectors to use :has in order to remove some overly complex calc functions, and to use the inline spacing tokens more like they are defined on the token specs. Now that :has is supported and used in our library, this simplifies this usage and removes some requirements for the source order of action button's child elements.

Usage notes about using a mod for static colors no longer applies; the --mod-actionbutton-content-color-default-selected mod and similar selected state mods work correctly to change the content color for static. Adds some basic intro docs for static colors, pulled from the guidelines.

The .spectrum-ActionButton--sizeM class is no longer used but was still appearing in the examples markup.

In Windows High Contrast, the border color briefly was flashing orange (ButtonBorder) after hover, before it switched back to the correct color as defined by the styles. This fixes that issue. This removes CSS transitions in high contrast to avoid some of these rendering issues and previously noticed sluggishness in the system color transitions.

mdt2 force-pushed the mdt2/css-739-s2-actionbutton branch from de5e49c to 6220dae Compare April 17, 2024 16:35

mdt2 commented Apr 17, 2024

View reviewed changes

Comment thread components/actionbutton/stories/actionbutton.stories.js Outdated

mdt2 requested review from jawinn and rise-erpelding April 17, 2024 16:52

mdt2 added the ready-for-review label Apr 17, 2024

rise-erpelding reviewed Apr 18, 2024

View reviewed changes

mdt2 requested review from castastrophe and pfulton April 18, 2024 19:08

jawinn previously approved these changes Apr 18, 2024

View reviewed changes

Comment thread components/actionbutton/metadata/actionbutton.yml Outdated

pfulton force-pushed the spectrum-two branch 2 times, most recently from f3dd9ff to 9931a8e Compare April 19, 2024 18:22

castastrophe force-pushed the spectrum-two branch 5 times, most recently from 6dbc850 to ae7aedd Compare April 26, 2024 20:37

mdt2 force-pushed the mdt2/css-739-s2-actionbutton branch from 6220dae to e5e36b9 Compare April 29, 2024 16:15

pfulton force-pushed the spectrum-two branch 2 times, most recently from e0e0fd2 to 698e904 Compare May 3, 2024 18:39

pfulton force-pushed the spectrum-two branch from f3cbc18 to 051071f Compare May 10, 2024 14:34

mdt2 added blocked See description and comments for what is blocking this issue and removed ready-for-review labels May 14, 2024

mdt2 mentioned this pull request May 15, 2024

refactor(menu): improve chromatic coverage #2757

Merged

12 tasks

castastrophe added the S2 Spectrum 2 label Jun 27, 2024

castastrophe force-pushed the spectrum-two branch 2 times, most recently from 0faaab2 to 24419a9 Compare December 4, 2024 14:36

jawinn added 14 commits March 21, 2025 10:05

docs(actionbutton): add docs link to popover

1ad69fa

fix(actionbutton): static + quiet + disabled + selected background

30fff3f

Fixes the issue where the static black and white, quiet, selected, and disabled state in the testing grid was showing the static quiet background color instead of the static disabled background color.

refactor(actionbutton): simplify high contrast styles

aa5dc20

Refactors high contrast styles and custom properties to remove unnecessary variables, and adds some documentation.

chore(actionbutton): update changeset description and rebuild metadata

4eb1989

docs(actionbutton): add docs story for text overflow behavior

43f384d

docs(actionbutton): clarify text overflow docs description

81451a5

docs(actionbutton): remove size medium class from appearing in markup

48fefe9

The .spectrum-ActionButton--sizeM class is no longer used but was still appearing in the examples markup.

chore(actionbutton): update copyright year

bcd021c

chore(actionbutton): rebuild metadata

398aa22

castastrophe force-pushed the mdt2/css-739-s2-actionbutton branch from 4bda4e0 to 398aa22 Compare March 21, 2025 14:06

castastrophe added 2 commits March 21, 2025 10:06

chore: update changeset

6283764

chore(actionbutton): storybook template update

0254045

castastrophe added the run_vrt For use on PRs looking to kick off VRT label Mar 21, 2025

castastrophe merged commit b2c6357 into spectrum-two Mar 21, 2025

castastrophe deleted the mdt2/css-739-s2-actionbutton branch March 21, 2025 14:19

github-actions Bot mentioned this pull request Mar 21, 2025

chore: release (next) #3638

Merged

castastrophe mentioned this pull request Apr 15, 2025

feat(tokens,card): update to @adobe/spectrum-tokens@13.3.0 #3669

Merged

12 tasks

This was referenced May 16, 2025

chore(swatch,menu,swatchgroup): fix reverted metadata assets #3752

Merged

chore: merge latest updates from main #3777

Merged

castastrophe mentioned this pull request Jul 25, 2025

ci: chromatic runs for S2 [CSS-1233] #4070

Merged

3 tasks

castastrophe mentioned this pull request Aug 6, 2025

fix: minor linting updates #4113

Merged

11 tasks

This was referenced Aug 27, 2025

chore(popover): wrapper placement in story #4173

Closed

feat(storybook): chromatic a11y testing #4180

Closed

chore: updating lint-staged file inheritance order #4193

Closed

castastrophe mentioned this pull request Oct 22, 2025

feat(badge): remove modifiers from the API [SWC-1264] #4283

Merged

14 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(actionbutton): s2 migration#2669

feat(actionbutton): s2 migration#2669
castastrophe merged 27 commits into
spectrum-twofrom
mdt2/css-739-s2-actionbutton

mdt2 commented Apr 17, 2024 •

edited by jawinn

Loading

Uh oh!

github-actions Bot commented Apr 17, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 17, 2024 •

edited

Loading

Uh oh!

Uh oh!

rise-erpelding left a comment

Uh oh!

mdt2 commented Apr 18, 2024

Uh oh!

jawinn left a comment

Uh oh!

Uh oh!

changeset-bot Bot commented Apr 29, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Conversation

mdt2 commented Apr 17, 2024 • edited by jawinn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Validation steps

Regression testing

To-do list

Uh oh!

github-actions Bot commented Apr 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Apr 17, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

actionbutton

Uh oh!

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

mdt2 commented Apr 18, 2024

Uh oh!

jawinn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

changeset-bot Bot commented Apr 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

mdt2 commented Apr 17, 2024 •

edited by jawinn

Loading

github-actions Bot commented Apr 17, 2024 •

edited

Loading

github-actions Bot commented Apr 17, 2024 •

edited

Loading

changeset-bot Bot commented Apr 29, 2024 •

edited

Loading