Skip to content

Commit 6c327b2

Browse files
cdransfcdransf
committed
feat(toast): S2 migration
1 parent 0b730ea commit 6c327b2

File tree

4 files changed

+97
-82
lines changed

4 files changed

+97
-82
lines changed

‎.changeset/red-kiwis-flash.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
"@spectrum-css/toast": major
3+
---
4+
5+
#### S2 toast migration
6+
7+
This migrates the `toast` component to S2. Custom properties have been remapped per the design spec. Mods have been added and placeholder icons have been updated from the new workflow icons.
8+
9+
##### Tokens
10+
11+
| Before | After |
12+
| ---------------------------- | ---------------------------- |
13+
| --spectrum-corner-radius-100 | --spectrum-corner-radius-800 |
14+
15+
##### Mods
16+
17+
The following mods have been added.
18+
19+
`--mod-toast-font-family`
20+
`--mod-toast-font-style`
21+
`--mod-toast-icon-block-size`
22+
`--mod-toast-spacing-action-button-to-close`
23+
`--mod-toast-spacing-bottom-edge-to-close-button`
24+
`--mod-toast-spacing-close-button-to-edge`
25+
`--mod-toast-spacing-text-to-close-button`
26+
`--mod-toast-spacing-top-edge-to-close-button`
27+
28+
##### Passthroughs
29+
30+
The following passthrough has been added.
31+
32+
`--mod-closebutton-icon-color-default`

‎components/toast/dist/metadata.json

