Skip to content

Commit 71dac37

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 62dcce3 commit 71dac37

File tree

8 files changed

+171
-170
lines changed

8 files changed

+171
-170
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
@@ -20,11 +20,8 @@ governing permissions and limitations under the License.
2020
@import "@spectrum-css/commons/basebutton.css";
2121

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

2926
/* Cross icon */
3027
--spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);
@@ -33,65 +30,72 @@ governing permissions and limitations under the License.
3330
--spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
3431
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color);
3532

36-
/* Focus ring */
33+
/* Focus indicator */
3734
--spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
3835
--spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
3936
--spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color);
4037

4138
/* Size */
4239
--spectrum-closebutton-height: var(--spectrum-component-height-100);
4340
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
44-
--spectrum-closebutton-size: var(--spectrum-closebutton-size-400);
45-
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400);
4641

4742
--spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
43+
44+
/* Background color */
45+
--spectrum-closebutton-background-color-default: transparent;
46+
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-100);
47+
--spectrum-closebutton-background-color-down: var(--spectrum-gray-100);
48+
--spectrum-closebutton-background-color-focus: var(--spectrum-gray-100);
4849
}
4950

5051
.spectrum-Closebutton--sizeS {
5152
--spectrum-closebutton-height: var(--spectrum-component-height-75);
5253
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
53-
--spectrum-closebutton-size: var(--spectrum-closebutton-size-300);
54-
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-300);
55-
}
56-
57-
.spectrum-Closebutton--sizeM {
58-
--spectrum-closebutton-height: var(--spectrum-component-height-100);
59-
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
60-
--spectrum-closebutton-size: var(--spectrum-closebutton-size-400);
61-
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400);
6254
}
6355

6456
.spectrum-Closebutton--sizeL {
6557
--spectrum-closebutton-height: var(--spectrum-component-height-200);
6658
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
67-
--spectrum-closebutton-size: var(--spectrum-closebutton-size-500);
68-
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-500);
6959
}
7060

7161
.spectrum-Closebutton--sizeXL {
7262
--spectrum-closebutton-height: var(--spectrum-component-height-300);
7363
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
74-
--spectrum-closebutton-size: var(--spectrum-closebutton-size-600);
75-
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-600);
7664
}
7765

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

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

@@ -167,7 +171,7 @@ a.spectrum-CloseButton {
167171
inset-block-end: 0;
168172
inset-block-start: 0;
169173
margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1);
170-
border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)));
174+
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)));
171175
transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
172176
}
173177

@@ -179,7 +183,6 @@ a.spectrum-CloseButton {
179183
box-shadow:
180184
0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness))
181185
var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color)));
182-
183186
}
184187
}
185188
}
@@ -233,55 +236,6 @@ a.spectrum-CloseButton {
233236
}
234237
}
235238

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

‎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.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 {
@@ -51,5 +55,65 @@ export default {
5155
},
5256
};
5357

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

0 commit comments

Comments
 (0)