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",
@@ -164,12 +164,29 @@ const CustomButton = ({
 				staticColor,
 				iconName: iconName ?? "Edit",
 			}))}
-			${showIconOnlyButton ? ButtonWrap(Template({
-				...args,
-				staticColor,
-				hideLabel: true,
-				iconName: iconName ?? "Edit",
-			})) : ''}
+			${when(window.isChromatic(), () => html`
+				${ButtonWrap(Template({
+					...args,
+					staticColor,
+					// Uses a UI icon that is smaller than workflow sizing, to test alignment:
+					iconName: "Cross100",
+					treatment: "outline",
+				}))}
+				${ButtonWrap(Template({
+					...args,
+					staticColor,
+					iconName: "ArrowDown600",
+					treatment: "outline",
+				}))}
+			`)}
+			${when(showIconOnlyButton, () =>
+				ButtonWrap(Template({
+					...args,
+					staticColor,
+					hideLabel: true,
+					iconName: iconName ?? "Edit",
+				}))
+			)}
 		</div>
 	`;
 };