+28-24
Original file line numberDiff line numberDiff line change
@@ -2,90 +2,92 @@
22
"sourceFile": "index.css",
33
"selectors": [
44
".spectrum-Toast",
5+
".spectrum-Toast .spectrum-Button",
56
".spectrum-Toast--info",
6-
".spectrum-Toast--info .spectrum-Toast-closeButton:focus-visible:not(:active)",
77
".spectrum-Toast--negative",
88
".spectrum-Toast--negative .spectrum-Toast-closeButton:focus-visible:not(:active)",
99
".spectrum-Toast--positive",
10-
".spectrum-Toast--positive .spectrum-Toast-closeButton:focus-visible:not(:active)",
1110
".spectrum-Toast-body",
1211
".spectrum-Toast-body + .spectrum-Toast-buttons",
13-
".spectrum-Toast-body .spectrum-Button",
14-
".spectrum-Toast-body .spectrum-Button:dir(rtl)",
1512
".spectrum-Toast-buttons",
1613
".spectrum-Toast-buttons .spectrum-CloseButton",
1714
".spectrum-Toast-content",
1815
".spectrum-Toast-content:lang(ja)",
1916
".spectrum-Toast-content:lang(ko)",
2017
".spectrum-Toast-content:lang(zh)",
2118
".spectrum-Toast-typeIcon",
22-
"[dir=\"rtl\"] .spectrum-Toast-body .spectrum-Button"
19+
".spectrum-Toast:has(.spectrum-Button) .spectrum-Toast-buttons"
2320
],
2421
"modifiers": [
2522
"--mod-toast-background-color-default",
2623
"--mod-toast-block-size",
27-
"--mod-toast-border-width",
2824
"--mod-toast-corner-radius",
29-
"--mod-toast-divider-color",
25+
"--mod-toast-font-family",
3026
"--mod-toast-font-size",
27+
"--mod-toast-font-style",
3128
"--mod-toast-font-weight",
29+
"--mod-toast-icon-block-size",
3230
"--mod-toast-informative-background-color-default",
3331
"--mod-toast-line-height",
3432
"--mod-toast-line-height-cjk",
3533
"--mod-toast-max-inline-size",
3634
"--mod-toast-negative-background-color-default",
3735
"--mod-toast-positive-background-color-default",
36+
"--mod-toast-spacing-action-button-to-close-button",
3837
"--mod-toast-spacing-block-end",
3938
"--mod-toast-spacing-block-start",
40-
"--mod-toast-spacing-bottom-edge-to-divider",
39+
"--mod-toast-spacing-bottom-edge-to-close-button",
4140
"--mod-toast-spacing-bottom-edge-to-text",
42-
"--mod-toast-spacing-close-button",
41+
"--mod-toast-spacing-close-button-to-edge",
4342
"--mod-toast-spacing-icon-to-text",
4443
"--mod-toast-spacing-start-edge-to-text-and-icon",
45-
"--mod-toast-spacing-text-and-action-button-to-divider",
4644
"--mod-toast-spacing-text-to-action-button-horizontal",
47-
"--mod-toast-spacing-top-edge-to-divider",
45+
"--mod-toast-spacing-text-to-close-button",
46+
"--mod-toast-spacing-top-edge-to-close-button",
4847
"--mod-toast-spacing-top-edge-to-icon",
4948
"--mod-toast-spacing-top-edge-to-text",
5049
"--mod-toast-text-and-icon-color"
5150
],
5251
"component": [
5352
"--spectrum-toast-background-color-default",
5453
"--spectrum-toast-block-size",
55-
"--spectrum-toast-border-width",
5654
"--spectrum-toast-bottom-to-text",
5755
"--spectrum-toast-corner-radius",
58-
"--spectrum-toast-divider-color",
56+
"--spectrum-toast-font-family",
5957
"--spectrum-toast-font-size",
58+
"--spectrum-toast-font-style",
6059
"--spectrum-toast-font-weight",
6160
"--spectrum-toast-height",
61+
"--spectrum-toast-icon-block-size",
6262
"--spectrum-toast-informative-background-color-default",
6363
"--spectrum-toast-line-height",
6464
"--spectrum-toast-line-height-cjk",
6565
"--spectrum-toast-max-inline-size",
6666
"--spectrum-toast-maximum-width",
6767
"--spectrum-toast-negative-background-color-default",
6868
"--spectrum-toast-positive-background-color-default",
69+
"--spectrum-toast-spacing-action-button-to-close-button",
6970
"--spectrum-toast-spacing-block-end",
7071
"--spectrum-toast-spacing-block-start",
71-
"--spectrum-toast-spacing-bottom-edge-to-divider",
72+
"--spectrum-toast-spacing-bottom-edge-to-close-button",
7273
"--spectrum-toast-spacing-bottom-edge-to-text",
73-
"--spectrum-toast-spacing-close-button",
74+
"--spectrum-toast-spacing-close-button-to-edge",
7475
"--spectrum-toast-spacing-icon-to-text",
7576
"--spectrum-toast-spacing-start-edge-to-text-and-icon",
76-
"--spectrum-toast-spacing-text-and-action-button-to-divider",
7777
"--spectrum-toast-spacing-text-to-action-button-horizontal",
78-
"--spectrum-toast-spacing-top-edge-to-divider",
78+
"--spectrum-toast-spacing-text-to-close-button",
79+
"--spectrum-toast-spacing-top-edge-to-close-button",
7980
"--spectrum-toast-spacing-top-edge-to-icon",
8081
"--spectrum-toast-spacing-top-edge-to-text",
8182
"--spectrum-toast-text-and-icon-color",
8283
"--spectrum-toast-top-to-text",
8384
"--spectrum-toast-top-to-workflow-icon"
8485
],
8586
"global": [
86-
"--spectrum-border-width-100",
8787
"--spectrum-cjk-line-height-100",
88-
"--spectrum-corner-radius-100",
88+
"--spectrum-corner-radius-800",
89+
"--spectrum-default-font-family",
90+
"--spectrum-default-font-style",
8991
"--spectrum-font-size-100",
9092
"--spectrum-informative-background-color-default",
9193
"--spectrum-line-height-100",
@@ -94,11 +96,13 @@
9496
"--spectrum-positive-background-color-default",
9597
"--spectrum-regular-font-weight",
9698
"--spectrum-spacing-100",
99+
"--spectrum-spacing-200",
97100
"--spectrum-spacing-300",
98-
"--spectrum-text-to-visual-100",
99-
"--spectrum-transparent-white-400",
100-
"--spectrum-white"
101+
"--spectrum-spacing-400",
102+
"--spectrum-text-to-visual-300",
103+
"--spectrum-white",
104+
"--spectrum-workflow-icon-size-100"
101105
],
102-
"passthroughs": [],
103-
"high-contrast": ["--highcontrast-toast-border-color"]
106+
"passthroughs": ["--mod-closebutton-icon-color-default"],
107+
"high-contrast": []
104108
}

‎components/toast/index.css

+35-56
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*!
2-
* Copyright 2024 Adobe. All rights reserved.
2+
* Copyright 2025 Adobe. All rights reserved.
33
*
44
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
55
* you may not use this file except in compliance with the License. You may obtain a copy
@@ -12,59 +12,50 @@
1212
*/
1313

1414
.spectrum-Toast {
15-
--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
16-
--spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
17-
1815
/* Hardcoded variables */
1916
--spectrum-toast-font-weight: var(--spectrum-regular-font-weight);
2017

2118
/* Size */
22-
19+
--spectrum-toast-font-family: var(--spectrum-default-font-family);
20+
--spectrum-toast-font-style: var(--spectrum-default-font-style);
2321
--spectrum-toast-font-size: var(--spectrum-font-size-100);
24-
--spectrum-toast-corner-radius: var(--spectrum-corner-radius-100);
22+
--spectrum-toast-corner-radius: var(--spectrum-corner-radius-800);
2523
--spectrum-toast-block-size: var(--spectrum-toast-height);
24+
--spectrum-toast-icon-block-size: var(--spectrum-workflow-icon-size-100);
2625
--spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width);
27-
--spectrum-toast-border-width: var(--spectrum-border-width-100);
2826

2927
--spectrum-toast-line-height: var(--spectrum-line-height-100);
3028
--spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100);
3129

3230
/* Space */
33-
34-
--spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100);
31+
--spectrum-toast-spacing-close-button-to-edge: var(--spectrum-spacing-100);
32+
--spectrum-toast-spacing-text-to-close-button: var(--spectrum-spacing-300);
33+
--spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-400);
34+
--spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-300);
3535

3636
--spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300);
37-
--spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300);
37+
--spectrum-toast-spacing-action-button-to-close-button: var(--spectrum-spacing-200);
3838

39-
--spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100);
40-
--spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100);
39+
--spectrum-toast-spacing-top-edge-to-close-button: var(--spectrum-spacing-200);
40+
--spectrum-toast-spacing-bottom-edge-to-close-button: var(--spectrum-spacing-200);
4141

4242
--spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon);
4343

44-
--spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300);
45-
--spectrum-toast-spacing-close-button: var(--spectrum-spacing-100);
46-
47-
--spectrum-toast-spacing-block-start: var(--spectrum-spacing-100);
48-
--spectrum-toast-spacing-block-end: var(--spectrum-spacing-100);
44+
--spectrum-toast-spacing-block-start: var(--spectrum-spacing-200);
45+
--spectrum-toast-spacing-block-end: var(--spectrum-spacing-200);
4946

5047
--spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
5148
--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
5249

5350
/* Color */
51+
--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
5452
--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
5553
--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
5654
--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
5755

5856
--spectrum-toast-text-and-icon-color: var(--spectrum-white);
59-
}
6057

61-
@media (forced-colors: active) {
62-
.spectrum-Toast {
63-
/* Border is visible in high contrast mode */
64-
--highcontrast-toast-border-color: ButtonText;
65-
66-
border: var(--mod-toast-border-width, var(--spectrum-toast-border-width)) solid var(--highcontrast-toast-border-color, transparent);
67-
}
58+
--mod-closebutton-icon-color-default: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
6859
}
6960

