Merge pull request #155 from abusix/pla-1324-improve-hailstorms-iconb…

…utton-properties Improve Hailstorm's IconButton properties
abusix · Oct 2, 2024 · af1940d · af1940d
2 parents 81d93ff + ca7a12f
commit af1940d
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 23 deletions.
diff --git a/src/components/dialog/dialog.tsx b/src/components/dialog/dialog.tsx
@@ -95,7 +95,7 @@ export const Dialog = ({
                                     <IconButton
                                         className="absolute right-0 top-0"
                                         Icon={CrossIcon}
-                                        type="minimal"
+                                        variant="minimal"
                                         onClick={() => handleClose(false)}
                                     />
                                 )}

diff --git a/src/components/icon-button/icon-button.stories.tsx b/src/components/icon-button/icon-button.stories.tsx
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { IconButton, IconButtonProps } from "./icon-button";
 import { WalkIcon } from "../../icons";
 
-const IconTypes: IconButtonProps["type"][] = [
+const VariantTypes: IconButtonProps["variant"][] = [
     "primary",
     "secondary",
     "minimal",
@@ -15,12 +15,12 @@ const meta: Meta<typeof IconButton> = {
     title: "IconButton",
     component: IconButton,
     args: {
-        type: "primary",
+        variant: "primary",
         disabled: false,
         Icon: WalkIcon,
     },
     argTypes: {
-        type: { options: IconTypes },
+        variant: { options: VariantTypes },
     },
 };
 

diff --git a/src/components/icon-button/icon-button.tsx b/src/components/icon-button/icon-button.tsx
@@ -16,34 +16,21 @@ const iconButtonVariants = {
         "bg-neutral-0 text-danger-500 border border-danger-500 hover:bg-danger-50 hover:text-danger-600 active:border-danger-700 active:text-danger-700 active:bg-danger-100 focus:ring-2 focus:ring-danger-100 focus:text-danger-600 disabled:border-danger-100 disabled:text-danger-100 disabled:bg-neutral-0 fill-danger-600",
 };
 
-export interface IconButtonProps {
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     Icon: React.ElementType;
-    type: keyof typeof iconButtonVariants;
-    onClick: () => void;
-    disabled?: boolean;
-    className?: string;
-    ariaLabel?: string;
+    variant?: keyof typeof iconButtonVariants;
 }
 
-export const IconButton = ({
-    Icon,
-    onClick,
-    disabled = false,
-    type = "primary",
-    className,
-    ariaLabel,
-}: IconButtonProps) => {
+export const IconButton = ({ Icon, variant = "primary", className, ...props }: IconButtonProps) => {
     return (
         <button
             type="button"
-            aria-label={ariaLabel}
             className={classNames(
                 `inline-flex h-8 w-8 flex-shrink-0 items-center justify-center rounded focus:outline-none`,
-                iconButtonVariants[type],
+                iconButtonVariants[variant],
                 className
             )}
-            onClick={onClick}
-            disabled={disabled}
+            {...props}
         >
             <Icon className="h-3 w-3" />
         </button>

diff --git a/src/components/table-virtualized/table-virtualized.stories.tsx b/src/components/table-virtualized/table-virtualized.stories.tsx
@@ -107,7 +107,7 @@ export const Draggable = () => {
                 width: 80,
             },
             cell: (row) => (
-                <IconButton onClick={() => row.getValue()} Icon={TrashIcon} type="danger" />
+                <IconButton onClick={() => row.getValue()} Icon={TrashIcon} variant="danger" />
             ),
         }),
     ];