feat: add loading state to Button

RocketChat · Oct 24, 2023 · 1daf79b · 1daf79b
1 parent 9e04993
commit 1daf79b
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 2 deletions.
diff --git a/packages/fuselage/src/components/Button/Button.stories.tsx b/packages/fuselage/src/components/Button/Button.stories.tsx
@@ -40,6 +40,32 @@ export const Default: ComponentStory<typeof Button> = () => (
   <Button onClick={action('click')}>Button</Button>
 );
 
+export const Loading: ComponentStory<typeof Button> = () => (
+  <Button loading onClick={action('click')}>
+    Button
+  </Button>
+);
+export const LoadingInteraction: ComponentStory<typeof Button> = () => {
+  const [isLoading, setIsLoading] = React.useState(false);
+  return (
+    <Button
+      icon='add-user'
+      loading={isLoading}
+      onClick={() => setIsLoading(!isLoading)}
+    >
+      Button
+    </Button>
+  );
+};
+
+LoadingInteraction.parameters = {
+  docs: {
+    description: {
+      story: 'Click the button to see the loading state.',
+    },
+  },
+};
+
 export const Variants: ComponentStory<typeof Button> = () => (
   <Margins all='x8'>
     <ButtonGroup>

diff --git a/packages/fuselage/src/components/Button/Button.styles.scss b/packages/fuselage/src/components/Button/Button.styles.scss
@@ -65,6 +65,12 @@
 
   @include button.kind-variant(colors.$secondary);
 
+  &--loading {
+    .rcx-icon--name-loading {
+      animation: spin-animation 0.8s linear infinite;
+    }
+  }
+
   &--small {
     @include typography.use-font-scale(c2);
 
@@ -200,3 +206,13 @@
     @include button.kind-variant(colors.$secondary-success);
   }
 }
+
+@keyframes spin-animation {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/packages/fuselage/src/components/Button/Button.tsx b/packages/fuselage/src/components/Button/Button.tsx
@@ -11,6 +11,7 @@ export type ButtonProps = ComponentProps<typeof Box> & {
   warning?: boolean;
   success?: boolean;
   disabled?: boolean;
+  loading?: boolean;
   mini?: boolean;
   tiny?: boolean;
   small?: boolean;
@@ -41,6 +42,8 @@ export const Button = forwardRef(function Button(
     medium,
     large,
     square,
+    loading,
+    disabled,
     children,
     ...props
   }: ButtonProps,
@@ -91,12 +94,15 @@ export const Button = forwardRef(function Button(
       rcx-button--small-square={small && square}
       rcx-button--medium-square={medium && square}
       rcx-button--large-square={large && square}
+      rcx-button--loading={loading}
+      disabled={disabled || loading}
       ref={ref}
       {...extraProps}
       {...props}
     >
       <span className='rcx-button--content'>
-        {icon && <Icon size='x16' name={icon} mie={4} />}
+        {icon && !loading && <Icon size='x16' name={icon} mie={4} />}
+        {loading && <Icon size='x16' name='loading' mie={4} />}
         {children}
       </span>
     </Box>

diff --git a/packages/fuselage/src/styles/primitives/button.scss b/packages/fuselage/src/styles/primitives/button.scss
@@ -43,7 +43,7 @@
     border-color: map.get($colors, disabled-border-color);
     background-color: map.get($colors, disabled-background-color);
 
-    * {
+    .rcx-button--content {
       transform: none !important;
     }
   }