fix(MultiButton): borderRadius in sm/lg sizes

fix borderRadius in larger sizes & add sm/lg tests
lumada-design · Nov 15, 2024 · 7d90945 · 7d90945
1 parent 67c25d9
commit 7d90945
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 34 deletions.
diff --git a/packages/core/src/MultiButton/MultiButton.styles.tsx b/packages/core/src/MultiButton/MultiButton.styles.tsx
@@ -18,11 +18,10 @@ export const { staticClasses, useClasses } = createClasses("HvMultiButton", {
 
     "& $button": {
       minWidth: 32,
-      minHeight: 32,
       width: "100%",
       maxWidth: 200,
       padding: 0,
-      flex: 1,
+      flex: "1 1 auto",
       borderColor: "inherit",
       borderRadius: 0,
       fontWeight: theme.typography.body.fontWeight,

diff --git a/packages/core/src/MultiButton/stories/MultiButton.stories.tsx b/packages/core/src/MultiButton/stories/MultiButton.stories.tsx
@@ -4,7 +4,6 @@ import {
   HvMultiButton,
   HvMultiButtonProps,
   HvSimpleGrid,
-  theme,
 } from "@hitachivantara/uikit-react-core";
 import { LocationPin } from "@hitachivantara/uikit-react-icons";
 
@@ -45,7 +44,6 @@ export const Main: StoryObj<HvMultiButtonProps> = {
   },
   argTypes: {
     classes: { control: { disable: true } },
-    size: { control: { disable: true } },
     variant: { control: { disable: true } },
   },
   parameters: {
@@ -199,13 +197,7 @@ export const Test: StoryObj = {
         cols={3}
         style={{ alignItems: "start", justifyContent: "start" }}
       >
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: theme.space.xs,
-          }}
-        >
+        <div className="grid gap-xs">
           <HvMultiButton>
             <HvButton>Label 1</HvButton>
             <HvButton>Label 2</HvButton>
@@ -216,21 +208,18 @@ export const Test: StoryObj = {
             <HvButton selected>Label 2</HvButton>
             <HvButton>Label 3</HvButton>
           </HvMultiButton>
-          <HvMultiButton style={{ width: "fit-content" }}>
-            {["Label 1", "Label 2", "Label 3"].map((name, i) => (
-              <HvButton key={name} icon aria-label={name} selected={i === 1}>
-                <LocationPin />
-              </HvButton>
-            ))}
+          <HvMultiButton size="sm">
+            <HvButton selected>Label 1</HvButton>
+            <HvButton disabled>Label 2</HvButton>
+            <HvButton>Label 3</HvButton>
+          </HvMultiButton>
+          <HvMultiButton size="lg">
+            <HvButton selected>Label 1</HvButton>
+            <HvButton disabled>Label 2</HvButton>
+            <HvButton>Label 3</HvButton>
           </HvMultiButton>
         </div>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            gap: theme.space.xs,
-          }}
-        >
+        <div className="grid gap-xs">
           <HvMultiButton disabled>
             {["Label 1", "Label 2", "Label 3"].map((button) => (
               <HvButton key={button}>{button}</HvButton>
@@ -255,14 +244,21 @@ export const Test: StoryObj = {
               </HvButton>
             ))}
           </HvMultiButton>
+          <HvMultiButton style={{ width: "fit-content" }}>
+            {["Label 1", "Label 2", "Label 3", "Label 4"].map((name, i) => (
+              <HvButton
+                key={name}
+                icon
+                aria-label={name}
+                selected={i === 1}
+                disabled={i === 2}
+              >
+                <LocationPin />
+              </HvButton>
+            ))}
+          </HvMultiButton>
         </div>
-        <div
-          style={{
-            display: "flex",
-            gap: theme.space.xs,
-            alignItems: "flex-start",
-          }}
-        >
+        <div className="flex gap-xs items-start">
           <HvMultiButton vertical style={{ width: "120px" }}>
             {["Label 1", "Label 2", "Label 3", "Label 4"].map((button) => (
               <HvButton key={button}>{button}</HvButton>

diff --git a/packages/styles/src/themes/pentahoPlus.ts b/packages/styles/src/themes/pentahoPlus.ts
@@ -718,15 +718,16 @@ const pentahoPlus = makeTheme((theme) => ({
     HvMultiButton: {
       classes: {
         multiple: {
-          borderRadius: "16px",
+          borderRadius: theme.radii.full,
           borderColor: buttonColors.secondary.subtleBorder,
           "& .HvMultiButton-button": {
             borderColor: "inherit",
+            ...theme.typography.body,
             "&.HvMultiButton-firstButton": {
-              borderRadius: "16px 0 0 16px",
+              borderRadius: `${theme.radii.full} 0 0 ${theme.radii.full}`,
             },
             "&.HvMultiButton-lastButton": {
-              borderRadius: "0 16px 16px 0",
+              borderRadius: `0 ${theme.radii.full} ${theme.radii.full} 0`,
             },
             "&.HvMultiButton-selected": {
               borderColor: theme.colors.primary,