feat(icons)!: s2 icons - use latest workflow and ui icon sets (#3001)

* feat(icon): updated s2 icons - workflow and ui Uses and updates to the latest icon sets for S2. ==== Workflow icons ==== Uses the latest version of this package. There is a large difference between the set of icons available for S1 and S2. These differences are documented separately from this work. ==== UI icons ==== Updates the ui-icons package with the latest set of icons. This includes deprecations and some new icons. See the change log for a full list of changes. The UI icons no longer contain both a medium and a large SVG asset. The file structure and loading have been changed to use the single asset. Co-authored-by: [ Cassondra ] <[email protected]> Also includes: * build(storybook): use latest 4.0.0 version of workflow icons * feat(icon): remove guessing of icon set if not provided * refactor(icon): refactors, cleans up, and documents template logic and utilities * feat(icon): exclude new ui icons not yet ready for production (CSS-1115) * feat(icon): exclude 22x20 workflow icons (CSS-1116)
adobe · Feb 24, 2025 · a25e0a9 · a25e0a9
1 parent dce3669
commit a25e0a9
Show file tree

Hide file tree

Showing 156 changed files with 1,321 additions and 881 deletions.
diff --git a/.changeset/clean-oranges-smell.md b/.changeset/clean-oranges-smell.md
@@ -0,0 +1,11 @@
+---
+"@spectrum-css/preview": major
+---
+
+Updates Storybook to use the latest icon sets for Spectrum 2. Includes changes to the directories that
+are used for loading in the sprite sheet and the individual icons, as they have moved.
+
+The global Icon Loader has been updated to apply the existing key name renaming from file names to icon
+names. This is now done once at the loader step, rather than each time within the Icon component template.
+The loader also now excludes the handful of 22x20 workflow icons, as these are not yet handled within the
+design system.
diff --git a/.changeset/olive-tools-hang.md b/.changeset/olive-tools-hang.md
@@ -0,0 +1,59 @@
+---
+"@spectrum-css/ui-icons": major
+---
+
+# Breaking change
+
+Iconography in v1 inclued 2 sizes, `medium` and `large`, as well as a single SVG asset that included both versions to be toggled with classes via CSS (found in folder`combined`). Icons in v2 no longer have multiple sizes and all assets are sourced from a single folder`svg` which can be found in the `dist` directory of this workspace. **Raw SVG assets can no longer be sourced from the top-level of the workspace and must be loaded from `@spectrum-css/ui-icons/dist/svg/*.svg` instead.** Please find below an outline of the new, deprecated, and unchanged icons.
+
+| Icon name         | Migration notes |
+| ----------------- | --------------- |
+| Arrow75           | Deprecated      |
+| Arrow100          | -               |
+| Arrow200          | Deprecated      |
+| Arrow300          | Deprecated      |
+| Arrow400          | -               |
+| Arrow500          | Deprecated      |
+| Arrow600          | Deprecated      |
+| Asterisk75        | Deprecated      |
+| Asterisk100       | -               |
+| Asterisk200       | -               |
+| Asterisk300       | -               |
+| Checkmark50       | -               |
+| Checkmark75       | -               |
+| Checkmark100      | -               |
+| Checkmark200      | -               |
+| Checkmark300      | -               |
+| Checkmark400      | -               |
+| Checkmark500      | Deprecated      |
+| Checkmark600      | Deprecated      |
+| Chevron50         | -               |
+| Chevron75         | -               |
+| Chevron100        | -               |
+| Chevron200        | -               |
+| Chevron300        | -               |
+| Chevron400        | -               |
+| Chevron500        | Deprecated      |
+| Chevron600        | Deprecated      |
+| CornerTriangle75  | -               |
+| CornerTriangle100 | -               |
+| CornerTriangle200 | -               |
+| CornerTriangle300 | -               |
+| Cross75           | -               |
+| Cross100          | -               |
+| Cross200          | -               |
+| Cross300          | -               |
+| Cross400          | -               |
+| Cross500          | -               |
+| Cross600          | -               |
+| Dash50            | -               |
+| Dash75            | -               |
+| Dash100           | -               |
+| Dash200           | -               |
+| Dash300           | -               |
+| Dash400           | Deprecated      |
+| Dash500           | Deprecated      |
+| Dash600           | Deprecated      |
+| SingleGripper     | Deprecated      |
+| DoubleGripper     | Deprecated      |
+| TripleGripper     | Deprecated      |
diff --git a/.changeset/tame-knives-train.md b/.changeset/tame-knives-train.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/icon": major
+---
+
+Updates the icon component to use the new Spectrum 2 icon sets. The `.spectrum-UIIcon--medium` and `.spectrum-UIIcon--large` classes have been removed, as UI icons are now delivered with a single SVG. The color property also now makes use of the `--iconPrimary` custom property that is defined in some of the SVG files. Storybook has been updated to use and load the new SVGs, whose name format and directories have changed.
diff --git a/.env.example b/.env.example
@@ -20,3 +20,6 @@ WATCH_MODE=true
 NX_VERBOSE_LOGGING=false
 NX_SKIP_NX_CACHE=false
 NX_PERF_LOGGING=false
+
+ARTIFACTORY_API_KEY=
+ARTIFACTORY_API_TOKEN=
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,7 @@
 dist
 !dist/metadata.json
 !tokens/dist/json/*
+!ui-icons/dist
 
 # Not committing the map assets, these are dev-only
 *.map

diff --git a/.storybook/decorators/icon-sprites.js b/.storybook/decorators/icon-sprites.js
@@ -1,5 +1,5 @@
 // Used in the icon sprite decorator to inject the sprite sheets into the document
-import workflowSprite from "@adobe/spectrum-css-workflow-icons/dist/spectrum-icons.svg?raw";
+import workflowSprite from "@adobe/spectrum-css-workflow-icons/dist/assets/svg-spriteSheet/icons.svg?raw";
 import uiSprite from "@spectrum-css/ui-icons/dist/spectrum-css-icons.svg?raw";
 import { makeDecorator, useEffect } from "@storybook/preview-api";
 
@@ -14,9 +14,6 @@ export const withIconSpriteSheet = makeDecorator({
             loaded = {},
 		} = context;
 
-        // Load the icons into the window object
-        if (loaded.icons) window.icons = loaded.icons;
-
 		useEffect(() => {
             // Inject the sprite sheets into the document
             let sprite = document.getElementById("spritesheets");

diff --git a/.storybook/loaders/icon-loader.js b/.storybook/loaders/icon-loader.js
@@ -1,40 +1,55 @@
-export const IconLoader = async () => ({
-	icons: {
-		workflow: {
-			medium: await import.meta.glob(
-				"/node_modules/@adobe/spectrum-css-workflow-icons/dist/18/*.svg",
+import { cleanUiIconName, cleanWorkflowIconName } from "@spectrum-css/icon/stories/utilities.js";
+
+/**
+ * Loads all SVG files from both icon sets, and stores a string with the SVG markup.
+ *
+ * Excludes "22x20" workflow icons as they are not yet used within the design system.
+ *
+ * @see https://storybook.js.org/docs/writing-stories/loaders
+ * @see https://vite.dev/guide/features#glob-import
+ */
+export const IconLoader = async () => {
+	let iconData = {
+		icons: {
+			workflow: await import.meta.glob(
+				[
+					"/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/*.svg",
+					"!/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/*_22x20*.svg",
+				],
 				{
 					eager: true,
 					query: "?raw",
 					import: "default",
 				}
 			),
-			large: await import.meta.glob(
-				"/node_modules/@adobe/spectrum-css-workflow-icons/dist/24/*.svg",
+			ui: await import.meta.glob(
+				"/node_modules/@spectrum-css/ui-icons/dist/svg/*.svg",
 				{
 					eager: true,
 					query: "?raw",
 					import: "default",
 				}
 			),
 		},
-		ui: {
-			medium: await import.meta.glob(
-				"/node_modules/@spectrum-css/ui-icons/dist/medium/*.svg",
-				{
-					eager: true,
-					query: "?raw",
-					import: "default",
-				}
-			),
-			large: await import.meta.glob(
-				"/node_modules/@spectrum-css/ui-icons/dist/large/*.svg",
-				{
-					eager: true,
-					query: "?raw",
-					import: "default",
-				}
-			),
-		},
-	},
-});
+	};
+
+	/**
+	 * Changes all keys in the IconLoader object to be just the cleaned icon name used within our Storybook's Icon component,
+	 * instead of the full file name and directory that was loaded.
+	 *
+	 * E.g. "/node_modules/@adobe/spectrum-css-workflow-icons/dist/assets/svg/S2_Icon_3DAsset_20_N.svg" would become just "3DAsset".
+	 */
+	iconData.icons.workflow = Object.fromEntries(
+		Object.entries(iconData.icons.workflow).map(
+			([key, value]) => [cleanWorkflowIconName(key.split("/").pop()), value]
+		)
+	);
+
+	iconData.icons.ui = Object.fromEntries(
+		Object.entries(iconData.icons.ui).map(
+			([key, value]) => [cleanUiIconName(key.split("/").pop()), value]
+		)
+	);
+
+	return iconData;
+};
diff --git a/.storybook/package.json b/.storybook/package.json
@@ -39,7 +39,7 @@
 		"build": "yarn docs:report && cross-env NODE_ENV=development storybook build --stats-json --config-dir ."
 	},
 	"dependencies": {
-		"@adobe/spectrum-css-workflow-icons": "^1.5.4",
+		"@adobe/spectrum-css-workflow-icons": "^4.0.0",
 		"@spectrum-css/bundle": "workspace:^",
 		"@spectrum-css/tokens": "14.0.0-next.2",
 		"@spectrum-css/ui-icons": "1.1.2"

diff --git a/components/icon/dist/metadata.json b/components/icon/dist/metadata.json
@@ -11,8 +11,6 @@
     ".spectrum-Icon--sizeXXL",
     ".spectrum-Icon--sizeXXS",
     ".spectrum-UIIcon",
-    ".spectrum-UIIcon--large",
-    ".spectrum-UIIcon--medium",
     ".spectrum-UIIcon-ArrowDown100",
     ".spectrum-UIIcon-ArrowDown200",
     ".spectrum-UIIcon-ArrowDown300",
@@ -105,9 +103,7 @@
     "--mod-icon-block-size",
     "--mod-icon-color",
     "--mod-icon-inline-size",
-    "--mod-icon-size",
-    "--mod-ui-icon-large-display",
-    "--mod-ui-icon-medium-display"
+    "--mod-icon-size"
   ],
   "component": [
     "--spectrum-icon-block-size",
@@ -160,8 +156,6 @@
     "--spectrum-dash-icon-size-500",
     "--spectrum-dash-icon-size-600",
     "--spectrum-dash-icon-size-75",
-    "--spectrum-ui-icon-large-display",
-    "--spectrum-ui-icon-medium-display",
     "--spectrum-workflow-icon-size-100",
     "--spectrum-workflow-icon-size-200",
     "--spectrum-workflow-icon-size-300",

diff --git a/components/icon/icons.css b/components/icon/icons.css
@@ -13,6 +13,9 @@
 
 .spectrum-Icon,
 .spectrum-UIIcon {
+	/* stylelint-disable-next-line custom-property-pattern -- variable name defined by A4U output */
+	--iconPrimary: var(--mod-icon-color, currentColor);
+
 	--spectrum-icon-inline-size: var(--mod-icon-inline-size, var(--mod-icon-size, var(--spectrum-icon-size)));
 	--spectrum-icon-block-size: var(--mod-icon-block-size, var(--mod-icon-size, var(--spectrum-icon-size)));
 
@@ -24,7 +27,8 @@
 	color: var(--mod-icon-color, inherit);
 
 	/* Fill should match the current text color. */
-	fill: currentColor;
+	/* stylelint-disable-next-line custom-property-pattern -- map this to the same value as what's used by the icon's SVG code */
+	fill: var(--iconPrimary);
 
 	/* Don't catch clicks or hover, otherwise they may not escape the SVG. */
 	pointer-events: none;

diff --git a/components/icon/stories/icon.mdx b/components/icon/stories/icon.mdx
@@ -20,20 +20,26 @@ The SVG icons used in Spectrum CSS are a part of two different icon sets, "workf
 
 ### Workflow icons
 
-The workflow icon set contains several hundred icons to choose from.
-These icons can be seen in use within Button, Action button, Menu, and many other components.
+The workflow icon set contains several hundred icons to choose from. For a full list of all icons within this set, see **[workflow icons](/story/components-icon--workflow)**.
+These icons can be seen in use within button, action button, menu, and many other components.
 Here is an example with just a few of these icons:
 
 <Canvas of={IconStories.WorkflowDefault} />
 
-These icons use "t-shirt" sizes (e.g. small, medium), that are the same width and height for each icon in the set:
+#### T-shirt sizing
+
+Workflow icons use "t-shirt" sizes, e.g. small or medium, that are the same width and height for each icon in the set. Note that the
+extra-extra-large size is currently _not_ part of the design specifications and may be deprecated in the near future:
 
 <Canvas of={IconStories.WorkflowSizing} />
 
 ### UI icons
 
 UI icons are atomic pieces (e.g., arrows, crosses, etc.) that are used as part of some components. The chevron within
-the [Combobox component](?path=/docs/components-combobox--docs) is one example.
+the [Combobox component](/docs/components-combobox--docs) is one example. For a full list of all icons within this
+set, see **[ui icons](/story/components-icon--ui)**.
+
+#### Numbered sizing
 
 Unlike workflow icons, each UI icon comes in specific numbered sizes. They do not use "t-shirt" sizing.
 They have unique classes applied that set their size in CSS. For example:
@@ -49,6 +55,8 @@ An example of some UI icons in their available sizes:
 
 <Canvas of={IconStories.UIDefault} />
 
+#### Directional icons
+
 Directional UI icons such as Chevron and Arrow have classes for each direction. They rotate the same base icon with a CSS `transform: rotate`. For example, the `Arrow100.svg` icon is used
 with: