feat(button): migrate to Spectrum 2 #2600

jawinn · 2024-03-20T22:22:13Z

Description

Migrates the Button component to Spectrum 2. Button now uses the tokens defined on the Spectrum 2 design spec. This includes a lot of color changes for the different variants. It removes the express.css and spectrum.css theme files, and combines their contents into the main index.css.

Outline style removed for accent and negative variants

In Spectrum 2, "Outline buttons are no longer available in accent and negative options — use the filled variant instead".

Medium as default, and removing fill class

Medium size is now the default. The class .spectrum-Button--sizeM is now unnecessary for this size, and has been removed. This follows the same type of change being progressively made to all components.

All references to .spectrum-Button--fill have been removed, as it is now unnecessary. It was only used in the CSS for one high contrast mode selector, which has been changed. The fill style has already been the default without the need for this class.

Cleanup work

This also includes a bit of cleanup and refactoring work, that is detailed in the commit messages and noted where necessary in the migration guide. This includes:

Re-organizes some CSS and selectors, and removes some repeated and unnecessary declarations. Of note, there were some older skin.css styles separated from the main styles, and several spread out styles related to the focus indicator---some of which were overriding each other.
A good chunk of the custom properties that came from the spectrum.css theme file are consolidated and slimmed down.
Removes some leftover classes from the theme files that do not apply to button: .is-selected, .spectrum-Button--emphasized, and .spectrum-Button--quiet. Quiet was removed previously, and it looks like selected and emphasized are not a feature of button and do not have any implementation in SWC, reference within our docs, or reference within the design.

Adds a new custom docs page to replace YML docs

This can be viewed under "Docs" in Storybook.

Some other changes of note:

Renames --mod-bold-font-weight to --mod-button-font-weight
Updates the Migration guide to include versions and dates
A high contrast fix that sets the foreground to HighlightText when the background was set to Highlight, to ensure contrast by using a matching background-foreground pair.

CSS-616

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

Design team validation approval [@jawinn]
Tokens used match the updated tokens on the Spectrum 2 token specs Figma
Button renders correctly in the docs and in Storybook stories. Include testing with all size options, dark & light themes, and platform scale.
Proofread Button's migration guide
The Icon only button is the same height as the other buttons
Stories for the MDX page, defined with chromatic: { disableSnapshot: true }, should not appear in Chromatic

Regression testing

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.

Screenshots

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 other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

github-actions · 2024-03-20T22:25:46Z

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

github-actions · 2024-03-20T22:29:03Z

File metrics

Summary

