feat(toast): migrate to Spectrum 2

.storybook/CHANGELOG.md

@@ -61,7 +61,12 @@ This component has been deprecated. Use an action bar to allow users to perform
 ##7.4.2
 🗓
 2024-02-06
+<a name="7.4.2-next.0"></a>
+##7.4.2-next.0
+🗓
+2024-02-06 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/preview@7.4.1...@spectrum-css/preview@7.4.2-next.0)
 
+**Note:** Spectrum 2 next version
 **Note:** Version bump only for package @spectrum-css/preview
 
 <a name="7.4.1"></a>

.storybook/decorators/contextsWrapper.js

@@ -8,7 +8,7 @@ export const withContextWrapper = makeDecorator({
 	name: "withContextWrapper",
 	parameterName: "context",
 	wrapper: (StoryFn, context) => {
-		const { args, argTypes, viewMode } = context;
+		const { args, argTypes, id, viewMode } = context;
 
 		const getDefaultValue = (type) => {
 			if (!type) return null;
@@ -31,7 +31,13 @@ export const withContextWrapper = makeDecorator({
 		const scales = ["medium", "large"];
 
 		useEffect(() => {
-			const container = viewMode === "docs" && !window.isChromatic() ? document.querySelector('#root-inner') ?? document.body : document.body;
+			const container =
+				viewMode === "docs" &&
+				!window.isChromatic() &&
+				!id.includes('foundation')
+					? document.querySelector('#root-inner') ?? document.body
+					: document.body;
+
 			container.classList.toggle("spectrum", true);
 
 			container.classList.toggle("spectrum--express", isExpress);

.storybook/decorators/index.js

@@ -2,6 +2,7 @@ import { makeDecorator, useEffect } from "@storybook/preview-api";
 import { html } from "lit";
 
 export { withContextWrapper } from "./contextsWrapper.js";
+export { withDownStateDimensionCapture } from "./withDownStateDimensionCapture.js";
 export { withTestingPreviewWrapper } from "./withTestingPreviewWrapper.js";
 
 /**

.storybook/decorators/withDownStateDimensionCapture.js

@@ -0,0 +1,19 @@
+export const withDownStateDimensionCapture = (selector) => (Story, context) => {
+  const captureDownStateDimensions = () => {
+    const components = document.querySelectorAll(selector);
+    components.forEach((component) => {
+      const { width, height } = component.getBoundingClientRect();
+      component.style.setProperty('--spectrum-downstate-width', `${width}px`);
+      component.style.setProperty('--spectrum-downstate-height', `${height}px`);
+    });
+  };
+
+  document.addEventListener("DOMContentLoaded", () => {
+    // Wait to make sure the story is fully rendered (otherwise width/height can be wrong)
+    setTimeout(() => {
+        captureDownStateDimensions();
+    }, 100);
+  });
+
+  return Story(context);
+};

.storybook/foundations/corner-rounding/action-button-corner-rounding.stories.js

@@ -0,0 +1,105 @@
+import { html } from "lit";
+import { Template } from "../../../components/actionbutton/stories/template";
+
+export default {
+	title: "Foundations/Corner rounding",
+	description:
+		"The action button component represents an action a user can take.",
+	component: "ActionButton",
+	args: {
+		rootClass: "spectrum-ActionButton",
+	},
+	parameters: {
+		actions: {
+			handles: ["click .spectrum-ActionButton:not([disabled])"],
+		},
+	},
+	tags: ['foundation'],
+};
+
+const ActionButton = ({
+	...args
+}) => {
+	return html`
+		<div style="padding: 1rem 0;">
+			${Template({
+				...args,
+				iconName: undefined,
+			})}
+		</div>
+	`;
+};
+
+const ActionButtonTable = ({ ...args }) => {
+	return html`
+		<table class="spectrum-Foundations-Example-CornerRounding-table">
+			<thead>
+				<tr>
+					<th scope="col">Token</th>
+					<th scope="col" style="padding: 0 2rem;">Value</th>
+					<th scope="col">Medium example</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>--spectrum-corner-radius-medium-size-extra-small</td>
+					<td style="padding: 0 2rem;">6px</td>
+					<td>
+						${ActionButton({
+							...args,
+							label: "Extra Small",
+							size: "xs"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-medium-size-small</td>
+					<td style="padding: 0 2rem;">7px</td>
+					<td>
+						${ActionButton({
+							...args,
+							label: "Small",
+							size: "s"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-medium-size-medium</td>
+					<td style="padding: 0 2rem;">8px</td>
+					<td>
+						${ActionButton({
+							...args,
+							label: "Medium",
+							size: "m"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-medium-size-large</td>
+					<td style="padding: 0 2rem;">9px</td>
+					<td>
+						${ActionButton({
+							...args,
+							label: "Large",
+							size: "l"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-medium-size-extra-large</td>
+					<td style="padding: 0 2rem;">10px</td>
+					<td>
+						${ActionButton({
+							...args,
+							label: "Extra Large",
+							size: "xl"
+						})}
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	`;
+};
+
+export const ActionButtonExamples = ActionButtonTable.bind({});
+ActionButtonExamples.args = {};

.storybook/foundations/corner-rounding/checkbox-corner-rounding.stories.js

@@ -0,0 +1,97 @@
+// Import the component markup template
+import { html } from "lit";
+import { Template } from "../../../components/checkbox/stories/template";
+
+export default {
+	title: "Foundations/Corner rounding",
+	description:
+		"Checkboxes allow users to select multiple items from a list of individual items, or mark one individual item as selected.",
+	component: "Checkbox",
+	args: {
+		rootClass: "spectrum-Checkbox",
+	},
+	parameters: {
+		actions: {
+			handles: ['click input[type="checkbox"]'],
+		},
+	},
+	tags: ['foundation'],
+};
+
+const Checkbox = ({
+	customStyles = {},
+	isChecked = false,
+	...args
+}) => {
+	return html`
+		<div style="padding: 1rem 0;">
+			${Template({
+				...args,
+				iconName: undefined,
+			})}
+		</div>
+	`;
+};
+
+const CheckboxTable = ({...args}) => {
+	return html`
+		<table class="spectrum-Foundations-Example-CornerRounding-table">
+			<thead>
+				<tr>
+					<th scope="col">Token</th>
+					<th scope="col" style="padding: 0 2rem;">Value</th>
+					<th scope="col">Small example</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>--spectrum-corner-radius-small-size-small</td>
+					<td style="padding: 0 2rem;">3px</td>
+					<td>
+						${Checkbox({
+							...args,
+							label: "Small",
+							size: "s"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-small-size-medium</td>
+					<td style="padding: 0 2rem;">4px</td>
+					<td>
+						${Checkbox({
+							...args,
+							label: "Medium",
+							size: "m"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-small-size-large</td>
+					<td style="padding: 0 2rem;">5px</td>
+					<td>
+						${Checkbox({
+							...args,
+							label: "Large",
+							size: "l"
+						})}
+					</td>
+				</tr>
+				<tr>
+					<td>--spectrum-corner-radius-small-size-extra-large</td>
+					<td style="padding: 0 2rem;">6px</td>
+					<td>
+						${Checkbox({
+							...args,
+							label: "Extra Large",
+							size: "xl"
+						})}
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	`;
+}
+
+export const CheckboxExamples = CheckboxTable.bind({});
+CheckboxExamples.args = {};

.storybook/foundations/corner-rounding/component-size-tokens-medium.md

@@ -0,0 +1,7 @@
+| Component size token                              | Alias token (if available)    | Global token                 | Value |
+|---------------------------------------------------|-------------------------------|------------------------------|-------|
+| --spectrum-corner-radius-medium-size-extra-small   |                               | --spectrum-corner-radius-300 | 6px   |
+| --spectrum-corner-radius-medium-size-small         |                               | --spectrum-corner-radius-400 | 7px   |
+| --spectrum-corner-radius-medium-size-medium        | --spectrum-corner-radius-medium-default | --spectrum-corner-radius-500 | 8px   |
+| --spectrum-corner-radius-medium-size-large         |                               | --spectrum-corner-radius-600 | 9px   |
+| --spectrum-corner-radius-medium-size-extra-large   | --spectrum-corner-radius-large-default | --spectrum-corner-radius-700 | 10px  |

.storybook/foundations/corner-rounding/component-size-tokens-small.md

@@ -0,0 +1,6 @@
+| Component size token                              | Alias token (if available)    | Global token                 | Value |
+|---------------------------------------------------|-------------------------------|------------------------------|-------|
+| --spectrum-corner-radius-small-size-small         |                               | --spectrum-corner-radius-75  | 3px   |
+| --spectrum-corner-radius-small-size-medium        | --spectrum-corner-radius-small-default | --spectrum-corner-radius-100 | 4px   |
+| --spectrum-corner-radius-small-size-large         |                               | --spectrum-corner-radius-200 | 5px   |
+| --spectrum-corner-radius-small-size-extra-large   |                               | --spectrum-corner-radius-300 | 6px   |

.storybook/foundations/corner-rounding/corner-rounding.mdx

@@ -0,0 +1,26 @@
+import { Meta, Canvas, Story, Title, Unstyled } from '@storybook/blocks';
+import * as CornerRoundingStories from './corner-rounding.stories.js';
+import * as CheckboxStories from './checkbox-corner-rounding.stories.js';
+import * as ActionButtonStories from './action-button-corner-rounding.stories.js';
+
+<Meta of={CornerRoundingStories} />
+
+<Title />
+
+## Default values
+
+<Story of={CornerRoundingStories.CornerRounding} />
+
+## Component examples
+
+### Small tokens
+
+Checkbox includes small component size tokens to scale corner rounding.
+
+<Story of={CheckboxStories.CheckboxExamples} />
+
+### Medium tokens
+
+Action button includes medium component size tokens to scale corner rounding.
+
+<Story of={ActionButtonStories.ActionButtonExamples} />

.storybook/foundations/corner-rounding/corner-rounding.stories.js

@@ -0,0 +1,75 @@
+// Import the component markup template
+import { html } from "lit";
+import { Template } from './template';
+
+export default {
+	title: "Foundations/Corner rounding",
+	description:
+		"Corner rounding is a foundation that shows the different border-radius tokens that can be applied to a component.",
+	component: "Corner rounding",
+	args: {
+		rootClass: "spectrum-Foundations-Example-CornerRounding",
+	},
+  tags: ['foundation'],
+};
+
+const CornerRadiusGroup = ({
+	customStyles = {},
+	...args
+}) => {
+	return html`
+		<div>
+      <table class="spectrum-Foundations-Example-CornerRounding-table">
+        <thead>
+          <tr>
+            <th scope="col">Token</th>
+            <th scope="col" style="padding: 0 2rem;">Value</th>
+            <th scope="col">Example<br>(No Border)</th>
+            <th scope="col">Example<br>(Border)</th>
+          </tr>
+        </thead>
+        <tbody>
+			${Template({
+				...args,
+        label: '--spectrum-corner-radius-none',
+        size: 'none',
+        value: '0px',
+			})}
+      ${Template({
+				...args,
+        label: '--spectrum-corner-radius-small-default',
+        size: 's',
+        value: '4px',
+			})}
+      ${Template({
+				...args,
+        label: '--spectrum-corner-radius-medium-default',
+        size: 'm',
+        value: '8px',
+			})}
+      ${Template({
+				...args,
+        label: '--spectrum-corner-radius-large-default',
+        size: 'l',
+        value: '10px',
+			})}
+      ${Template({
+				...args,
+        label: '--spectrum-corner-radius-extra-large-default',
+        size: 'xl',
+        value: '16px',
+			})}
+      ${Template({
+				...args,
+        label: '--spectrum-corner-radius-full',
+        size: 'full',
+        value: '9999px',
+			})}
+        </tbody>
+      </table>
+		</div>
+	`;
+};
+
+export const CornerRounding = CornerRadiusGroup.bind({});
+CornerRounding.args = {};