Skip to content

Commit 95e4353

Browse files
mlogsdon18mlogsdon18
authored
fix(actionbutton): update action button color tokens (#1982)
* style(actionbutton): fixing selected background color updating to new color tokens moved out of spectrum.css into index.css since it applies to express as well added mods * style(actionbutton): fix selected emphasized colors move colors that apply to both spectrum and express into index update selected content color to gray-50 add variables for selected emphasized content color * refactor(actionbutton): add mods * chore(actionbutton): adding additional stories for different states adding sections in storybook for static white and black * chore(actionbutton): remove storybook custom styling and add quiet stories * fix(checkbox): make styles more specific to avoid being overwritten
1 parent 8b88d5f commit 95e4353

File tree

12 files changed

+431
-187
lines changed

12 files changed

+431
-187
lines changed

‎components/actionbutton/index.css

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,39 @@ governing permissions and limitations under the License.
1717
--spectrum-actionbutton-border-radius: var(--spectrum-corner-radius-100);
1818
--spectrum-actionbutton-border-width: var(--spectrum-border-width-100);
1919

20+
--spectrum-actionbutton-content-color-default: var(--spectrum-neutral-content-color-default);
21+
--spectrum-actionbutton-content-color-hover: var(--spectrum-neutral-content-color-hover);
22+
--spectrum-actionbutton-content-color-down: var(--spectrum-neutral-content-color-down);
23+
--spectrum-actionbutton-content-color-focus: var(--spectrum-neutral-content-color-key-focus);
24+
2025
--spectrum-actionbutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
2126
--spectrum-actionbutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
2227
--spectrum-actionbutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
2328
--spectrum-actionbutton-focus-indicator-border-radius: calc(var(--spectrum-actionbutton-border-radius) + var(--spectrum-actionbutton-focus-indicator-gap));
29+
30+
&.is-selected {
31+
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
32+
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
33+
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
34+
--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected, var(--spectrum-neutral-background-color-selected-key-focus));
35+
36+
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected, var(--spectrum-gray-50));
37+
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected, var(--spectrum-gray-50));
38+
--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected, var(--spectrum-gray-50));
39+
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected, var(--spectrum-gray-50));
40+
41+
&.spectrum-ActionButton--emphasized {
42+
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected-emphasized, var(--spectrum-accent-background-color-default));
43+
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected-emphasized, var(--spectrum-accent-background-color-hover));
44+
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected-emphasized, var(--spectrum-accent-background-color-down));
45+
--mod-actionbutton-background-color-focus: var(--mod-actionbutton-background-color-focus-selected-emphasized, var(--spectrum-accent-background-color-key-focus));
46+
47+
--mod-actionbutton-content-color-default: var(--mod-actionbutton-content-color-default-selected-emphasized, var(--spectrum-white));
48+
--mod-actionbutton-content-color-hover: var(--mod-actionbutton-content-color-hover-selected-emphasized, var(--spectrum-white));
49+
--mod-actionbutton-content-color-down: var(--mod-actionbutton-content-color-down-selected-emphasized, var(--spectrum-white));
50+
--mod-actionbutton-content-color-focus: var(--mod-actionbutton-content-color-focus-selected-emphasized, var(--spectrum-white));
51+
}
52+
}
2453
}
2554

2655
.spectrum-ActionButton--sizeXS {

‎components/actionbutton/metadata/mods.md

Lines changed: 50 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,50 @@
1-
| Modifiable Custom Properties |
2-
| -------------------------------------------------- |
3-
| `--mod-actionbutton-animation-duration` |
4-
| `--mod-actionbutton-background-color-default` |
5-
| `--mod-actionbutton-background-color-disabled` |
6-
| `--mod-actionbutton-background-color-down` |
7-
| `--mod-actionbutton-background-color-focus` |
8-
| `--mod-actionbutton-background-color-hover` |
9-
| `--mod-actionbutton-border-color-default` |
10-
| `--mod-actionbutton-border-color-disabled` |
11-
| `--mod-actionbutton-border-color-down` |
12-
| `--mod-actionbutton-border-color-focus` |
13-
| `--mod-actionbutton-border-color-hover` |
14-
| `--mod-actionbutton-border-radius` |
15-
| `--mod-actionbutton-border-width` |
16-
| `--mod-actionbutton-content-color-default` |
17-
| `--mod-actionbutton-content-color-disabled` |
18-
| `--mod-actionbutton-content-color-down` |
19-
| `--mod-actionbutton-content-color-focus` |
20-
| `--mod-actionbutton-content-color-hover` |
21-
| `--mod-actionbutton-edge-to-hold-icon` |
22-
| `--mod-actionbutton-edge-to-text` |
23-
| `--mod-actionbutton-edge-to-visual` |
24-
| `--mod-actionbutton-edge-to-visual-only` |
25-
| `--mod-actionbutton-focus-indicator-border-radius` |
26-
| `--mod-actionbutton-focus-indicator-color` |
27-
| `--mod-actionbutton-focus-indicator-gap` |
28-
| `--mod-actionbutton-focus-indicator-thickness` |
29-
| `--mod-actionbutton-font-size` |
30-
| `--mod-actionbutton-height` |
31-
| `--mod-actionbutton-icon-size` |
32-
| `--mod-actionbutton-label-color` |
33-
| `--mod-actionbutton-min-width` |
34-
| `--mod-actionbutton-text-to-visual` |
1+
| Modifiable Custom Properties |
2+
| ----------------------------------------------------------------- |
3+
| `--mod-actionbutton-animation-duration` |
4+
| `--mod-actionbutton-background-color-default` |
5+
| `--mod-actionbutton-background-color-default-selected` |
6+
| `--mod-actionbutton-background-color-default-selected-emphasized` |
7+
| `--mod-actionbutton-background-color-disabled` |
8+
| `--mod-actionbutton-background-color-down` |
9+
| `--mod-actionbutton-background-color-down-selected` |
10+
| `--mod-actionbutton-background-color-down-selected-emphasized` |
11+
| `--mod-actionbutton-background-color-focus` |
12+
| `--mod-actionbutton-background-color-focus-selected` |
13+
| `--mod-actionbutton-background-color-focus-selected-emphasized` |
14+
| `--mod-actionbutton-background-color-hover` |
15+
| `--mod-actionbutton-background-color-hover-selected` |
16+
| `--mod-actionbutton-background-color-hover-selected-emphasized` |
17+
| `--mod-actionbutton-border-color-default` |
18+
| `--mod-actionbutton-border-color-disabled` |
19+
| `--mod-actionbutton-border-color-down` |
20+
| `--mod-actionbutton-border-color-focus` |
21+
| `--mod-actionbutton-border-color-hover` |
22+
| `--mod-actionbutton-border-radius` |
23+
| `--mod-actionbutton-border-width` |
24+
| `--mod-actionbutton-content-color-default` |
25+
| `--mod-actionbutton-content-color-default-selected` |
26+
| `--mod-actionbutton-content-color-default-selected-emphasized` |
27+
| `--mod-actionbutton-content-color-disabled` |
28+
| `--mod-actionbutton-content-color-down` |
29+
| `--mod-actionbutton-content-color-down-selected` |
30+
| `--mod-actionbutton-content-color-down-selected-emphasized` |
31+
| `--mod-actionbutton-content-color-focus` |
32+
| `--mod-actionbutton-content-color-focus-selected` |
33+
| `--mod-actionbutton-content-color-focus-selected-emphasized` |
34+
| `--mod-actionbutton-content-color-hover` |
35+
| `--mod-actionbutton-content-color-hover-selected` |
36+
| `--mod-actionbutton-content-color-hover-selected-emphasized` |
37+
| `--mod-actionbutton-edge-to-hold-icon` |
38+
| `--mod-actionbutton-edge-to-text` |
39+
| `--mod-actionbutton-edge-to-visual` |
40+
| `--mod-actionbutton-edge-to-visual-only` |
41+
| `--mod-actionbutton-focus-indicator-border-radius` |
42+
| `--mod-actionbutton-focus-indicator-color` |
43+
| `--mod-actionbutton-focus-indicator-gap` |
44+
| `--mod-actionbutton-focus-indicator-thickness` |
45+
| `--mod-actionbutton-font-size` |
46+
| `--mod-actionbutton-height` |
47+
| `--mod-actionbutton-icon-size` |
48+
| `--mod-actionbutton-label-color` |
49+
| `--mod-actionbutton-min-width` |
50+
| `--mod-actionbutton-text-to-visual` |

‎components/actionbutton/stories/actionbutton-quiet.stories.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import { argTypes, ActionButtons } from "./index";
2+
3+
export default {
4+
title: "Components/Action button/Quiet",
5+
description:
6+
"The action button component represents an action a user can take.",
7+
component: "ActionButton",
8+
argTypes: argTypes,
9+
args: {
10+
rootClass: "spectrum-ActionButton",
11+
size: "m",
12+
iconName: "More",
13+
isQuiet: true,
14+
isEmphasized: false,
15+
hasPopup: false,
16+
},
17+
parameters: {
18+
actions: {
19+
handles: ["click .spectrum-ActionButton:not([disabled])"],
20+
},
21+
status: {
22+
type: process.env.MIGRATED_PACKAGES.includes("actionbutton")
23+
? "migrated"
24+
: undefined,
25+
},
26+
},
27+
};
28+
29+
export const Default = ActionButtons.bind({});
30+
Default.args = {};
31+
32+
export const Selected = ActionButtons.bind({});
33+
Selected.args = {
34+
isSelected: true
35+
};
36+
37+
export const Disabled = ActionButtons.bind({});
38+
Disabled.args = {
39+
isDisabled: true
40+
};
41+
42+
export const SelectedDisabled = ActionButtons.bind({});
43+
SelectedDisabled.args = {
44+
isSelected: true,
45+
isDisabled: true
46+
};
47+
48+
export const Emphasized = ActionButtons.bind({});
49+
Emphasized.args = {
50+
isEmphasized: true,
51+
};
52+
53+
export const SelectedEmphasized = ActionButtons.bind({});
54+
SelectedEmphasized.args = {
55+
isEmphasized: true,
56+
isSelected: true
57+
};

‎components/actionbutton/stories/actionbutton-staticblack.stories.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { argTypes, ActionButtons } from "./index";
2+
3+
export default {
4+
title: "Components/Action button/Static Black",
5+
description:
6+
"The action button component represents an action a user can take.",
7+
component: "ActionButton",
8+
argTypes: argTypes,
9+
args: {
10+
rootClass: "spectrum-ActionButton",
11+
size: "m",
12+
iconName: "More",
13+
isQuiet: false,
14+
isEmphasized: false,
15+
hasPopup: false,
16+
backgroundColor: "rgb(181, 209, 211)",
17+
staticColor: "black",
18+
},
19+
parameters: {
20+
actions: {
21+
handles: ["click .spectrum-ActionButton:not([disabled])"],
22+
},
23+
status: {
24+
type: process.env.MIGRATED_PACKAGES.includes("actionbutton")
25+
? "migrated"
26+
: undefined,
27+
},
28+
},
29+
};
30+
31+
export const Default = ActionButtons.bind({});
32+
Default.args = {};
33+
34+
export const Selected = ActionButtons.bind({});
35+
Selected.args = {
36+
isSelected: true
37+
};
38+
39+
export const Disabled = ActionButtons.bind({});
40+
Disabled.args = {
41+
isDisabled: true
42+
};
43+
44+
export const SelectedDisabled = ActionButtons.bind({});
45+
SelectedDisabled.args = {
46+
isSelected: true,
47+
isDisabled: true
48+
};
49+
50+
export const Quiet = ActionButtons.bind({});
51+
Quiet.args = {
52+
isQuiet: true
53+
};

‎components/actionbutton/stories/actionbutton-staticwhite.stories.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { argTypes, ActionButtons } from "./index";
2+
3+
export default {
4+
title: "Components/Action button/Static White",
5+
description:
6+
"The action button component represents an action a user can take.",
7+
component: "ActionButton",
8+
argTypes: argTypes,
9+
args: {
10+
rootClass: "spectrum-ActionButton",
11+
size: "m",
12+
iconName: "More",
13+
isQuiet: false,
14+
isEmphasized: false,
15+
hasPopup: false,
16+
backgroundColor: "rgb(15, 121, 125)",
17+
staticColor: "white",
18+
},
19+
parameters: {
20+
actions: {
21+
handles: ["click .spectrum-ActionButton:not([disabled])"],
22+
},
23+
status: {
24+
type: process.env.MIGRATED_PACKAGES.includes("actionbutton")
25+
? "migrated"
26+
: undefined,
27+
},
28+
},
29+
};
30+
31+
export const Default = ActionButtons.bind({});
32+
Default.args = {};
33+
34+
export const Selected = ActionButtons.bind({});
35+
Selected.args = {
36+
isSelected: true
37+
};
38+
39+
export const Disabled = ActionButtons.bind({});
40+
Disabled.args = {
41+
isDisabled: true
42+
};
43+
44+
export const SelectedDisabled = ActionButtons.bind({});
45+
SelectedDisabled.args = {
46+
isSelected: true,
47+
isDisabled: true
48+
};
49+
50+
export const Quiet = ActionButtons.bind({});
51+
Quiet.args = {
52+
isQuiet: true
53+
};

0 commit comments

Comments
 (0)