feat(toast): S2 migration

Author: cdransf

.changeset/red-kiwis-flash.md

@@ -0,0 +1,32 @@
+---
+"@spectrum-css/toast": major
+---
+
+#### S2 toast migration
+
+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.
+
+##### Tokens
+
+| Before                       | After                        |
+| ---------------------------- | ---------------------------- |
+| --spectrum-corner-radius-100 | --spectrum-corner-radius-800 |
+
+##### Mods
+
+The following mods have been added.
+
+`--mod-toast-font-family`
+`--mod-toast-font-style`
+`--mod-toast-icon-block-size`
+`--mod-toast-spacing-action-button-to-close`
+`--mod-toast-spacing-bottom-edge-to-close-button`
+`--mod-toast-spacing-close-button-to-edge`
+`--mod-toast-spacing-text-to-close-button`
+`--mod-toast-spacing-top-edge-to-close-button`
+
+##### Passthroughs
+
+The following passthrough has been added.
+
+`--mod-closebutton-icon-color-default`

components/toast/dist/metadata.json

@@ -2,49 +2,49 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Toast",
+    ".spectrum-Toast .spectrum-Button",
     ".spectrum-Toast--info",
-    ".spectrum-Toast--info .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast--negative",
     ".spectrum-Toast--negative .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast--positive",
-    ".spectrum-Toast--positive .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast-body",
     ".spectrum-Toast-body + .spectrum-Toast-buttons",
-    ".spectrum-Toast-body .spectrum-Button",
-    ".spectrum-Toast-body .spectrum-Button:dir(rtl)",
     ".spectrum-Toast-buttons",
     ".spectrum-Toast-buttons .spectrum-CloseButton",
     ".spectrum-Toast-content",
     ".spectrum-Toast-content:lang(ja)",
     ".spectrum-Toast-content:lang(ko)",
     ".spectrum-Toast-content:lang(zh)",
     ".spectrum-Toast-typeIcon",
-    "[dir=\"rtl\"] .spectrum-Toast-body .spectrum-Button"
+    ".spectrum-Toast:has(.spectrum-Button) .spectrum-Toast-buttons"
   ],
   "modifiers": [
     "--mod-toast-background-color-default",
     "--mod-toast-block-size",
     "--mod-toast-border-width",
     "--mod-toast-corner-radius",
-    "--mod-toast-divider-color",
+    "--mod-toast-font-family",
     "--mod-toast-font-size",
+    "--mod-toast-font-style",
     "--mod-toast-font-weight",
+    "--mod-toast-icon-block-size",
     "--mod-toast-informative-background-color-default",
     "--mod-toast-line-height",
     "--mod-toast-line-height-cjk",
     "--mod-toast-max-inline-size",
     "--mod-toast-negative-background-color-default",
     "--mod-toast-positive-background-color-default",
+    "--mod-toast-spacing-action-button-to-close-button",
     "--mod-toast-spacing-block-end",
     "--mod-toast-spacing-block-start",
-    "--mod-toast-spacing-bottom-edge-to-divider",
+    "--mod-toast-spacing-bottom-edge-to-close-button",
     "--mod-toast-spacing-bottom-edge-to-text",
-    "--mod-toast-spacing-close-button",
+    "--mod-toast-spacing-close-button-to-edge",
     "--mod-toast-spacing-icon-to-text",
     "--mod-toast-spacing-start-edge-to-text-and-icon",
-    "--mod-toast-spacing-text-and-action-button-to-divider",
     "--mod-toast-spacing-text-to-action-button-horizontal",
-    "--mod-toast-spacing-top-edge-to-divider",
+    "--mod-toast-spacing-text-to-close-button",
+    "--mod-toast-spacing-top-edge-to-close-button",
     "--mod-toast-spacing-top-edge-to-icon",
     "--mod-toast-spacing-top-edge-to-text",
     "--mod-toast-text-and-icon-color"
@@ -55,27 +55,30 @@
     "--spectrum-toast-border-width",
     "--spectrum-toast-bottom-to-text",
     "--spectrum-toast-corner-radius",
-    "--spectrum-toast-divider-color",
+    "--spectrum-toast-font-family",
     "--spectrum-toast-font-size",
+    "--spectrum-toast-font-style",
     "--spectrum-toast-font-weight",
     "--spectrum-toast-height",
+    "--spectrum-toast-icon-block-size",
     "--spectrum-toast-informative-background-color-default",
     "--spectrum-toast-line-height",
     "--spectrum-toast-line-height-cjk",
     "--spectrum-toast-max-inline-size",
     "--spectrum-toast-maximum-width",
     "--spectrum-toast-negative-background-color-default",
     "--spectrum-toast-positive-background-color-default",
+    "--spectrum-toast-spacing-action-button-to-close-button",
     "--spectrum-toast-spacing-block-end",
     "--spectrum-toast-spacing-block-start",
-    "--spectrum-toast-spacing-bottom-edge-to-divider",
+    "--spectrum-toast-spacing-bottom-edge-to-close-button",
     "--spectrum-toast-spacing-bottom-edge-to-text",
-    "--spectrum-toast-spacing-close-button",
+    "--spectrum-toast-spacing-close-button-to-edge",
     "--spectrum-toast-spacing-icon-to-text",
     "--spectrum-toast-spacing-start-edge-to-text-and-icon",
-    "--spectrum-toast-spacing-text-and-action-button-to-divider",
     "--spectrum-toast-spacing-text-to-action-button-horizontal",
-    "--spectrum-toast-spacing-top-edge-to-divider",
+    "--spectrum-toast-spacing-text-to-close-button",
+    "--spectrum-toast-spacing-top-edge-to-close-button",
     "--spectrum-toast-spacing-top-edge-to-icon",
     "--spectrum-toast-spacing-top-edge-to-text",
     "--spectrum-toast-text-and-icon-color",
@@ -85,7 +88,9 @@
   "global": [
     "--spectrum-border-width-100",
     "--spectrum-cjk-line-height-100",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-800",
+    "--spectrum-default-font-family",
+    "--spectrum-default-font-style",
     "--spectrum-font-size-100",
     "--spectrum-informative-background-color-default",
     "--spectrum-line-height-100",
@@ -94,11 +99,13 @@
     "--spectrum-positive-background-color-default",
     "--spectrum-regular-font-weight",
     "--spectrum-spacing-100",
+    "--spectrum-spacing-200",
     "--spectrum-spacing-300",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-transparent-white-400",
-    "--spectrum-white"
+    "--spectrum-spacing-400",
+    "--spectrum-text-to-visual-300",
+    "--spectrum-white",
+    "--spectrum-workflow-icon-size-100"
   ],
-  "passthroughs": [],
+  "passthroughs": ["--mod-closebutton-icon-color-default"],
   "high-contrast": ["--highcontrast-toast-border-color"]
 }

