Skip to content

Commit a7aac41

Browse files
Melissa Thompsonpfulton
Melissa Thompson
and
pfulton
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 af41027 commit a7aac41

File tree

8 files changed

+171
-168
lines changed

8 files changed

+171
-168
lines changed

‎components/closebutton/index.css‎

Lines changed: 39 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
Copyright 2023 Adobe. All rights reserved.
2+
Copyright 2024 Adobe. All rights reserved.
33
This file is licensed to you under the Apache License, Version 2.0 (the "License");
44
you may not use this file except in compliance with the License. You may obtain a copy
55
of the License at http://www.apache.org/licenses/LICENSE-2.0
@@ -18,11 +18,8 @@ governing permissions and limitations under the License.
1818
@import "@spectrum-css/commons/basebutton.css";
1919

2020
.spectrum-CloseButton {
21-
/* Hardcoded tokens */
22-
--spectrum-closebutton-size-300: 24px;
23-
--spectrum-closebutton-size-400: 32px;
24-
--spectrum-closebutton-size-500: 40px;
25-
--spectrum-closebutton-size-600: 48px;
21+
/* TO DO: replace with custom var during corner rounding work */
22+
--spectrum-closebutton-border-radius: 9999px;
2623

2724
/* Cross icon */
2825
--spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);
@@ -31,65 +28,72 @@ governing permissions and limitations under the License.
3128
--spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
3229
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color);
3330

34-
/* Focus ring */
31+
/* Focus indicator */
3532
--spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
3633
--spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
3734
--spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
3835

3936
/* Size */
4037
--spectrum-closebutton-height: var(--spectrum-component-height-100);
4138
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
42-
--spectrum-closebutton-size: var(--spectrum-closebutton-size-400);
43-
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400);
4439

4540
--spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
41+
42+
/* Background color */
43+
--spectrum-closebutton-background-color-default: transparent;
44+
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-100);
45+
--spectrum-closebutton-background-color-down: var(--spectrum-gray-100);
46+
--spectrum-closebutton-background-color-focus: var(--spectrum-gray-100);
4647
}
4748

4849
.spectrum-Closebutton--sizeS {
4950
--spectrum-closebutton-height: var(--spectrum-component-height-75);
5051
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
51-
--spectrum-closebutton-size: var(--spectrum-closebutton-size-300);
52-
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-300);
53-
}
54-
55-
.spectrum-Closebutton--sizeM {
56-
--spectrum-closebutton-height: var(--spectrum-component-height-100);
57-
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
58-
--spectrum-closebutton-size: var(--spectrum-closebutton-size-400);
59-
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400);
6052
}
6153

6254
.spectrum-Closebutton--sizeL {
6355
--spectrum-closebutton-height: var(--spectrum-component-height-200);
6456
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
65-
--spectrum-closebutton-size: var(--spectrum-closebutton-size-500);
66-
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-500);
6757
}
6858

6959
.spectrum-Closebutton--sizeXL {
7060
--spectrum-closebutton-height: var(--spectrum-component-height-300);
7161
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
72-
--spectrum-closebutton-size: var(--spectrum-closebutton-size-600);
73-
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-600);
7462
}
7563

7664
.spectrum-CloseButton--staticWhite {
77-
--spectrum-closebutton-static-background-color-default: transparent;
78-
--spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-300);
79-
--spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-400);
80-
--spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-300);
81-
--spectrum-closebutton-icon-color-default: var(--spectrum-white);
82-
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
65+
/* Cross icon */
66+
--spectrum-closebutton-icon-color-default: var(--spectrum-transparent-white-800);
67+
--spectrum-closebutton-icon-color-hover: var(--spectrum-transparent-white-900);
68+
--spectrum-closebutton-icon-color-down: var(--spectrum-transparent-white-900);
69+
--spectrum-closebutton-icon-color-focus: var(--spectrum-transparent-white-900);
70+
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-background-color);
71+
72+
/* Background color */
73+
--spectrum-closebutton-background-color-default: transparent;
74+
--spectrum-closebutton-background-color-hover: var(--spectrum-transparent-white-100);
75+
--spectrum-closebutton-background-color-down: var(--spectrum-transparent-white-100);
76+
--spectrum-closebutton-background-color-focus: var(--spectrum-transparent-white-100);
77+
78+
/* Focus indicator */
8379
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
8480
}
8581

8682
.spectrum-CloseButton--staticBlack {
87-
--spectrum-closebutton-static-background-color-default: transparent;
88-
--spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-300);
89-
--spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-400);
90-
--spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-300);
91-
--spectrum-closebutton-icon-color-default: var(--spectrum-black);
92-
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
83+
/* Cross icon */
84+
--spectrum-closebutton-icon-color-default: var(--spectrum-transparent-black-800);
85+
--spectrum-closebutton-icon-color-hover: var(--spectrum-transparent-black-900);
86+
--spectrum-closebutton-icon-color-down: var(--spectrum-transparent-black-900);
87+
--spectrum-closebutton-icon-color-focus: var(--spectrum-transparent-black-900);
88+
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-background-color);
89+
90+
/* Background color */
91+
--spectrum-closebutton-background-color-default: transparent;
92+
--spectrum-closebutton-background-color-hover: var(--spectrum-transparent-black-100);
93+
--spectrum-closebutton-background-color-down: var(--spectrum-transparent-black-100);
94+
--spectrum-closebutton-background-color-focus: var(--spectrum-transparent-black-100);
95+
96+
/* Focus indicator */
9397
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
9498
}
9599

@@ -165,7 +169,7 @@ a.spectrum-CloseButton {
165169
inset-block-end: 0;
166170
inset-block-start: 0;
167171
margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1);
168-
border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)));
172+
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)));
169173
transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
170174
}
171175

@@ -177,7 +181,6 @@ a.spectrum-CloseButton {
177181
box-shadow:
178182
0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness))
179183
var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color)));
180-
181184
}
182185
}
183186
}
@@ -231,55 +234,6 @@ a.spectrum-CloseButton {
231234
}
232235
}
233236

234-
/* Modifier Classes */
235-
.spectrum-CloseButton--staticBlack:not(:disabled),
236-
.spectrum-CloseButton--staticWhite:not(:disabled) {
237-
background-color: var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default)));
238-
239-
&:hover {
240-
background-color: var(--highcontrast-closebutton-static-background-color-hover, var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover)));
241-
242-
.spectrum-CloseButton-UIIcon {
243-
color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
244-
}
245-
}
246-
247-
&:active {
248-
background-color: var(--highcontrast-closebutton-static-background-color-down, var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down)));
249-
250-
.spectrum-CloseButton-UIIcon {
251-
color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
252-
}
253-
}
254-
255-
&:focus-visible,
256-
&.is-keyboardFocused {
257-
background-color: var(--highcontrast-closebutton-static-background-color-focus, var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus)));
258-
259-
.spectrum-CloseButton-UIIcon {
260-
color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
261-
}
262-
}
263-
264-
&:focus,
265-
&.is-focused {
266-
.spectrum-CloseButton-UIIcon {
267-
color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
268-
}
269-
}
270-
271-
.spectrum-CloseButton-UIIcon {
272-
color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
273-
}
274-
}
275-
276-
.spectrum-CloseButton--staticBlack:disabled,
277-
.spectrum-CloseButton--staticWhite:disabled {
278-
.spectrum-CloseButton-UIIcon {
279-
color: var(--highcontrast-closebutton-icon-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
280-
}
281-
}
282-
283237
.spectrum-CloseButton-UIIcon {
284238
margin: 0;
285239
}

‎components/closebutton/metadata/closebutton.yml‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,28 @@ sections:
88
This component can be modified via its `--mod-*` prefixed custom properties. A list of those prefixed custom properties can be found <a class="spectrum-Link" href="https://github.com/adobe/spectrum-css/tree/main/components/closebutton/metadata/mods.md">here</a>.
99
- name: Migration Guide
1010
description: |
11+
### x/x/2024 - Version 5.0.0
12+
#### Spectrum 2 release
13+
Close button now uses Spectrum 2 tokens and specifications. A few notable changes and additions:
14+
* Removes all static-specific `--mod` custom properties since they are no longer needed:
15+
| Removed |
16+
|-----------------------------------------------------|
17+
| `--mod-closebutton-static-background-color-default` |
18+
| `--mod-closebutton-static-background-color-down` |
19+
| `--mod-closebutton-static-background-color-focus` |
20+
| `--mod-closebutton-static-background-color-hover` |
21+
22+
Consumers can use these existing background-color mods instead:
23+
| Use these existing mods instead |
24+
|----------------------------------------------|
25+
| `--mod-closebutton-background-color-default` |
26+
| `--mod-closebutton-background-color-down` |
27+
| `--mod-closebutton-background-color-focus` |
28+
| `--mod-closebutton-background-color-hover` |
29+
30+
* Also removes --mod-closebutton-size since we'll be setting rounded border-radius with a single rounding token, to be formally implemented as part of [S2 Corner Rounding](https://github.com/adobe/spectrum-css/pull/2559/files#diff-d6e9caa794bd8e1c659425d223e23ab53a93a254f00fb11a626e1b7563bd0c61R39-R41).
31+
32+
1133
### Sizing
1234
Close button supports different sized icons. By default, you should use the following icons:
1335

‎components/closebutton/metadata/mods.md‎

Lines changed: 28 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,28 @@
1-
| Modifiable custom properties |
2-
| --------------------------------------------------- |
3-
| `--mod-animation-duration-100` |
4-
| `--mod-button-animation-duration` |
5-
| `--mod-button-font-family` |
6-
| `--mod-button-line-height` |
7-
| `--mod-closebutton-align-self` |
8-
| `--mod-closebutton-animation-duraction` |
9-
| `--mod-closebutton-animation-duration` |
10-
| `--mod-closebutton-background-color-default` |
11-
| `--mod-closebutton-background-color-down` |
12-
| `--mod-closebutton-background-color-focus` |
13-
| `--mod-closebutton-background-color-hover` |
14-
| `--mod-closebutton-border-radius` |
15-
| `--mod-closebutton-focus-indicator-color` |
16-
| `--mod-closebutton-focus-indicator-gap` |
17-
| `--mod-closebutton-focus-indicator-thickness` |
18-
| `--mod-closebutton-height` |
19-
| `--mod-closebutton-icon-color-default` |
20-
| `--mod-closebutton-icon-color-disabled` |
21-
| `--mod-closebutton-icon-color-down` |
22-
| `--mod-closebutton-icon-color-focus` |
23-
| `--mod-closebutton-icon-color-hover` |
24-
| `--mod-closebutton-margin-inline` |
25-
| `--mod-closebutton-margin-top` |
26-
| `--mod-closebutton-size` |
27-
| `--mod-closebutton-static-background-color-default` |
28-
| `--mod-closebutton-static-background-color-down` |
29-
| `--mod-closebutton-static-background-color-focus` |
30-
| `--mod-closebutton-static-background-color-hover` |
31-
| `--mod-closebutton-width` |
32-
| `--mod-line-height-100` |
33-
| `--mod-sans-font-family-stack` |
1+
| Modifiable custom properties |
2+
| --------------------------------------------- |
3+
| `--mod-animation-duration-100` |
4+
| `--mod-button-animation-duration` |
5+
| `--mod-button-font-family` |
6+
| `--mod-button-line-height` |
7+
| `--mod-closebutton-align-self` |
8+
| `--mod-closebutton-animation-duraction` |
9+
| `--mod-closebutton-animation-duration` |
10+
| `--mod-closebutton-background-color-default` |
11+
| `--mod-closebutton-background-color-down` |
12+
| `--mod-closebutton-background-color-focus` |
13+
| `--mod-closebutton-background-color-hover` |
14+
| `--mod-closebutton-border-radius` |
15+
| `--mod-closebutton-focus-indicator-color` |
16+
| `--mod-closebutton-focus-indicator-gap` |
17+
| `--mod-closebutton-focus-indicator-thickness` |
18+
| `--mod-closebutton-height` |
19+
| `--mod-closebutton-icon-color-default` |
20+
| `--mod-closebutton-icon-color-disabled` |
21+
| `--mod-closebutton-icon-color-down` |
22+
| `--mod-closebutton-icon-color-focus` |
23+
| `--mod-closebutton-icon-color-hover` |
24+
| `--mod-closebutton-margin-inline` |
25+
| `--mod-closebutton-margin-top` |
26+
| `--mod-closebutton-width` |
27+
| `--mod-line-height-100` |
28+
| `--mod-sans-font-family-stack` |

‎components/closebutton/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"main": "dist/index-vars.css",
1717
"peerDependencies": {
1818
"@spectrum-css/icon": ">=4",
19-
"@spectrum-css/tokens": ">=13"
19+
"@spectrum-css/tokens": "^14.0.0-next.0"
2020
},
2121
"devDependencies": {
2222
"@spectrum-css/commons": "^9.1.2",

‎components/closebutton/stories/closebutton.stories.js‎

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
// Import the component markup template
1+
import { html } from "lit";
2+
import { ifDefined } from "lit/directives/if-defined.js";
3+
import { styleMap } from "lit/directives/style-map.js";
4+
import { when } from "lit/directives/when.js";
5+
26
import { Template } from "./template";
37

48
export default {
@@ -53,5 +57,65 @@ export default {
5357
},
5458
};
5559

56-
export const Default = Template.bind({});
60+
const CloseButton = ({
61+
staticColor,
62+
...args
63+
}) => {
64+
return html`
65+
<div
66+
style=${ifDefined(styleMap({
67+
padding: "1rem",
68+
backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
69+
}))}
70+
>
71+
${Template({...args, staticColor})}
72+
${when(window.isChromatic(), () =>
73+
html`
74+
${Template({
75+
...args,
76+
isDisabled: true,
77+
})}
78+
${html`
79+
<div
80+
style=${ifDefined(styleMap({
81+
padding: "1rem",
82+
backgroundColor: "rgb(15, 121, 125)"
83+
}))}
84+
>
85+
${Template({
86+
...args,
87+
staticColor: "white",
88+
})}
89+
${Template({
90+
...args,
91+
staticColor: "white",
92+
isDisabled: true,
93+
})}
94+
</div>
95+
`}
96+
${html`
97+
<div
98+
style=${ifDefined(styleMap({
99+
padding: "1rem",
100+
backgroundColor: "rgb(181, 209, 211)"
101+
}))}
102+
>
103+
${Template({
104+
...args,
105+
staticColor: "black",
106+
})}
107+
${Template({
108+
...args,
109+
staticColor: "black",
110+
isDisabled: true,
111+
})}
112+
</div>
113+
`}
114+
`
115+
)}
116+
</div>
117+
`;
118+
}
119+
120+
export const Default = CloseButton.bind({});
57121
Default.args = {};

0 commit comments

Comments
 (0)