Merge branch 'main' into chore/onboarding-ui-adjustments

RocketChat · Oct 31, 2023 · ca25ea8 · ca25ea8
2 parents e557fad + 7e84e2e
commit ca25ea8
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 8 deletions.
diff --git a/.changeset/clever-brooms-hear.md b/.changeset/clever-brooms-hear.md
diff --git a/packages/fuselage/CHANGELOG.md b/packages/fuselage/CHANGELOG.md
@@ -1,5 +1,15 @@
 # Change Log
 
+## 0.37.0
+
+### Minor Changes
+
+- [#1205](https://github.com/RocketChat/fuselage/pull/1205) [`5a6d05c30`](https://github.com/RocketChat/fuselage/commit/5a6d05c3005cfe24b04b3511bbe945d23de0a6b1) Thanks [@juliajforesti](https://github.com/juliajforesti)! - feat(fuselage): add loading state to `Button`
+
+### Patch Changes
+
+- [#1206](https://github.com/RocketChat/fuselage/pull/1206) [`ec378a6bc`](https://github.com/RocketChat/fuselage/commit/ec378a6bc40cc2d209d753a2fbb05b1f814ca2f0) Thanks [@juliajforesti](https://github.com/juliajforesti)! - fix(fuselage): change `Callout` text color
+
 ## 0.36.0
 
 ### Minor Changes

diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@rocket.chat/fuselage",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "Rocket.Chat's React Components Library",
   "author": {
     "name": "Rocket.Chat",

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;
     }
   }