feat(search): s2 migration

.changeset/perfect-dogs-smash.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/button": patch
+---
+
+chore: run branch through formatter

.changeset/pre.json

@@ -0,0 +1,106 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@spectrum-tools/gh-action-file-diff": "2.0.5",
+    "@spectrum-css/preview": "8.1.0-next.1",
+    "@spectrum-css/accordion": "4.2.7-next.2",
+    "@spectrum-css/actionbar": "7.2.5-next.2",
+    "@spectrum-css/actionbutton": "5.2.7-next.2",
+    "@spectrum-css/actiongroup": "5.0.0-next.3",
+    "@spectrum-css/actionmenu": "5.1.4-next.2",
+    "@spectrum-css/alertbanner": "1.1.42-next.2",
+    "@spectrum-css/alertdialog": "1.2.5-next.2",
+    "@spectrum-css/asset": "4.0.1-next.2",
+    "@spectrum-css/assetcard": "3.1.5-next.2",
+    "@spectrum-css/assetlist": "5.2.5-next.2",
+    "@spectrum-css/avatar": "6.1.6-next.2",
+    "@spectrum-css/badge": "3.2.6-next.2",
+    "@spectrum-css/breadcrumb": "8.2.6-next.2",
+    "@spectrum-css/button": "14.0.0-next.4",
+    "@spectrum-css/buttongroup": "7.0.0-next.3",
+    "@spectrum-css/calendar": "4.2.6-next.2",
+    "@spectrum-css/card": "7.0.3-next.2",
+    "@spectrum-css/checkbox": "14.0.0-next.4",
+    "@spectrum-css/clearbutton": "5.1.5-next.2",
+    "@spectrum-css/closebutton": "5.0.0-next.2",
+    "@spectrum-css/coachindicator": "1.1.6-next.2",
+    "@spectrum-css/coachmark": "6.1.6-next.2",
+    "@spectrum-css/colorarea": "4.1.6-next.2",
+    "@spectrum-css/colorhandle": "7.1.5-next.2",
+    "@spectrum-css/colorloupe": "4.2.5-next.2",
+    "@spectrum-css/colorslider": "5.1.6-next.2",
+    "@spectrum-css/colorwheel": "3.1.6-next.2",
+    "@spectrum-css/combobox": "2.1.7-next.2",
+    "@spectrum-css/commons": "9.1.4-next.1",
+    "@spectrum-css/contextualhelp": "2.1.6-next.2",
+    "@spectrum-css/datepicker": "2.1.5-next.2",
+    "@spectrum-css/dial": "2.2.5-next.2",
+    "@spectrum-css/dialog": "9.2.5-next.2",
+    "@spectrum-css/divider": "2.2.6-next.2",
+    "@spectrum-css/dropindicator": "4.1.5-next.2",
+    "@spectrum-css/dropzone": "5.2.6-next.2",
+    "@spectrum-css/fieldgroup": "4.2.5-next.2",
+    "@spectrum-css/fieldlabel": "8.0.0-next.2",
+    "@spectrum-css/floatingactionbutton": "1.2.6-next.2",
+    "@spectrum-css/helptext": "4.1.6-next.2",
+    "@spectrum-css/icon": "6.0.6-next.2",
+    "@spectrum-css/illustratedmessage": "6.1.6-next.2",
+    "@spectrum-css/infieldbutton": "4.2.5-next.2",
+    "@spectrum-css/inlinealert": "7.1.7-next.2",
+    "@spectrum-css/link": "4.2.6-next.2",
+    "@spectrum-css/logicbutton": "3.3.5-next.2",
+    "@spectrum-css/menu": "6.1.6-next.2",
+    "@spectrum-css/miller": "5.1.5-next.2",
+    "@spectrum-css/modal": "4.2.7-next.2",
+    "@spectrum-css/opacitycheckerboard": "1.1.6-next.2",
+    "@spectrum-css/page": "7.1.5-next.2",
+    "@spectrum-css/pagination": "7.1.7-next.2",
+    "@spectrum-css/picker": "7.2.8-next.2",
+    "@spectrum-css/pickerbutton": "4.1.6-next.2",
+    "@spectrum-css/popover": "6.2.6-next.2",
+    "@spectrum-css/progressbar": "3.1.6-next.2",
+    "@spectrum-css/progresscircle": "2.2.4-next.2",
+    "@spectrum-css/radio": "8.1.6-next.2",
+    "@spectrum-css/rating": "4.2.5-next.2",
+    "@spectrum-css/search": "6.2.5-next.2",
+    "@spectrum-css/sidenav": "4.2.5-next.2",
+    "@spectrum-css/site": "4.2.5-next.2",
+    "@spectrum-css/slider": "4.3.6-next.2",
+    "@spectrum-css/splitview": "4.2.5-next.2",
+    "@spectrum-css/statuslight": "6.1.7-next.2",
+    "@spectrum-css/steplist": "4.1.5-next.2",
+    "@spectrum-css/stepper": "5.1.6-next.2",
+    "@spectrum-css/swatch": "5.1.6-next.2",
+    "@spectrum-css/swatchgroup": "2.1.6-next.2",
+    "@spectrum-css/switch": "4.2.6-next.2",
+    "@spectrum-css/table": "5.2.6-next.2",
+    "@spectrum-css/tabs": "4.1.5-next.2",
+    "@spectrum-css/tag": "8.1.6-next.2",
+    "@spectrum-css/taggroup": "4.1.6-next.2",
+    "@spectrum-css/textfield": "6.1.7-next.2",
+    "@spectrum-css/thumbnail": "5.2.5-next.2",
+    "@spectrum-css/toast": "9.1.26-next.2",
+    "@spectrum-css/tooltip": "5.3.6-next.2",
+    "@spectrum-css/tray": "2.2.8-next.2",
+    "@spectrum-css/treeview": "9.2.7-next.2",
+    "@spectrum-css/typography": "5.1.6-next.2",
+    "@spectrum-css/underlay": "3.2.5-next.2",
+    "@spectrum-css/well": "4.1.5-next.2",
+    "@spectrum-css/generator": "3.0.0",
+    "conventional-changelog-spectrum": "1.0.2",
+    "postcss-combininator": "2.0.0",
+    "postcss-custom-properties-mapping": "2.0.0",
+    "postcss-splitinator": "2.0.0",
+    "@spectrum-tools/stylelint-no-missing-var": "1.3.1",
+    "@spectrum-tools/stylelint-no-unknown-custom-properties": "1.3.2",
+    "@spectrum-tools/stylelint-no-unused-custom-properties": "1.3.1",
+    "@spectrum-tools/documentation": "1.0.0",
+    "@spectrum-css/tokens": "14.0.0-next.6",
+    "@spectrum-css/ui-icons": "1.1.2"
+  },
+  "changesets": [
+    "perfect-dogs-smash",
+    "pretty-parents-drum"
+  ]
+}

