feat(toast)!: migrate to s2

BREAKING CHANGE: migrates Toast to use Spectrum2 tokens and values
adobe · Apr 2, 2024 · c425d27 · c425d27
1 parent 9b745e7
commit c425d27
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 123 deletions.
diff --git a/components/toast/index.css b/components/toast/index.css
@@ -10,16 +10,14 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import "./themes/express.css";
-
 .spectrum-Toast {
   /* Hardcoded variables */
   --spectrum-toast-font-weight: var(--spectrum-regular-font-weight);
 
   /* Size */
 
   --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-max-inline-size: var(--spectrum-toast-maximum-width);
   --spectrum-toast-border-width: var(--spectrum-border-width-100);
@@ -28,35 +26,33 @@ governing permissions and limitations under the License.
   --spectrum-toast-line-height-cjk: var(--spectrum-cjk-line-height-100);
 
   /* Space */
+  --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-100);
+  --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);
-
-  --spectrum-toast-divider-color: var(--spectrum-transparent-white-300);
 }
 
 @media (forced-colors: active) {
@@ -134,8 +130,6 @@ governing permissions and limitations under the License.
 
   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,45 +150,34 @@ governing permissions and limitations under the License.
   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-end: var(--mod-toast-spacing-text-and-action-button-to-divider, var(--spectrum-toast-spacing-text-and-action-button-to-divider));
-
-    [dir="ltr"] & {
-      margin-inline-start: auto;
-    }
-
-    [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;
-  }
 }
diff --git a/components/toast/metadata/mods.md b/components/toast/metadata/mods.md
@@ -1,28 +1,28 @@
-| Modifiable custom properties                            |
-| ------------------------------------------------------- |
-| `--mod-toast-background-color-default`                  |
-| `--mod-toast-block-size`                                |
-| `--mod-toast-border-width`                              |
-| `--mod-toast-corner-radius`                             |
-| `--mod-toast-divider-color`                             |
-| `--mod-toast-font-size`                                 |
-| `--mod-toast-font-weight`                               |
-| `--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-block-end`                         |
-| `--mod-toast-spacing-block-start`                       |
-| `--mod-toast-spacing-bottom-edge-to-divider`            |
-| `--mod-toast-spacing-bottom-edge-to-text`               |
-| `--mod-toast-spacing-close-button`                      |
-| `--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-top-edge-to-icon`                  |
-| `--mod-toast-spacing-top-edge-to-text`                  |
-| `--mod-toast-text-and-icon-color`                       |
+| Modifiable custom properties                           |
+| ------------------------------------------------------ |
+| `--mod-toast-background-color-default`                 |
+| `--mod-toast-block-size`                               |
+| `--mod-toast-border-width`                             |
+| `--mod-toast-corner-radius`                            |
+| `--mod-toast-font-size`                                |
+| `--mod-toast-font-weight`                              |
+| `--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-close-button`      |
+| `--mod-toast-spacing-bottom-edge-to-text`              |
+| `--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-to-action-button-horizontal` |
+| `--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`                      |
diff --git a/components/toast/package.json b/components/toast/package.json
@@ -15,9 +15,9 @@
   },
   "main": "dist/index.css",
   "peerDependencies": {
-    "@spectrum-css/button": ">=11",
-    "@spectrum-css/closebutton": ">=4",
-    "@spectrum-css/icon": ">=4",
+    "@spectrum-css/button": ">=12",
+    "@spectrum-css/closebutton": "^5.0.0-next.0",
+    "@spectrum-css/icon": ">=6",
     "@spectrum-css/tokens": "^14.0.0-next.3"
   },
   "publishConfig": {

diff --git a/components/toast/stories/template.js b/components/toast/stories/template.js
@@ -2,9 +2,9 @@ import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
 import { Template as Button } from "@spectrum-css/button/stories/template.js";
+import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
+import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 
 import "../index.css";
 
@@ -13,27 +13,18 @@ export const Template = ({
 	rootClass = "spectrum-Toast",
 	message,
 	inlineButtonLabel,
-	width,
 	variant,
 	customClasses = [],
 	id,
 	...globals
 }) => {
-	const { express } = globals;
-
-	try {
-		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
-		else import(/* webpackPrefetch: true */ "../themes/express.css");
-	} catch (e) {
-		console.warn(e);
-	}
 
 	const iconName =
 		variant === "negative"
 			? "Alert"
 			: variant === "positive"
-			? "CheckmarkCircle"
-			: "Info";
+				? "CheckmarkCircle"
+				: "Info";
 
 	return html`
 		<div
@@ -50,7 +41,7 @@ export const Template = ({
 						iconName: ifDefined(iconName),
 						size: "m",
 						customClasses: [`${rootClass}-typeIcon`],
-				  })
+					})
 				: ""}
 			<div class="${rootClass}-body">
 				<div class="${rootClass}-content">${message}</div>
@@ -62,7 +53,7 @@ export const Template = ({
 							staticColor: "white",
 							treatment: "outline",
 							label: inlineButtonLabel,
-					  })
+						})
 					: ""}
 			</div>
 			<div class="${rootClass}-buttons">

diff --git a/components/toast/themes/express.css b/components/toast/themes/express.css
diff --git a/components/toast/themes/spectrum.css b/components/toast/themes/spectrum.css