Merge pull request #14 from holaplex/anshul/spinner-update

Spinner variants update
holaplex · Mar 29, 2023 · 291eb90 · 291eb90
2 parents f1c4619 + 1c5ca97
commit 291eb90
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 31 deletions.
diff --git a/packages/@holaplexui-playground/pages/buttons.tsx b/packages/@holaplexui-playground/pages/buttons.tsx
@@ -46,9 +46,13 @@ export default function App() {
           With Icon
         </Button>
 
-        <Button spinner={<div>🔄</div>} border='rounded' loading>
+        <Button border='rounded' loading>
           With Spinner
         </Button>
+
+        <Button spinner={<div>🔄</div>} border='rounded' loading>
+          With Custom Spinner
+        </Button>
       </div>
     </div>
   );

diff --git a/packages/@holaplexui-playground/styles/globals.css b/packages/@holaplexui-playground/styles/globals.css
@@ -19,10 +19,16 @@ a {
   text-decoration: none;
 }
 
-.spinner-border {
-  vertical-align: -0.125em;
-  border: solid currentColor;
-  border-right-color: transparent;
+.spinner {
+  @apply inline-block h-4 w-4 animate-spin rounded-full border-2 border-solid border-r-transparent border-current align-[-0.125em];
+}
+
+.spinner-primary {
+  @apply border-white border-r-transparent;
+}
+
+.spinner-secondary {
+  @apply border-black border-r-transparent;
 }
 
 .form-label {

diff --git a/packages/@holaplexui-react/package.json b/packages/@holaplexui-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@holaplex/ui-library-react",
   "author": "Holaplex Inc.",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Holaplex react ui library components",
   "private": false,
   "files": [

diff --git a/packages/@holaplexui-react/src/components/Button.tsx b/packages/@holaplexui-react/src/components/Button.tsx
@@ -46,20 +46,20 @@ export const Button = ({
     }
   }, [size]);
 
-  const spinnerColor = useMemo(() => {
+  const spinnerVariant = useMemo(() => {
     switch (variant) {
       case 'primary':
-        return '#17161C';
+        return 'spinner-primary';
       case 'secondary':
-        return '#bfbfc3';
+        return 'spinner-secondary';
       case 'success':
-        return '#ffffff';
+        return 'spinner-success';
       case 'failure':
-        return '#ffffff';
+        return 'spinner-failure';
       case 'link':
-        return '#1f75cb';
+        return 'spinner-link';
       default:
-        return '#ffffff';
+        return 'spinner-primary';
     }
   }, [variant]);
 
@@ -116,12 +116,7 @@ export const Button = ({
           (spinner ? (
             spinner
           ) : (
-            <Spinner
-              height={spinnerSize}
-              width={spinnerSize}
-              color={spinnerColor}
-              className="inline aspect-square"
-            />
+            <Spinner variant={spinnerVariant} className="inline aspect-square" />
           ))}
         {icon && icon}
         {children && <span>{children}</span>}

diff --git a/packages/@holaplexui-react/src/components/Spinner.tsx b/packages/@holaplexui-react/src/components/Spinner.tsx
@@ -1,23 +1,14 @@
 import clsx from 'clsx';
 
 interface SpinnerProps {
-  color?: string;
-  height?: string | number;
-  width?: string | number;
+  variant?: string;
   className?: string;
 }
 
-export const Spinner = ({ color, height, width, className }: SpinnerProps): JSX.Element => {
+export const Spinner = ({ variant, className }: SpinnerProps): JSX.Element => {
   return (
     <div className="flex items-center justify-center">
-      <div
-        className={clsx(clsx, className, 'spinner-border inline-block animate-spin rounded-full')}
-        style={{
-          width: width || 32,
-          height: height || 32,
-          color: color,
-        }}
-      ></div>
+      <div className={clsx(clsx, className, variant, 'spinner')}></div>
     </div>
   );
 };