Skip to content

feat(actionbar): new s2 migration #3657

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 28 commits into from
May 7, 2025
+109 −121
Merged

feat(actionbar): new s2 migration #3657

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
19fe479
chore(s2): adding more s2 files
aramos-adobe Mar 28, 2025
0e43d2d
feat(actionbar): new s2 migration
aramos-adobe Apr 4, 2025
9c2b19f
chore(actionbar): restoring some files
aramos-adobe Apr 14, 2025
85881a0
chore(actionbar): restoring yarn lock file
aramos-adobe Apr 14, 2025
dccf04a
feat(actionbar): adding close button spacing
aramos-adobe Apr 14, 2025
df5bdf8
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe Apr 14, 2025
5bf1c46
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe Apr 21, 2025
3cd57fc
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe Apr 22, 2025
4bd9863
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe Apr 24, 2025
52f50ad
feat(actionbar): updating WHCM, emphasized state, and changeset
aramos-adobe Apr 24, 2025
ba9179c
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe Apr 28, 2025
65ca55f
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe Apr 30, 2025
c4c8ae4
feat(actionbar): static black on dark mode, refactor css
aramos-adobe Apr 30, 2025
65a44d4
feat(actionbar): removing unused highcontrast tokens
aramos-adobe Apr 30, 2025
baa54f0
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe Apr 30, 2025
92aecd6
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe May 5, 2025
a7dafb2
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe May 5, 2025
744355d
feat(actionbar): update changeset and tokens
aramos-adobe May 5, 2025
af2a3b3
Merge branch 'aramos-adobe/css1027-action-bar-s2-migration' of https:…
aramos-adobe May 5, 2025
2222a6b
feat(actionbar): remove sizing parameter in template
aramos-adobe May 5, 2025
6b379e7
chore(actionbar): removing unused token
aramos-adobe May 5, 2025
fe2ec7f
chore(actionbar): restoring line height token
aramos-adobe May 5, 2025
3ba1e64
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe May 6, 2025
2a1a635
chore(actionbar): adding stylelint to specify line height mod use case
aramos-adobe May 6, 2025
1a5bbf7
chore(actionbar): update new s2 story component changes
aramos-adobe May 6, 2025
5f6ce07
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe May 6, 2025
66d670d
Merge branch 'spectrum-two' into aramos-adobe/css1027-action-bar-s2-m…
aramos-adobe May 6, 2025
34a5eea
chore(actionbar): update mod token typo in changeset
aramos-adobe May 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .changeset/deep-sloths-fetch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
---
"@spectrum-css/actionbar": major
---

### Actionbar S2 Migration

Action bar now has some updated colors, corner radius, and icons. There's a new look to the default and emphasized variants.

The emphasized has changed from an `accent` background color to a `neutral` background color. In light mode, the clear button and action buttons are `staticWhite` and in dark mode they are `staticBlack`.

#### 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`
`--spectrum-actionbar-close-button-to-counter`

#### New mods

