Skip to content

Commit ce33d1e

Browse files
cdransfcdransf
committed
fix(clear button): align background color and hover state for disabled variant
1 parent 50372e0 commit ce33d1e

File tree

4 files changed

+40
-31
lines changed

4 files changed

+40
-31
lines changed

‎.changeset/plenty-keys-behave.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@spectrum-css/clearbutton": minor
3+
---
4+
5+
More closely aligns the clear button styling with the close button styling by adopting the pattern of classes targeting the disabled state. Scopes hover indicators to components that are not disabled and aligns the disabled colors used by the two components.

‎components/clearbutton/index.css

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
--spectrum-clear-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
2323
--spectrum-clear-button-icon-color-down: var(--spectrum-neutral-content-color-down);
2424
--spectrum-clear-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);
25+
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
2526

2627
&.spectrum-ClearButton--sizeS {
2728
--spectrum-clear-button-height: var(--spectrum-component-height-75);
@@ -56,21 +57,12 @@
5657
--mod-clear-button-background-color-down: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-400));
5758
--mod-clear-button-background-color-key-focus: var(--spectrum-clear-button-background-color-hover-over-background, var(--spectrum-transparent-white-300));
5859
}
59-
60-
&:disabled,
61-
&.is-disabled {
62-
--mod-clear-button-icon-color: var(--mod-clear-button-icon-color-disabled, var(--spectrum-disabled-content-color));
63-
--mod-clear-button-icon-color-hover: var(--spectrum-clear-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
64-
--mod-clear-button-icon-color-down: var(--spectrum-clear-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
65-
--mod-clear-button-background-color: var(--mod-clear-button-background-color-disabled, transparent);
66-
}
6760
}
6861

6962
.spectrum-ClearButton {
7063
block-size: var(--mod-clear-button-height, var(--spectrum-clear-button-height));
7164
inline-size: var(--mod-clear-button-width, var(--spectrum-clear-button-width));
7265
border-radius: 100%;
73-
cursor: pointer;
7466

7567
background-color: var(--mod-clear-button-background-color, transparent);
7668
margin: 0;
@@ -85,24 +77,25 @@
8577
margin-inline: auto;
8678
}
8779

88-
&:hover {
80+
&:not(:disabled):hover {
8981
color: var(--highcontrast-clear-button-icon-color-hover, var(--mod-clear-button-icon-color-hover, var(--spectrum-clear-button-icon-color-hover)));
82+
cursor: pointer;
9083

9184
.spectrum-ClearButton-fill {
9285
background-color: var(--mod-clear-button-background-color-hover, var(--spectrum-clear-button-background-color-hover));
9386
}
9487
}
9588

96-
&:active {
89+
&:not(:disabled):active {
9790
color: var(--mod-clear-button-icon-color-down, var(--spectrum-clear-button-icon-color-down));
9891

9992
.spectrum-ClearButton-fill {
10093
background-color: var(--mod-clear-button-background-color-down, var(--spectrum-clear-button-background-color-down));
10194
}
10295
}
10396

104-
&:focus-visible,
105-
&:focus-within {
97+
&:not(:disabled):focus-visible,
98+
&:not(:disabled):focus-within {
10699
color: var(--mod-clear-button-icon-color-key-focus, var(--spectrum-clear-button-icon-color-key-focus));
107100

108101
.spectrum-ClearButton-fill {
@@ -111,6 +104,15 @@
111104
}
112105
}
113106

107+
.spectrum-ClearButton:disabled,
108+
.spectrum-ClearButton.is-disabled {
109+
--mod-clear-button-background-color: var(--spectrum-clear-button-background-color-quiet);
110+
111+
.spectrum-ClearButton-icon {
112+
color: var( --highcontrast-closebutton-icon-color-disabled, var(--mod-clear-button-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
113+
}
114+
}
115+
114116
.spectrum-ClearButton-fill {
115117
background-color: var(--mod-clear-button-background-color, var(--spectrum-clear-button-background-color));
116118

‎components/clearbutton/metadata/metadata.json

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,35 @@
11
{
22
"sourceFile": "index.css",
33
"selectors": [
4-
".js-focus-within .spectrum-ClearButton[focus-within]",
5-
".js-focus-within .spectrum-ClearButton[focus-within] .spectrum-ClearButton-fill",
4+
".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within]",
5+
".js-focus-within .spectrum-ClearButton:not(:disabled)[focus-within] .spectrum-ClearButton-fill",
66
".spectrum-ClearButton",
77
".spectrum-ClearButton > .spectrum-Icon",
88
".spectrum-ClearButton--overBackground:focus-visible",
99
".spectrum-ClearButton-fill",
1010
".spectrum-ClearButton.is-disabled",
11+
".spectrum-ClearButton.is-disabled .spectrum-ClearButton-icon",
1112
".spectrum-ClearButton.spectrum-ClearButton--overBackground",
1213
".spectrum-ClearButton.spectrum-ClearButton--quiet",
1314
".spectrum-ClearButton.spectrum-ClearButton--sizeL",
1415
".spectrum-ClearButton.spectrum-ClearButton--sizeS",
1516
".spectrum-ClearButton.spectrum-ClearButton--sizeXL",
16-
".spectrum-ClearButton:active",
17-
".spectrum-ClearButton:active .spectrum-ClearButton-fill",
1817
".spectrum-ClearButton:disabled",
19-
".spectrum-ClearButton:focus-visible",
20-
".spectrum-ClearButton:focus-visible .spectrum-ClearButton-fill",
21-
".spectrum-ClearButton:focus-within",
22-
".spectrum-ClearButton:focus-within .spectrum-ClearButton-fill",
23-
".spectrum-ClearButton:hover",
24-
".spectrum-ClearButton:hover .spectrum-ClearButton-fill",
18+
".spectrum-ClearButton:disabled .spectrum-ClearButton-icon",
2519
".spectrum-ClearButton:not(:disabled)",
26-
".spectrum-ClearButton[focus-within].js-focus-within",
27-
".spectrum-ClearButton[focus-within].js-focus-within .spectrum-ClearButton-fill"
20+
".spectrum-ClearButton:not(:disabled):active",
21+
".spectrum-ClearButton:not(:disabled):active .spectrum-ClearButton-fill",
22+
".spectrum-ClearButton:not(:disabled):focus-visible",
23+
".spectrum-ClearButton:not(:disabled):focus-visible .spectrum-ClearButton-fill",
24+
".spectrum-ClearButton:not(:disabled):focus-within",
25+
".spectrum-ClearButton:not(:disabled):focus-within .spectrum-ClearButton-fill",
26+
".spectrum-ClearButton:not(:disabled):hover",
27+
".spectrum-ClearButton:not(:disabled):hover .spectrum-ClearButton-fill",
28+
".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within",
29+
".spectrum-ClearButton:not(:disabled)[focus-within].js-focus-within .spectrum-ClearButton-fill"
2830
],
2931
"modifiers": [
3032
"--mod-clear-button-background-color",
31-
"--mod-clear-button-background-color-disabled",
3233
"--mod-clear-button-background-color-down",
3334
"--mod-clear-button-background-color-hover",
3435
"--mod-clear-button-background-color-key-focus",
@@ -55,10 +56,8 @@
5556
"--spectrum-clear-button-height",
5657
"--spectrum-clear-button-icon-color",
5758
"--spectrum-clear-button-icon-color-down",
58-
"--spectrum-clear-button-icon-color-down-disabled",
5959
"--spectrum-clear-button-icon-color-down-over-background",
6060
"--spectrum-clear-button-icon-color-hover",
61-
"--spectrum-clear-button-icon-color-hover-disabled",
6261
"--spectrum-clear-button-icon-color-hover-over-background",
6362
"--spectrum-clear-button-icon-color-key-focus",
6463
"--spectrum-clear-button-icon-color-key-focus-over-background",
@@ -67,11 +66,12 @@
6766
"--spectrum-clear-button-width"
6867
],
6968
"global": [
69+
"--spectrum-closebutton-icon-color-disabled",
7070
"--spectrum-component-height-100",
7171
"--spectrum-component-height-200",
7272
"--spectrum-component-height-300",
7373
"--spectrum-component-height-75",
74-
"--spectrum-disabled-content-color",
74+
"--spectrum-disabled-static-white-content-color",
7575
"--spectrum-gray-200",
7676
"--spectrum-gray-300",
7777
"--spectrum-gray-400",
@@ -91,5 +91,8 @@
9191
"--system-spectrum-clearbutton-spectrum-clear-button-background-color-key-focus"
9292
],
9393
"passthroughs": [],
94-
"high-contrast": ["--highcontrast-clear-button-icon-color-hover"]
94+
"high-contrast": [
95+
"--highcontrast-clear-button-icon-color-hover",
96+
"--highcontrast-closebutton-icon-color-disabled"
97+
]
9598
}

‎components/clearbutton/metadata/mods.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
| Modifiable custom properties |
22
| ----------------------------------------------- |
33
| `--mod-clear-button-background-color` |
4-
| `--mod-clear-button-background-color-disabled` |
54
| `--mod-clear-button-background-color-down` |
65
| `--mod-clear-button-background-color-hover` |
76
| `--mod-clear-button-background-color-key-focus` |

0 commit comments

Comments
 (0)