Skip to content

Commit 4d8da53

Browse files
Melissa Thompsonpfulton
authored and
castastrophe
committed
feat(closebutton)!: migrate to S2 (#2564)
BREAKING CHANGE: migrates Close Button to Spectrum 2 Additionally: * test: increase chromatic coverage * fix(closebutton): pass staticColor as arg for SB display * chore(closebutton): remove themes dir * docs(closebutton): adds s2 migration notes * chore(closebutton): specify s2 tokens release for dependency --------- Co-authored-by: Patrick Fulton <pfulton@adobe.com>
1 parent fd56220 commit 4d8da53

File tree

9 files changed

+163
-354
lines changed

9 files changed

+163
-354
lines changed

‎components/closebutton/index.css‎

Lines changed: 122 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -11,99 +11,116 @@
1111
* governing permissions and limitations under the License.
1212
*/
1313

14-
@import "./themes/spectrum-two.css";
1514
@import "@spectrum-css/commons/basebutton.css";
1615

17-
/* Windows high contrast mode */
18-
@media (forced-colors: active) {
19-
.spectrum-CloseButton {
20-
--highcontrast-closebutton-icon-color-disabled: GrayText;
21-
--highcontrast-closebutton-icon-color-down: Highlight;
22-
--highcontrast-closebutton-icon-color-hover: Highlight;
23-
--highcontrast-closebutton-icon-color-focus: Highlight;
24-
--highcontrast-closebutton-background-color-default: ButtonFace;
25-
--highcontrast-closebutton-focus-indicator-color: ButtonText;
26-
27-
&:focus-visible {
28-
&::after {
29-
forced-color-adjust: none;
30-
margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap));
31-
transition:
32-
opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out,
33-
margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out;
34-
}
35-
}
36-
}
37-
38-
.spectrum-CloseButton--staticBlack {
39-
--highcontrast-closebutton-static-background-color-default: ButtonFace;
40-
--highcontrast-closebutton-icon-color-default: Highlight;
41-
--highcontrast-closebutton-icon-color-disabled: GrayText;
42-
}
43-
44-
.spectrum-CloseButton--staticWhite {
45-
--highcontrast-closebutton-static-background-color-default: ButtonFace;
46-
--highcontrast-closebutton-icon-color-default: Highlight;
47-
--highcontrast-closebutton-icon-color-disabled: Highlight;
48-
}
49-
}
50-
5116
.spectrum-CloseButton {
17+
--spectrum-closebutton-border-radius: var(--spectrum-corner-radius-full);
18+
5219
/* Cross icon */
5320
--spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);
5421
--spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover);
5522
--spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down);
5623
--spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
5724
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color);
5825

59-
/* Focus ring */
26+
/* Focus indicator */
6027
--spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
6128
--spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
6229
--spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
6330

31+
/* Size */
32+
--spectrum-closebutton-size: var(--spectrum-component-height-100);
33+
6434
--spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
6535

66-
&.spectrum-CloseButton--sizeS {
67-
--spectrum-closebutton-size: var(--spectrum-component-height-75);
68-
--spectrum-closebutton-border-radius: var(--spectrum-component-height-75);
69-
}
36+
/* Background color */
37+
--spectrum-closebutton-background-color-default: transparent;
38+
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-100);
39+
--spectrum-closebutton-background-color-down: var(--spectrum-gray-100);
40+
--spectrum-closebutton-background-color-focus: var(--spectrum-gray-100);
41+
}
7042

71-
&,
72-
&.spectrum-CloseButton--sizeM {
73-
--spectrum-closebutton-size: var(--spectrum-component-height-100);
74-
--spectrum-closebutton-border-radius: var(--spectrum-component-height-100);
75-
}
43+
.spectrum-CloseButton--sizeS {
44+
--spectrum-closebutton-size: var(--spectrum-component-height-75);
45+
}
7646

77-
&.spectrum-CloseButton--sizeL {
78-
--spectrum-closebutton-size: var(--spectrum-component-height-200);
79-
--spectrum-closebutton-border-radius: var(--spectrum-component-height-200);
80-
}
47+
.spectrum-CloseButton--sizeL {
48+
--spectrum-closebutton-size: var(--spectrum-component-height-200);
49+
}
8150

