feat(actionbar): new s2 migration by aramos-adobe · Pull Request #3657 · adobe/spectrum-css

aramos-adobe · 2025-04-04T21:19:02Z

Actionbar S2 Migration

Action bar now has some updated colors, corner radius, and icons The default and emphasized variant now have a light and dark mode theme.

The emphasized variant has visibly changed from blue to gray.

New tokens

--spectrum-actionbar-emphasized-actionbutton-label-color
--spectrum-actionbar-emphasized-icon-color
--spectrum-actionbar-minimum-width
--spectrum-actionbar-spacing-label-to-action-group
--spectrum-actionbar-spacing-action-group-edge

New mods

--mod-actionbar-minimum-width
--mod-actionbar-spacing-action-group-edge
--mod-actionbar-spacing-label-to-action-group

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

S2 color and layout tokens are correct

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

changeset-bot · 2025-04-04T21:19:07Z

🦋 Changeset detected

Latest commit: 34a5eea

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

github-actions · 2025-04-04T21:24:56Z

File metrics

Summary

Total size: 1.38 MB^*

Package	Size	Minified	Gzipped
actionbar	5.57 KB	5.32 KB	1.38 KB

actionbar

Filename	Head	Minified	Gzipped	Compared to base
index.css	5.57 KB	5.32 KB	1.38 KB	🟢 ⬇ 0.66 KB
metadata.json	3.32 KB	-	-	🟢 ⬇ 0.34 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.

github-actions · 2025-04-04T21:26:01Z

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

marissahuysentruyt

Before I went too far, I wanted to ask why several of the components were downgraded from the spectrum-two branch. I see some of our plugins have been downgraded, as well as our token package and bundle. Was that intentional, do we have conflicting dependencies or something? Those changes just caught me off guard, so I wanted to double check the reasoning.

…igration

marissahuysentruyt

Here are a couple of things I wanted to bring up with you! I wasn't sure where to put them...

In the actionbar.stories.js file, would you update the documentation regarding the emphasized's blue background, since it got changed to the gray for S2?
If I'm understanding Figma correctly, the expectation for an emphasized action bar, in dark mode, is to have a border, correct? If I inspect the Figma component, there's still a border:

But right now, the border-color: transparent at line 132ish is overriding that. Should it match Figma? This wasn't something you introduced, but something I noticed. Based on the comments about WHCM, I wonder if the transparent border is even something we need, now that this component has a border in the emphasized variant. Just testing with that line removed, it looks like the borders in high contrast mode are still looking good.

I will give the rest of the tokens a better look tomorrow!

marissahuysentruyt · 2025-04-23T20:46:16Z

+	.spectrum-ActionGroup .spectrum-ActionButton {
+		.spectrum-ActionButton-label {
+			--mod-actionbutton-label-color: var(--spectrum-actionbar-emphasized-action-button-label-color);
+		}
+
+		.spectrum-ActionButton-icon {
+			color: var(--spectrum-actionbar-emphasized-icon-color);
+		}
+	}
+
+	.spectrum-CloseButton .spectrum-Icon {
+		color: var(--spectrum-actionbar-emphasized-icon-color);
+	}


I think we need to adjust some of these. Right now, I'm getting sort of a black box in dark mode. I haven't quite worked out the styles with the new template markup.

Interestingly, I only get the black boxes in the Chromatic test preview. 🤔

OHHHH I think this is related to the background colors passed to Container()s. I'm more and more convinced the longer I stare at this that we have to revert the Container() addition.

marissahuysentruyt · 2025-04-23T20:48:24Z

+					Container({
+						withBorder: false,
+						wrapperStyles: {
+							"column-gap": "var(--spectrum-action-bar-close-button-to-counter)",
+							"align-items": "center",
+						},
+						content: [
+							CloseButton({
+								label: "Clear selection",
+								staticColor: isEmphasized ? "white" : undefined,
+							}, context),
+							FieldLabel({ size: "s", label: "2 Selected" }, context),
+						]
+					}),


Hmm...I'm unsure if Container() was really intended to be used in our templates. Right now, it's adding a lot of additional markup that doesn't seem necessary, and I'm not sure SWC would be able to do anything with these Storybook-only classes & divs.

We may have to revert this back to the old markup.

Just for reference, these are the extra, unnecessary divs I was seeing. They also show up in our showCode functionality, and it's just a lot of gobbly-gook for a user to get through.

marissahuysentruyt · 2025-04-23T21:29:02Z

+	.spectrum-ActionBar--emphasized .spectrum-ActionBar-popover {
+		--highcontrast-actionbar-popover-border-color: CanvasText;


This selector is a little repetitive to me, so can we remove it? --highcontrast-actionbar-popover-border-color: CanvasText; was already declared above in .spectrum-ActionBar, and this second selector block is just variants, so isn't it already set?

marissahuysentruyt · 2025-04-23T21:31:39Z

+
+	.spectrum-ActionGroup .spectrum-ActionButton {
+		.spectrum-ActionButton-label {
+			--mod-actionbutton-label-color: var(--spectrum-actionbar-emphasized-action-button-label-color);


I wonder if, for the emphasized action bar specifically in dark mode in force colors/WHCM 🥵 if this should use a high contrast variable. Testing it in both the Chrome forced-colors emulator and Assistiv labs, if I switch to dark mode, the emphasized action buttons are not visible.

--mod-actionbutton-label-color: var(--highcontrast-actionbar-emphasized-action-button-label-color, var(--spectrum-actionbar-emphasized-action-button-label-color));

I don't know where quite yet we'd want that mod, if it's here or somewhere else.

Oh, and somewhat related- I'd like to see this action button mod passthrough be organized with the rest of the custom property definitions, instead of mixed in with the style definitions.

marissahuysentruyt · 2025-04-23T21:35:20Z

+
+### Actionbar S2 Migration
+
+Action bar now has some updated colors, corner radius, icons and outline has been removed. The default and emphasized variant now have a light and dark mode theme.


Could we clarify the part about the outline/border a little? The border is still there, but just different colors based on light vs dark modes.

…igration

jawinn

Design specs are missing info
I don’t see “emphasized” included on the S2 token specs for action bar, so it's difficult to validate this 100% (I did look at the S2 desktop file). It looks like the spec is unfinished. Was the design team going to update the specs?

Shadow and dark theme border
I noticed some difference in the dark theme border size and the size of the shadow, as compared to the S2 desktop file.

The border sounds like a question for design; the component changelog says "removed outline" and doesn't show it, but the S2 desktop file does show it in a couple places 🤔 .

For the shadow; I'm not sure if it's just a rendering difference, but it looks to extend farther than the Figma shows?

jawinn · 2025-04-29T19:35:32Z

-	--spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100);
+	--spectrum-actionbar-minimum-width: var(--spectrum-action-bar-minimum-width);
+	--spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-medium-size-extra-large);
+	--spectrum-actionbar-spacing-label-to-actiongroup: var(--spectrum-action-bar-label-to-action-group-area);


Suggested change

--spectrum-actionbar-spacing-label-to-actiongroup: var(--spectrum-action-bar-label-to-action-group-area);

--spectrum-actionbar-spacing-label-to-action-group: var(--spectrum-action-bar-label-to-action-group-area);

A minor suggestion to the naming so it's more readable and consistent with the naming of the other action group custom property.

…igration

…//github.com/adobe/spectrum-css into aramos-adobe/css1027-action-bar-s2-migration

github-actions · 2025-05-05T20:04:43Z

+	--spectrum-actionbar-spacing-top-area: var(--spectrum-action-bar-top-to-content-area);
+	--spectrum-actionbar-spacing-bottom-area: var(--spectrum-action-bar-bottom-to-content-area);
+	--spectrum-actionbar-close-button-to-counter: var(--spectrum-action-bar-close-button-to-counter);
 	--spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);


⚠️ [stylelint] <spectrum-tools/no-unused-custom-properties> _{reported by reviewdog 🐶}
Custom property --spectrum-actionbar-item-counter-line-height's references have been removed

@aramos-adobe I think this got flagged because we're only setting spectrum-actionbar-item-counter-line-height to define the field label mod. We can get around the linting issues with the disable if you wanted:

/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- defines the field label mod */

…igration

marissahuysentruyt

Woo, this is looking great! I'm going to approve, but I'd like to request we get the tags: ["migrated"] into the story file before this merges (you added the status, but we also need the tag). Other than that, I just left a suggestion to get around the stylelint warning 😊 Nice work on this!

marissahuysentruyt · 2025-05-06T14:40:52Z

@aramos-adobe Thanks so much for adding the migrated status! Once your branch is rebased, we should get a migrated badge now :)

If you could also add tags: ["migrated"] to this file, that'd be wonderful also! The tags code doesn't have to go in the parameters object- it can just go at the bottom of the default export.

marissahuysentruyt · 2025-05-06T14:43:17Z

+	--spectrum-actionbar-spacing-top-area: var(--spectrum-action-bar-top-to-content-area);
+	--spectrum-actionbar-spacing-bottom-area: var(--spectrum-action-bar-bottom-to-content-area);
+	--spectrum-actionbar-close-button-to-counter: var(--spectrum-action-bar-close-button-to-counter);
 	--spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);


@aramos-adobe I think this got flagged because we're only setting spectrum-actionbar-item-counter-line-height to define the field label mod. We can get around the linting issues with the disable if you wanted:

/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- defines the field label mod */

…igration

jawinn

One small update to the changeset and I think this is good to go.

jawinn · 2025-05-06T18:28:30Z

+
+`--mod-actionbar-minimum-width`
+`--mod-actionbar-spacing-action-group-edge`
+`--mod-actionbar-spacing-label-to-actiongroup`


Suggested change

