feat: Experimental buttons improvements (#488)

AlanFnz · web-flow · commit df226ae33425 · 2024-11-11T10:36:35.000+01:00
* feat: add text button variant and loading state

* feat: small refactor and add loading state on icon button

* test: update icon button tests

* test: added experimental button tests

* fix: background color

* fix: spinner color on primary emphasis
diff --git a/src/components/experimental/Button/Button.spec.tsx b/src/components/experimental/Button/Button.spec.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Button } from './Button';
+
+describe('Experimental: Button', () => {
+    it('renders the button component', () => {
+        const onPress = jest.fn();
+        render(<Button onPress={onPress} />);
+        expect(screen.getByTestId('button-container')).toBeInTheDocument();
+    });
+
+    it('calls onPress when clicked', () => {
+        const onPress = jest.fn();
+        render(<Button onPress={onPress} />);
+        screen.getByTestId('button-container').click();
+        expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onPress when disabled', () => {
+        const onPress = jest.fn();
+        render(<Button onPress={onPress} isDisabled />);
+        screen.getByTestId('button-container').click();
+        expect(onPress).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not call onPress when is loading', () => {
+        const onPress = jest.fn();
+        render(<Button onPress={onPress} isLoading />);
+        screen.getByTestId('button-container').click();
+        expect(onPress).toHaveBeenCalledTimes(0);
+    });
+
+    it('spinner is rendered when loading', () => {
+        const onPress = jest.fn();
+        render(<Button onPress={onPress} isLoading />);
+        expect(screen.getByTestId('button-spinner')).toBeInTheDocument();
+    });
+});
diff --git a/src/components/experimental/Button/Button.tsx b/src/components/experimental/Button/Button.tsx
@@ -5,14 +5,19 @@ import { Button as BaseButton, ButtonProps as BaseButtonProps } from 'react-aria
 import { getSemanticValue } from '../../../essentials/experimental/cssVariables';
 import { get } from '../../../utils/experimental/themeGet';
 import { textStyles } from '../Text/Text';
+import { InlineSpinner } from '../../InlineSpinner/InlineSpinner';
 
-type Emphasis = 'primary' | 'secondary';
+type Emphasis = 'primary' | 'secondary' | 'textButton';
 
 interface ButtonProps extends BaseButtonProps {
     /**
      * Define style of the button component, defaults to primary
      */
     emphasis?: Emphasis;
+    /**
+     * Loading state, defaults to false
+     */
+    isLoading?: boolean;
 }
 
 const emphasisStyles = variant<Record<string, unknown>, Emphasis>({
@@ -45,6 +50,23 @@ const emphasisStyles = variant<Record<string, unknown>, Emphasis>({
             '&[data-disabled]::before': {
                 opacity: 0.06
             }
+        },
+        textButton: {
+            color: getSemanticValue('on-surface'),
+            background: 'transparent',
+
+            '&::before': {
+                background: getSemanticValue('interactive')
+            },
+
+            '&[data-disabled]': {
+                opacity: 0.38
+            },
+
+            '&[data-disabled]::before': {
+                opacity: 0.06,
+                background: 'transparent'
+            }
         }
     }
 });
@@ -62,7 +84,8 @@ const ButtonStyled = styled(BaseButton)<{ $emphasis: Emphasis }>`
 
     cursor: pointer;
 
-    &[data-disabled] {
+    &[data-disabled],
+    &[data-pending] {
         cursor: not-allowed;
     }
 
@@ -87,15 +110,25 @@ const ButtonStyled = styled(BaseButton)<{ $emphasis: Emphasis }>`
         opacity: 0.24;
     }
 
