Skip to content

Commit 1027d4e

Browse files
cdransfcdransf
committed
chore(toast): begin carrying over old migration + correct icons
1 parent f8c6e9d commit 1027d4e

File tree

3 files changed

+57
-73
lines changed

3 files changed

+57
-73
lines changed

‎components/toast/dist/metadata.json

+17-19
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,27 @@
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",
2724
"--mod-toast-border-width",
2825
"--mod-toast-corner-radius",
29-
"--mod-toast-divider-color",
3026
"--mod-toast-font-size",
3127
"--mod-toast-font-weight",
3228
"--mod-toast-informative-background-color-default",
@@ -35,16 +31,17 @@
3531
"--mod-toast-max-inline-size",
3632
"--mod-toast-negative-background-color-default",
3733
"--mod-toast-positive-background-color-default",
34+
"--mod-toast-spacing-action-button-to-close-button",
3835
"--mod-toast-spacing-block-end",
3936
"--mod-toast-spacing-block-start",
40-
"--mod-toast-spacing-bottom-edge-to-divider",
37+
"--mod-toast-spacing-bottom-edge-to-close-button",
4138
"--mod-toast-spacing-bottom-edge-to-text",
42-
"--mod-toast-spacing-close-button",
39+
"--mod-toast-spacing-close-button-to-edge",
4340
"--mod-toast-spacing-icon-to-text",
4441
"--mod-toast-spacing-start-edge-to-text-and-icon",
45-
"--mod-toast-spacing-text-and-action-button-to-divider",
4642
"--mod-toast-spacing-text-to-action-button-horizontal",
47-
"--mod-toast-spacing-top-edge-to-divider",
43+
"--mod-toast-spacing-text-to-close-button",
44+
"--mod-toast-spacing-top-edge-to-close-button",
4845
"--mod-toast-spacing-top-edge-to-icon",
4946
"--mod-toast-spacing-top-edge-to-text",
5047
"--mod-toast-text-and-icon-color"
@@ -55,7 +52,6 @@
5552
"--spectrum-toast-border-width",
5653
"--spectrum-toast-bottom-to-text",
5754
"--spectrum-toast-corner-radius",
58-
"--spectrum-toast-divider-color",
5955
"--spectrum-toast-font-size",
6056
"--spectrum-toast-font-weight",
6157
"--spectrum-toast-height",
@@ -66,16 +62,17 @@
6662
"--spectrum-toast-maximum-width",
6763
"--spectrum-toast-negative-background-color-default",
6864
"--spectrum-toast-positive-background-color-default",
65+
"--spectrum-toast-spacing-action-button-to-close-button",
6966
"--spectrum-toast-spacing-block-end",
7067
"--spectrum-toast-spacing-block-start",
71-
"--spectrum-toast-spacing-bottom-edge-to-divider",
68+
"--spectrum-toast-spacing-bottom-edge-to-close-button",
7269
"--spectrum-toast-spacing-bottom-edge-to-text",
73-
"--spectrum-toast-spacing-close-button",
70+
"--spectrum-toast-spacing-close-button-to-edge",
7471
"--spectrum-toast-spacing-icon-to-text",
7572
"--spectrum-toast-spacing-start-edge-to-text-and-icon",
76-
"--spectrum-toast-spacing-text-and-action-button-to-divider",
7773
"--spectrum-toast-spacing-text-to-action-button-horizontal",
78-
"--spectrum-toast-spacing-top-edge-to-divider",
74+
"--spectrum-toast-spacing-text-to-close-button",
75+
"--spectrum-toast-spacing-top-edge-to-close-button",
7976
"--spectrum-toast-spacing-top-edge-to-icon",
8077
"--spectrum-toast-spacing-top-edge-to-text",
8178
"--spectrum-toast-text-and-icon-color",
@@ -85,7 +82,7 @@
8582
"global": [
8683
"--spectrum-border-width-100",
8784
"--spectrum-cjk-line-height-100",
88-
"--spectrum-corner-radius-100",
85+
"--spectrum-corner-radius-800",
8986
"--spectrum-font-size-100",
9087
"--spectrum-informative-background-color-default",
9188
"--spectrum-line-height-100",
@@ -94,11 +91,12 @@
9491
"--spectrum-positive-background-color-default",
9592
"--spectrum-regular-font-weight",
9693
"--spectrum-spacing-100",
94+
"--spectrum-spacing-200",
9795
"--spectrum-spacing-300",
98-
"--spectrum-text-to-visual-100",
99-
"--spectrum-transparent-white-400",
96+
"--spectrum-spacing-400",
97+
"--spectrum-text-to-visual-300",
10098
"--spectrum-white"
10199
],
102-
"passthroughs": [],
100+
"passthroughs": ["--mod-closebutton-icon-color-default"],
103101
"high-contrast": ["--highcontrast-toast-border-color"]
104102
}

