From b5622e17362b5ab7f0fcecbafc49ca1ed352dd19 Mon Sep 17 00:00:00 2001
From: Bruno Henriques <zettca@users.noreply.github.com>
Date: Mon, 4 Nov 2024 15:48:29 +0000
Subject: [PATCH 1/2] feat(Button): support external icons

---
 packages/core/src/Button/Button.stories.tsx | 46 ++++++++++++---------
 packages/core/src/Button/Button.styles.ts   | 19 ++++-----
 packages/icons/src/IconBase.tsx             |  2 +-
 packages/icons/src/IconContainer.tsx        |  6 +--
 packages/icons/src/utils.ts                 |  3 +-
 5 files changed, 42 insertions(+), 34 deletions(-)

diff --git a/packages/core/src/Button/Button.stories.tsx b/packages/core/src/Button/Button.stories.tsx
index c6f400e82d..5c0d04f54a 100644
--- 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 {
@@ -310,19 +313,20 @@ 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>
@@ -330,9 +334,14 @@ export const Test: StoryObj = {
       </HvButton>
 
       {(["sm", "md", "lg"] as const).map((size) => (
-        <HvButton size={size} key={size} variant="warning">
-          {size}
-        </HvButton>
+        <Fragment key={size}>
+          <HvButton size={size} variant="warning">
+            {size}
+          </HvButton>
+          <HvButton icon aria-label="Play" variant="warning" size={size}>
+            <Play />
+          </HvButton>
+        </Fragment>
       ))}
 
       {(["none", "base", "round", "circle", "full"] as const).map((radius) => (
@@ -366,20 +375,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 +418,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">
+        <div className="i-ph-plus-bold" />
+      </HvButton>
+      <HvButton startIcon={<div className="i-ph-plus-bold" />}>Add</HvButton>
     </div>
   ),
 };
diff --git a/packages/core/src/Button/Button.styles.ts b/packages/core/src/Button/Button.styles.ts
index 007cc29440..8776d1ea58 100644
--- a/packages/core/src/Button/Button.styles.ts
+++ b/packages/core/src/Button/Button.styles.ts
@@ -34,16 +34,17 @@ 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: 8,
+    minWidth: 16,
   },
   endIcon: {
-    marginRight: theme.spacing(-1),
-    marginTop: -1,
-    marginBottom: -1,
+    marginLeft: 8,
+    minWidth: 16,
   },
   focusVisible: {},
   disabled: {
@@ -59,10 +60,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
index 6a059df71c..9b459b3119 100644
--- 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
index 416fceaf00..f48eba4507 100644
--- 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
index 9bea4661e4..58d74abaa9 100644
--- 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`,
   };
 };

From cb37c53522f50364d9bbef05e48e2002c15da5aa Mon Sep 17 00:00:00 2001
From: Bruno Henriques <zettca@users.noreply.github.com>
Date: Mon, 4 Nov 2024 17:28:08 +0000
Subject: [PATCH 2/2] chore(Button): icon spacing alignment

---
 docs/tests/Components.stories.tsx             |  2 +-
 packages/core/src/Badge/Badge.styles.tsx      | 14 ++++++++++-
 .../DotPagination/DotPagination.stories.tsx   | 13 ++++-------
 .../src/InlineEditor/InlineEditor.styles.tsx  |  8 +------
 .../Actions/Action.styles.tsx                 |  8 +++----
 .../src/VerticalNavigation/Actions/Action.tsx |  3 ++-
 .../DefaultNavigation/Step/Step.styles.tsx    |  3 ++-
 .../DefaultNavigation/Step/Step.tsx           | 23 ++++++++-----------
 8 files changed, 35 insertions(+), 39 deletions(-)

diff --git a/docs/tests/Components.stories.tsx b/docs/tests/Components.stories.tsx
index 3e5099c4a7..f08875ee32 100644
--- a/docs/tests/Components.stories.tsx
+++ b/docs/tests/Components.stories.tsx
@@ -109,7 +109,7 @@ export const Test: StoryObj = {
           style={{ alignItems: "start", justifyContent: "start" }}
         >
           <div>
-            <div style={{ display: "flex", height: 180 }}>
+            <div className="flex justify-between h-180px">
               {renderStory(AccordionDisabledStory, context)}
               {renderStory(DotPaginationMainStory, context)}
               {renderStory(DropDownMenuMainStory, context)}
diff --git a/packages/core/src/Badge/Badge.styles.tsx b/packages/core/src/Badge/Badge.styles.tsx
index 4bc43ee7e7..297839cdc7 100644
--- a/packages/core/src/Badge/Badge.styles.tsx
+++ b/packages/core/src/Badge/Badge.styles.tsx
@@ -2,7 +2,19 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 
 export const { staticClasses, useClasses } = createClasses("HvBadge", {
-  root: { position: "relative", "&>*": { float: "left" } },
+  root: {
+    position: "relative",
+    "&>*": { float: "left" },
+    ":has($badgeIcon)": {
+      width: "fit-content",
+      height: "fit-content",
+      "&>div:first-child": {
+        minWidth: 32,
+        minHeight: 32,
+        "--icsize": "100%",
+      },
+    },
+  },
   /** class applied to the badge container when it has content */
   badgeContainer: { width: 0 },
   /** class applied to the badge */
diff --git a/packages/core/src/DotPagination/DotPagination.stories.tsx b/packages/core/src/DotPagination/DotPagination.stories.tsx
index 898df642c6..5458162d07 100644
--- a/packages/core/src/DotPagination/DotPagination.stories.tsx
+++ b/packages/core/src/DotPagination/DotPagination.stories.tsx
@@ -21,7 +21,6 @@ const meta: Meta<typeof HvDotPagination> = {
 export default meta;
 
 const styles = {
-  container: css({ width: "100%", justifyContent: "center" }),
   page: css({ textAlign: "center" }),
 };
 
@@ -42,10 +41,8 @@ export const Main: StoryObj<HvDotPaginationProps> = {
     ];
 
     return (
-      <div className={styles.container}>
-        <div className={styles.page}>
-          <HvTypography>{pages[page]}</HvTypography>
-        </div>
+      <div>
+        <HvTypography className={styles.page}>{pages[page]}</HvTypography>
         <br />
         <HvDotPagination
           page={page}
@@ -110,10 +107,8 @@ export const CustomizedDotPagination: StoryObj<HvDotPaginationProps> = {
     };
 
     return (
-      <div className={styles.container}>
-        <div className={styles.page}>
-          <HvTypography>{pages[page]}</HvTypography>
-        </div>
+      <div>
+        <HvTypography className={styles.page}>{pages[page]}</HvTypography>
         <br />
         <HvDotPagination
           classes={dotpaginationStyle}
diff --git a/packages/core/src/InlineEditor/InlineEditor.styles.tsx b/packages/core/src/InlineEditor/InlineEditor.styles.tsx
index 68b3bcdb0d..bf71e0a537 100644
--- a/packages/core/src/InlineEditor/InlineEditor.styles.tsx
+++ b/packages/core/src/InlineEditor/InlineEditor.styles.tsx
@@ -71,13 +71,7 @@ export const { staticClasses, useClasses } = createClasses("HvInlineEditor", {
     cursor: "pointer",
     visibility: "hidden",
     alignSelf: "center",
-    height: "16px",
-    width: "32px",
-    minWidth: "32px",
-
-    "& svg": {
-      margin: theme.spacing(0, "xs"),
-    },
+    minWidth: 16,
   },
   iconVisible: {
     visibility: "visible",
diff --git a/packages/core/src/VerticalNavigation/Actions/Action.styles.tsx b/packages/core/src/VerticalNavigation/Actions/Action.styles.tsx
index 8bcbdccebc..1f1880a1de 100644
--- a/packages/core/src/VerticalNavigation/Actions/Action.styles.tsx
+++ b/packages/core/src/VerticalNavigation/Actions/Action.styles.tsx
@@ -10,7 +10,7 @@ export const { staticClasses, useClasses } = createClasses(
       height: "32px",
       color: "inherit",
       fontWeight: "inherit",
-      padding: 0,
+      padding: theme.spacing(0, "xs"),
       border: "none",
 
       // cursor
@@ -18,12 +18,10 @@ export const { staticClasses, useClasses } = createClasses(
         cursor: "pointer",
       },
     },
-    noIcon: {
-      paddingLeft: theme.space.xs,
-    },
+    noIcon: {},
     minimized: {
       justifyContent: "center",
-      paddingRight: 0,
+      padding: 0,
     },
   },
 );
diff --git a/packages/core/src/VerticalNavigation/Actions/Action.tsx b/packages/core/src/VerticalNavigation/Actions/Action.tsx
index 86d36e6833..1282dc2da4 100644
--- a/packages/core/src/VerticalNavigation/Actions/Action.tsx
+++ b/packages/core/src/VerticalNavigation/Actions/Action.tsx
@@ -44,6 +44,7 @@ export const HvVerticalNavigationAction = (
       id={setId(id, "button")}
       variant="secondaryGhost"
       icon={!isOpen}
+      startIcon={isOpen && icon}
       className={cx(
         classes.action,
         {
@@ -55,7 +56,7 @@ export const HvVerticalNavigationAction = (
       {...(!isOpen && { "aria-label": label })}
       {...others}
     >
-      {icon}
+      {!isOpen && icon}
       {isOpen && label}
     </HvButton>
   );
diff --git a/packages/lab/src/StepNavigation/DefaultNavigation/Step/Step.styles.tsx b/packages/lab/src/StepNavigation/DefaultNavigation/Step/Step.styles.tsx
index b9c9503a08..593fada569 100644
--- a/packages/lab/src/StepNavigation/DefaultNavigation/Step/Step.styles.tsx
+++ b/packages/lab/src/StepNavigation/DefaultNavigation/Step/Step.styles.tsx
@@ -1,8 +1,9 @@
-import { createClasses } from "@hitachivantara/uikit-react-core";
+import { createClasses, theme } from "@hitachivantara/uikit-react-core";
 
 export const { staticClasses, useClasses } = createClasses("HvStep", {
   root: {},
   ghost: {
+    fontWeight: theme.fontWeights.semibold,
     "&:hover": {
       backgroundColor: "transparent",
     },
diff --git a/packages/lab/src/StepNavigation/DefaultNavigation/Step/Step.tsx b/packages/lab/src/StepNavigation/DefaultNavigation/Step/Step.tsx
index a526e1fecb..b8a6fefed9 100644
--- a/packages/lab/src/StepNavigation/DefaultNavigation/Step/Step.tsx
+++ b/packages/lab/src/StepNavigation/DefaultNavigation/Step/Step.tsx
@@ -2,8 +2,8 @@ import {
   ExtractNames,
   HvAvatar,
   HvBaseProps,
-  HvButton,
-  HvButtonProps,
+  HvButtonBase,
+  HvButtonBaseProps,
   HvSize,
 } from "@hitachivantara/uikit-react-core";
 import {
@@ -20,7 +20,7 @@ import { useClasses } from "./Step.styles";
 type HvStepClasses = ExtractNames<typeof useClasses>;
 
 export interface HvStepProps
-  extends Pick<HvButtonProps, "onClick">,
+  extends Pick<HvButtonBaseProps, "onClick">,
     Omit<HvBaseProps, "onClick"> {
   /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */
   classes?: HvStepClasses;
@@ -92,8 +92,7 @@ export const HvStep = ({
 
   const backgroundColor = getColor(state);
 
-  const color = state === "Pending" ? "atmo2" : undefined;
-  const semantic = state !== "Pending" ? getSemantic(state) : undefined;
+  const color = state === "Pending" ? "atmo2" : getSemantic(state);
   const status = state === "Current" ? "secondary_60" : undefined;
   const IconComponent = iconStateObject[state];
 
@@ -107,13 +106,11 @@ export const HvStep = ({
         className,
       )}
     >
-      <HvButton
+      <HvButtonBase
         className={cx(classes.ghost, {
           [classes.ghostDisabled]: state === "Current",
         })}
-        aria-label={`${title}`}
-        icon
-        overrideIconColors={false}
+        aria-label={title}
         disabled={disabled ?? ["Current", "Disabled"].includes(state)}
         onClick={onClick}
       >
@@ -126,16 +123,14 @@ export const HvStep = ({
           {IconComponent ? (
             <IconComponent
               color={color}
-              semantic={semantic}
-              width={svgSize}
-              height={svgSize}
-              iconSize={iconSize}
+              style={{ fontSize: svgSize }}
+              size={iconSize}
             />
           ) : (
             number
           )}
         </HvAvatar>
-      </HvButton>
+      </HvButtonBase>
     </div>
   );
 };