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

* 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 <[email protected]> Co-authored-by: Patrick Fulton <[email protected]>
adobe · May 1, 2024 · 5122de8 · 5122de8
1 parent 06d2ecf
commit 5122de8
Show file tree

Hide file tree

Showing 39 changed files with 480 additions and 462 deletions.
diff --git a/.changeset/perfect-dogs-smash.md b/.changeset/perfect-dogs-smash.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/button": patch
+---
+
+chore: run branch through formatter
diff --git a/.storybook/package.json b/.storybook/package.json
@@ -11,7 +11,7 @@
 	},
 	"dependencies": {
 		"@adobe/spectrum-css-workflow-icons": "^1.5.4",
-		"@spectrum-css/tokens": "^14.0.0-next.6",
+		"@spectrum-css/tokens": "^14.0.0-next.7",
 		"@spectrum-css/ui-icons": "^1.1.2"
 	},
 	"devDependencies": {
@@ -50,5 +50,12 @@
 		"storybook": "^8.0.9",
 		"style-loader": "4.0.0",
 		"webpack": "^5.91.0"
-	}
+	},
+	"keywords": [
+		"adobe",
+		"css",
+		"design system",
+		"spectrum",
+		"storybook"
+	]
 }
diff --git a/components/actionbutton/metadata/mods.md b/components/actionbutton/metadata/mods.md
@@ -49,6 +49,9 @@
 | `--mod-actionbutton-min-width`                                    |
 | `--mod-actionbutton-static-content-color`                         |
 | `--mod-actionbutton-text-to-visual`                               |
+| `--mod-animation-duration-100`                                    |
 | `--mod-button-animation-duration`                                 |
 | `--mod-button-font-family`                                        |
 | `--mod-button-line-height`                                        |
+| `--mod-line-height-100`                                           |
+| `--mod-sans-font-family-stack`                                    |
diff --git a/components/actiongroup/CHANGELOG.md b/components/actiongroup/CHANGELOG.md
@@ -8,15 +8,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 🗓
 2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
 
-* feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
+- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
 
-    	###
-    	🛑 BREAKING CHANGES
+  ###
 
-    		*
-    		- Removes component-builder & component-builder-simple for script leveraging postcss
+  🛑 BREAKING CHANGES
+
+  -
+
+  * Removes component-builder & component-builder-simple for script leveraging postcss
 
-- Imports added to index.css and themes/express.css
+* Imports added to index.css and themes/express.css
 
 <a name="4.2.5"></a>
 ##4.2.5

