diff --git a/packages/core/src/MultiButton/MultiButton.styles.tsx b/packages/core/src/MultiButton/MultiButton.styles.tsx index 20936b799e..1e5a53fda5 100644 --- 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 index e5c68611da..b000e9e63d 100644 --- 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 = { }, 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" }} > -
+
Label 1 Label 2 @@ -216,21 +208,18 @@ export const Test: StoryObj = { Label 2 Label 3 - - {["Label 1", "Label 2", "Label 3"].map((name, i) => ( - - - - ))} + + Label 1 + Label 2 + Label 3 + + + Label 1 + Label 2 + Label 3
-
+
{["Label 1", "Label 2", "Label 3"].map((button) => ( {button} @@ -255,14 +244,21 @@ export const Test: StoryObj = { ))} + + {["Label 1", "Label 2", "Label 3", "Label 4"].map((name, i) => ( + + + + ))} +
-
+
{["Label 1", "Label 2", "Label 3", "Label 4"].map((button) => ( {button} diff --git a/packages/styles/src/themes/pentahoPlus.ts b/packages/styles/src/themes/pentahoPlus.ts index bf9a3ec7d4..6aadeb3552 100644 --- 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,