feat(Button): support external icons

lumada-design · Nov 4, 2024 · 927ee04 · 927ee04
1 parent 3545a9e
commit 927ee04
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 34 deletions.
diff --git a/packages/core/src/Button/Button.stories.tsx b/packages/core/src/Button/Button.stories.tsx
@@ -1,4 +1,7 @@
+import { Fragment } from "react";
 import { css } from "@emotion/css";
+import { faAdd } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { StoryObj } from "@storybook/react";
 import { HvButton, HvButtonProps } from "@hitachivantara/uikit-react-core";
 import {
@@ -287,6 +290,12 @@ export const CustomRootComponent: StoryObj<HvButtonProps> = {
   ),
 };
 
+const PhAddIcon = () => (
+  <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256">
+    <path d="M228 128a12 12 0 0 1-12 12h-76v76a12 12 0 0 1-24 0v-76H40a12 12 0 0 1 0-24h76V40a12 12 0 0 1 24 0v76h76a12 12 0 0 1 12 12" />
+  </svg>
+);
+
 export const Test: StoryObj = {
   parameters: {
     docs: { disable: true },
@@ -310,29 +319,35 @@ export const Test: StoryObj = {
       <HvButton variant="negative">Negative</HvButton>
       <HvButton variant="negativeSubtle">Negative Subtle</HvButton>
       <HvButton variant="negativeGhost">Negative Ghost</HvButton>
-      <HvButton disabled variant="primary">
+
+      <HvButton disabled variant="primary" startIcon={<Play />}>
         Primary
       </HvButton>
-      <HvButton disabled variant="primarySubtle">
+      <HvButton disabled variant="primarySubtle" endIcon={<Play />}>
         Primary Subtle
       </HvButton>
       <HvButton disabled variant="primaryGhost">
         Primary Ghost
       </HvButton>
-      <HvButton variant="warning" disabled>
+      <HvButton variant="warning" disabled startIcon={<Play />}>
         Warning
       </HvButton>
-      <HvButton variant="warningSubtle" disabled>
+      <HvButton variant="warningSubtle" disabled endIcon={<Play />}>
         Warning Subtle
       </HvButton>
       <HvButton variant="warningGhost" disabled>
         Warning Ghost
       </HvButton>
 
       {(["sm", "md", "lg"] as const).map((size) => (
-        <HvButton size={size} key={size} variant="warning">
-          {size}
-        </HvButton>
+        <Fragment key={size}>
+          <HvButton size={size} variant="warningSubtle">
+            {size}
+          </HvButton>
+          <HvButton icon aria-label="Play" variant="warningSubtle" size={size}>
+            <Play />
+          </HvButton>
+        </Fragment>
       ))}
 
       {(["none", "base", "round", "circle", "full"] as const).map((radius) => (
@@ -366,20 +381,10 @@ export const Test: StoryObj = {
         <Play />
       </HvButton>
 
-      <HvButton icon aria-label="Play" variant="primarySubtle" size="sm">
-        <Play />
-      </HvButton>
-      <HvButton icon aria-label="Play" variant="primarySubtle" size="md">
-        <Play />
-      </HvButton>
-      <HvButton icon disabled aria-label="Play" variant="primary" size="lg">
-        <Play />
-      </HvButton>
-
-      <HvButton icon aria-label="Play">
+      <HvButton icon size="lg" aria-label="Play">
         <Play iconSize="M" />
       </HvButton>
-      <HvButton icon disabled aria-label="Stop">
+      <HvButton icon size="lg" disabled aria-label="Stop">
         <Play iconSize="M" />
       </HvButton>
 
@@ -419,6 +424,15 @@ export const Test: StoryObj = {
       <HvButton startIcon={<Play />} color="lightcyan" variant="ghost">
         lightcyan
       </HvButton>
+
+      <HvButton icon variant="primary" aria-label="Add">
+        <FontAwesomeIcon icon={faAdd} />
+      </HvButton>
+      <HvButton startIcon={<FontAwesomeIcon icon={faAdd} />}>Add</HvButton>
+      <HvButton icon variant="primary" aria-label="Add">
+        <PhAddIcon />
+      </HvButton>
+      <HvButton startIcon={<PhAddIcon />}>Add</HvButton>
     </div>
   ),
 };
diff --git a/packages/core/src/Button/Button.styles.ts b/packages/core/src/Button/Button.styles.ts
@@ -34,16 +34,15 @@ export const { staticClasses, useClasses } = createClasses("HvButton", {
     border: "1px solid transparent",
     borderRadius: `var(--radius, ${theme.radii.base})`,
     padding: theme.spacing(0, "sm"),
+
+    // remove icon container spacing
+    "--icsize": "auto",
   },
   startIcon: {
-    marginLeft: theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1,
+    marginRight: theme.space.xs,
   },
   endIcon: {
-    marginRight: theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1,
+    marginLeft: theme.space.xs,
   },
   focusVisible: {},
   disabled: {
@@ -59,10 +58,8 @@ export const { staticClasses, useClasses } = createClasses("HvButton", {
   icon: {
     margin: 0,
     padding: 0,
-    height: "fit-content",
-    "& > *": {
-      margin: -1,
-    },
+    height: "var(--HvButton-height)",
+    width: "var(--HvButton-height)",
   },
   contained: {
     color: theme.colors.atmo1, // `color-contrast(var(--color) vs ${colors.atmo1}, ${colors.base_light}, ${colors.base_dark})`,

diff --git a/packages/icons/src/IconBase.tsx b/packages/icons/src/IconBase.tsx
@@ -57,7 +57,7 @@ export interface IconBaseProps
   /**
    * A color or array of colors to override the default icon colors.
    * Accepts any valid CSS color or color from the UI Kit palette.
-   * @example ["brand", "inherit"]
+   * @example "secondary" "brand" "atmo2" "#FF0000" "purple" "inherit"
    */
   color?: HvColorAny | HvColorAny[];
   /**

diff --git a/packages/icons/src/IconContainer.tsx b/packages/icons/src/IconContainer.tsx
@@ -8,9 +8,9 @@ import { getSizeStyles } from "./utils";
 export const StyledIconBase = styled("div")({
   display: "flex",
   fontSize: 16,
-  // box has a minimum size of 32px (`xs` & `sm`)
-  width: "var(--size, 32px)",
-  height: "var(--size, 32px)",
+  // box has a default icon container size of 32px (`xs` & `sm`)
+  width: "var(--icsize, 32px)",
+  height: "var(--icsize, 32px)",
   transition: "rotate 0.2s ease",
   justifyContent: "center",
   alignItems: "center",

diff --git a/packages/icons/src/utils.ts b/packages/icons/src/utils.ts
@@ -64,6 +64,7 @@ export const getSizeStyles = (
 
   return {
     fontSize,
-    "--size": `${containerSize}px`,
+    /** icon container size. @private */
+    "--icsize": `${containerSize}px`,
   };
 };