`--mod-actionbar-minimum-width`
`--mod-actionbar-spacing-action-group-edge`
`--mod-actionbar-spacing-label-to-action-group`
75 changes: 34 additions & 41 deletions components/actionbar/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,90 +4,83 @@
".spectrum-ActionBar",
".spectrum-ActionBar .spectrum-ActionBar-popover",
".spectrum-ActionBar .spectrum-ActionGroup",
".spectrum-ActionBar .spectrum-CloseButton",
".spectrum-ActionBar .spectrum-FieldLabel",
".spectrum-ActionBar .spectrum-FieldLabel:lang(ja)",
".spectrum-ActionBar .spectrum-FieldLabel:lang(ko)",
".spectrum-ActionBar .spectrum-FieldLabel:lang(zh)",
".spectrum-ActionBar--emphasized .spectrum-ActionBar-popover",
".spectrum-ActionBar--emphasized .spectrum-FieldLabel",
".spectrum-ActionBar--fixed",
".spectrum-ActionBar--flexible .spectrum-ActionBar-popover",
".spectrum-ActionBar--sticky",
".spectrum-ActionBar.is-open",
".spectrum-ActionBar.spectrum-ActionBar--emphasized",
".spectrum-ActionBar:lang(ja)",
".spectrum-ActionBar:lang(ko)",
".spectrum-ActionBar:lang(zh)"
],
"modifiers": [
"--mod-actionbar-close-button-to-counter",
"--mod-actionbar-corner-radius",
"--mod-actionbar-emphasized-background-color",
"--mod-actionbar-emphasized-item-counter-color",
"--mod-actionbar-height",
"--mod-actionbar-item-counter-color",
"--mod-actionbar-item-counter-font-size",
"--mod-actionbar-item-counter-line-height",
"--mod-actionbar-item-counter-line-height-cjk",
"--mod-actionbar-minimum-width",
"--mod-actionbar-popover-background-color",
"--mod-actionbar-popover-border-color",
"--mod-actionbar-shadow-blur",
"--mod-actionbar-shadow-color",
"--mod-actionbar-shadow-horizontal",
"--mod-actionbar-shadow-vertical",
"--mod-actionbar-spacing-action-group-end",
"--mod-actionbar-spacing-action-group-top",
"--mod-actionbar-spacing-close-button-end",
"--mod-actionbar-spacing-close-button-start",
"--mod-actionbar-spacing-close-button-top",
"--mod-actionbar-spacing-item-counter-end",
"--mod-actionbar-spacing-item-counter-top",
"--mod-actionbar-spacing-outer-edge"
"--mod-actionbar-spacing-action-group-edge",
"--mod-actionbar-spacing-bottom-area",
"--mod-actionbar-spacing-label-to-action-group",
"--mod-actionbar-spacing-outer-edge",
"--mod-actionbar-spacing-top-area"
],
"component": [
"--spectrum-action-bar-border-color",
"--spectrum-action-bar-bottom-to-content-area",
"--spectrum-action-bar-close-button-to-counter",
"--spectrum-action-bar-counter-font-size",
"--spectrum-action-bar-edge-to-content-area",
"--spectrum-action-bar-height",
"--spectrum-action-bar-top-to-item-counter",
"--spectrum-action-bar-label-to-action-group-area",
"--spectrum-action-bar-minimum-width",
"--spectrum-action-bar-top-to-content-area",
"--spectrum-actionbar-close-button-to-counter",
"--spectrum-actionbar-corner-radius",
"--spectrum-actionbar-emphasized-background-color",
"--spectrum-actionbar-emphasized-item-counter-color",
"--spectrum-actionbar-height",
"--spectrum-actionbar-item-counter-color",
"--spectrum-actionbar-item-counter-font-size",
"--spectrum-actionbar-item-counter-line-height",
"--spectrum-actionbar-item-counter-line-height-cjk",
"--spectrum-actionbar-minimum-width",
"--spectrum-actionbar-popover-background-color",
"--spectrum-actionbar-popover-border-color",
"--spectrum-actionbar-shadow-blur",
"--spectrum-actionbar-shadow-color",
"--spectrum-actionbar-shadow-horizontal",
"--spectrum-actionbar-shadow-vertical",
"--spectrum-actionbar-spacing-action-group-end",
"--spectrum-actionbar-spacing-action-group-top",
"--spectrum-actionbar-spacing-close-button-end",
"--spectrum-actionbar-spacing-close-button-start",
"--spectrum-actionbar-spacing-close-button-top",
"--spectrum-actionbar-spacing-item-counter-end",
"--spectrum-actionbar-spacing-item-counter-top",
"--spectrum-actionbar-spacing-outer-edge"
"--spectrum-actionbar-spacing-bottom-area",
"--spectrum-actionbar-spacing-label-to-action-group",
"--spectrum-actionbar-spacing-outer-edge",
"--spectrum-actionbar-spacing-padding-inline",
"--spectrum-actionbar-spacing-top-area"
],
"global": [
"--spectrum-background-elevated-color",
"--spectrum-cjk-line-height-100",
"--spectrum-corner-radius-100",
"--spectrum-drop-shadow-blur",
"--spectrum-drop-shadow-color",
"--spectrum-drop-shadow-x",
"--spectrum-drop-shadow-y",
"--spectrum-font-size-100",
"--spectrum-corner-radius-medium-size-extra-large",
"--spectrum-drop-shadow-elevated-blur",
"--spectrum-drop-shadow-elevated-color",
"--spectrum-drop-shadow-elevated-x",
"--spectrum-drop-shadow-elevated-y",
"--spectrum-gray-25",
"--spectrum-gray-400",
"--spectrum-informative-background-color-default",
"--spectrum-line-height-100",
"--spectrum-neutral-content-color-default",
"--spectrum-spacing-100",
"--spectrum-spacing-300",
"--spectrum-spacing-400",
"--spectrum-spacing-75",
"--spectrum-white"
"--spectrum-spacing-300"
],
"passthroughs": [
"--mod-fieldlabel-font-size",
"--mod-fieldlabel-line-height"
],
"passthroughs": [],
"high-contrast": ["--highcontrast-actionbar-popover-border-color"]
}
110 changes: 36 additions & 74 deletions components/actionbar/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,42 +12,36 @@
*/

