chore(Button): icon spacing alignment

lumada-design · Nov 6, 2024 · fa98a98 · fa98a98
1 parent 63ed94d
commit fa98a98
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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,
     },
   },
 );
diff --git 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
@@ -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
@@ -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>
   );
 };