feat(actionbar): new s2 migration #3657

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-actiongroup
--spectrum-actionbar-spacing-action-group-edge

New mods

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

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: ba9179c

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	6.80 KB	6.49 KB	1.43 KB

actionbar

Filename	Head	Minified	Gzipped	Compared to base
index.css	6.80 KB	6.49 KB	1.43 KB	🔴 ⬆ 0.59 KB
metadata.json	4.15 KB	-	-	🔴 ⬆ 0.51 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

components/actionbar/index.css

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

components/actionbar/index.css

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

components/actionbar/stories/template.js

+					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

components/actionbar/index.css

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

components/actionbar/index.css

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

.changeset/deep-sloths-fetch.md

+
+### 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.

marissahuysentruyt · 2025-04-23T21:44:18Z

components/actionbar/index.css

+	--spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-elevated-color);



After these drop shadows, I would also suggest setting --mod-closebutton-icon-color-hover: var(--spectrum-actionbar-emphasized-icon-color);, so that in dark mode, the emphasized action bar's close button doesn't change its icon color. (it mimics the dark mode default action bar's close button).

Screen.Recording.2025-04-23.at.5.43.52.PM.mov

…igration

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

components/actionbar/index.css Show resolved Hide resolved

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(actionbar): new s2 migration #3657

feat(actionbar): new s2 migration #3657

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

marissahuysentruyt left a comment

marissahuysentruyt left a comment

marissahuysentruyt Apr 23, 2025

marissahuysentruyt Apr 23, 2025

marissahuysentruyt Apr 23, 2025

marissahuysentruyt Apr 23, 2025

marissahuysentruyt Apr 23, 2025

marissahuysentruyt Apr 23, 2025

marissahuysentruyt Apr 23, 2025

marissahuysentruyt Apr 23, 2025

marissahuysentruyt Apr 23, 2025

marissahuysentruyt Apr 23, 2025

		.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-shadow-color: var(--spectrum-drop-shadow-elevated-color);

feat(actionbar): new s2 migration #3657

Are you sure you want to change the base?

feat(actionbar): new s2 migration #3657

Conversation

aramos-adobe commented Apr 4, 2025 • edited Loading

Actionbar S2 Migration

New tokens

New mods

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Apr 4, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Apr 4, 2025 • edited Loading

File metrics

Summary

actionbar

github-actions bot commented Apr 4, 2025 • edited Loading

marissahuysentruyt left a comment

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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