82-
&.spectrum-CloseButton--sizeXL {
83-
--spectrum-closebutton-size: var(--spectrum-component-height-300);
84-
--spectrum-closebutton-border-radius: var(--spectrum-component-height-300);
85-
}
51+
.spectrum-CloseButton--sizeXL {
52+
--spectrum-closebutton-size: var(--spectrum-component-height-300);
53+
}
8654

87-
&.spectrum-CloseButton--staticWhite {
88-
--spectrum-closebutton-static-background-color-default: transparent;
55+
.spectrum-CloseButton--staticWhite {
56+
/* Cross icon */
57+
--spectrum-closebutton-icon-color-default: var(--spectrum-transparent-white-800);
58+
--spectrum-closebutton-icon-color-hover: var(--spectrum-transparent-white-900);
59+
--spectrum-closebutton-icon-color-down: var(--spectrum-transparent-white-900);
60+
--spectrum-closebutton-icon-color-focus: var(--spectrum-transparent-white-900);
61+
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-background-color);
62+
63+
/* Background color */
64+
--spectrum-closebutton-background-color-default: transparent;
65+
--spectrum-closebutton-background-color-hover: var(--spectrum-transparent-white-100);
66+
--spectrum-closebutton-background-color-down: var(--spectrum-transparent-white-100);
67+
--spectrum-closebutton-background-color-focus: var(--spectrum-transparent-white-100);
68+
69+
/* Focus indicator */
70+
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
71+
}
8972

90-
--spectrum-closebutton-icon-color-default: var(--spectrum-white);
91-
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
92-
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
93-
}
73+
.spectrum-CloseButton--staticBlack {
74+
/* Cross icon */
75+
--spectrum-closebutton-icon-color-default: var(--spectrum-transparent-black-800);
76+
--spectrum-closebutton-icon-color-hover: var(--spectrum-transparent-black-900);
77+
--spectrum-closebutton-icon-color-down: var(--spectrum-transparent-black-900);
78+
--spectrum-closebutton-icon-color-focus: var(--spectrum-transparent-black-900);
79+
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-background-color);
80+
81+
/* Background color */
82+
--spectrum-closebutton-background-color-default: transparent;
83+
--spectrum-closebutton-background-color-hover: var(--spectrum-transparent-black-100);
84+
--spectrum-closebutton-background-color-down: var(--spectrum-transparent-black-100);
85+
--spectrum-closebutton-background-color-focus: var(--spectrum-transparent-black-100);
86+
87+
/* Focus indicator */
88+
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
89+
}
90+
91+
/* Windows high contrast mode */
92+
@media (forced-colors: active) {
93+
.spectrum-CloseButton {
94+
--highcontrast-closebutton-icon-color-disabled: GrayText;
95+
--highcontrast-closebutton-icon-color-down: Highlight;
96+
--highcontrast-closebutton-icon-color-hover: Highlight;
97+
--highcontrast-closebutton-icon-color-focus: Highlight;
98+
--highcontrast-closebutton-background-color-default: ButtonFace;
99+
--highcontrast-closebutton-focus-indicator-color: ButtonText;
94100

95-
&.spectrum-CloseButton--staticBlack {
96-
--spectrum-closebutton-static-background-color-default: transparent;
101+
&:focus-visible::after {
102+
forced-color-adjust: none;
103+
margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap));
104+
transition:
105+
opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out,
106+
margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out;
107+
}
108+
}
97109

98-
--spectrum-closebutton-icon-color-default: var(--spectrum-black);
99-
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
100-
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
110+
.spectrum-CloseButton--staticWhite {
111+
--highcontrast-closebutton-icon-color-disabled: Highlight;
101112
}
113+
}
102114

115+
a.spectrum-CloseButton {
116+
@extend %spectrum-AnchorButton;
117+
}
118+
119+
.spectrum-CloseButton {
103120
@extend %spectrum-BaseButton;
104121

105-
block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size));
106-
inline-size: var(--mod-closebutton-width, var(--mod-closebutton-height, var(--spectrum-closebutton-size)));
122+
block-size: var(--mod-closebutton-size, var(--spectrum-closebutton-size));
123+
inline-size: var(--mod-closebutton-size, var(--spectrum-closebutton-size));
107124

