feat: update button component to support icon-only variants and enhance icon handling in filters and view toggle

Author: agjs

assets/icons/filter-outline.svg

@@ -194,3 +194,83 @@ export const ErrorOutlinedWithIcon: Story = {
     }
   }
 };
+
+export const IconOnly: Story = {
+  args: {
+    icon: {
+      iconName: "IconBomb",
+      iconPosition: "center"
+    }
+  }
+};
+
+export const IconOnlyDisabled: Story = {
+  args: {
+    icon: {
+      iconName: "IconBomb",
+      iconPosition: "center"
+    },
+    disabled: true
+  }
+};
+
+export const IconOnlyLoading: Story = {
+  args: {
+    icon: {
+      iconName: "IconBomb",
+      iconPosition: "center"
+    },
+    isLoading: true
+  }
+};
+
+export const IconOnlyOutlined: Story = {
+  args: {
+    icon: {
+      iconName: "IconBomb",
+      iconPosition: "center"
+    },
+    outlined: true
+  }
+};
+
+export const IconOnlyPrimary: Story = {
+  args: {
+    icon: {
+      iconName: "IconAddCircle",
+      iconPosition: "center"
+    },
+    variant: ButtonVariantEnum.PRIMARY
+  }
+};
+
+export const IconOnlySecondary: Story = {
+  args: {
+    icon: {
+      iconName: "IconAddCircle",
+      iconPosition: "center"
+    },
+    variant: ButtonVariantEnum.SECONDARY
+  }
+};
+
+export const IconOnlyError: Story = {
+  args: {
+    icon: {
+      iconName: "IconDeleteBin",
+      iconPosition: "center"
+    },
+    variant: ButtonVariantEnum.ERROR
+  }
+};
+
+export const IconOnlyErrorOutlined: Story = {
+  args: {
+    icon: {
+      iconName: "IconDeleteBin",
+      iconPosition: "center"
+    },
+    variant: ButtonVariantEnum.ERROR,
+    outlined: true
+  }
+};

assets/icons/filter-solid.svg

@@ -26,6 +26,8 @@ const Button: React.FC<IButtonProps> = (
     variant: ButtonVariantEnum.PRIMARY
   }
 ) => {
+  const isIconOnly = !children && !!icon?.iconName;
+
   return (
     <button
       disabled={disabled}
@@ -36,33 +38,53 @@ const Button: React.FC<IButtonProps> = (
         disabled,
         outlined,
         className,
-        isLoading
+        isLoading,
+        isIconOnly
       })}
     >
       <div className='yl:relative yl:flex yl:items-center yl:justify-center'>
         <span
           className={classNames({
-            "yl:flex yl:items-center yl:gap-1": icon?.iconName,
+            "yl:flex yl:items-center yl:gap-1": icon?.iconName && !isIconOnly,
             invisible: isLoading
           })}
         >
-          {!isLoading && icon?.iconName && icon.iconPosition === "left" && (
-            <Icon
-              className={classNames(
-                {
-                  "yl:w-5": !icon?.iconClassName
-                },
-                icon?.iconClassName
-              )}
-              iconName={icon.iconName}
-            />
-          )}
+          {!isLoading &&
+            icon?.iconName &&
+            (isIconOnly || icon.iconPosition === "left") && (
+              <Icon
+                className={classNames(
+                  {
+                    "yl:w-5": !icon?.iconClassName
+                  },
+                  icon?.iconClassName
+                )}
+                iconName={icon.iconName}
+              />
+            )}
           <span className={classNames({ "yl:invisible": isLoading })}>
             {children}
           </span>
-          {isLoading && icon?.iconName && icon.iconPosition === "right" && (
-            <Spinner className={classNames("yl:w-4")} />
-          )}
+          {!isLoading &&
+            !isIconOnly &&
+            icon?.iconName &&
+            icon.iconPosition === "right" && (
+              <Icon
+                className={classNames(
+                  {
+                    "yl:w-5": !icon?.iconClassName
+                  },
+                  icon?.iconClassName
+                )}
+                iconName={icon.iconName}
+              />
+            )}
+          {!isIconOnly &&
+            isLoading &&
+            icon?.iconName &&
+            icon.iconPosition === "right" && (
+              <Spinner className={classNames("yl:w-4")} />
+            )}
         </span>
         <span className='yl:absolute'>
           {isLoading && <Spinner className={classNames("yl:w-6")} />}

assets/icons/horizontal-layout.svg

@@ -2,9 +2,16 @@ import classNames from "classnames";
 
 import { ButtonVariantEnum, IGetButtonClassesArgs } from "./types";
 
-export const getStyles = (isLoading: boolean) => {
+export const getStyles = (isLoading: boolean, isIconOnly?: boolean) => {
+  const padding = isIconOnly
+    ? "yl:p-2.5 yl:min-w-[2.5rem] yl:min-h-[2.5rem]"
+    : "yl:px-3 yl:py-2";
+
   return {
-    base: "yl:select-none yl:px-3 yl:py-2 yl:font-semibold yl:tracking-tight yl:rounded-md yl:border-2 yl:transition-all yl:duration-200 yl:transform yl:hover:scale-105",
+    base: classNames(
+      "yl:select-none yl:font-semibold yl:tracking-tight yl:rounded-md yl:border-2 yl:transition-all yl:duration-200 yl:transform yl:hover:scale-105",
+      padding
+    ),
     disabled: "yl:cursor-not-allowed yl:opacity-70",
     enabled: classNames({
       "yl:cursor-pointer": !isLoading
@@ -68,9 +75,10 @@ export const getVariantClasses = (
 };
 
 export const getButtonClasses = (args: IGetButtonClassesArgs) => {
-  const { variant, disabled, outlined, isLoading, className } = args;
+  const { variant, disabled, outlined, isLoading, className, isIconOnly } =
+    args;
 
-  const styles = getStyles(isLoading);
+  const styles = getStyles(isLoading, isIconOnly);
 
   return classNames(
     styles.base,

assets/icons/sort-down-solid.svg

@@ -3,7 +3,7 @@
 exports[`Button component > renders correctly - snapshot test 1`] = `
 <DocumentFragment>
   <button
-    class="yl:select-none yl:px-3 yl:py-2 yl:font-semibold yl:tracking-tight yl:rounded-md yl:border-2 yl:transition-all yl:duration-200 yl:transform yl:hover:scale-105 yl:cursor-pointer yl:border-primary yl:bg-primary yl:text-background yl:hover:bg-transparent yl:hover:text-primary"
+    class="yl:select-none yl:font-semibold yl:tracking-tight yl:rounded-md yl:border-2 yl:transition-all yl:duration-200 yl:transform yl:hover:scale-105 yl:px-3 yl:py-2 yl:cursor-pointer yl:border-primary yl:bg-primary yl:text-background yl:hover:bg-transparent yl:hover:text-primary"
     type="button"
   >
     <div