diff --git a/components/button/index.css b/components/button/index.css
@@ -142,20 +142,12 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Icon {
-    /* Any block-size difference between the intended workflow icon size and actual icon used.
+    /* stylelint-disable-next-line custom-property-pattern -- Any block-size difference between the intended workflow icon size and actual icon used.
        Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
-    --_icon-size-difference: max(0px,
-      var(--spectrum-button-intended-icon-size) -
-      var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size))
-    );
+    --_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)));
 
-    margin-block-start: var(--mod-button-icon-margin-block-start,
-      max(0px,
-        var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) -
-        var(--mod-button-border-width, var(--spectrum-button-border-width)) +
-        (var(--_icon-size-difference, 0px) / 2)
-      )
-    );
+    /* stylelint-disable-next-line custom-property-pattern -- see note above */
+    margin-block-start: var(--mod-button-icon-margin-block-start, max(0px, var(--mod-button-top-to-icon, var(--spectrum-button-top-to-icon)) - var(--mod-button-border-width, var(--spectrum-button-border-width)) + (var(--_icon-size-difference, 0px) / 2)));
 
     margin-inline-start: calc(
       var(--mod-button-edge-to-visual, var(--spectrum-button-edge-to-visual)) -

diff --git a/components/button/metadata/mods.md b/components/button/metadata/mods.md
@@ -1,5 +1,6 @@
 | Modifiable custom properties               |
 | ------------------------------------------ |
+| `--mod-animation-duration-100`             |
 | `--mod-bold-font-weight`                   |
 | `--mod-button-animation-duration`          |
 | `--mod-button-background-color-default`    |
@@ -44,4 +45,6 @@
 | `--mod-button-top-to-icon`                 |
 | `--mod-button-top-to-text`                 |
 | `--mod-focus-indicator-gap`                |
+| `--mod-line-height-100`                    |
+| `--mod-sans-font-family-stack`             |
 | `--mod-static-black-focus-indicator-color` |
diff --git a/components/button/stories/button.stories.js b/components/button/stories/button.stories.js
@@ -1,7 +1,7 @@
+import { withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
+
 import { html } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
-import { when } from "lit/directives/when.js";
-import { withDownStateDimensionCapture } from "../../../.storybook/decorators";
 
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
@@ -14,7 +14,6 @@ import { Template } from "./template";
 export default {
 	title: "Components/Button",
 	component: "Button",
-	decorators: [withDownStateDimensionCapture('.spectrum-Button:not(:disabled)')],
 	argTypes: {
 		size: {
 			name: "Size",
@@ -146,6 +145,7 @@ export default {
 		}
 	},
 	decorators: [
+		withDownStateDimensionCapture(".spectrum-Button:not(:disabled)"),
 		(Story, context) => html`
 			<style>
 				.spectrum-Detail { display: inline-block; }

diff --git a/components/buttongroup/CHANGELOG.md b/components/buttongroup/CHANGELOG.md
@@ -8,15 +8,17 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 🗓
 2024-04-18 • 📝 [Commits](https://github.com/adobe/spectrum-css/compare/@spectrum-css/[email protected]...@spectrum-css/[email protected])
 
-* feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
+- feat!: postcss config build and script; remove gulp (#2466)([b0f337b](https://github.com/adobe/spectrum-css/commit/b0f337b)), closes[#2466](https://github.com/adobe/spectrum-css/issues/2466)
 
-    	###
-    	🛑 BREAKING CHANGES
+  ###
 
-    		*
-    		- Removes component-builder & component-builder-simple for script leveraging postcss
+  🛑 BREAKING CHANGES
 
-- Imports added to index.css and themes/express.css
+  -
+
+  * Removes component-builder & component-builder-simple for script leveraging postcss
+
+* Imports added to index.css and themes/express.css
 
 <a name="6.2.5"></a>
 ##6.2.5

diff --git a/components/checkbox/package.json b/components/checkbox/package.json
@@ -21,16 +21,16 @@
 		"stories/template.js",
 		"metadata/mods.md"
 	],
+	"peerDependencies": {
+		"@spectrum-css/icon": ">=4",
+		"@spectrum-css/tokens": ">=14.0.0-next.3"
+	},
 	"keywords": [
 		"spectrum",
 		"css",
 		"design system",
 		"adobe"
 	],
-	"peerDependencies": {
-		"@spectrum-css/icon": ">=4",
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
-	},
 	"publishConfig": {
 		"access": "public"
 	}

diff --git a/components/clearbutton/package.json b/components/clearbutton/package.json
@@ -21,16 +21,16 @@
 		"stories/template.js",
 		"metadata/mods.md"
 	],
+	"peerDependencies": {
+		"@spectrum-css/icon": ">=4",
+		"@spectrum-css/tokens": ">=14.0.0-next.3"
+	},
 	"keywords": [
 		"spectrum",
 		"css",
 		"design system",
 		"adobe"
 	],
-	"peerDependencies": {
-		"@spectrum-css/icon": ">=4",
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
-	},
 	"publishConfig": {
 		"access": "public"
 	}

diff --git a/components/closebutton/metadata/mods.md b/components/closebutton/metadata/mods.md
@@ -1,5 +1,6 @@
 | Modifiable custom properties                  |
 | --------------------------------------------- |
+| `--mod-animation-duration-100`                |
 | `--mod-button-animation-duration`             |
 | `--mod-button-font-family`                    |
 | `--mod-button-line-height`                    |
@@ -23,3 +24,5 @@
 | `--mod-closebutton-margin-inline`             |
 | `--mod-closebutton-margin-top`                |
 | `--mod-closebutton-width`                     |
+| `--mod-line-height-100`                       |
+| `--mod-sans-font-family-stack`                |
diff --git a/components/closebutton/package.json b/components/closebutton/package.json
@@ -1,40 +1,38 @@
 {
-	"name": "@spectrum-css/closebutton",
-	"version": "5.0.0-next.2",
-	"description": "The Spectrum CSS close button component",
-	"license": "Apache-2.0",
-	"author": "Adobe",
-	"homepage": "https://opensource.adobe.com/spectrum-css/closebutton",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/adobe/spectrum-css.git",
-		"directory": "components/closebutton"
-	},
-	"bugs": {
-		"url": "https://github.com/adobe/spectrum-css/issues"
-	},
-	"main": "dist/index.css",
-	"files": [
-		"dist/*",
-		"CHANGELOG.md",
-		"package.json",
-		"stories/template.js",
-		"metadata/mods.md"
-	],
-	"peerDependencies": {
-		"@spectrum-css/icon": ">=4",
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
-	},
-	"devDependencies": {
-		"@spectrum-css/commons": "^10.0.0"
-	},
-	"keywords": [
-		"spectrum",
-		"css",
-		"design system",
-		"adobe"
-	],
-	"publishConfig": {
-		"access": "public"
-	}
+  "name": "@spectrum-css/closebutton",
+  "version": "5.0.0-next.2",
+  "description": "The Spectrum CSS close button component",
+  "license": "Apache-2.0",
+  "author": "Adobe",
+  "homepage": "https://opensource.adobe.com/spectrum-css/closebutton",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/spectrum-css.git",
+    "directory": "components/closebutton"
+  },
+  "bugs": {
+    "url": "https://github.com/adobe/spectrum-css/issues"
+  },
+  "main": "dist/index.css",
+  "files": [
+    "dist/*",
+    "metadata/mods.md",
+    "stories/template.js"
+  ],
+  "peerDependencies": {
+    "@spectrum-css/icon": ">=4",
+    "@spectrum-css/tokens": ">=14.0.0-next.3"
+  },
+  "devDependencies": {
+    "@spectrum-css/commons": "^10.0.0"
+  },
+  "keywords": [
+    "adobe",
+    "css",
+    "design system",
+    "spectrum"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }
diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js
@@ -21,17 +21,17 @@ export const Template = ({
 }) => {
 	let iconName = "Cross300";
 	switch (size) {
-	case "s":
-		iconName = "Cross200";
-		break;
-	case "l":
-		iconName = "Cross400";
-		break;
-	case "xl":
-		iconName = "Cross500";
-		break;
-	default:
-		iconName = "Cross300";
+		case "s":
+			iconName = "Cross200";
+			break;
+		case "l":
+			iconName = "Cross400";
+			break;
+		case "xl":
+			iconName = "Cross500";
+			break;
+		default:
+			iconName = "Cross300";
 	}
 
 	return html`

diff --git a/components/datepicker/package.json b/components/datepicker/package.json
@@ -1,40 +1,38 @@
 {
-	"name": "@spectrum-css/datepicker",
-	"version": "3.0.0",
-	"description": "The Spectrum CSS datepicker component",
-	"license": "Apache-2.0",
-	"author": "Adobe",
-	"homepage": "https://opensource.adobe.com/spectrum-css/",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/adobe/spectrum-css.git",
-		"directory": "components/datepicker"
-	},
-	"bugs": {
-		"url": "https://github.com/adobe/spectrum-css/issues"
-	},
-	"main": "dist/index.css",
-	"files": [
-		"dist/*",
-		"CHANGELOG.md",
-		"package.json",
-		"stories/template.js",
-		"metadata/mods.md"
-	],
-	"peerDependencies": {
-		"@spectrum-css/calendar": ">=4",
-		"@spectrum-css/pickerbutton": ">=4",
-		"@spectrum-css/popover": ">=6",
-		"@spectrum-css/textfield": ">=6",
-		"@spectrum-css/tokens": ">=14.0.0-next.3"
-	},
-	"keywords": [
-		"spectrum",
-		"css",
-		"design system",
-		"adobe"
-	],
-	"publishConfig": {
-		"access": "public"
-	}
+  "name": "@spectrum-css/datepicker",
+  "version": "3.0.0",
+  "description": "The Spectrum CSS datepicker component",
+  "license": "Apache-2.0",
+  "author": "Adobe",
+  "homepage": "https://opensource.adobe.com/spectrum-css/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/spectrum-css.git",
+    "directory": "components/datepicker"
+  },
+  "bugs": {
+    "url": "https://github.com/adobe/spectrum-css/issues"
+  },
+  "main": "dist/index.css",
+  "files": [
+    "dist/*",
+    "metadata/mods.md",
+    "stories/template.js"
+  ],
+  "peerDependencies": {
+    "@spectrum-css/calendar": ">=4",
+    "@spectrum-css/pickerbutton": ">=4",
+    "@spectrum-css/popover": ">=6",
+    "@spectrum-css/textfield": ">=6",
+    "@spectrum-css/tokens": ">=14.0.0-next.3"
+  },
+  "keywords": [
+    "adobe",
+    "css",
+    "design system",
+    "spectrum"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
 }