‎components/toast/index.css

+38-52
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,16 +12,12 @@
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-
2319
--spectrum-toast-font-size: var(--spectrum-font-size-100);
24-
--spectrum-toast-corner-radius: var(--spectrum-corner-radius-100);
20+
--spectrum-toast-corner-radius: var(--spectrum-corner-radius-800);
2521
--spectrum-toast-block-size: var(--spectrum-toast-height);
2622
--spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width);
2723
--spectrum-toast-border-width: var(--spectrum-border-width-100);
@@ -30,41 +26,34 @@
3026
--spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100);
3127

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

3634
--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);
35+
--spectrum-toast-spacing-action-button-to-close-button: var(--spectrum-spacing-200);
3836

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

4240
--spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon);
4341

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);
42+
--spectrum-toast-spacing-block-start: var(--spectrum-spacing-200);
43+
--spectrum-toast-spacing-block-end: var(--spectrum-spacing-200);
4944

5045
--spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
5146
--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
5247

5348
/* Color */
49+
--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
5450
--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
5551
--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
5652
--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
5753

5854
--spectrum-toast-text-and-icon-color: var(--spectrum-white);
59-
}
6055

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-
}
56+
--mod-closebutton-icon-color-default: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
6857
}
6958

7059
.spectrum-Toast {
@@ -100,20 +89,10 @@
10089

10190
.spectrum-Toast--info {
10291
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-
}
10892
}
10993

11094
.spectrum-Toast--positive {
11195
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-
}
11796
}
11897

11998
.spectrum-Toast-typeIcon {
@@ -135,7 +114,6 @@
135114
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)));
136115
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)));
137116

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

141119
line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height));
@@ -156,42 +134,50 @@
156134
flex: 0 0 auto;
157135
align-items: flex-start;
158136

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));
137+
margin-block-start: var(--mod-toast-spacing-top-edge-to-close-button, var(--spectrum-toast-spacing-top-edge-to-close-button));
138+
margin-block-end: var(--mod-toast-spacing-bottom-edge-to-close-button, var(--spectrum-toast-spacing-bottom-edge-to-close-button));
139+
padding-inline-start: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button));
140+
padding-inline-end: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));
165141

166142
.spectrum-CloseButton {
167143
align-self: flex-start;
168144
}
169145
}
170146

147+
.spectrum-Toast .spectrum-Button {
148+
margin-inline-start: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
149+
}
150+
151+
.spectrum-Toast:has(.spectrum-Button) {
152+
.spectrum-Toast-buttons {
153+
padding-inline-start: var(--mod-toast-spacing-action-button-to-close-button, var(--spectrum-toast-spacing-action-button-to-close-button));
154+
}
155+
}
156+
171157
.spectrum-Toast-body {
172158
display: flex;
173159
flex-wrap: wrap;
174160
align-items: center;
175161
flex: 1 1 auto;
176162
align-self: center;
163+
justify-content: flex-end;
177164

178165
padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start));
179166
padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end));
180167

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-
191168
& + .spectrum-Toast-buttons {
192-
padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
169+
padding-inline-start: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));
193170

194171
border-inline-start-width: 1px;
195172
border-inline-start-style: solid;
196173
}
197174
}
175+
176+
@media (forced-colors: active) {
177+
.spectrum-Toast {
178+
/* Border is visible in high contrast mode */
179+
--highcontrast-toast-border-color: ButtonText;
180+
181+
border: var(--mod-toast-border-width, var(--spectrum-toast-border-width)) solid var(--highcontrast-toast-border-color, transparent);
182+
}
183+
}

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