chore: run branch through format; update pathing and fix errors (#2700)

castastrophe · jawinn · pfulton · aramos-adobe · commit ac053926ec65 · 2025-01-09T17:00:16.000-05:00
* feat(fieldlabel)!: s2 migration (#2569) BREAKING CHANGE: uses Spectrum 2 tokens Also: * feat(fieldlabel): medium as default and 100 sizing tokens - Use the correct "100" sized tokens for medium. - Make medium styles the default, to conform with existing pattern. .spectrum-FieldLabel--sizeM class removed as it is no longer necessary. * feat(fieldlabel): use correct font size tokens The font-size tokens used for large and extra large needed to be shifted up to match the s2 spec. * refactor(fieldlabel): remove deprecated mods Remove renamed mods marked as deprecated for S2 release. * docs(fieldlabel): spectrum 2 noted in migration notes Updates some docs and adds migration notes. Clarifies some docs around "left" and "right", and fixes duplicate ID warnings from examples code. * docs(fieldlabel): form - docs update and regenerate mods Add migration guide section to "Form", that currently lives within the Field label component. Regenerates mods to include the removal of deprecated renamed mods. * fix(fieldlabel): rename mod property referencing global token A mod custom property was referencing a global token instead of the component itself. Renames this and adds a note to the migration guide. * feat(fieldlabel): use correct sizing tokens Use correct tokens for some large and extra large custom properties, to matching with design. * style(fieldlabel): applying linter formatting adjustments Run linter fix on the fieldlabel component, which rearranges a few declarations. * docs(fieldlabel): document asterisk icon size Add documentation about asterisk UI icon sizes specified on the design. These sizes are already handled in the Storybook template, but were not really explained to the user. * feat(fieldlabel): black and white static color variants Add classes for static colors, as defined on the designs. And adds examples of these variants to the documentation. * build(fieldlabel): specify s2 tokens release for dependency Use Spectrum 2 version of tokens package in dependencies list. * chore: rebase against main and update components to use prerelease tokens * chore: run branch through format; update pathing and fix errors * chore: add changeset for css update --------- Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Patrick Fulton <pfulton@adobe.com>
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
@@ -1,9 +1,12 @@
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
 =======
+import { withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
+
+>>>>>>> 8e36ef037 (chore: run branch through format; update pathing and fix errors (#2700))
 import { html } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
-import { withDownStateDimensionCapture } from "../../../.storybook/decorators";
 
 >>>>>>> 8e9945253 (feat(downstate): docs + implementation for example components (#2520))
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
@@ -21,7 +24,6 @@ import { ButtonsWithIconOptions, TextOverflowTemplate, TextWrapTemplate, Treatme
 export default {
 	title: "Button",
 	component: "Button",
-	decorators: [withDownStateDimensionCapture('.spectrum-Button:not(:disabled)')],
 	argTypes: {
 		size: size(["s", "m", "l", "xl"]),
 		label: {
@@ -108,7 +110,34 @@ export default {
 		metadata,
 	},
 	decorators: [
+<<<<<<< HEAD
 		withDownStateDimensionCapture,
+=======
+		withDownStateDimensionCapture(".spectrum-Button:not(:disabled)"),
+		(Story, context) => html`
+			<style>
+				.spectrum-Detail { display: inline-block; }
+				.spectrum-Typography > div {
+					border: 1px solid var(--spectrum-gray-200);
+					border-radius: 4px;
+					padding: 0 10px 10px;
+					/* Why seafoam? Because it separates it from the component styles. */
+					--mod-detail-font-color: var(--spectrum-seafoam-900);
+				}
+			</style>
+			<div
+				style=${styleMap({
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "flex-start",
+					gap: "10px",
+					"--mod-detail-margin-end": "6px",
+				})}
+			>
+				${Story(context)}
+			</div>
+		`,
+>>>>>>> 8e36ef037 (chore: run branch through format; update pathing and fix errors (#2700))
 	],
 	tags: ["!autodocs", "migrated"],
 };
diff --git a/components/checkbox/package.json b/components/checkbox/package.json
@@ -45,10 +45,6 @@
 		"design system",
 		"adobe"
 	],
-	"peerDependencies": {
-		"@spectrum-css/icon": ">=7",
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
-	},
 	"publishConfig": {
 		"access": "public"
 	},
diff --git a/components/dial/package.json b/components/dial/package.json
@@ -43,9 +43,6 @@
 		"design system",
 		"adobe"
 	],
-	"peerDependencies": {
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
-	},
 	"publishConfig": {
 		"access": "public"
 	},
diff --git a/components/divider/package.json b/components/divider/package.json
@@ -43,9 +43,6 @@
 		"design system",
 		"adobe"
 	],
-	"peerDependencies": {
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
-	},
 	"publishConfig": {
 		"access": "public"
 	},
diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js
@@ -64,4 +64,18 @@ export const Template = ({
 			${when(isRequired, () => icon)}
 		</label>
 	`;
+
+	// When using the static color variants, wrap the label in an example element with a background color.
+	return !staticColor
+		? labelMarkup
+		: html`
+			<div
+				style=${styleMap({
+					padding: "1rem",
+					backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
+				})}
+			</div>
+				${labelMarkup}
+			</div>
+		`;
 };
diff --git a/components/opacitycheckerboard/package.json b/components/opacitycheckerboard/package.json
@@ -43,9 +43,6 @@
 		"design system",
 		"adobe"
 	],
-	"peerDependencies": {
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
-	},
 	"publishConfig": {
 		"access": "public"
 	},
diff --git a/components/page/package.json b/components/page/package.json
@@ -21,15 +21,15 @@
 		"stories/template.js",
 		"metadata/mods.md"
 	],
+	"peerDependencies": {
+		"@spectrum-css/tokens": ">=14.0.0-next.3"
+	},
 	"keywords": [
 		"spectrum",
 		"css",
 		"design system",
 		"adobe"
 	],
-	"peerDependencies": {
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
-	},
 	"publishConfig": {
 		"access": "public"
 	}
diff --git a/components/progresscircle/package.json b/components/progresscircle/package.json
@@ -43,9 +43,6 @@
 		"design system",
 		"adobe"
 	],
-	"peerDependencies": {
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
-	},
 	"publishConfig": {
 		"access": "public"
 	},
