fix(button): support any existing use of ui icons

Support any existing use of ui icons with the updated wrapping behavior.
And add Chromatic only testing of them to the Wrapping story.

Workflow icons are intended, with the use of the
spectrum-component-top-to-workflow-icon tokens, but UI icons have not
yet been specifically excluded in guidelines and are currently in use
within SplitButton in this library. This keeps UI icons that are
smaller than the intended workflow icon, better vertically centered
with the text within the button.

Author: jawinn

components/button/index.css

@@ -23,6 +23,7 @@ governing permissions and limitations under the License.
   --spectrum-button-focus-ring-border-radius: calc(var(--spectrum-button-border-radius) + var(--spectrum-button-focus-ring-gap));
   --spectrum-button-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
   --spectrum-button-focus-indicator-color: var(--spectrum-focus-indicator-color);
+  --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-50);
 }
 
 .spectrum-Button--sizeS {
@@ -40,6 +41,7 @@ governing permissions and limitations under the License.
   --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-small);
   --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-small);
   --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-75);
+  --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-75);
 }
 
 .spectrum-Button--sizeM {
@@ -57,6 +59,7 @@ governing permissions and limitations under the License.
   --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-medium);
   --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-medium);
   --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-100);
+  --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-100);
 }
 
 .spectrum-Button--sizeL {
@@ -74,6 +77,7 @@ governing permissions and limitations under the License.
   --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-large);
   --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-large);
   --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-200);
+  --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-200);
 }
 
 .spectrum-Button--sizeXL {
@@ -91,6 +95,7 @@ governing permissions and limitations under the License.
   --spectrum-button-top-to-text: var(--spectrum-button-top-to-text-extra-large);
   --spectrum-button-bottom-to-text: var(--spectrum-button-bottom-to-text-extra-large);
   --spectrum-button-top-to-icon: var(--spectrum-component-top-to-workflow-icon-300);
+  --spectrum-button-intended-icon-size: var(--spectrum-workflow-icon-size-300);
 }
 
 .spectrum-Button {
@@ -123,10 +128,19 @@ governing permissions and limitations under the License.
   }
 
   .spectrum-Icon {
+    /* 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))
+    );
+
     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(--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)) -
       var(--mod-button-edge-to-text, var(--spectrum-button-edge-to-text))

components/button/package.json

@@ -15,7 +15,7 @@
   },
   "main": "dist/index-vars.css",
   "peerDependencies": {
-    "@spectrum-css/icon": ">=4",
+    "@spectrum-css/icon": ">=6",
     "@spectrum-css/tokens": ">=13"
   },
   "peerDependenciesMeta": {

components/button/stories/button.stories.js

@@ -1,10 +1,10 @@
 import { html } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
-
-import { Template } from "./template";
+import { when } from "lit/directives/when.js";
 
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
+import { Template } from "./template";
 
 export default {
 	title: "Components/Button",
@@ -119,6 +119,18 @@ export default {
 	},
 };
 
+/**
+ * Optional wrapper for each button used within other templates, to assist with the "stacked"
+ * layout and the testing of wrapping text.
+ */
+const ButtonWrap = (layout, content) => {
+	const buttonWrapStyles = {
+		'margin-block': '15px',
+		'max-width': '480px',
+	};
+	return layout === "stacked" ? html`<div style=${styleMap(buttonWrapStyles)}>${content}</div>` : content;
+};
+
 /**
  * Multiple button variations displayed in one story template.
  * Used as the base template for the stories.
@@ -131,15 +143,6 @@ const CustomButton = ({
 	customStyles = {},
 	...args
 }) => {
-	// Optional wrapper for each button, to assist with the testing of wrapping text.
-	const ButtonWrap = (content) => {
-		const buttonWrapStyles = {
-			'margin-block': '15px',
-			'max-width': '480px',
-		};
-		return layout === "stacked" ? html`<div style=${styleMap(buttonWrapStyles)}>${content}</div>` : content;
-	};
-
 	return html`
 		<div
 			style=${ifDefined(styleMap({
@@ -148,32 +151,65 @@ const CustomButton = ({
 				...customStyles
 			}))}
 		>
-			${ButtonWrap(Template({
+			${ButtonWrap(layout, Template({
 				...args,
 				staticColor,
 				iconName: undefined,
 			}))}
-			${ButtonWrap(Template({
+			${ButtonWrap(layout, Template({
 				...args,
 				staticColor,
 				iconName: undefined,
 				treatment: "outline",
 			}))}
-			${ButtonWrap(Template({
+			${ButtonWrap(layout, Template({
 				...args,
 				staticColor,
 				iconName: iconName ?? "Edit",
 			}))}
-			${showIconOnlyButton ? ButtonWrap(Template({
-				...args,
-				staticColor,
-				hideLabel: true,
-				iconName: iconName ?? "Edit",
-			})) : ''}
+			${when(showIconOnlyButton, () =>
+				ButtonWrap(layout, Template({
+					...args,
+					staticColor,
+					hideLabel: true,
+					iconName: iconName ?? "Edit",
+				}))
+			)}
 		</div>
 	`;
 };
 
+/**
+ * Wrapping story template, displaying some additional variants for Chromatic.
+ */
+const WrappingTemplate = ({layout, ...args}) => {
+	if (window.isChromatic()) {
+		return html`
+			${CustomButton({layout, ...args})}
+			<div style=${ifDefined(styleMap({ padding: "1rem" }))}>
+				${ButtonWrap(layout, Template({
+					...args,
+					iconName: "Edit",
+					treatment: "outline",
+				}))}
+				${ButtonWrap(layout, Template({
+					...args,
+					// Uses a UI icon that is smaller than workflow sizing, to test alignment:
+					iconName: "Cross100",
+				}))}
+				${ButtonWrap(layout, Template({
+					...args,
+					// UI icon that is larger than workflow sizing:
+					iconName: "ArrowDown600",
+					treatment: "outline",
+				}))}
+			</div>
+		`;
+	}
+	// Otherwise use the default template.
+	return CustomButton({layout, ...args});
+};
+
 export const Accent = CustomButton.bind({});
 Accent.args = {
 	variant: "accent",
@@ -219,7 +255,8 @@ WithForcedColors.args = {
 	iconName: "Actions",
 };
 
-export const Wrapping = CustomButton.bind({});
+export const Wrapping = WrappingTemplate.bind({});
+Wrapping.storyName = "Wrapping";
 Wrapping.args = {
 	layout: "stacked",
 	showIconOnlyButton: false,