fix(MultiButton): add button sizes

lumada-design · Mar 6, 2024 · dfaddaf · dfaddaf
1 parent afe3ab0
commit dfaddaf
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 3 deletions.
diff --git a/packages/core/src/MultiButton/MultiButton.styles.tsx b/packages/core/src/MultiButton/MultiButton.styles.tsx
@@ -5,7 +5,6 @@ import { createClasses } from "../utils/classes";
 export const { staticClasses, useClasses } = createClasses("HvMultiButton", {
   root: {
     display: "flex",
-    height: 32,
     alignItems: "center",
     transition: "none",
     background: theme.colors.atmo2,
@@ -18,7 +17,6 @@ export const { staticClasses, useClasses } = createClasses("HvMultiButton", {
     },
 
     "& button$button": {
-      height: 32,
       width: "100%",
       minWidth: 32,
       maxWidth: 200,

diff --git a/packages/core/src/MultiButton/MultiButton.tsx b/packages/core/src/MultiButton/MultiButton.tsx
@@ -1,7 +1,7 @@
 import React, { cloneElement } from "react";
 
 import { useDefaultProps } from "../hooks/useDefaultProps";
-import { HvButtonVariant } from "../Button";
+import { HvButtonSize, HvButtonVariant } from "../Button";
 import { HvBaseProps } from "../types/generic";
 import { ExtractNames } from "../utils/classes";
 
@@ -19,6 +19,9 @@ export interface HvMultiButtonProps extends HvBaseProps {
   variant?: HvButtonVariant;
   /** A Jss Object used to override or extend the styles applied to the component. */
   classes?: HvMultiButtonClasses;
+  /** Button size. */
+  size?: HvButtonSize;
+  split?: boolean;
 }
 
 export const HvMultiButton = (props: HvMultiButtonProps) => {
@@ -29,6 +32,7 @@ export const HvMultiButton = (props: HvMultiButtonProps) => {
     disabled = false,
     vertical = false,
     variant = "secondarySubtle",
+    size,
     ...others
   } = useDefaultProps("HvMultiButton", props);
   const { classes, cx } = useClasses(classesProp);
@@ -39,6 +43,7 @@ export const HvMultiButton = (props: HvMultiButtonProps) => {
         classes.root,
         {
           [classes.vertical]: vertical,
+          [classes[variant]]: variant,
         },
         className
       )}
@@ -51,6 +56,7 @@ export const HvMultiButton = (props: HvMultiButtonProps) => {
           return cloneElement(child as React.ReactElement, {
             variant,
             disabled: disabled || child.props.disabled,
+            size,
             className: cx(child.props.className, classes.button, {
               [classes.selected]: childIsSelected,
             }),