fix: icon sizing in Storybook story templates (#2037)

* fix(icon): update icon sizing so it does not override passed in scale update components accordingly accordion actionbutton checkbox clearbutton * fix(checkbox): fix icon sizing * refactor(closebutton): update to pass size and icon name without scale * refactor(combobox): update to pass size and icon name without scale * fix(fieldlabel): fix asterisk sizing for storybook * fix(infieldbutton): pass size into icon for storybook * fix(pagination): remove scale from icon name in storybook template * refactor(picker): remove custom icon sizing and pass size to icon removed custom code for icon size since it is the same as the default * refactor(pickerbutton): remove scale from icon name * refactor(tag): pass size to clear button and icon * fix(textfield): pass size to valid icon * fix(treeview): pass size to chevron
adobe · Jul 19, 2023 · c90c8a3 · c90c8a3
1 parent e3c5239
commit c90c8a3
Show file tree

Hide file tree

Showing 16 changed files with 64 additions and 35 deletions.
diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js
@@ -51,7 +51,7 @@ export const AccordionItem = ({
 				</button>
 				<span class="${rootClass}IconContainer">
 					${Icon({
-						iconName: "ChevronRight100",
+						iconName: "ChevronRight",
 						size: iconSize,
 						customClasses: [`${rootClass}Indicator`],
 						...globals,

diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
@@ -62,13 +62,15 @@ export const Template = ({
 			${when(hasPopup, () =>
 				Icon({
 					...globals,
+					size,
 					iconName: "CornerTriangle100",
 					customClasses: [`${rootClass}-hold`],
 				})
 			)}
 			${when(iconName, () =>
 				Icon({
 					...globals,
+					size,
 					iconName,
 					customClasses: [`${rootClass}-icon`, ...customIconClasses],
 				})

diff --git a/components/checkbox/stories/template.js b/components/checkbox/stories/template.js
@@ -33,6 +33,21 @@ export const Template = ({
 		console.warn(e);
 	}
 
+	let iconSize = "75";
+	switch (size) {
+		case "s":
+			iconSize = "50";
+			break;
+		case "l":
+			iconSize = "100";
+			break;
+		case "xl":
+			iconSize = "200";
+			break;
+		default:
+			iconSize = "75";
+	}
+
 	return html`
 		<label
 			class=${classMap({
@@ -61,12 +76,14 @@ export const Template = ({
 			<span class="${rootClass}-box">
 				${Icon({
 					...globals,
-					iconName: "Checkmark100",
+					size,
+					iconName: `Checkmark${iconSize}`,
 					customClasses: [`${rootClass}-checkmark`],
 				})}
 				${Icon({
 					...globals,
-					iconName: "Dash100",
+					size,
+					iconName: `Dash${iconSize}`,
 					customClasses: [`${rootClass}-partialCheckmark`],
 				})}
 			</span>

diff --git a/components/clearbutton/stories/template.js b/components/clearbutton/stories/template.js
@@ -30,7 +30,8 @@ export const Template = ({
 			<div class="${rootClass}-fill">
 				${Icon({
 					...globals,
-					iconName: "Cross100",
+					size,
+					iconName: "Cross",
 					customClasses: [`${rootClass}-icon`],
 				})}
 			</div>

diff --git a/components/closebutton/stories/template.js b/components/closebutton/stories/template.js
@@ -45,7 +45,8 @@ export const Template = ({
 		>
 			${Icon({
 				...globals,
-				iconName: "Cross100",
+				size,
+				iconName: "Cross",
 				customClasses: [`${rootClass}-UIIcon`],
 			})}
 		</button>

diff --git a/components/combobox/stories/template.js b/components/combobox/stories/template.js
@@ -90,7 +90,7 @@ export const Template = ({
 					customClasses: [`${rootClass}-button`],
 					size,
 					iconType: "workflow",
-					iconName: "ChevronDown200",
+					iconName: "ChevronDown",
 					isQuiet,
 					isOpen,
 					isInvalid,

diff --git a/components/fieldlabel/stories/template.js b/components/fieldlabel/stories/template.js
@@ -34,6 +34,21 @@ export const Template = ({
 		console.warn(e);
 	}
 
+	let iconName = "Asterisk100";
+	switch (size) {
+		case "s":
+			iconName = "Asterisk100";
+			break;
+		case "l":
+			iconName = "Asterisk200";
+			break;
+		case "xl":
+			iconName = "Asterisk300";
+			break;
+		default:
+			iconName = "Asterisk100";
+	}
+
 	return html`
 		<label
 			class=${classMap({
@@ -52,7 +67,8 @@ export const Template = ({
 			${isRequired
 				? Icon({
 						...globals,
-						iconName: "Asterisk100",
+						size,
+						iconName,
 						customClasses: [`${rootClass}-UIIcon`],
 				  })
 				: ""}

diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js
@@ -57,11 +57,12 @@ export const Template = ({
 		idKey = idKey.replace(/(Right|Left|Down|Up)/, "");
 	}
 
-	// If the icon name includes its scale, reformat it to match the provided sizing.
-	// E.g. with a size of "s", the icon name "Checkmark100" would become "Checkmark75".
+	// 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".
 	if (
-		idKey.match(/^(?!\d).*\d{2,3}$/) &&
 		uiIcons.includes(idKey.replace(/\d{2,3}$/, "")) &&
+		!idKey.match(/^(?!\d).*\d{2,3}$/) &&
 		!idKey.endsWith("Gripper")
 	) {
 		let sizeVal;
@@ -82,8 +83,9 @@ export const Template = ({
 				break;
 		}
 
-		idKey = idKey.replace(/\d{2,3}$/, sizeVal);
-		iconName = iconName.replace(/\d{2,3}$/, sizeVal);
+		idKey += sizeVal;
+		iconName += sizeVal;
+
 	}
 
 	// Determine which icon set contains this icon.

diff --git a/components/infieldbutton/stories/template.js b/components/infieldbutton/stories/template.js
@@ -35,6 +35,7 @@ export const Template = ({
 				${when(iconName, () =>
 					Icon({
 						...globals,
+						size,
 						iconName,
 						customClasses: [`${rootClass}-icon`],
 					})

diff --git a/components/pagination/stories/template.js b/components/pagination/stories/template.js
@@ -30,7 +30,7 @@ export const Template = ({
 				${ActionButton({
 					size,
 					isQuiet: true,
-					iconName: "ChevronLeft100",
+					iconName: "ChevronLeft",
 					customClasses: [`${rootClass}-prevButton`],
 				})}
 				${Textfield({
@@ -43,7 +43,7 @@ export const Template = ({
 				${ActionButton({
 					size,
 					isQuiet: true,
-					iconName: "ChevronRight100",
+					iconName: "ChevronRight",
 					customClasses: [`${rootClass}-nextButton`],
 				})}
 			</nav>

diff --git a/components/picker/stories/template.js b/components/picker/stories/template.js
@@ -41,21 +41,6 @@ export const Template = ({
 		console.warn(e);
 	}
 
-	let iconName = "ChevronDown200";
-	switch (size) {
-		case "s":
-			iconName = "ChevronDown75";
-			break;
-		case "m":
-			iconName = "ChevronDown100";
-			break;
-		case "xl":
-			iconName = "ChevronDown300";
-			break;
-		default:
-			iconName = "ChevronDown200";
-	}
-
 	return html`
 		${label
 			? FieldLabel({
@@ -94,13 +79,15 @@ export const Template = ({
 			${isInvalid && !isLoading
 				? Icon({
 						...globals,
+						size,
 						iconName: "Alert",
 						customClasses: [`${rootClass}-validationIcon`],
 				  })
 				: ""}
 			${Icon({
 				...globals,
-				iconName,
+				size,
+				iconName: "ChevronDown",
 				customClasses: [`${rootClass}-menuIcon`],
 			})}
 		</button>

diff --git a/components/pickerbutton/stories/pickerbutton.stories.js b/components/pickerbutton/stories/pickerbutton.stories.js
@@ -137,7 +137,7 @@ export default {
 		isFocused: false,
 		isKeyboardFocused: false,
 		iconType: "ui",
-		iconName: "ChevronDown200",
+		iconName: "ChevronDown",
 	},
 	parameters: {
 		actions: {

diff --git a/components/pickerbutton/stories/template.js b/components/pickerbutton/stories/template.js
@@ -16,7 +16,7 @@ export const Template = ({
 	label,
 	position,
 	iconType = "ui",
-	iconName = "ChevronDown200",
+	iconName = "ChevronDown",
 	isDisabled = false,
 	isFocused = false,
 	isKeyboardFocused = false,
@@ -71,7 +71,7 @@ export const Template = ({
 					: ""}
 				${Icon({
 					...globals,
-					iconName: iconName ?? "ChevronDown200",
+					iconName: iconName ?? "ChevronDown",
 					size,
 					customClasses: [
 						iconType === "ui" ? `${rootClass}-UIIcon` : `${rootClass}-menuIcon`,

diff --git a/components/tag/stories/template.js b/components/tag/stories/template.js
@@ -58,6 +58,7 @@ export const Template = ({
 			${iconName
 				? Icon({
 						...globals,
+						size,
 						iconName,
 						customClasses: [`${rootClass}s-itemIcon`],
 				  })
@@ -66,6 +67,7 @@ export const Template = ({
 			${hasClearButton
 				? ClearButton({
 						...globals,
+						size,
 						customClasses: [`${rootClass}-clearButton`],
 						onclick: (evt) => {
 							const el = evt.target;

diff --git a/components/textfield/stories/template.js b/components/textfield/stories/template.js
@@ -49,7 +49,7 @@ export const Template = ({
 	}
 
 	if (isInvalid) iconName = "Alert";
-	else if (isValid) iconName = "Checkmark100";
+	else if (isValid) iconName = "Checkmark";
 
 	return html`
 		<div

diff --git a/components/treeview/stories/template.js b/components/treeview/stories/template.js
@@ -63,7 +63,7 @@ export const TreeViewItem = ({
 					? Icon({
 							...globals,
 							size,
-							iconName: "Chevron100",
+							iconName: "Chevron",
 							customClasses: [`${rootClass}-itemIndicator`],
 					  })
 					: ""}