`--mod-actionbar-spacing-label-to-actiongroup`

`--mod-actionbar-spacing-label-to-action-group`

aramos-adobe self-assigned this Apr 4, 2025

aramos-adobe added size-5 L ~30-42hrs; lots of effort or complexity, most of a sprint needed to complete. ready-for-review S2 Spectrum 2 labels Apr 4, 2025

aramos-adobe added 2 commits April 6, 2025 07:34

chore(s2): adding more s2 files

19fe479

feat(actionbar): new s2 migration

0e43d2d

aramos-adobe force-pushed the aramos-adobe/css1027-action-bar-s2-migration branch from 701ca81 to 0e43d2d Compare April 6, 2025 11:35

marissahuysentruyt reviewed Apr 10, 2025

View reviewed changes

Comment thread components/actionbar/index.css

marissahuysentruyt reviewed Apr 10, 2025

View reviewed changes

aramos-adobe added 2 commits April 14, 2025 13:14

chore(actionbar): restoring some files

9c2b19f

chore(actionbar): restoring yarn lock file

85881a0

aramos-adobe requested a review from marissahuysentruyt April 14, 2025 17:26

aramos-adobe added 4 commits April 14, 2025 13:49

feat(actionbar): adding close button spacing

dccf04a

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

df5bdf8

…igration

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

5bf1c46

…igration

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

3cd57fc

…igration

marissahuysentruyt requested changes Apr 23, 2025

View reviewed changes

aramos-adobe added 2 commits April 24, 2025 11:59

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

4bd9863

…igration

feat(actionbar): updating WHCM, emphasized state, and changeset

52f50ad

aramos-adobe requested a review from marissahuysentruyt April 25, 2025 13:32

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

ba9179c

…igration

jawinn self-requested a review April 29, 2025 14:43

jawinn suggested changes Apr 29, 2025

View reviewed changes

aramos-adobe added 4 commits April 30, 2025 10:59

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

65ca55f

…igration

feat(actionbar): static black on dark mode, refactor css

c4c8ae4

feat(actionbar): removing unused highcontrast tokens

65a44d4

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

baa54f0

…igration

aramos-adobe added 3 commits May 5, 2025 15:18

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

a7dafb2

…igration

feat(actionbar): update changeset and tokens

744355d

Merge branch 'aramos-adobe/css1027-action-bar-s2-migration' of https:…

af2a3b3

…//github.com/adobe/spectrum-css into aramos-adobe/css1027-action-bar-s2-migration

aramos-adobe requested review from jawinn and marissahuysentruyt May 5, 2025 19:20

aramos-adobe added 3 commits May 5, 2025 15:23

feat(actionbar): remove sizing parameter in template

2222a6b

chore(actionbar): removing unused token

6b379e7

chore(actionbar): restoring line height token

fe2ec7f

github-actions Bot reviewed May 5, 2025

View reviewed changes

castastrophe force-pushed the spectrum-two branch 3 times, most recently from 7e8269c to 4ce8d19 Compare May 5, 2025 21:18

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

3ba1e64

…igration

marissahuysentruyt approved these changes May 6, 2025

View reviewed changes

aramos-adobe added 4 commits May 6, 2025 11:40

chore(actionbar): adding stylelint to specify line height mod use case

2a1a635

chore(actionbar): update new s2 story component changes

1a5bbf7

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

5f6ce07

…igration

Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…

66d670d

…igration

jawinn approved these changes May 6, 2025

View reviewed changes

chore(actionbar): update mod token typo in changeset

34a5eea

aramos-adobe merged commit c06e995 into spectrum-two May 7, 2025
12 checks passed

aramos-adobe deleted the aramos-adobe/css1027-action-bar-s2-migration branch May 7, 2025 14:25

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

		.spectrum-ActionBar--emphasized .spectrum-ActionBar-popover {
		--highcontrast-actionbar-popover-border-color: CanvasText;


		### Actionbar S2 Migration

		Action bar now has some updated colors, corner radius, icons and outline has been removed. The default and emphasized variant now have a light and dark mode theme.

	--spectrum-actionbar-spacing-label-to-actiongroup: var(--spectrum-action-bar-label-to-action-group-area);
	--spectrum-actionbar-spacing-label-to-action-group: var(--spectrum-action-bar-label-to-action-group-area);

	`--mod-actionbar-spacing-label-to-actiongroup`
	`--mod-actionbar-spacing-label-to-action-group`

Conversation

aramos-adobe commented Apr 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Actionbar S2 Migration

New tokens

New mods

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

File metrics

Summary

actionbar

Uh oh!

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

Uh oh!

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

jawinn left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot May 5, 2025

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jawinn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

aramos-adobe commented Apr 4, 2025 •

edited

Loading

changeset-bot Bot commented Apr 4, 2025 •

edited

Loading

github-actions Bot commented Apr 4, 2025 •

edited

Loading

github-actions Bot commented Apr 4, 2025 •

edited

Loading