108125
position: relative;
109126

@@ -125,7 +142,6 @@
125142
margin-block-start: var(--mod-closebutton-margin-top);
126143
align-self: var(--mod-closebutton-align-self);
127144

128-
/* Represents focus ring */
129145
&::after {
130146
pointer-events: none;
131147
content: "";
@@ -135,7 +151,7 @@
135151
inset-block-end: 0;
136152
inset-block-start: 0;
137153
margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1);
138-
border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)));
154+
border-radius: calc(var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)));
139155
transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
140156
}
141157

@@ -148,106 +164,54 @@
148164
}
149165
}
150166

151-
&:not(:disabled) {
152-
background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)));
167+
/* COLORS */
168+
&:not(:disabled) {
169+
background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)));
153170

154-
&:hover {
155-
background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover));
171+
&:hover {
172+
background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover));
156173

157-
.spectrum-CloseButton-UIIcon {
158-
color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)));
159-
}
160-
}
174+
.spectrum-CloseButton-UIIcon {
175+
color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)));
176+
}
177+
}
161178

162-
&:active {
163-
background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down));
179+
&:active {
180+
background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down));
164181

165-
.spectrum-CloseButton-UIIcon {
166-
color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down)));
167-
}
168-
}
182+
.spectrum-CloseButton-UIIcon {
183+
color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down)));
184+
}
185+
}
169186

170-
&:focus-visible,
171-
&.is-keyboardFocused {
172-
background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus));
187+
&:focus-visible,
188+
&.is-keyboardFocused {
189+
background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus));
173190

174-
.spectrum-CloseButton-UIIcon {
175-
color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
176-
}
177-
}
191+
.spectrum-CloseButton-UIIcon {
192+
color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
193+
}
194+
}
178195

179-
.spectrum-CloseButton-UIIcon {
180-
color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
181-
}
196+
.spectrum-CloseButton-UIIcon {
197+
color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
198+
}
182199

183-
&:focus,
184-
&.is-focused {
185-
.spectrum-CloseButton-UIIcon {
186-
color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
187-
}
188-
}
189-
}
200+
&:focus,
201+
&.is-focused {
202+
.spectrum-CloseButton-UIIcon {
203+
color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
204+
}
205+
}
206+
}
190207

191-
&:disabled {
192-
background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default));
208+
&:disabled {
209+
background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default));
193210

194-
.spectrum-CloseButton-UIIcon {
195-
color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
196-
}
197-
}
198-
}
199-
200-
a.spectrum-CloseButton {
201-
@extend %spectrum-AnchorButton;
202-
}
203-
204-
/* Modifier Classes */
205-
.spectrum-CloseButton--staticBlack:not(:disabled),
206-
.spectrum-CloseButton--staticWhite:not(:disabled) {
207-
background-color: var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default)));
208-
209-
&:hover {
210-
background-color: var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover));
211-
212-
.spectrum-CloseButton-UIIcon {
213-
color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
214-
}
215-
}
216-
217-
&:active {
218-
background-color: var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down));
219-
220-
.spectrum-CloseButton-UIIcon {
221-
color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
222-
}
223-
}
224-
225-
&:focus-visible,
226-
&.is-keyboardFocused {
227-
background-color: var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus));
228-
229-
.spectrum-CloseButton-UIIcon {
230-
color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
231-
}
232-
}
233-
234-
&:focus,
235-
&.is-focused {
236-
.spectrum-CloseButton-UIIcon {
237-
color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
238-
}
239-
}
240-
241-
.spectrum-CloseButton-UIIcon {
242-
color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
243-
}
244-
}
245-
246-
.spectrum-CloseButton--staticBlack:disabled,
247-
.spectrum-CloseButton--staticWhite:disabled {
248-
.spectrum-CloseButton-UIIcon {
249-
color: var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled));
250-
}
211+
.spectrum-CloseButton-UIIcon {
212+
color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
213+
}
214+
}
251215
}
252216

253217
.spectrum-CloseButton-UIIcon {

0 commit comments

Comments
 (0)