7061
.spectrum-Toast {
@@ -79,7 +70,9 @@
7970

8071
padding-inline-start: var(--mod-toast-spacing-start-edge-to-text-and-icon, var(--spectrum-toast-spacing-start-edge-to-text-and-icon));
8172

73+
font-family: var(--mod-toast-font-family, var(--spectrum-toast-font-family));
8274
font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size));
75+
font-style: var(--mod-toast-font-style, var(--spectrum-toast-font-style));
8376
font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight));
8477

8578
-webkit-font-smoothing: antialiased;
@@ -100,26 +93,17 @@
10093

10194
.spectrum-Toast--info {
10295
background-color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
103-
color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
104-
105-
.spectrum-Toast-closeButton:focus-visible:not(:active) {
106-
color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
107-
}
10896
}
10997

11098
.spectrum-Toast--positive {
11199
background-color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
112-
color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
113-
114-
.spectrum-Toast-closeButton:focus-visible:not(:active) {
115-
color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
116-
}
117100
}
118101

119102
.spectrum-Toast-typeIcon {
120103
flex-shrink: 0;
121104
flex-grow: 0;
122105

106+
block-size: var(--mod-toast-icon-block-size, var(--spectrum-toast-icon-block-size));
123107
margin-block-start: var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon));
124108
margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text));
125109
margin-inline-start: 0;
@@ -135,7 +119,6 @@
135119
padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)));
136120
padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)));
137121

138-
padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
139122
padding-inline-start: 0;
140123

141124
line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height));
@@ -156,42 +139,38 @@
156139
flex: 0 0 auto;
157140
align-items: flex-start;
158141

159-
margin-block-start: var(--mod-toast-spacing-top-edge-to-divider, var(--spectrum-toast-spacing-top-edge-to-divider));
160-
margin-block-end: var(--mod-toast-spacing-bottom-edge-to-divider, var(--spectrum-toast-spacing-bottom-edge-to-divider));
161-
162-
/* Divider color for Text | Action Button */
163-
border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color));
164-
padding-inline-end: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
142+
margin-block-start: var(--mod-toast-spacing-top-edge-to-close-button, var(--spectrum-toast-spacing-top-edge-to-close-button));
143+
margin-block-end: var(--mod-toast-spacing-bottom-edge-to-close-button, var(--spectrum-toast-spacing-bottom-edge-to-close-button));
144+
padding-inline-start: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button));
145+
padding-inline-end: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));
165146

166147
.spectrum-CloseButton {
167148
align-self: flex-start;
168149
}
169150
}
170151

152+
.spectrum-Toast .spectrum-Button {
153+
margin-inline-start: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
154+
}
155+
156+
.spectrum-Toast:has(.spectrum-Button) {
157+
.spectrum-Toast-buttons {
158+
padding-inline-start: var(--mod-toast-spacing-action-button-to-close-button, var(--spectrum-toast-spacing-action-button-to-close-button));
159+
}
160+
}
161+
171162
.spectrum-Toast-body {
172163
display: flex;
173164
flex-wrap: wrap;
174165
align-items: center;
175166
flex: 1 1 auto;
176167
align-self: center;
168+
justify-content: flex-end;
177169

178170
padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start));
179171
padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end));
180172

181-
.spectrum-Button {
182-
margin-inline-start: auto;
183-
margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
184-
185-
&:dir(rtl) {
186-
margin-inline-end: auto;
187-
margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
188-
}
189-
}
190-
191173
& + .spectrum-Toast-buttons {
192-
padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
193-
194-
border-inline-start-width: 1px;
195-
border-inline-start-style: solid;
174+
padding-inline-start: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));
196175
}
197176
}

‎components/toast/stories/template.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export const Template = ({
1919
customStyles = {},
2020
id = getRandomId("toast"),
2121
} = {}, context = {}) => {
22-
let iconName = "Info";
23-
if (variant === "negative") iconName = "Alert";
22+
let iconName = "InfoCircle";
23+
if (variant === "negative") iconName = "AlertTriangle";
2424
if (variant === "positive") iconName = "CheckmarkCircle";
2525
if (variant === "neutral") iconName = undefined;
2626

0 commit comments

Comments
 (0)