docs: wrong workflow icons appearing for arrow and chevron

Related fixes for Icon migration, that helps fix the wrong workflow
icons appearing for arrow and chevron.

These are both icons with names that exist in both icon sets.
Some component stories need the icon set specified.

Author: jawinn

components/actionbutton/stories/template.js

@@ -17,6 +17,7 @@ export const Template = ({
 	rootClass = "spectrum-ActionButton",
 	size = "m",
 	iconName,
+	iconSet,
 	label,
 	isQuiet = false,
 	isSelected = false,
@@ -78,6 +79,7 @@ export const Template = ({
 					...globals,
 					size,
 					iconName,
+					setName: iconSet,
 					customClasses: [`${rootClass}-icon`, ...customIconClasses],
 				})
 			)}

components/combobox/stories/template.js

@@ -104,7 +104,7 @@ export const Template = ({
 						... isValid ? ['is-valid'] : [],
 					],
 					size,
-					iconType: "workflow",
+					iconType: "ui",
 					iconName: "ChevronDown",
 					isQuiet,
 					isOpen,

components/icon/stories/template.js

@@ -3,7 +3,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { unsafeSVG } from "lit/directives/unsafe-svg.js";
 
-import { fetchIconSVG, uiIcons, workflowIcons } from "./utilities.js";
+import { fetchIconSVG, uiIcons, uiIconSizes, workflowIcons } from "./utilities.js";
 
 import "../index.css";
 
@@ -48,22 +48,50 @@ export const Template = ({
 
 	let idKey = iconName;
 
-	// If a descriptor like Right, Left, Down, or Up is present for the Chevron or the
+	// If icon set was not provided, try determine which icon set contains this icon.
+	// Note: icon sets can contain the same icon name, with different icons.
+	if (!['workflow','ui'].includes(setName)){
+		if (workflowIcons.includes(idKey)) {
+			setName = "workflow";
+		} else if (uiIcons.includes(idKey.replace(/\d{2,3}$/, "").replace(/(Right|Left|Down|Up)$/, ""))) {
+			setName = "ui";
+		}
+	}
+
+	if (!setName) {
+		console.warn(
+			`Icon: Could not determine the icon set for the provided icon name: ${idKey}.`
+		);
+		return html``;
+	}
+
+	// If a descriptor like Right, Left, Down, or Up is present for the UI icons Chevron or
 	// Arrow, use that only for the class and not the icon fetch.
 	if (
+		setName == "ui" &&
 		uiIcons.some((c) => idKey.startsWith(c)) &&
 		["Right", "Left", "Down", "Up"].some((c) => idKey.includes(c))
 	) {
 		idKey = idKey.replace(/(Right|Left|Down|Up)/, "");
 	}
 
-	// If the icon name includes its scale, we want to leave that scale
-	// If the icon name does not include scale, reformat it to match the provided sizing.
-	// E.g. with a size of "s", the icon name "ChevronRight" would become "ChevronRight75".
+	/**
+	 * Fallback UI Icon sizing number.
+	 * 
+	 * If the icon name includes its scale, we want to leave that scale. This is preferred,
+	 * as UI icons do not use workflow icon sizing.
+	 * 
+	 * If the UI icon name does not include scale, reformat it to match the provided sizing.
+	 * E.g. with a size of "s", the icon name "ChevronRight" would become "ChevronRight75".
+	 */
 	if (
+		setName == "ui" &&
+		// Exists in the list of available UI icons.
 		uiIcons.includes(idKey.replace(/\d{2,3}$/, "")) &&
+		// Does not already have size number at the end.
 		!idKey.match(/^(?!\d).*\d{2,3}$/) &&
-		!idKey.endsWith("Gripper")
+		// Exclude some UI icons that do not (yet) have size numbers.
+		uiIconSizes[idKey]?.length != 0
 	) {
 		let sizeVal;
 		switch (size) {
@@ -88,20 +116,7 @@ export const Template = ({
 
 	}
 
-	// Determine which icon set contains this icon.
-	if (workflowIcons.includes(idKey)) {
-		setName = "workflow";
-	} else if (uiIcons.includes(idKey.replace(/\d{2,3}$/, ""))) {
-		setName = "ui";
-	}
-
-	if (!setName) {
-		console.warn(
-			`Icon: Could not determine the icon set for the provided icon name: ${idKey}.`
-		);
-		return html``;
-	}
-
+	// Fetch SVG file markup, and set optional fill color.
 	let inlineStyle;
 	if (fill) inlineStyle = `color: ${fill}`;
 	let icon;
@@ -110,11 +125,15 @@ export const Template = ({
 		icon = fetchIconSVG({ iconName: idKey, setName, ...globals });
 
 		if (!icon) {
-			console.warn(`Icon: ${idKey} not found.`);
+			console.warn(`Icon: "${idKey}" was not found in the "${setName}" icon set.`);
 			return html``;
 		}
 	}
 
+	/**
+	 * Classes to apply to the SVG element. Object as used by the classMap function.
+	 * @type {[name: string]: string | boolean | number}
+	 */
 	const classList = {
 		[rootClass]: true,
 		[`spectrum-UIIcon-${iconName}`]: !!(setName === "ui"),

components/pagination/stories/template.js

@@ -30,6 +30,7 @@ export const Template = ({
 				${ActionButton({
 					size,
 					isQuiet: true,
+					iconSet: "ui",
 					iconName: "ChevronLeft",
 					customClasses: [`${rootClass}-prevButton`],
 				})}
@@ -42,6 +43,7 @@ export const Template = ({
 				${ActionButton({
 					size,
 					isQuiet: true,
+					iconSet: "ui",
 					iconName: "ChevronRight",
 					customClasses: [`${rootClass}-nextButton`],
 				})}

components/picker/stories/template.js

@@ -81,6 +81,7 @@ export const Picker = ({
 			${Icon({
 				...globals,
 				size,
+				setName: "ui",
 				iconName: "ChevronDown",
 				customClasses: [`${rootClass}-menuIcon`],
 			})}

components/pickerbutton/stories/template.js

@@ -1,7 +1,7 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { styleMap } from "lit/directives/style-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
 
 import { useArgs } from "@storybook/client-api";
 
@@ -72,6 +72,7 @@ export const Template = ({
 					: ""}
 				${Icon({
 					...globals,
+					setName: iconType,
 					iconName: iconName ?? "ChevronDown",
 					size,
 					customClasses: [`${rootClass}-icon`],

components/treeview/stories/template.js

@@ -20,6 +20,7 @@ export const TreeViewItem = ({
 	isOpen,
 	isDropTarget,
 	icon,
+	iconSet,
 	thumbnail,
 	items,
 	customClasses = [],
@@ -80,6 +81,7 @@ export const TreeViewItem = ({
 					? Icon({
 							...globals,
 							size,
+							setName: "ui",
 							iconName: "ChevronRight",
 							customClasses: [`${rootClass}-itemIndicator`],
 					  })
@@ -89,6 +91,7 @@ export const TreeViewItem = ({
 							...globals,
 							size,
 							iconName: icon,
+							setName: iconSet,
 							customClasses: [`${rootClass}-itemIcon`],
 					  })
 					: ""}