feat(buttongroup)!: migrate to S2 by jenndiaz · Pull Request #2457 · adobe/spectrum-css

jenndiaz · 2024-01-22T23:40:56Z

Description

BREAKING CHANGE

Migrations the button group component to S2

updates tokens for vertical and horizontal spacing with in the buttongroup component
includes size small with in Chromatic

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

In storybook, buttongroup gap spacing match S2 token updates @mdt2
In the docs site, buttongroup gap spacing match S2 token updates @mdt2
VRTs now also display a small buttongroup in addition to the default size @mdt2
design validation @jenndiaz

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-01-22T23:50:04Z

File metrics

Summary

Total size: 3.89 MB^*
Total change (Δ): ⬇ 25.26 KB (-0.63%)
Table reports on changes to a package's main file. Other changes can be found in the collapsed "Details" below.

Package	Size	Δ
actiongroup	5.70 KB	⬇ 2.80 KB
buttongroup	1.38 KB	⬇ 0.53 KB
tokens	198.68 KB	⬇ 7.18 KB

Details

actiongroup

File	Head	Base	Δ
index-base.css	5.70 KB	8.02 KB	⬇ 2.32 KB (-28.88%)
index-theme.css	0.59 KB	1.06 KB	⬇ 0.49 KB (-45.30%)
index-vars.css	5.70 KB	8.50 KB	⬇ 2.80 KB (-32.91%)
index.css	5.70 KB	8.50 KB	⬇ 2.80 KB (-32.91%)
mods.json	0.25 KB	0.40 KB	⬇ 0.15 KB (-37.47%)
themes/express.css	0.59 KB	0.89 KB	⬇ 0.30 KB (-33.33%)
themes/spectrum.css	0.59 KB	0.79 KB	⬇ 0.20 KB (-24.91%)

buttongroup

File	Head	Base	Δ
index-base.css	1.38 KB	1.90 KB	⬇ 0.53 KB (-27.32%)
index-vars.css	1.38 KB	1.90 KB	⬇ 0.53 KB (-27.32%)
index.css	1.38 KB	1.90 KB	⬇ 0.53 KB (-27.32%)
mods.json	0.15 KB	0.15 KB	-

tokens

File	Head	Base	Δ
css/dark-vars.css	36.30 KB	25.13 KB	⬆ 11.17 KB (44.43%)
css/express/custom-dark-vars.css	0.61 KB	0.61 KB	-
css/express/custom-darkest-vars.css	0.61 KB	0.61 KB	-
css/express/custom-large-vars.css	0.51 KB	0.51 KB	-
css/express/custom-light-vars.css	0.65 KB	0.65 KB	-
css/express/custom-medium-vars.css	0.49 KB	0.49 KB	-
css/express/custom-vars.css	0.04 KB	0.04 KB	-
css/global-vars.css	45.28 KB	39.57 KB	⬆ 5.71 KB (14.43%)
css/large-vars.css	27.90 KB	25.49 KB	⬆ 2.42 KB (9.48%)
css/light-vars.css	36.31 KB	25.13 KB	⬆ 11.18 KB (44.51%)
css/medium-vars.css	27.83 KB	25.42 KB	⬆ 2.41 KB (9.48%)
css/spectrum/custom-dark-vars.css	3.63 KB	3.63 KB	-
css/spectrum/custom-darkest-vars.css	3.63 KB	3.63 KB	-
css/spectrum/custom-large-vars.css	4.76 KB	4.76 KB	-
css/spectrum/custom-light-vars.css	3.63 KB	3.63 KB	-
css/spectrum/custom-medium-vars.css	5.00 KB	5.00 KB	-
css/spectrum/custom-vars.css	2.10 KB	2.10 KB	-
index.css	198.68 KB	205.86 KB	⬇ 7.18 KB (-3.49%)

* 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.

github-actions · 2024-01-22T23:59:02Z

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

mdt2

Nice work. Aligns with the spec tokens. Thanks for adding the Chromatic coverage for small 🎉

jawinn

LGTM. I tested the Chromatic template as well.

jawinn · 2024-01-24T15:09:56Z

+.spectrum-ButtonGroup--sizeM,
+.spectrum-ButtonGroup--sizeL,
+.spectrum-ButtonGroup--sizeXL {


Could we remove these three classes, since only small is different than the default?

yes, I've removed them and updated our docs and migration guide to reflect them being removed.

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

jenndiaz marked this pull request as ready for review January 23, 2024 00:01

jenndiaz requested review from jawinn, mdt2 and pfulton January 23, 2024 19:00

mdt2 approved these changes Jan 23, 2024

View reviewed changes

jawinn approved these changes Jan 24, 2024

View reviewed changes

jenndiaz commented Jan 24, 2024

View reviewed changes

Comment thread components/buttongroup/metadata/buttongroup.yml

jenndiaz force-pushed the jenndiaz/s2-migrate-buttongroup branch 2 times, most recently from cffb36c to cf1d6fe Compare January 24, 2024 17:58

jenndiaz added ask design Questions or topics for the design team ready-for-review labels Jan 29, 2024

pfulton added the S2 Spectrum 2 label Jan 29, 2024

jenndiaz added design-approved and removed ask design Questions or topics for the design team labels Jan 31, 2024

pfulton added the skip_vrt Add to a PR to skip running VRT (but still pass the action) label Feb 2, 2024

jenndiaz added 3 commits February 2, 2024 11:50

feat(buttongroup): use new tokens

3fbc977

docs(buttongroup): expand chromatic coverage

2571a95

refactor(buttongroup): remove extra css classes

5519aa5

pfulton force-pushed the jenndiaz/s2-migrate-buttongroup branch from cf1d6fe to 5519aa5 Compare February 2, 2024 16:50

pfulton approved these changes Feb 2, 2024

View reviewed changes

pfulton merged commit 79b8681 into spectrum-two Feb 2, 2024

pfulton deleted the jenndiaz/s2-migrate-buttongroup branch February 2, 2024 17:07

pfulton pushed a commit that referenced this pull request Feb 2, 2024

feat(buttongroup)!: migrate to S2 (#2457)

2298170

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

pfulton pushed a commit that referenced this pull request Feb 5, 2024

feat(buttongroup)!: migrate to S2 (#2457)

66d2cee

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

pfulton pushed a commit that referenced this pull request Feb 22, 2024

feat(buttongroup)!: migrate to S2 (#2457)

40eb9f3

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

pfulton pushed a commit that referenced this pull request Feb 26, 2024

feat(buttongroup)!: migrate to S2 (#2457)

38c49db

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

pfulton pushed a commit that referenced this pull request Mar 11, 2024

feat(buttongroup)!: migrate to S2 (#2457)

bbcb2a3

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

pfulton pushed a commit that referenced this pull request Mar 19, 2024

feat(buttongroup)!: migrate to S2 (#2457)

621da05

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Apr 26, 2024

feat(buttongroup)!: migrate to S2 (#2457)

e13442b

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Apr 30, 2024

feat(buttongroup)!: migrate to S2 (#2457)

df9ea6a

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

pfulton pushed a commit that referenced this pull request May 1, 2024

feat(buttongroup)!: migrate to S2 (#2457)

d86f546

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

pfulton pushed a commit that referenced this pull request May 3, 2024

feat(buttongroup)!: migrate to S2 (#2457)

a46c4a8

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

rise-erpelding pushed a commit that referenced this pull request May 7, 2024

feat(buttongroup)!: migrate to S2 (#2457)

455e51b

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

pfulton pushed a commit that referenced this pull request May 10, 2024

feat(buttongroup)!: migrate to S2 (#2457)

40f91fc

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Dec 27, 2024

feat(buttongroup)!: migrate to S2 (#2457)

2b7b760

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Dec 29, 2024

feat(buttongroup)!: migrate to S2 (#2457)

0a99ab8

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Dec 29, 2024

feat(buttongroup)!: migrate to S2 (#2457)

90275f5

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Jan 17, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

33c0b51

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Jan 17, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

e6b21f3

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Jan 21, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

c8dcfba

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Jan 22, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

5b5dc6b

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Feb 5, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

4ee7738

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Feb 7, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

b08105d

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Feb 7, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

feab1b8

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Feb 7, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

fa3b52f

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Feb 11, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

35456b4

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Feb 24, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

702b64b

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Feb 24, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

dab09d1

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

castastrophe pushed a commit that referenced this pull request Feb 25, 2025

feat(buttongroup,page)!: migrate to S2 (#2457)

651fc8a

BREAKING CHANGE: migrates Button Group to Spectrum 2 Also: * docs(buttongroup): expand chromatic coverage * refactor(buttongroup): remove extra css classes

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(buttongroup)!: migrate to S2#2457

feat(buttongroup)!: migrate to S2#2457
pfulton merged 3 commits into
spectrum-twofrom
jenndiaz/s2-migrate-buttongroup

jenndiaz commented Jan 22, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Jan 22, 2024 •

edited

Loading

actiongroup

buttongroup

tokens

Uh oh!

github-actions Bot commented Jan 22, 2024 •

edited

Loading

Uh oh!

mdt2 left a comment

Uh oh!

jawinn left a comment

Uh oh!

jawinn Jan 24, 2024

Uh oh!

jenndiaz Jan 24, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

jenndiaz commented Jan 22, 2024 • edited 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

Screenshots

To-do list

Uh oh!

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

Uh oh!

File metrics

Summary

actiongroup

buttongroup

tokens

Uh oh!

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

Uh oh!

Uh oh!

mdt2 left a comment

Choose a reason for hiding this comment

Uh oh!

jawinn left a comment

Choose a reason for hiding this comment

Uh oh!

jawinn Jan 24, 2024

Choose a reason for hiding this comment

Uh oh!

jenndiaz Jan 24, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jenndiaz commented Jan 22, 2024 •

edited

Loading

github-actions Bot commented Jan 22, 2024 •

edited

Loading

github-actions Bot commented Jan 22, 2024 •

edited

Loading