feat(Button): support external icons

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)}

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 */

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,29 +313,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="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>
   ),
 };

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})`,

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}

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",

packages/core/src/VerticalNavigation/Actions/Action.styles.tsx

@@ -10,20 +10,18 @@ export const { staticClasses, useClasses } = createClasses(
       height: "32px",
       color: "inherit",
       fontWeight: "inherit",
-      padding: 0,
+      padding: theme.spacing(0, "xs"),
       border: "none",
 
       // cursor
       "& *": {
         cursor: "pointer",
       },
     },
-    noIcon: {
-      paddingLeft: theme.space.xs,
-    },
+    noIcon: {},
     minimized: {
       justifyContent: "center",
-      paddingRight: 0,
+      padding: 0,
     },
   },
 );

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>
   );

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[];
   /**

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",

packages/icons/src/utils.ts

@@ -64,6 +64,7 @@ export const getSizeStyles = (
 
   return {
     fontSize,
-    "--size": `${containerSize}px`,
+    /** icon container size. @private */
+    "--icsize": `${containerSize}px`,
   };
 };

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",
     },

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>
   );
 };