fix: eng-22373: take care special cases

take care splitting button and 2-state button
EightfoldAI · Jun 30, 2022 · 62873cb · 62873cb
1 parent 45e27ed
commit 62873cb
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 11 deletions.
diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx
@@ -30,6 +30,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             disabled = false,
             disruptive = false,
             dropShadow = false,
+            floatingButtonProps,
             htmlType,
             iconProps,
             id,
@@ -40,7 +41,6 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             split,
             splitButtonChecked = false,
             splitButtonProps,
-            floatingButtonProps,
             style,
             text,
             theme,
@@ -81,7 +81,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             { [styles.buttonSize2]: size === ButtonSize.Medium },
             { [styles.buttonSize3]: size === ButtonSize.Small },
             { [styles.pillShape]: shape === ButtonShape.Pill },
-            { [styles.roundShape]: shape === ButtonShape.Round },
+            { [styles.roundShape]: shape === ButtonShape.Round && !split },
             { [styles.dropShadow]: dropShadow },
             { [styles.dark]: theme === ButtonTheme.dark },
             { [styles.floating]: floatingButtonProps?.enabled },

diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts
@@ -142,6 +142,10 @@ export interface ButtonProps extends NativeButtonProps {
      * @default false
      */
     dropShadow?: boolean;
+    /**
+     * The button is always floating on bottom right corner.
+     */
+    floatingButtonProps?: FloatingButtonProps;
     /**
      * The button html type.
      */
@@ -202,8 +206,4 @@ export interface ButtonProps extends NativeButtonProps {
      * The button is a toggle button with distinct on and off states.
      */
     toggle?: boolean;
-    /**
-     * The button is always floating on bottom right corner.
-     */
-    floatingButtonProps?: FloatingButtonProps;
 }
diff --git a/src/components/Button/DefaultButton/DefaultButton.tsx b/src/components/Button/DefaultButton/DefaultButton.tsx
@@ -24,6 +24,7 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
             counter,
             disabled = false,
             dropShadow = false,
+            floatingButtonProps,
             htmlType,
             iconProps,
             onClick,
@@ -62,6 +63,7 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
                 counter={counter}
                 disabled={disabled}
                 dropShadow={dropShadow}
+                floatingButtonProps={floatingButtonProps}
                 htmlType={htmlType}
                 iconProps={iconProps}
                 onClick={onClick}
@@ -73,8 +75,8 @@ export const DefaultButton: FC<ButtonProps> = React.forwardRef(
                 style={style}
                 text={text}
                 theme={theme}
-                type={ButtonType.Default}
                 toggle={toggle}
+                type={ButtonType.Default}
                 buttonWidth={buttonWidth}
             />
         );

diff --git a/src/components/Button/NeutralButton/NeutralButton.tsx b/src/components/Button/NeutralButton/NeutralButton.tsx
@@ -24,6 +24,7 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
             counter,
             disabled = false,
             dropShadow = false,
+            floatingButtonProps,
             htmlType,
             iconProps,
             onClick,
@@ -60,6 +61,7 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
                 counter={counter}
                 disabled={disabled}
                 dropShadow={dropShadow}
+                floatingButtonProps={floatingButtonProps}
                 htmlType={htmlType}
                 iconProps={iconProps}
                 onClick={onClick}
@@ -71,8 +73,8 @@ export const NeutralButton: FC<ButtonProps> = React.forwardRef(
                 style={style}
                 text={text}
                 theme={theme}
-                type={ButtonType.Neutral}
                 toggle={toggle}
+                type={ButtonType.Neutral}
                 buttonWidth={buttonWidth}
             />
         );

diff --git a/src/components/Button/PrimaryButton/PrimaryButton.tsx b/src/components/Button/PrimaryButton/PrimaryButton.tsx
@@ -25,6 +25,7 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
             disabled = false,
             disruptive = false,
             dropShadow = false,
+            floatingButtonProps,
             htmlType,
             iconProps,
             onClick,
@@ -61,23 +62,24 @@ export const PrimaryButton: FC<ButtonProps> = React.forwardRef(
                 checked={checked}
                 classNames={buttonClassNames}
                 counter={counter}
-                splitButtonChecked={splitButtonChecked}
                 disabled={disabled}
                 disruptive={disruptive}
                 dropShadow={dropShadow}
+                floatingButtonProps={floatingButtonProps}
                 htmlType={htmlType}
                 iconProps={iconProps}
                 onClick={onClick}
                 onContextMenu={onContextMenu}
                 shape={shape}
                 size={size}
                 split={split}
+                splitButtonChecked={splitButtonChecked}
                 splitButtonProps={splitButtonProps}
                 style={style}
                 text={text}
                 theme={theme}
-                type={ButtonType.Primary}
                 toggle={toggle}
+                type={ButtonType.Primary}
                 buttonWidth={buttonWidth}
             />
         );

diff --git a/src/components/Button/SecondaryButton/SecondaryButton.tsx b/src/components/Button/SecondaryButton/SecondaryButton.tsx
@@ -25,6 +25,7 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
             disabled = false,
             disruptive = false,
             dropShadow = false,
+            floatingButtonProps,
             htmlType,
             iconProps,
             onClick,
@@ -63,6 +64,7 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
                 disabled={disabled}
                 disruptive={disruptive}
                 dropShadow={dropShadow}
+                floatingButtonProps={floatingButtonProps}
                 htmlType={htmlType}
                 iconProps={iconProps}
                 onClick={onClick}
@@ -74,8 +76,8 @@ export const SecondaryButton: FC<ButtonProps> = React.forwardRef(
                 style={style}
                 text={text}
                 theme={theme}
-                type={ButtonType.Secondary}
                 toggle={toggle}
+                type={ButtonType.Secondary}
                 buttonWidth={buttonWidth}
             />
         );