.spectrum-ActionBar {
--spectrum-actionbar-popover-background-color: var(--spectrum-gray-25);
--spectrum-actionbar-popover-border-color: var(--spectrum-gray-400);

/* Layout */
--spectrum-actionbar-height: var(--spectrum-action-bar-height);
--spectrum-actionbar-corner-radius: var(--spectrum-corner-radius-100);

/* item counter field label */
--spectrum-actionbar-item-counter-font-size: var(--spectrum-font-size-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-action-group: var(--spectrum-action-bar-label-to-action-group-area);
--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);
/* stylelint-disable-next-line spectrum-tools/no-unused-custom-properties -- defines the field label mod */
--spectrum-actionbar-item-counter-line-height: var(--spectrum-line-height-100);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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  */

--spectrum-actionbar-item-counter-color: var(--spectrum-neutral-content-color-default);

/* emphasized variation colors */
--spectrum-actionbar-emphasized-background-color: var(--spectrum-informative-background-color-default);
--spectrum-actionbar-emphasized-item-counter-color: var(--spectrum-white);
/* colors - applied to popover */
--spectrum-actionbar-popover-background-color: var(--spectrum-background-elevated-color);
--spectrum-actionbar-popover-border-color: var(--spectrum-action-bar-border-color);

/* spacing of action bar bottom and horizontal outer edge */
--spectrum-actionbar-spacing-outer-edge: var(--spectrum-spacing-300);

/* spacing of close button */
--spectrum-actionbar-spacing-close-button-top: var(--spectrum-spacing-100);
--spectrum-actionbar-spacing-close-button-start: var(--spectrum-spacing-100);
--spectrum-actionbar-spacing-close-button-end: var(--spectrum-spacing-75);

/* spacing of item counter field label */
--spectrum-actionbar-spacing-item-counter-top: var(--spectrum-action-bar-top-to-item-counter);
--spectrum-actionbar-spacing-item-counter-end: var(--spectrum-spacing-400);

/* spacing of action group */
--spectrum-actionbar-spacing-action-group-top: var(--spectrum-spacing-100);
--spectrum-actionbar-spacing-action-group-end: var(--spectrum-spacing-100);

/* drop shadow */
--spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-x);
--spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-y);
--spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-blur);
--spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-color);
--spectrum-actionbar-shadow-horizontal: var(--spectrum-drop-shadow-elevated-x);
--spectrum-actionbar-shadow-vertical: var(--spectrum-drop-shadow-elevated-y);
--spectrum-actionbar-shadow-blur: var(--spectrum-drop-shadow-elevated-blur);
--spectrum-actionbar-shadow-color: var(--spectrum-drop-shadow-elevated-color);

&.spectrum-ActionBar--emphasized {
--spectrum-actionbar-item-counter-color: var(--spectrum-gray-25);
--spectrum-actionbar-popover-background-color: var(--spectrum-neutral-content-color-default);
}

/* cjk language support for item counter */
&:lang(ja),
Expand All @@ -57,17 +51,6 @@
}
}

