Skip to content

Commit e4ebaa1

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

File tree

5 files changed

+70
-137
lines changed

5 files changed

+70
-137
lines changed

‎components/closebutton/index.css‎

Lines changed: 13 additions & 15 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
@@ -43,6 +43,12 @@ governing permissions and limitations under the License.
4343
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-400);
4444

4545
--spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);
46+
47+
/* Background Color */
48+
--spectrum-closebutton-background-color-default: transparent;
49+
--spectrum-closebutton-background-color-hover: var(--spectrum-gray-100);
50+
--spectrum-closebutton-background-color-down: var(--spectrum-gray-100);
51+
--spectrum-closebutton-background-color-focus: var(--spectrum-gray-100);
4652
}
4753

4854
.spectrum-Closebutton--sizeS {
@@ -52,13 +58,6 @@ governing permissions and limitations under the License.
5258
--spectrum-closebutton-border-radius: var(--spectrum-closebutton-size-300);
5359
}
5460

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);
60-
}
61-
6261
.spectrum-Closebutton--sizeL {
6362
--spectrum-closebutton-height: var(--spectrum-component-height-200);
6463
--spectrum-closebutton-width: var(--spectrum-closebutton-height);
@@ -75,19 +74,19 @@ governing permissions and limitations under the License.
7574

7675
.spectrum-CloseButton--staticWhite {
7776
--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);
77+
--spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-white-100);
78+
--spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-white-100);
79+
--spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-white-100);
8180
--spectrum-closebutton-icon-color-default: var(--spectrum-white);
8281
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
8382
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
8483
}
8584

8685
.spectrum-CloseButton--staticBlack {
8786
--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);
87+
--spectrum-closebutton-static-background-color-hover: var(--spectrum-transparent-black-100);
88+
--spectrum-closebutton-static-background-color-down: var(--spectrum-transparent-black-100);
89+
--spectrum-closebutton-static-background-color-focus: var(--spectrum-transparent-black-100);
9190
--spectrum-closebutton-icon-color-default: var(--spectrum-black);
9291
--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
9392
--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
@@ -177,7 +176,6 @@ a.spectrum-CloseButton {
177176
box-shadow:
178177
0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness))
179178
var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color)));
180-
181179
}
182180
}
183181
}

‎components/closebutton/metadata/closebutton.yml‎

Lines changed: 15 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
11
name: Close button
22
status: Verified
33
description: |
4-
A button used to close or dismiss components.
4+
A button used to close or dismiss components. Close button supports different sized icons using these class couplings:
5+
6+
| Component size | Close button classname | UI icon classname |
7+
| -------------- | ------------------------------- | --------------------------- |
8+
| Small | `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross400` |
9+
| Medium (default)| No size class for default | `.spectrum-UIIcon-Cross500` |
10+
| Large | `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross400` |
11+
| X-Large | `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross500` |
12+
513
sections:
614
- name: Custom Properties API
715
description: |
816
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>.
9-
- name: Migration Guide
10-
description: |
11-
### Sizing
12-
Close button supports different sized icons. By default, you should use the following icons:
13-
14-
| Close button classname | UI icon classname |
15-
| ------------------------------- | --------------------------- |
16-
| `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross75` |
17-
| `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross100` |
18-
| `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross200` |
19-
| `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross300` |
20-
21-
### Remove focus-ring class
22-
We've migrated away from the focus-ring class in favor of the native `:focus-visible` pseudo-class due to changes in browser support.
2317
examples:
2418
- id: close
2519
name: Icon Size - Regular
@@ -28,66 +22,6 @@ examples:
2822
<div class="spectrum-Examples-item">
2923
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
3024
31-
<div class="spectrum-Examples-itemGroup">
32-
<button class="spectrum-CloseButton spectrum-CloseButton--sizeS">
33-
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
34-
<use xlink:href="#spectrum-css-icon-Cross75" />
35-
</svg>
36-
</button>
37-
</div>
38-
</div>
39-
<div class="spectrum-Examples-item">
40-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
41-
42-
<div class="spectrum-Examples-itemGroup">
43-
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM">
44-
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross100" focusable="false" aria-hidden="true">
45-
<use xlink:href="#spectrum-css-icon-Cross100" />
46-
</svg>
47-
</button>
48-
</div>
49-
</div>
50-
51-
<div class="spectrum-Examples-item">
52-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>
53-
54-
<div class="spectrum-Examples-itemGroup">
55-
<button class="spectrum-CloseButton spectrum-CloseButton--sizeL">
56-
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
57-
<use xlink:href="#spectrum-css-icon-Cross200" />
58-
</svg>
59-
</button>
60-
</div>
61-
</div>
62-
63-
<div class="spectrum-Examples-item">
64-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>
65-
66-
<div class="spectrum-Examples-itemGroup">
67-
<button class="spectrum-CloseButton spectrum-CloseButton--sizeXL">
68-
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross300" focusable="false" aria-hidden="true">
69-
<use xlink:href="#spectrum-css-icon-Cross300" />
70-
</svg>
71-
</button>
72-
</div>
73-
</div>
74-
</div>
75-
- id: closebutton-largeicon
76-
name: Icon Size - Large
77-
description: |
78-
Close button supports different sized icons. For cases where you need large icons, you should use the following icons:
79-
80-
| Close button classname | UI icon classname |
81-
| ------------------------------- | --------------------------- |
82-
| `.spectrum-CloseButton--sizeS` | `.spectrum-UIIcon-Cross200` |
83-
| `.spectrum-CloseButton--sizeM` | `.spectrum-UIIcon-Cross300` |
84-
| `.spectrum-CloseButton--sizeL` | `.spectrum-UIIcon-Cross400` |
85-
| `.spectrum-CloseButton--sizeXL` | `.spectrum-UIIcon-Cross500` |
86-
markup: |
87-
<div class="spectrum-Examples">
88-
<div class="spectrum-Examples-item">
89-
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>
90-
9125
<div class="spectrum-Examples-itemGroup">
9226
<button class="spectrum-CloseButton spectrum-CloseButton--sizeS">
9327
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross200" focusable="false" aria-hidden="true">
@@ -100,7 +34,7 @@ examples:
10034
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>
10135
10236
<div class="spectrum-Examples-itemGroup">
103-
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM">
37+
<button class="spectrum-CloseButton">
10438
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross300" focusable="false" aria-hidden="true">
10539
<use xlink:href="#spectrum-css-icon-Cross300" />
10640
</svg>
@@ -132,11 +66,10 @@ examples:
13266
</div>
13367
</div>
13468
</div>
135-
13669
- id: closebutton-disabled
13770
name: Disabled
13871
markup: |
139-
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM" disabled>
72+
<button class="spectrum-CloseButton" disabled>
14073
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross300" focusable="false" aria-hidden="true">
14174
<use xlink:href="#spectrum-css-icon-Cross300" />
14275
</svg>
@@ -151,7 +84,7 @@ examples:
15184
<h4 style="color: white" class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
15285
15386
<div class="spectrum-Examples-itemGroup">
154-
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite">
87+
<button class="spectrum-CloseButton spectrum-CloseButton--staticWhite">
15588
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross300" focusable="false" aria-hidden="true">
15689
<use xlink:href="#spectrum-css-icon-Cross300" />
15790
</svg>
@@ -162,7 +95,7 @@ examples:
16295
<h4 style="color: white" class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
16396
16497
<div class="spectrum-Examples-itemGroup">
165-
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticWhite" disabled>
98+
<button class="spectrum-CloseButton spectrum-CloseButton--staticWhite" disabled>
16699
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross300" focusable="false" aria-hidden="true">
167100
<use xlink:href="#spectrum-css-icon-Cross300" />
168101
</svg>
@@ -181,7 +114,7 @@ examples:
181114
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Default</h4>
182115
183116
<div class="spectrum-Examples-itemGroup">
184-
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticBlack">
117+
<button class="spectrum-CloseButton spectrum-CloseButton--staticBlack">
185118
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross300" focusable="false" aria-hidden="true">
186119
<use xlink:href="#spectrum-css-icon-Cross300" />
187120
</svg>
@@ -192,7 +125,7 @@ examples:
192125
<h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">Disabled</h4>
193126
194127
<div class="spectrum-Examples-itemGroup">
195-
<button class="spectrum-CloseButton spectrum-CloseButton--sizeM spectrum-CloseButton--staticBlack" disabled>
128+
<button class="spectrum-CloseButton spectrum-CloseButton--staticBlack" disabled>
196129
<svg class="spectrum-CloseButton-UIIcon spectrum-Icon spectrum-UIIcon-Cross300" focusable="false" aria-hidden="true">
197130
<use xlink:href="#spectrum-css-icon-Cross300" />
198131
</svg>