+    &[data-pending] {
+        opacity: 0.38;
+    }
+
     ${textStyles.variants.label1}
 
     ${emphasisStyles};
 `;
 
-function Button({ children, emphasis = 'primary', ...restProps }: ButtonProps): ReactElement {
+const spinnerColor: Record<Emphasis, string> = {
+    primary: getSemanticValue('on-accent'),
+    secondary: getSemanticValue('on-surface'),
+    textButton: getSemanticValue('on-surface')
+};
+
+function Button({ children, emphasis = 'primary', isLoading = false, ...restProps }: ButtonProps): ReactElement {
     return (
-        <ButtonStyled $emphasis={emphasis} {...restProps}>
-            {children}
+        <ButtonStyled data-testid="button-container" isPending={isLoading} $emphasis={emphasis} {...restProps}>
+            {isLoading ? <InlineSpinner data-testid="button-spinner" color={spinnerColor[emphasis]} /> : children}
         </ButtonStyled>
     );
 }
diff --git a/src/components/experimental/Button/docs/Button.stories.tsx b/src/components/experimental/Button/docs/Button.stories.tsx
@@ -18,11 +18,15 @@ const meta: Meta = {
         },
         emphasis: {
             control: 'radio',
-            options: ['primary', 'secondary']
+            options: ['primary', 'secondary', 'textButton']
         },
         isDisabled: {
             control: 'boolean'
         },
+        isLoading: {
+            control: 'boolean'
+        },
+
         ref: {
             table: {
                 disable: true
@@ -53,12 +57,24 @@ export const Secondary: Story = {
     }
 };
 
+export const TextButton: Story = {
+    args: {
+        emphasis: 'textButton'
+    }
+};
+
 export const Disabled: Story = {
     args: {
         isDisabled: true
     }
 };
 
+export const Loading: Story = {
+    args: {
+        isLoading: true
+    }
+};
+
 export const Focused: Story = {
     args: {
         autoFocus: true
diff --git a/src/components/experimental/IconButton/IconButton.spec.tsx b/src/components/experimental/IconButton/IconButton.spec.tsx
@@ -24,6 +24,13 @@ describe('Experimental: IconButton', () => {
         expect(onPress).toHaveBeenCalledTimes(0);
     });
 
+    it('does not call onPress when is loading', () => {
+        const onPress = jest.fn();
+        render(<IconButton Icon={TrashIcon} onPress={onPress} isLoading />);
+        screen.getByTestId('standard-icon-container').click();
+        expect(onPress).toHaveBeenCalledTimes(0);
+    });
+
     it('sets the right sizes for standard variant', () => {
         const onPress = jest.fn();
         render(<IconButton Icon={TrashIcon} onPress={onPress} />);
@@ -43,4 +50,10 @@ describe('Experimental: IconButton', () => {
         expect(containerStyle.height).toBe('3.5rem');
         expect(containerStyle.borderRadius).toBe('100%');
     });
+
+    it('spinner is rendered when loading', () => {
+        const onPress = jest.fn();
+        render(<IconButton Icon={TrashIcon} onPress={onPress} isLoading />);
+        expect(screen.getByTestId('iconbutton-spinner')).toBeInTheDocument();
+    });
 });
diff --git a/src/components/experimental/IconButton/IconButton.tsx b/src/components/experimental/IconButton/IconButton.tsx
@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import styled from 'styled-components';
 import { ButtonProps, Button } from 'react-aria-components';
 import { IconProps } from '../../../icons';
 import { getSemanticValue } from '../../../essentials/experimental';
+import { InlineSpinner } from '../../InlineSpinner/InlineSpinner';
 
 export interface IconButtonProps extends ButtonProps {
     isActive?: boolean;
+    isLoading?: boolean;
     variant?: 'standard' | 'tonal';
     Icon: React.FC<IconProps>;
     onPress: () => void;
@@ -18,6 +20,13 @@ const StandardIconContainer = styled(Button)<Omit<IconButtonProps, 'Icon'>>`
     background-color: transparent;
     border-color: transparent;
 
+    cursor: pointer;
+
+    &[data-disabled],
+    &[data-pending] {
+        cursor: not-allowed;
+    }
+
     /* we create a before pseudo element to mess with the opacity (see the hovered state) */
     &::before {
         position: absolute;
@@ -42,7 +51,8 @@ const StandardIconContainer = styled(Button)<Omit<IconButtonProps, 'Icon'>>`
         color: ${props => (props.isActive ? getSemanticValue('interactive') : getSemanticValue('on-surface'))};
     }
 
-    &[data-disabled] {
+    &[data-disabled],
+    &[data-pending] {
         opacity: 0.38;
     }
 `;
@@ -54,6 +64,13 @@ const TonalIconContainer = styled(Button)<Omit<IconButtonProps, 'Icon'>>`
     border-color: transparent;
     background: none;
 
+    cursor: pointer;
+
+    &[data-disabled],
+    &[data-pending] {
+        cursor: not-allowed;
+    }
+
     /* we create a before pseudo element to mess with the opacity (see the hovered state) */
     &::before {
         position: absolute;
@@ -88,34 +105,35 @@ const TonalIconContainer = styled(Button)<Omit<IconButtonProps, 'Icon'>>`
             props.isActive ? getSemanticValue('on-interactive-container') : getSemanticValue('on-surface')};
     }
 
-    &[data-disabled] {
+    &[data-disabled],
+    &[data-pending] {
         opacity: 0.38;
     }
 `;
 
 export const IconButton = ({
     isDisabled = false,
     isActive = false,
+    isLoading = false,
     Icon,
     variant = 'standard',
     onPress
-}: IconButtonProps) =>
-    variant === 'standard' ? (
-        <StandardIconContainer
-            data-testid="standard-icon-container"
-            onPress={onPress}
-            isDisabled={isDisabled}
-            isActive={isActive}
-        >
-            <Icon data-testid="iconbutton-icon" />
-        </StandardIconContainer>
-    ) : (
-        <TonalIconContainer
-            data-testid="tonal-icon-container"
+}: IconButtonProps): ReactElement => {
+    const Container = variant === 'standard' ? StandardIconContainer : TonalIconContainer;
+
+    return (
+        <Container
+            data-testid={variant === 'standard' ? 'standard-icon-container' : 'tonal-icon-container'}
             onPress={onPress}
             isDisabled={isDisabled}
             isActive={isActive}
+            isPending={isLoading}
         >
-            <Icon data-testid="iconbutton-icon" />
-        </TonalIconContainer>
+            {isLoading ? (
+                <InlineSpinner data-testid="iconbutton-spinner" color={getSemanticValue('on-surface')} />
+            ) : (
+                <Icon data-testid="iconbutton-icon" />
+            )}
+        </Container>
     );
+};
diff --git a/src/components/experimental/IconButton/docs/IconButton.stories.tsx b/src/components/experimental/IconButton/docs/IconButton.stories.tsx
@@ -11,7 +11,8 @@ const meta: Meta = {
     args: {
         Icon: TrashIcon,
         onPress: () => alert('Clicked!'),
-        isDisabled: false
+        isDisabled: false,
+        isLoading: false
     }
 };
 
@@ -27,6 +28,12 @@ export const Disabled: Story = {
     }
 };
 
+export const Loading: Story = {
+    args: {
+        isLoading: true
+    }
+};
+
 export const Active: Story = {
     args: {
         isActive: true
