From 2762b5559d6404d1a50976643742891ee851cb9a Mon Sep 17 00:00:00 2001
From: Nasreddine Bac Ali <nasreddine.bacali95@gmail.com>
Date: Sun, 13 Mar 2022 10:45:49 +0100
Subject: [PATCH] fix: Remove extra icon content from Button component

---
 src/components/Button.tsx | 38 +++-----------------------------------
 src/pages/ButtonsPage.tsx | 24 +++++++++++++++---------
 2 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index aa63829bc..2131b971e 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,6 +1,5 @@
 import { ComponentProps, FC } from 'react';
 import classNames from 'classnames';
-import { Spinner } from './Spinner';
 
 type Color = 'blue' | 'alternative' | 'dark' | 'light' | 'green' | 'red' | 'yellow' | 'purple';
 type GradientMonochrome = 'blue' | 'green' | 'cyan' | 'teal' | 'lime' | 'red' | 'pink' | 'purple';
@@ -13,17 +12,14 @@ type GradientDuoTone =
   | 'tealToLime'
   | 'redToYellow';
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-type IconPosition = 'start' | 'end';
+
 export type ButtonProps = ComponentProps<'button'> & {
   pill?: boolean;
   outline?: boolean;
-  loader?: boolean;
-  iconButton?: boolean;
   label?: string;
   color?: Color;
   size?: Size;
   icon?: FC<ComponentProps<'svg'>>;
-  iconPosition?: IconPosition;
   gradientMonochrome?: GradientMonochrome;
   gradientDuoTone?: GradientDuoTone;
 };
@@ -90,25 +86,13 @@ const iconSizeClasses: Record<Size, string> = {
   xl: '!p-3',
 };
 
-const previousSize: Record<Size, Size> = {
-  xs: 'xs',
-  sm: 'xs',
-  md: 'sm',
-  lg: 'md',
-  xl: 'lg',
-};
-
 export const Button: FC<ButtonProps> = ({
   children,
   pill,
   outline,
   disabled = false,
-  loader = false,
-  iconButton = false,
-  label,
   size = 'md',
   icon: Icon,
-  iconPosition = 'start',
   color = 'blue',
   gradientMonochrome,
   gradientDuoTone,
@@ -136,27 +120,11 @@ export const Button: FC<ButtonProps> = ({
             outline,
           'rounded-md': outline && !pill,
           'rounded-full': outline && pill,
-          [iconSizeClasses[size]]: iconButton,
-          'gap-2': loader,
+          [iconSizeClasses[size]]: !!Icon,
         })}
       >
-        {iconButton ? (
-          Icon && <Icon className="h-5 w-5" />
-        ) : (
-          <>
-            {loader && <Spinner size={previousSize[size]} />}
-            {!loader && iconPosition === 'start' && Icon && <Icon className="mr-2 h-5 w-5" />}
-            {children}
-            {iconPosition === 'end' && Icon && <Icon className="ml-2 h-5 w-5" />}
-          </>
-        )}
+        {Icon ? <Icon className="h-5 w-5" /> : children}
       </span>
-
-      {label && (
-        <span className="mr-4 -ml-2 inline-flex h-4 w-4 items-center justify-center rounded-full bg-blue-200 text-xs font-semibold text-blue-800">
-          {label}
-        </span>
-      )}
     </button>
   );
 };
diff --git a/src/pages/ButtonsPage.tsx b/src/pages/ButtonsPage.tsx
index db481072b..da867c8e1 100644
--- a/src/pages/ButtonsPage.tsx
+++ b/src/pages/ButtonsPage.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { HiOutlineArrowRight, HiShoppingCart } from 'react-icons/hi';
 
-import { Button } from '../components';
+import { Button, Spinner } from '../components';
 import { CodeExample, DemoPage } from './DemoPage';
 
 const ButtonsPage: FC = () => {
@@ -129,11 +129,13 @@ const ButtonsPage: FC = () => {
       title: 'Buttons with icon',
       code: (
         <div className="flex flex-wrap items-center gap-2">
-          <Button icon={HiShoppingCart} iconPosition="start">
+          <Button>
+            <HiShoppingCart className="mr-2 h-5 w-5" />
             Buy now
           </Button>
-          <Button icon={HiOutlineArrowRight} iconPosition="end">
+          <Button>
             Choose plan
+            <HiOutlineArrowRight className="ml-2 h-5 w-5" />
           </Button>
         </div>
       ),
@@ -148,10 +150,10 @@ const ButtonsPage: FC = () => {
       title: 'Icon buttons',
       code: (
         <div className="flex flex-wrap items-center gap-2">
-          <Button iconButton icon={HiOutlineArrowRight} />
-          <Button iconButton icon={HiOutlineArrowRight} pill />
-          <Button iconButton icon={HiOutlineArrowRight} outline />
-          <Button iconButton icon={HiOutlineArrowRight} pill outline />
+          <Button icon={HiOutlineArrowRight} />
+          <Button icon={HiOutlineArrowRight} pill />
+          <Button icon={HiOutlineArrowRight} outline />
+          <Button icon={HiOutlineArrowRight} pill outline />
         </div>
       ),
       codeClassName: 'dark:!bg-gray-900',
@@ -160,8 +162,12 @@ const ButtonsPage: FC = () => {
       title: 'Loader',
       code: (
         <div className="flex flex-wrap items-center gap-2">
-          <Button loader>Loading ...</Button>
-          <Button loader outline>
+          <Button>
+            <Spinner className="mr-3" size="sm" light />
+            Loading ...
+          </Button>
+          <Button outline>
+            <Spinner className="mr-3" size="sm" light />
             Loading ...
           </Button>
         </div>