refactor(components/button): changes on theme and spinner usage

themesberg · Apr 17, 2023 · 639d6b4 · 639d6b4
1 parent bc58c6f
commit 639d6b4
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 33 deletions.
diff --git a/src/docs/pages/ButtonsPage.tsx b/src/docs/pages/ButtonsPage.tsx
@@ -271,11 +271,11 @@ const ButtonsPage: FC = () => {
         <div className="flex flex-wrap items-center gap-2">
           <div className="flex flex-wrap items-center gap-2">
             <div>
-              <Button isProcessing={true}>Loading ...</Button>
+              <Button isProcessing={true}>Click me!</Button>
             </div>
             <div>
               <Button isProcessing={true} outline>
-                Loading ...
+                Click me!
               </Button>
             </div>
           </div>

diff --git a/src/lib/components/Button/Button.tsx b/src/lib/components/Button/Button.tsx
@@ -20,11 +20,7 @@ export interface FlowbiteButtonTheme {
   color: FlowbiteColors;
   disabled: string;
   isProcessing: string;
-  processing: {
-    spinnerSize: string;
-    spinnerLight: string;
-    spinnerClassName: string;
-  };
+  spinnerSlot: string;
   gradient: ButtonGradientColors;
   gradientDuoTone: ButtonGradientDuoToneColors;
   inner: FlowbiteButtonInnerTheme;
@@ -74,11 +70,8 @@ export interface ButtonProps extends Omit<ComponentProps<'button'>, 'color' | 'r
   href?: string;
   target?: string;
   isProcessing?: boolean;
-  processing?: {
-    spinnerSize?: string;
-    spinnerLight?: boolean;
-    spinnerClassName?: string;
-  };
+  processingLabel?: string;
+  processingSpinner?: ReactNode;
   label?: ReactNode;
   outline?: boolean;
   pill?: boolean;
@@ -96,11 +89,8 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Button
       disabled = false,
       fullSized,
       isProcessing = false,
-      processing = {
-        spinnerSize: 'sm',
-        spinnerLight: true,
-        spinnerClassName: 'mr-3',
-      },
+      processingLabel = 'Loading...',
+      processingSpinner: SpinnerComponent = <Spinner />,
       gradientDuoTone,
       gradientMonochrome,
       href,
@@ -148,20 +138,16 @@ const ButtonComponent = forwardRef<HTMLButtonElement | HTMLAnchorElement, Button
             theme.outline.pill[outline && pill ? 'on' : 'off'],
             theme.size[size],
             outline && !theme.outline.color[color] && theme.inner.outline,
+            isProcessing && theme.isProcessing,
           )}
         >
           <>
-            {isProcessing && (
-              <Spinner
-                size={processing.spinnerSize}
-                light={processing.spinnerLight}
-                className={processing.spinnerClassName}
-              />
-            )}
-            {typeof children !== 'undefined' && children}
-            {typeof label !== 'undefined' && (
+            {isProcessing && <span className={theme.spinnerSlot}>{SpinnerComponent}</span>}
+            {typeof children !== 'undefined' ? (
+              children
+            ) : (
               <span data-testid="flowbite-button-label" className={theme.label}>
-                {label}
+                {isProcessing ? processingLabel : label}
               </span>
             )}
           </>

diff --git a/src/lib/theme/default.ts b/src/lib/theme/default.ts
@@ -239,12 +239,8 @@ const theme: FlowbiteTheme = {
         'text-yellow-900 bg-white border border-yellow-300 hover:bg-yellow-100 focus:ring-4 focus:ring-yellow-300 disabled:hover:bg-white dark:bg-yellow-600 dark:text-white dark:border-yellow-600 dark:hover:bg-yellow-700 dark:hover:border-yellow-700 dark:focus:ring-yellow-700',
     },
     disabled: 'cursor-not-allowed opacity-50',
-    isProcessing: 'cursor-wait',
-    processing: {
-      spinnerSize: '',
-      spinnerLight: '',
-      spinnerClassName: '',
-    },
+    isProcessing: '!cursor-wait',
+    spinnerSlot: 'mr-3',
     gradient: {
       cyan: 'text-white bg-gradient-to-r from-cyan-400 via-cyan-500 to-cyan-600 hover:bg-gradient-to-br focus:ring-4 focus:ring-cyan-300 dark:focus:ring-cyan-800',
       failure: