Skip to content

Commit fde3cbf

Browse files
author
Melissa Thompson
committed
feat(closebutton)!: migrate to S2
1 parent fec70b3 commit fde3cbf

File tree

6 files changed

+103
-141
lines changed

6 files changed

+103
-141
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/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/stories/closebutton.stories.js‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
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+
25
import { Template } from "./template";
36

47
export default {
@@ -53,5 +56,21 @@ export default {
5356
},
5457
};
5558

56-
export const Default = Template.bind({});
59+
const CloseButton = ({
60+
staticColor,
61+
...args
62+
}) => {
63+
return html`
64+
<div
65+
style=${ifDefined(styleMap({
66+
padding: "1rem",
67+
backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
68+
}))}
69+
>
70+
${Template(args)}
71+
</div>
72+
`;
73+
}
74+
75+
export const Default = CloseButton.bind({});
5776
Default.args = {};

‎components/closebutton/stories/template.js‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { html } from "lit";
22
import { classMap } from "lit/directives/class-map.js";
33
import { ifDefined } from "lit/directives/if-defined.js";
44

5-
import { upperCase, lowerCase, capitalize } from "lodash-es";
5+
import { capitalize, lowerCase, upperCase } from "lodash-es";
66

77
import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
88

@@ -19,13 +19,19 @@ export const Template = ({
1919
onclick,
2020
...globals
2121
}) => {
22-
const { express } = globals;
23-
24-
try {
25-
if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
26-
else import(/* webpackPrefetch: true */ "../themes/express.css");
27-
} catch (e) {
28-
console.warn(e);
22+
let iconName = "Cross300";
23+
switch (size) {
24+
case "s":
25+
iconName = "Cross200";
26+
break;
27+
case "l":
28+
iconName = "Cross400";
29+
break;
30+
case "xl":
31+
iconName = "Cross500";
32+
break;
33+
default:
34+
iconName = "Cross300";
2935
}
3036

3137
return html`
@@ -46,7 +52,7 @@ export const Template = ({
4652
${Icon({
4753
...globals,
4854
size,
49-
iconName: "Cross",
55+
iconName,
5056
customClasses: [`${rootClass}-UIIcon`],
5157
})}
5258
</button>

‎components/closebutton/themes/express.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,4 @@ governing permissions and limitations under the License.
1010
*/
1111

1212
@container (--system: express) {
13-
.spectrum-CloseButton {
14-
--spectrum-closebutton-background-color-default: transparent;
15-
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-300);
16-
--spectrum-closebutton-background-color-down: var(--spectrum-gray-400);
17-
--spectrum-closebutton-background-color-focus: var(--spectrum-gray-300);
18-
}
1913
}

‎components/closebutton/themes/spectrum.css‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,4 @@ governing permissions and limitations under the License.
1010
*/
1111

1212
@container (--system: spectrum) {
13-
.spectrum-CloseButton {
14-
--spectrum-closebutton-background-color-default: transparent;
15-
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-200);
16-
--spectrum-closebutton-background-color-down: var(--spectrum-gray-300);
17-
--spectrum-closebutton-background-color-focus: var(--spectrum-gray-200);
18-
}
1913
}

0 commit comments

Comments
 (0)