Total size: 4.33 MB^*
Total change (Δ): ⬇ 239.58 KB (-5.13%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
button	30.88 KB	⬇ 52.63 KB

Details

button

File	Head	Base	Δ
index-base.css	30.88 KB	53.56 KB	⬇ 22.68 KB (-42.35%)
index-vars.css	30.88 KB	83.51 KB	⬇ 52.63 KB (-63.03%)
index.css	30.88 KB	83.51 KB	⬇ 52.63 KB (-63.03%)
metadata.json	11.50 KB	33.87 KB	⬇ 22.37 KB (-66.04%)
index-theme.css	-	30.53 KB	🚨 deleted, moved, or renamed
themes/express.css	-	29.33 KB	🚨 deleted, moved, or renamed
themes/spectrum.css	-	29.40 KB	🚨 deleted, moved, or renamed

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

mdt2

Sooo much good work on this one, Josh 🏆 A few comments for you. Also +1 on needing more design direction for wrapping buttons, I see you mentioned that in Slack for the design review. I'm not sure we should merge this one until we have that squared away. It's nice to have that wrapping story now to account for that.

components/button/metadata/button-accent.yml

components/button/metadata/button-staticcolor.yml

components/buttongroup/package.json

components/button/index.css

changeset-bot · 2024-04-23T19:22:06Z

🦋 Changeset detected

Latest commit: bcb00e0

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/button	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

Spectrum 2 changes to CSS: - integrate themes css into main css - use s2 corner rounding - use s2 colors Cleanup items of note: - make medium size the default - consolidate and organize focus indicator styles. Some declarations were repeated. - Rename mod for font weight that was referencing a global token instead of a component specific name. - simplify repetitive disabled custom properties - removed some unused css; static variant declarations at the end of the file were being overridden by more specific styles - remove unused is-selected, emphasized, and quiet classes that are not used on this component - remove the spectrum-Button--fill class. it was already the default.

Ensures that a matching background and foreground color pair is used for the high contrast colors, for Accent hover, down, and focus. Changes the content color to HighlightText to ensure contrast when these have a background set to Highlight.

- Some improvements and additions to the spectrum 2 release notes. - Updates migration guide notes to include version and dates for the previous notes. - Removes spectrum-Button--sizeM class from examples. Excludes the spectrum-Button--sizeM class in the storybook template. - Removes medium size class from storybook - Fixes default flex alignment stretching buttons vertically in Storybook to the tallest button.

Calculate corner rounding based on the component height, so that the rounding looks correct when there is wrapping text. Otherwise, when the button wraps, it has too much rounding as compared to the design when using the corner-radius-full token.

Removes the outline option for the accent and negative variants, and makes sure that the accent variant is the default. == outline option removal == Per design feedback and updated design spec changelog, the outline treatment (style) is no longer supported for the Accent and Negative color variants: "Outline buttons are no longer available in accent and negative options — use the filled variant instead" This removes their CSS, lists the change in the migration notes, and disables the treatment control for the Accent and Negative stories. It also removes the outline example in the template for those two stories. == use accent as the default == Use accent styles for the default button when there is no variant class applied, to match the default defined on the guidelines.

- make usage of edge to visual values consistent - use full corner rounding on icon-only variant, which does not need to account for wrapping text - correct static white secondary outline background color, per PR review - chore: apply linter formatting

Create an MDX "Docs" page that works as a replacement for the YML docs pages, and covers the important Button options from there and the guidelines. Adds the tag "is-hidden-story" for excluding Storybook sidebar items.

Since the commons version on main was updated to 10.0, the Button started building with the wrong version of commons when importing basebutton.css and listing mods that have been removed in the version of commons in the spectrum-two branch.

Fixes warnings and errors from stylelint and eslint.

pfulton

This looks awesome, @jawinn! I really like the Docs page.

One question: can accent or negative have an outline treatment, or do they always receive fill and only fill? If they can't receive the outline treatment, can we conditionally disable the fill and outline control?

jawinn · 2024-04-30T17:58:04Z

This looks awesome, @jawinn! I really like the Docs page.

One question: can accent or negative have an outline treatment, or do they always receive fill and only fill? If they can't receive the outline treatment, can we conditionally disable the fill and outline control?

I'd love to disable that control when the variant control has either of those two values. I looked into that and so far Storybook doesn't have a way to have multiple conditionals, a custom conditional function, or a conditional that checks against two values, though there is some progress on it: storybookjs/storybook#21281

The focus indicator rounding needed an additional calc in order to have the correct rounding. While testing --mod-button-focus-ring-gap and some other mods, it was also noticed that a declaration being imported from basebutton was causing some of the mod names to be different and the mod to not work correctly (basebutton is generating a selector for the margin of .spectrum-Button:focus-visible::after).

* refactor(button): spectrum 2 styles and cleanup Spectrum 2 changes to CSS: - integrate themes css into main css - use s2 corner rounding - use s2 colors Cleanup items of note: - make medium size the default - consolidate and organize focus indicator styles. Some declarations were repeated. - Rename mod for font weight that was referencing a global token instead of a component specific name. - simplify repetitive disabled custom properties - removed some unused css; static variant declarations at the end of the file were being overridden by more specific styles - remove unused is-selected, emphasized, and quiet classes that are not used on this component - remove the spectrum-Button--fill class. it was already the default. * fix(button): high contrast - ensure matching color pairs for accent Ensures that a matching background and foreground color pair is used for the high contrast colors, for Accent hover, down, and focus. Changes the content color to HighlightText to ensure contrast when these have a background set to Highlight. * docs(button): update documentation and storybook for s2 - Some improvements and additions to the spectrum 2 release notes. - Updates migration guide notes to include version and dates for the previous notes. - Removes spectrum-Button--sizeM class from examples. Excludes the spectrum-Button--sizeM class in the storybook template. - Removes medium size class from storybook - Fixes default flex alignment stretching buttons vertically in Storybook to the tallest button. * fix(button): calculate corner rounding to support wrapping design Calculate corner rounding based on the component height, so that the rounding looks correct when there is wrapping text. Otherwise, when the button wraps, it has too much rounding as compared to the design when using the corner-radius-full token. * feat(button): outline option removals and use accent as the default Removes the outline option for the accent and negative variants, and makes sure that the accent variant is the default. == outline option removal == Per design feedback and updated design spec changelog, the outline treatment (style) is no longer supported for the Accent and Negative color variants: "Outline buttons are no longer available in accent and negative options — use the filled variant instead" This removes their CSS, lists the change in the migration notes, and disables the treatment control for the Accent and Negative stories. It also removes the outline example in the template for those two stories. == use accent as the default == Use accent styles for the default button when there is no variant class applied, to match the default defined on the guidelines. * fix(button): additional s2 style adjustments and organization - make usage of edge to visual values consistent - use full corner rounding on icon-only variant, which does not need to account for wrapping text - correct static white secondary outline background color, per PR review - chore: apply linter formatting * docs(button): custom mdx docs page Create an MDX "Docs" page that works as a replacement for the YML docs pages, and covers the important Button options from there and the guidelines. Adds the tag "is-hidden-story" for excluding Storybook sidebar items. * chore(button): add changeset * build(button): use beta version of commons dependency Since the commons version on main was updated to 10.0, the Button started building with the wrong version of commons when importing basebutton.css and listing mods that have been removed in the version of commons in the spectrum-two branch. * chore(button): clear up linter warnings Fixes warnings and errors from stylelint and eslint. * fix(button): correct focus indicator rounding and basebutton mod The focus indicator rounding needed an additional calc in order to have the correct rounding. While testing --mod-button-focus-ring-gap and some other mods, it was also noticed that a declaration being imported from basebutton was causing some of the mod names to be different and the mod to not work correctly (basebutton is generating a selector for the margin of .spectrum-Button:focus-visible::after).

jawinn added the S2 Spectrum 2 label Mar 20, 2024

jawinn force-pushed the jawinn/css-616-s2-button branch from 257530b to 8b472dc Compare March 20, 2024 23:00

jawinn changed the base branch from spectrum-two to main March 20, 2024 23:08

jawinn changed the base branch from main to spectrum-two March 20, 2024 23:08

jawinn force-pushed the jawinn/css-616-s2-button branch 2 times, most recently from 4d9e6f1 to 4c23339 Compare March 21, 2024 14:08

jawinn marked this pull request as ready for review March 21, 2024 19:01

jawinn force-pushed the jawinn/css-616-s2-button branch 3 times, most recently from 5efeafd to 71f4df8 Compare March 21, 2024 20:39

jawinn requested review from mdt2, pfulton and castastrophe March 21, 2024 20:40

mdt2 reviewed Mar 22, 2024

View reviewed changes

pfulton force-pushed the spectrum-two branch 2 times, most recently from 7c86724 to 0a218bc Compare March 28, 2024 14:22

jawinn force-pushed the jawinn/css-616-s2-button branch 2 times, most recently from 6fad36a to 157438c Compare March 28, 2024 22:55

castastrophe force-pushed the spectrum-two branch 2 times, most recently from 8dfa2af to 810fa5e Compare April 1, 2024 21:00

jawinn force-pushed the jawinn/css-616-s2-button branch from 8d1f9a9 to 84d1940 Compare April 2, 2024 18:25

castastrophe force-pushed the spectrum-two branch from 9b745e7 to 9c147fc Compare April 3, 2024 13:26

mdt2 mentioned this pull request Apr 3, 2024

docs: update migration guide headings to remove dates #2638

Merged

4 tasks

castastrophe force-pushed the spectrum-two branch from 13e54aa to 0f20c5b Compare April 4, 2024 21:01

jawinn force-pushed the jawinn/css-616-s2-button branch from 84d1940 to 4510997 Compare April 4, 2024 21:27

castastrophe force-pushed the spectrum-two branch from 0f20c5b to 9ff2a2c Compare April 5, 2024 14:36

jawinn force-pushed the jawinn/css-616-s2-button branch from 4510997 to e7ba634 Compare April 8, 2024 16:26

castastrophe force-pushed the spectrum-two branch from 4d9e185 to a81c712 Compare April 11, 2024 18:33

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

jawinn force-pushed the jawinn/css-616-s2-button branch from e7ba634 to 927119b Compare April 23, 2024 19:22

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

jawinn added 10 commits April 30, 2024 12:09

docs(button): custom mdx docs page

0e1d611

Create an MDX "Docs" page that works as a replacement for the YML docs pages, and covers the important Button options from there and the guidelines. Adds the tag "is-hidden-story" for excluding Storybook sidebar items.

chore(button): add changeset

fd2ac1d

chore(button): clear up linter warnings

b81a129

Fixes warnings and errors from stylelint and eslint.

jawinn force-pushed the jawinn/css-616-s2-button branch from 5b00320 to b81a129 Compare April 30, 2024 16:32

pfulton reviewed Apr 30, 2024

View reviewed changes

pfulton approved these changes Apr 30, 2024

View reviewed changes

pfulton merged commit ea02183 into spectrum-two May 1, 2024
12 of 13 checks passed

pfulton deleted the jawinn/css-616-s2-button branch May 1, 2024 18:30

github-actions bot mentioned this pull request May 1, 2024

chore: release (next) #2722

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(button): migrate to Spectrum 2 #2600

feat(button): migrate to Spectrum 2 #2600

jawinn commented Mar 20, 2024 •

edited

github-actions bot commented Mar 20, 2024 •

edited

github-actions bot commented Mar 20, 2024 •

edited

button

mdt2 left a comment

changeset-bot bot commented Apr 23, 2024 •

edited

pfulton left a comment

jawinn commented Apr 30, 2024

feat(button): migrate to Spectrum 2 #2600

feat(button): migrate to Spectrum 2 #2600

Conversation

jawinn commented Mar 20, 2024 • edited

Description

Outline style removed for accent and negative variants

Medium as default, and removing fill class

Cleanup work

Adds a new custom docs page to replace YML docs

Some other changes of note:

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

github-actions bot commented Mar 20, 2024 • edited

github-actions bot commented Mar 20, 2024 • edited

File metrics

Summary

button

mdt2 left a comment

Choose a reason for hiding this comment

changeset-bot bot commented Apr 23, 2024 • edited

🦋 Changeset detected

pfulton left a comment

Choose a reason for hiding this comment

jawinn commented Apr 30, 2024

jawinn commented Mar 20, 2024 •

edited

github-actions bot commented Mar 20, 2024 •

edited

github-actions bot commented Mar 20, 2024 •

edited

changeset-bot bot commented Apr 23, 2024 •

edited