/* windows high contrast mode */
@media (forced-colors: active) {
.spectrum-ActionBar {
--highcontrast-actionbar-popover-border-color: CanvasText;
}

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

/* ActionBar is outer wrapper with nested popover component within */
.spectrum-ActionBar {
/* creates horizontal spacing to edge */
Expand All @@ -94,11 +77,12 @@
.spectrum-ActionBar-popover {
/* popover is ActionBar height */
block-size: var(--mod-actionbar-height, var(--spectrum-actionbar-height));
min-inline-size: var(--mod-actionbar-minimum-width, var(--spectrum-actionbar-minimum-width));
box-sizing: border-box;
inline-size: 100%;
margin: auto;
padding-block-start: 0;
padding-block-end: 0;
padding-inline: var(--mod-actionbar-spacing-action-group-edge, var(--spectrum-actionbar-spacing-padding-inline));
padding-block: var(--mod-actionbar-spacing-top-area, var(--spectrum-actionbar-spacing-top-area)) var(--mod-actionbar-spacing-bottom-area, var(--spectrum-actionbar-spacing-bottom-area));

/* Be relative so our width can be restricted */
position: relative;
Expand All @@ -115,27 +99,15 @@
/* inner layout of content items */
display: flex;
flex-direction: row;
}

/* close button */
.spectrum-CloseButton {
margin-inline-start: var(--mod-actionbar-spacing-close-button-start, var(--spectrum-actionbar-spacing-close-button-start));
margin-inline-end: var(--mod-actionbar-spacing-close-button-end, var(--spectrum-actionbar-spacing-close-button-end));
margin-block-start: var(--mod-actionbar-spacing-close-button-top, var(--spectrum-actionbar-spacing-close-button-top));
flex-shrink: 0;
align-items: center;
}

/* item counter */
.spectrum-FieldLabel {
margin-inline-end: var(--mod-actionbar-spacing-item-counter-end, var(--spectrum-actionbar-spacing-item-counter-end));
margin-block-start: var(--mod-actionbar-spacing-item-counter-top, var(--spectrum-actionbar-spacing-item-counter-top));

/* neutralize padding for correct spacing within ActionBar */
padding: 0;

font-size: var(--mod-actionbar-item-counter-font-size, var(--spectrum-actionbar-item-counter-font-size));
--mod-fieldlabel-font-size: var(--spectrum-action-bar-counter-font-size);
--mod-fieldlabel-line-height: var(--spectrum-actionbar-item-counter-line-height);
color: var(--mod-actionbar-item-counter-color, var(--spectrum-actionbar-item-counter-color));
line-height: var(--mod-actionbar-item-counter-line-height, var(--spectrum-actionbar-item-counter-line-height));
padding-inline-start: var(--mod-actionbar-close-button-to-counter, var(--spectrum-actionbar-close-button-to-counter));

/* cjk language support */
&:lang(ja),
Expand All @@ -147,26 +119,9 @@

/* action group */
.spectrum-ActionGroup {
margin-inline-end: var(--mod-actionbar-spacing-action-group-end, var(--spectrum-actionbar-spacing-action-group-end));
margin-block-start: var(--mod-actionbar-spacing-action-group-top, var(--spectrum-actionbar-spacing-action-group-top));

/* align to end by default */
margin-inline-start: auto;
}
}

.spectrum-ActionBar--emphasized {
.spectrum-ActionBar-popover {
filter: none;
background-color: var(--mod-actionbar-emphasized-background-color, var(--spectrum-actionbar-emphasized-background-color));

/* border transparent instead of none so WHCM will have visible border */
border-color: transparent;
}

/* ensure text is legible on emphasized background */
.spectrum-FieldLabel {
color: var(--mod-actionbar-emphasized-item-counter-color, var(--spectrum-actionbar-emphasized-item-counter-color));
padding-inline-start: var(--mod-actionbar-spacing-label-to-action-group, var(--spectrum-actionbar-spacing-label-to-action-group)); /* space between label and action group */
}
}

Expand All @@ -184,3 +139,10 @@
.spectrum-ActionBar--flexible .spectrum-ActionBar-popover {
inline-size: auto;
}

/* windows high contrast mode */
@media (forced-colors: active) {
.spectrum-ActionBar {
--highcontrast-actionbar-popover-border-color: CanvasText;
}
}
5 changes: 4 additions & 1 deletion components/actionbar/stories/actionbar.stories.js
View file
Open in desktop
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could also add

status: {
    type: "migrated",
}

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

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Screenshot 2025-05-06 at 10 39 05 AM

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.

Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,9 @@ export default {
},
packageJson,
metadata,
status: {
type: "migrated",
},
},
};

Expand All @@ -92,7 +95,7 @@ WithForcedColors.parameters = {

// ********* DOCS ONLY ********* //
/**
* The emphasized action bar has a blue background that adds visual emphasis on the actions and selection. Use this for when the bar should call attention (e.g., floating in a table).
* The emphasized action bar has a neutral background that adds visual emphasis on the actions and selection. Use this for when the bar should call attention (e.g., floating in a table).
*/
export const Emphasized = BehavioralTemplate.bind({});
Emphasized.tags = ["!dev"];
Expand Down
16 changes: 11 additions & 5 deletions components/actionbar/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import "../index.css";

export const Template = ({
rootClass = "spectrum-ActionBar",
size = "m",
isOpen = true,
isEmphasized = false,
isSticky = false,
Expand All @@ -25,7 +24,6 @@ export const Template = ({
<div
class=${classMap({
[rootClass]: true,
[`${rootClass}--size${size?.toUpperCase()}`]: typeof size !== "undefined",
[`${rootClass}--emphasized`]: isEmphasized,
[`${rootClass}--sticky`]: isSticky,
[`${rootClass}--fixed`]: isFixed,
Expand All @@ -42,13 +40,21 @@ export const Template = ({
content: [
CloseButton({
label: "Clear selection",
staticColor: isEmphasized ? "white" : undefined,
staticColor: isEmphasized
? context.globals?.color === "dark"
? "black"
: "white"
: undefined,
}, context),
FieldLabel({ size: "s", label: "2 Selected" }, context),
FieldLabel({ size: "s", label: "224 Selected" }, context),
ActionGroup({
size: "m",
areQuiet: true,
staticColor: isEmphasized ? "white" : undefined,
staticColor: isEmphasized
? context.globals?.color === "dark"
? "black"
: "white"
: undefined,
content: [
{
iconName: "Edit",
Expand Down
Loading