components/toast/index.css

@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * Copyright 2025 Adobe. All rights reserved.
  *
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
@@ -12,59 +12,51 @@
  */
 
 .spectrum-Toast {
-	--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
-	--spectrum-toast-divider-color: var(--spectrum-transparent-white-400);
-
 	/* Hardcoded variables */
 	--spectrum-toast-font-weight: var(--spectrum-regular-font-weight);
 
 	/* Size */
-
+	--spectrum-toast-font-family: var(--spectrum-default-font-family);
+	--spectrum-toast-font-style: var(--spectrum-default-font-style);
 	--spectrum-toast-font-size: var(--spectrum-font-size-100);
-	--spectrum-toast-corner-radius: var(--spectrum-corner-radius-100);
+	--spectrum-toast-corner-radius: var(--spectrum-corner-radius-800);
 	--spectrum-toast-block-size: var(--spectrum-toast-height);
+	--spectrum-toast-icon-block-size: var(--spectrum-workflow-icon-size-100);
 	--spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width);
 	--spectrum-toast-border-width: var(--spectrum-border-width-100);
 
 	--spectrum-toast-line-height: var(--spectrum-line-height-100);
 	--spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
 	/* Space */
-
-	--spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100);
+	--spectrum-toast-spacing-close-button-to-edge: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-text-to-close-button: var(--spectrum-spacing-300);
+	--spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-400);
+	--spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-300);
 
 	--spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300);
-	--spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300);
+	--spectrum-toast-spacing-action-button-to-close-button: var(--spectrum-spacing-200);
 
-	--spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100);
-	--spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-top-edge-to-close-button: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-bottom-edge-to-close-button: var(--spectrum-spacing-200);
 
 	--spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon);
 
-	--spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300);
-	--spectrum-toast-spacing-close-button: var(--spectrum-spacing-100);
-
-	--spectrum-toast-spacing-block-start: var(--spectrum-spacing-100);
-	--spectrum-toast-spacing-block-end: var(--spectrum-spacing-100);
+	--spectrum-toast-spacing-block-start: var(--spectrum-spacing-200);
+	--spectrum-toast-spacing-block-end: var(--spectrum-spacing-200);
 
 	--spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
 	--spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
 
 	/* Color */
+	--spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
 	--spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
 	--spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
 	--spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
 
 	--spectrum-toast-text-and-icon-color: var(--spectrum-white);
-}
 
-@media (forced-colors: active) {
-	.spectrum-Toast {
-		/* Border is visible in high contrast mode */
-		--highcontrast-toast-border-color: ButtonText;
-
-		border: var(--mod-toast-border-width, var(--spectrum-toast-border-width)) solid var(--highcontrast-toast-border-color, transparent);
-	}
+	--mod-closebutton-icon-color-default: var(--mod-toast-text-and-icon-color, var(--spectrum-toast-text-and-icon-color));
 }
 
 .spectrum-Toast {
@@ -79,7 +71,9 @@
 
 	padding-inline-start: var(--mod-toast-spacing-start-edge-to-text-and-icon, var(--spectrum-toast-spacing-start-edge-to-text-and-icon));
 
+	font-family: var(--mod-toast-font-family, var(--spectrum-toast-font-family));
 	font-size: var(--mod-toast-font-size, var(--spectrum-toast-font-size));
+	font-style: var(--mod-toast-font-style, var(--spectrum-toast-font-style));
 	font-weight: var(--mod-toast-font-weight, var(--spectrum-toast-font-weight));
 
 	-webkit-font-smoothing: antialiased;
@@ -100,26 +94,17 @@
 
 .spectrum-Toast--info {
 	background-color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
-	color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
-
-	.spectrum-Toast-closeButton:focus-visible:not(:active) {
-		color: var(--mod-toast-informative-background-color-default, var(--spectrum-toast-informative-background-color-default));
-	}
 }
 
 .spectrum-Toast--positive {
 	background-color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
-	color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
-
-	.spectrum-Toast-closeButton:focus-visible:not(:active) {
-		color: var(--mod-toast-positive-background-color-default, var(--spectrum-toast-positive-background-color-default));
-	}
 }
 
 .spectrum-Toast-typeIcon {
 	flex-shrink: 0;
 	flex-grow: 0;
 
+	block-size: var(--mod-toast-icon-block-size, var(--spectrum-toast-icon-block-size));
 	margin-block-start: var(--mod-toast-spacing-top-edge-to-icon, var(--spectrum-toast-spacing-top-edge-to-icon));
 	margin-inline-end: var(--mod-toast-spacing-icon-to-text, var(--spectrum-toast-spacing-icon-to-text));
 	margin-inline-start: 0;
@@ -135,7 +120,6 @@
 	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)));
 	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)));
 
-	padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
 	padding-inline-start: 0;
 
 	line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height));
@@ -156,42 +140,38 @@
 	flex: 0 0 auto;
 	align-items: flex-start;
 
-	margin-block-start: var(--mod-toast-spacing-top-edge-to-divider, var(--spectrum-toast-spacing-top-edge-to-divider));
-	margin-block-end: var(--mod-toast-spacing-bottom-edge-to-divider, var(--spectrum-toast-spacing-bottom-edge-to-divider));
-
-	/* Divider color for Text | Action Button */
-	border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color));
-	padding-inline-end: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
+	margin-block-start: var(--mod-toast-spacing-top-edge-to-close-button, var(--spectrum-toast-spacing-top-edge-to-close-button));
+	margin-block-end: var(--mod-toast-spacing-bottom-edge-to-close-button, var(--spectrum-toast-spacing-bottom-edge-to-close-button));
+	padding-inline-start: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button));
+	padding-inline-end: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));
 
 	.spectrum-CloseButton {
 		align-self: flex-start;
 	}
 }
 
+.spectrum-Toast .spectrum-Button {
+	margin-inline-start: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
+}
+
+.spectrum-Toast:has(.spectrum-Button) {
+	.spectrum-Toast-buttons {
+		padding-inline-start: var(--mod-toast-spacing-action-button-to-close-button, var(--spectrum-toast-spacing-action-button-to-close-button));
+	}
+}
+
 .spectrum-Toast-body {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
 	flex: 1 1 auto;
 	align-self: center;
+	justify-content: flex-end;
 
 	padding-block-start: var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start));
 	padding-block-end: var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end));
 
-	.spectrum-Button {
-		margin-inline-start: auto;
-		margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
-
-		&:dir(rtl) {
-			margin-inline-end: auto;
-			margin-inline-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
-		}
-	}
-
 	& + .spectrum-Toast-buttons {
-		padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
-
-		border-inline-start-width: 1px;
-		border-inline-start-style: solid;
+		padding-inline-start: var(--mod-toast-spacing-close-button-to-edge, var(--spectrum-toast-spacing-close-button-to-edge));
 	}
 }

components/toast/stories/template.js

@@ -19,8 +19,8 @@ export const Template = ({
 	customStyles = {},
 	id = getRandomId("toast"),
 } = {}, context = {}) => {
-	let iconName = "Info";
-	if (variant === "negative") iconName = "Alert";
+	let iconName = "InfoCircle";
+	if (variant === "negative") iconName = "AlertTriangle";
 	if (variant === "positive") iconName = "CheckmarkCircle";
 	if (variant === "neutral") iconName = undefined;