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-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: 66d670d

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

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.

components/actionbar/index.css

…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?

components/actionbar/stories/actionbar.stories.js

components/actionbar/index.css

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

components/actionbar/index.css

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

components/actionbar/index.css

.changeset/deep-sloths-fetch.md

…igration

jawinn

One small update to a mod name and the changeset, and then I will approve 🎉

jawinn · 2025-05-02T14:04:52Z

components/actionbar/index.css

 		/* align to end by default */
 		margin-inline-start: auto;
+		padding-inline-start: var(--mod-actionbar-spacing-label-to-actiongroup, var(--spectrum-actionbar-spacing-label-to-action-group)); /* space between label and action group */


After the property renaming, the mod needs to be renamed as well. The changeset also still references "label-to-actiongroup".

marissahuysentruyt

@aramos-adobe I think we're missing just a couple of tokens that would correct the 12px of top/bottom padding on the popover.

I did have a one more ideas for this migration that I just couldn't get to post inline for you:

I see size = "m" and the [${rootClass}--size${size?.toUpperCase()}]: typeof size !== "undefined", in the classMap in template.js. This component doesn't come in different sizes as far as I can tell, and size isn't a control arg. Looks like that line has been there for a little bit, but we don't have any sizing styles, so I don't think there's a reason to keep it around. It should be safe to delete both of those.

marissahuysentruyt · 2025-05-02T17:39:51Z

components/actionbar/stories/actionbar.stories.js

@aramos-adobe Could we add tags: ["migrated"] to this component? I noticed some of our migrated S2 components have this, while others don't. I think it'd be a nice thing to add!

We could also add

status: { type: "migrated", }

to the parameters. I'm working on a little badge for migrated components that pulls that status!

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

components/actionbar/stories/template.js

components/actionbar/index.css

…igration

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

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

components/actionbar/index.css

+	--spectrum-actionbar-spacing-padding-inline: var(--spectrum-action-bar-edge-to-content-area);
+	--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

components/actionbar/stories/actionbar.stories.js

@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

components/actionbar/index.css

+	--spectrum-actionbar-spacing-padding-inline: var(--spectrum-action-bar-edge-to-content-area);
+	--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

.changeset/deep-sloths-fetch.md

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

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

jawinn requested 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 requested a review from jawinn May 1, 2025 13:59

jawinn requested changes May 2, 2025

View reviewed changes

marissahuysentruyt requested changes May 5, 2025

View reviewed changes

aramos-adobe added 4 commits May 5, 2025 11:23

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

92aecd6

…igration

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 marissahuysentruyt and jawinn 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

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

jawinn left a comment

jawinn Apr 29, 2025

jawinn left a comment •

edited

Loading

jawinn May 2, 2025

marissahuysentruyt left a comment

marissahuysentruyt May 2, 2025

marissahuysentruyt May 5, 2025

marissahuysentruyt May 6, 2025

github-actions bot May 5, 2025

marissahuysentruyt May 6, 2025

marissahuysentruyt left a comment

marissahuysentruyt May 6, 2025

marissahuysentruyt May 6, 2025

jawinn left a comment

jawinn May 6, 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-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`

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

jawinn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jawinn left a comment • edited Loading

Choose a reason for hiding this 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

github-actions bot May 5, 2025

Choose a reason for hiding this 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

jawinn left a 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

jawinn left a comment •

edited

Loading