‎components/closebutton/stories/template.js‎

Lines changed: 42 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { html } from "lit";
22
import { classMap } from "lit/directives/class-map.js";
33
import { ifDefined } from "lit/directives/if-defined.js";
4+
import { styleMap } from "lit/directives/style-map.js";
45

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

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

@@ -19,36 +20,49 @@ export const Template = ({
1920
onclick,
2021
...globals
2122
}) => {
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);
23+
let iconName = "Cross300";
24+
switch (size) {
25+
case "s":
26+
iconName = "Cross200";
27+
break;
28+
case "l":
29+
iconName = "Cross400";
30+
break;
31+
case "xl":
32+
iconName = "Cross500";
33+
break;
34+
default:
35+
iconName = "Cross300";
2936
}
3037

3138
return html`
32-
<button
33-
class=${classMap({
34-
[rootClass]: true,
35-
[`${rootClass}--size${upperCase(size)}`]: typeof size !== "undefined",
36-
[`${rootClass}--static${capitalize(lowerCase(staticColor))}`]:
37-
typeof staticColor !== "undefined",
38-
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
39-
})}
40-
aria-label="close"
41-
id=${ifDefined(id)}
42-
label=${ifDefined(label)}
43-
?disabled=${isDisabled}
44-
@click=${onclick}
39+
<div
40+
style=${ifDefined(styleMap({
41+
padding: "1rem",
42+
backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
43+
}))}
4544
>
46-
${Icon({
47-
...globals,
48-
size,
49-
iconName: "Cross",
50-
customClasses: [`${rootClass}-UIIcon`],
51-
})}
52-
</button>
45+
<button
46+
class=${classMap({
47+
[rootClass]: true,
48+
[`${rootClass}--size${upperCase(size)}`]: typeof size !== "undefined",
49+
[`${rootClass}--static${capitalize(lowerCase(staticColor))}`]:
50+
typeof staticColor !== "undefined",
51+
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
52+
})}
53+
aria-label="close"
54+
id=${ifDefined(id)}
55+
label=${ifDefined(label)}
56+
?disabled=${isDisabled}
57+
@click=${onclick}
58+
>
59+
${Icon({
60+
...globals,
61+
size,
62+
iconName,
63+
customClasses: [`${rootClass}-UIIcon`],
64+
})}
65+
</button>
66+
</div>
5367
`;
5468
};

‎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)