feat: add loading state in button and tabs

EightfoldAI · Aug 24, 2022 · 38e331e · 38e331e
1 parent 503f0d8
commit 38e331e
Show file tree

Hide file tree

Showing 15 changed files with 254 additions and 6 deletions.
diff --git a/src/components/Button/BaseButton.tsx b/src/components/Button/BaseButton.tsx
@@ -13,6 +13,7 @@ import { Icon, IconSize } from '../Icon';
 import { Badge } from '../Badge';
 import { Breakpoints, useMatchMedia } from '../../hooks/useMatchMedia';
 import { mergeClasses } from '../../shared/utilities';
+import { Loader } from '../Loader';
 
 import styles from './button.module.scss';
 
@@ -46,6 +47,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             theme,
             toggle,
             type,
+            loading = false,
             ...rest
         },
         ref: Ref<HTMLButtonElement>
@@ -105,6 +107,7 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
                     iconExists && alignIcon === ButtonIconAlign.Right,
             },
             { [styles.disabled]: allowDisabledFocus || disabled },
+            { [styles.loading]: loading },
         ]);
 
         const buttonTextClassNames: string = mergeClasses([
@@ -155,6 +158,9 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
             return iconSize;
         };
 
+        const getButtonLoader = (): JSX.Element =>
+            loading && <Loader classNames={styles.loader} />;
+
         const getButtonIcon = (): JSX.Element => (
             <Icon
                 {...iconProps}
@@ -169,9 +175,10 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
         ): JSX.Element => (
             <span className={buttonTextClassNames}>
                 {text ? text : 'Button'}
-                {counterExists && (
+                {counterExists && !loading && (
                     <Badge classNames={badgeClassNames}>{counter}</Badge>
                 )}
+                {getButtonLoader()}
             </span>
         );
 
@@ -193,9 +200,10 @@ export const BaseButton: FC<InternalButtonProps> = React.forwardRef(
                     type={htmlType}
                 >
                     {iconExists && !textExists && getButtonIcon()}
-                    {counterExists && !textExists && (
+                    {counterExists && !textExists && !loading && (
                         <Badge classNames={badgeClassNames}>{counter}</Badge>
                     )}
+                    {counterExists && !textExists && getButtonLoader()}
                     {iconExists && textExists && (
                         <span>
                             {getButtonIcon()}

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -260,6 +260,7 @@ const buttonArgs: Object = {
     theme: ButtonTheme.light,
     toggle: false,
     counter: 0,
+    loading: false,
 };
 
 Primary.args = {

diff --git a/src/components/Button/Button.types.ts b/src/components/Button/Button.types.ts
@@ -212,4 +212,8 @@ export interface ButtonProps extends NativeButtonProps {
      * @default false
      */
     transparent?: boolean;
+    /**
+     * If the button is in loading state
+     */
+    loading?: boolean;
 }
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -161,6 +161,11 @@
         cursor: not-allowed;
     }
 
+    &.loading {
+        pointer-events: none;
+        cursor: not-allowed;
+    }
+
     &:hover {
         .counter {
             background-color: var(--button-counter-hover-background-color);
@@ -178,6 +183,10 @@
     &:focus-visible {
         outline: none;
     }
+
+    .loader {
+        margin-left: $space-xs;
+    }
 }
 
 .button-text-large {

diff --git a/src/components/Loader/Loader.stories.tsx b/src/components/Loader/Loader.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Stories } from '@storybook/addon-docs';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Loader, LoaderSize } from './';
+
+export default {
+    title: 'Loader',
+    parameters: {
+        docs: {
+            page: (): JSX.Element => (
+                <main>
+                    <article>
+                        <section>
+                            <h1>Loader</h1>
+                        </section>
+                        <section>
+                            <Stories includePrimary title="" />
+                        </section>
+                    </article>
+                </main>
+            ),
+        },
+    },
+    argTypes: {
+        size: {
+            options: [LoaderSize.Large, LoaderSize.Medium, LoaderSize.Small],
+            control: { type: 'select' },
+        },
+    },
+} as ComponentMeta<typeof Loader>;
+
+const Loader_Story: ComponentStory<typeof Loader> = (args) => (
+    <Loader {...args} />
+);
+
+export const Default = Loader_Story.bind({});
+
+Default.args = {
+    classNames: 'my-loader-class',
+};
diff --git a/src/components/Loader/Loader.tsx b/src/components/Loader/Loader.tsx
@@ -0,0 +1,27 @@
+import React, { FC } from 'react';
+import { LoaderProps, LoaderSize } from './Loader.types';
+import { Stack } from '../Stack';
+import { mergeClasses } from '../../shared/utilities';
+
+import styles from './loader.module.scss';
+
+export const Loader: FC<LoaderProps> = ({
+    size = LoaderSize.Small,
+    ...rest
+}) => {
+    const dotClasses = mergeClasses([
+        styles.dot,
+        {
+            [styles.small]: size === LoaderSize.Small,
+            [styles.medium]: size === LoaderSize.Medium,
+            [styles.large]: size === LoaderSize.Large,
+        },
+    ]);
+    return (
+        <Stack {...rest}>
+            <div className={dotClasses} />
+            <div className={dotClasses} />
+            <div className={dotClasses} />
+        </Stack>
+    );
+};
diff --git a/src/components/Loader/Loader.types.ts b/src/components/Loader/Loader.types.ts
@@ -0,0 +1,11 @@
+import { OcBaseProps } from '../OcBase';
+
+export enum LoaderSize {
+    Large = 'large',
+    Medium = 'medium',
+    Small = 'small',
+}
+
+export interface LoaderProps extends OcBaseProps<HTMLDivElement> {
+    size?: LoaderSize;
+}
diff --git a/src/components/Loader/index.ts b/src/components/Loader/index.ts
@@ -0,0 +1,2 @@
+export * from './Loader';
+export * from './Loader.types';
diff --git a/src/components/Loader/loader.module.scss b/src/components/Loader/loader.module.scss
@@ -0,0 +1,107 @@
+.dot {
+    --translate: -2px;
+    background: var(--primary-color);
+    border-radius: 50%;
+    margin-right: $space-xxs;
+
+    &.small {
+        width: 4px;
+        height: 4px;
+    }
+
+    &.medium {
+        --translate: -3px;
+        width: 6px;
+        height: 6px;
+    }
+
+    &.large {
+        --translate: -4px;
+        width: 8px;
+        height: 8px;
+    }
+
+    &:nth-child(1) {
+        animation: 2s linear infinite both firstBall;
+    }
+
+    &:nth-child(2) {
+        animation: 2s linear infinite both secondBall;
+    }
+
+    &:nth-child(3) {
+        animation: 2s linear infinite both thirdBall;
+    }
+}
+
+@keyframes firstBall {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(0);
+    }
+    60% {
+        transform: translateY(var(--translate));
+    }
+    70% {
+        transform: translateY(0);
+    }
+    80% {
+        transform: translateY(0);
+    }
+    90% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes secondBall {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(0);
+    }
+    60% {
+        transform: translateY(0);
+    }
+    70% {
+        transform: translateY(var(--translate));
+    }
+    80% {
+        transform: translateY(0);
+    }
+    90% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+@keyframes thirdBall {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(0);
+    }
+    60% {
+        transform: translateY(0);
+    }
+    70% {
+        transform: translateY(0);
+    }
+    80% {
+        transform: translateY(var(--translate));
+    }
+    90% {
+        transform: translateY(0);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
diff --git a/src/components/Select/Select.stories.tsx b/src/components/Select/Select.stories.tsx
@@ -119,7 +119,7 @@ const Wrapper: FC<SelectProps> = ({ children }) => {
     );
 };
 
-const DynamicSelect: FC<SelectProps> = () => {
+const DynamicSelect: FC<SelectProps> = (args) => {
     const timer = useRef<ReturnType<typeof setTimeout>>(null);
     const [options, setOptions] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -139,11 +139,12 @@ const DynamicSelect: FC<SelectProps> = () => {
     };
     return (
         <Select
+            {...args}
             filterable={true}
             isLoading={isLoading}
             loadOptions={loadOptions}
             options={options}
-        ></Select>
+        />
     );
 };
 

diff --git a/src/components/Tabs/Tab/Tab.tsx b/src/components/Tabs/Tab/Tab.tsx
@@ -9,6 +9,7 @@ import { useConfig } from '../../ConfigProvider';
 import { Badge } from '../../Badge';
 
 import styles from '../tabs.module.scss';
+import { Loader } from '../../Loader';
 
 export const Tab: FC<TabProps> = React.forwardRef(
     (
@@ -20,6 +21,7 @@ export const Tab: FC<TabProps> = React.forwardRef(
             ariaLabel,
             badgeContent,
             classNames,
+            loading,
             ...rest
         },
         ref: Ref<HTMLButtonElement>
@@ -53,12 +55,16 @@ export const Tab: FC<TabProps> = React.forwardRef(
             );
 
         const getBadge = (): JSX.Element =>
-            !!badgeContent && (
+            !!badgeContent &&
+            !loading && (
                 <Badge active={isActive} classNames={styles.badge}>
                     {badgeContent}
                 </Badge>
             );
 
+        const getLoader = (): JSX.Element =>
+            loading && <Loader classNames={styles.loader} />;
+
         return (
             <button
                 {...rest}
@@ -74,6 +80,7 @@ export const Tab: FC<TabProps> = React.forwardRef(
                 {getLabel()}
                 {getTabIndicator()}
                 {getBadge()}
+                {getLoader()}
             </button>
         );
     }

diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
@@ -99,6 +99,21 @@ const Default_Story: ComponentStory<typeof Tabs> = (args) => {
 
 export const Default = Default_Story.bind({});
 
+const Default_Loading_Story: ComponentStory<typeof Tabs> = (args) => {
+    const [activeTabs, setActiveTabs] = useState({ defaultTab: 'tab1' });
+    return (
+        <Tabs
+            {...args}
+            onChange={(tab) =>
+                setActiveTabs({ ...activeTabs, defaultTab: tab })
+            }
+            value={activeTabs.defaultTab}
+        />
+    );
+};
+
+export const DefaultLoader = Default_Loading_Story.bind({});
+
 const Small_Story: ComponentStory<typeof Tabs> = (args) => {
     const [activeTabs, setActiveTabs] = useState({ defaultTab: 'tab1' });
     return (
@@ -245,6 +260,13 @@ Default.args = {
     ...tabsArgs,
 };
 
+DefaultLoader.args = {
+    ...tabsArgs,
+    children: badgeTabs.map((tab, index) => (
+        <Tab key={tab.value} {...tab} loading={index % 2 === 0} />
+    )),
+};
+
 Small.args = {
     ...tabsArgs,
     variant: TabVariant.small,
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './Loader';
		export * from './Loader.types';