.changeset/pretty-parents-drum.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/tokens": patch
+---
+
+use spectrum-tokens@13.0.0-beta.30

.changeset/shaggy-schools-sing.md

@@ -0,0 +1,15 @@
+---
+"@spectrum-css/search": major
+"@spectrum-css/textfield": patch
+---
+
+- feat(search): S2 migration
+  - Search now uses Spectrum 2 tokens and specifications. The following items have been adjusted:
+    - Quiet variant has been deprecated and code removed (including removal of the custom property `--mod-search-quiet-button-offset`).
+    - Updates to colors, corner rounding, and spacing.
+    - Custom property mod adjustments:
+      - Added `--mod-search-edge-to-text`.
+      - Added `--mod-search-top-to-icon`.
+      - Removed `--mod-workflow-icon-size-100`.
+- chore(textfield): add border-color custom property mod
+  - Search needed access to the disabled border-color in textfield, so the `--mod-textfield-border-color-disabled` custom property was added.

.storybook/CHANGELOG.md

@@ -86,7 +86,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/assets/base.css

@@ -22,6 +22,13 @@ body {
 }
 
 .spectrum {
+	/* ---- Storybook only custom properties ---- */
+	/* Gradient that changes with the color theme. */
+	--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
+	/* Gradients that do not change with the color theme, for use in static color backgrounds. */
+	--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255, 241, 246), rgb(238, 245, 255));
+	--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64, 0, 22), rgb(14, 24, 67));
+
 	background-color: var(--spectrum-background-layer-1-color);
 
 	/* @todo: add back the text color and update VRTs */

.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;
@@ -27,11 +27,17 @@ export const withContextWrapper = makeDecorator({
 		/** @type string */
 		const scale = args.scale ? args.scale : getDefaultValue(argTypes.scale) ?? "medium";
 
-		const colors = ["light", "dark", "darkest"];
+		const colors = ["light", "dark"];
 		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);
@@ -44,12 +50,15 @@ export const withContextWrapper = makeDecorator({
 				container.classList.toggle(`spectrum--${s}`, s === scale);
 			}
 
+			// Change background color when demonstrating static color options.
 			if (args.staticColor === "black") {
-				container.style.backgroundColor = "rgb(181, 209, 211)";
-			} else if (args.staticColor === "white") {
-				 container.style.backgroundColor = "rgb(15, 121, 125)";
-			} else {
-				container.style.removeProperty("background-color");
+				container.style.background = "var(--spectrum-examples-gradient-static-black)";
+			}
+			else if (args.staticColor === "white") {
+				 container.style.background = "var(--spectrum-examples-gradient-static-white)";
+			}
+			else {
+				container.style.removeProperty("background");
 			}
 		}, [color, scale, isExpress, args.staticColor]);
 

.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 = {};