Migrated IconButton to use common Button component (#917)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net> Co-authored-by: Benjamin Perez <benjamin@bexsoft.net>
minio · Aug 6, 2024 · d4a7b9b · d4a7b9b
1 parent 81a517d
commit d4a7b9b
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 67 deletions.
diff --git a/src/components/FileSelector/FileSelector.tsx b/src/components/FileSelector/FileSelector.tsx
@@ -119,7 +119,7 @@ const FileSelector: FC<FileSelectorProps> = ({
           className={"inputLabel"}
           helpTip={helpTip}
           helpTipPlacement={helpTipPlacement}
-          inputSizeMode={"large"}
+          inputSizeMode={"small"}
         >
           {label}
           {required ? "*" : ""}
@@ -158,6 +158,7 @@ const FileSelector: FC<FileSelectorProps> = ({
         <Box className={"fileReselect"}>
           {value !== "" && <div className={"valueString"}>{value || ""}</div>}
           <IconButton
+            id={`file-selector-ac-${id}`}
             type={"button"}
             color="primary"
             aria-label="upload picture"

diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/IconButton/IconButton.stories.tsx
@@ -45,21 +45,16 @@ SmallButton.args = {
   size: "small",
 };
 
-export const MediumButton = Template.bind({});
-MediumButton.args = {
-  disabled: false,
-};
-
 export const LargeButton = Template.bind({});
 LargeButton.args = {
   disabled: false,
   size: "large",
 };
 
-export const CustomSize = Template.bind({});
-CustomSize.args = {
+export const ButtonVariant = Template.bind({});
+ButtonVariant.args = {
   disabled: false,
-  size: "100px",
+  variant: "destructive-lighter",
 };
 
 export const Disabled = Template.bind({});

diff --git a/src/components/IconButton/IconButton.tsx b/src/components/IconButton/IconButton.tsx
@@ -15,64 +15,27 @@
 // along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import React, { FC } from "react";
-import styled from "styled-components";
-import get from "lodash/get";
 import { IconButtonProps } from "./IconButton.types";
+import Button from "../Button/Button";
 
-const CustomIconButton = styled.button<IconButtonProps>(({ theme, size }) => {
-  let buttonSize: number | string = 32;
-
-  if (size) {
-    if (typeof size === "string") {
-      switch (size) {
-        case "small":
-          buttonSize = 28;
-          break;
-        case "medium":
-          buttonSize = 32;
-          break;
-        case "large":
-          buttonSize = 48;
-          break;
-        default:
-          buttonSize = size;
-      }
-    }
-  }
-  return {
-    width: buttonSize,
-    height: buttonSize,
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    borderRadius: "100%",
-    border: 0,
-    position: "relative",
-    cursor: "pointer",
-    transitionDuration: "0.2s",
-    background: get(theme, `iconButton.buttonBG`, "#000"),
-    "& svg": {
-      color: get(theme, `iconButton.color`, "#000"),
-      margin: "calc(25% - 2px)",
-    },
-    "&:hover:not(:disabled)": {
-      background: get(theme, `iconButton.hoverBG`, "#000"),
-    },
-    "&:active:not(:disabled)": {
-      background: get(theme, `iconButton.activeBG`, "#000"),
-    },
-    "&:disabled": {
-      cursor: "not-allowed",
-      background: get(theme, `iconButton.disabledBG`, "#000"),
-      "& svg": {
-        color: get(theme, `iconButton.disabledColor`, "#fff"),
-      },
-    },
-  };
-});
-
-const IconButton: FC<IconButtonProps> = ({ children, ...props }) => {
-  return <CustomIconButton {...props}>{children}</CustomIconButton>;
+const IconButton: FC<IconButtonProps> = ({
+  children,
+  id,
+  size,
+  variant = "primary-lighter",
+  isLoading,
+  ...props
+}) => {
+  return (
+    <Button
+      id={id}
+      compact={size === "small"}
+      variant={variant}
+      isLoading={isLoading}
+      icon={children}
+      {...props}
+    />
+  );
 };
 
 export default IconButton;
diff --git a/src/components/IconButton/IconButton.types.ts b/src/components/IconButton/IconButton.types.ts
@@ -16,11 +16,14 @@
 
 import React from "react";
 import { OverrideTheme } from "../../global/global.types";
+import { ButtonVariant } from "../Button/Button.types";
 
 export interface IconBase {
-  label?: string;
-  size?: "small" | "medium" | "large" | string;
+  id: string;
+  size?: "small" | "large";
   sx?: OverrideTheme;
+  variant?: ButtonVariant;
+  isLoading?: boolean;
   children: React.ReactNode;
 }