Button Group improvements (#1167)

* add action config objects and styles

* add useMedia for switching variants on mobile

* add inline-grid to improve styles

* change implementation for button reorder on mobile

* move LoadingButton to Button

* update snapshots

* address PR comments

* fix button styles

* update snapshots

* add changesets

* update Button props

* address review comments

.changeset/sharp-bees-join.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Added a new `actions` prop to the ButtonGroup that replaces the `children` prop. The new API is more ergonomic and enables an improved look on mobile.

.changeset/six-pumpkins-think.md

@@ -0,0 +1,5 @@
+---
+'@sumup/circuit-ui': minor
+---
+
+Merged the LoadingButton into the Button component.

packages/circuit-ui/components/Button/Button.spec.tsx

@@ -83,6 +83,15 @@ describe('Button', () => {
     });
   });
 
+  it('should render with loading styles', () => {
+    const wrapper = renderButton(create, {
+      ...baseProps,
+      isLoading: true,
+      loadingLabel: 'Loading',
+    });
+    expect(wrapper).toMatchSnapshot();
+  });
+
   describe('business logic', () => {
     it('should render as a link when passed the href prop', () => {
       const props = {
@@ -97,6 +106,18 @@ describe('Button', () => {
       expect(buttonEl).toHaveAttribute('href');
     });
 
+    it('should render loading button with loading label', () => {
+      const loadingLabel = 'Loading';
+      const props = {
+        ...baseProps,
+        isLoading: true,
+        loadingLabel,
+      };
+
+      const { getByText } = renderButton(render, props);
+      expect(getByText(loadingLabel)).toBeVisible();
+    });
+
     it('should call the onClick handler when clicked', () => {
       const props = {
         ...baseProps,
@@ -145,5 +166,15 @@ describe('Button', () => {
       const actual = await axe(wrapper);
       expect(actual).toHaveNoViolations();
     });
+
+    it('should meet accessibility guidelines for Loading button', async () => {
+      const wrapper = renderToHtml(
+        <Button isLoading={true} loadingLabel="Loading">
+          Button
+        </Button>,
+      );
+      const actual = await axe(wrapper);
+      expect(actual).toHaveNoViolations();
+    });
   });
 });

packages/circuit-ui/components/Button/Button.stories.tsx

@@ -15,10 +15,10 @@
 
 import { action } from '@storybook/addon-actions';
 import { Plus } from '@sumup/icons';
+import { useState } from 'react';
 
 import { Stack } from '../../../../.storybook/components';
 import ButtonGroup from '../ButtonGroup';
-import LoadingButton from '../LoadingButton';
 import IconButton from '../IconButton';
 import CloseButton from '../CloseButton';
 
@@ -28,7 +28,7 @@ import docs from './Button.docs.mdx';
 export default {
   title: 'Components/Button',
   component: Button,
-  subcomponents: { LoadingButton, IconButton, CloseButton, ButtonGroup },
+  subcomponents: { IconButton, CloseButton, ButtonGroup },
   parameters: {
     docs: { page: docs },
   },
@@ -106,3 +106,25 @@ export const Tracking = (args: ButtonProps) => (
     Track me
   </Button>
 );
+
+export const Loading = (args: ButtonProps) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = () => {
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  };
+
+  return (
+    <Button
+      isLoading={loading}
+      loadingLabel="Loading"
+      onClick={handleClick}
+      {...args}
+    >
+      Things take time
+    </Button>
+  );
+};

packages/circuit-ui/components/Button/Button.tsx

@@ -31,12 +31,14 @@ import {
   typography,
   disableVisually,
   focusVisible,
+  hideVisually,
 } from '../../styles/style-mixins';
 import { ReturnType } from '../../types/return-type';
 import { ClickEvent } from '../../types/events';
 import { AsPropType } from '../../types/prop-types';
 import { useComponents } from '../ComponentsContext';
 import { useClickEvent, TrackingProps } from '../../hooks/useClickEvent';
+import Spinner from '../Spinner';
 
 export interface BaseProps {
   'children': ReactNode;
@@ -83,6 +85,15 @@ export interface BaseProps {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   'ref'?: Ref<any>;
   'data-testid'?: string;
+  /**
+   * Visually disables the button and shows a loading spinner.
+   */
+  'isLoading'?: boolean;
+  /**
+   * Visually hidden label to communicate the loading state to visually
+   * impaired users.
+   */
+  'loadingLabel'?: string;
 }
 
 type LinkElProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'onClick'>;
@@ -122,7 +133,6 @@ const SECONDARY_COLOR_MAP = {
 
 const baseStyles = ({ theme }: StyleProps) => css`
   display: inline-flex;
-  align-items: center;
   justify-content: center;
   width: auto;
   height: auto;
@@ -263,6 +273,57 @@ const iconStyles = (theme: Theme) => css`
   margin-right: ${theme.spacings.byte};
 `;
 
+const loadingStyles = css`
+  position: relative;
+  overflow: hidden;
+`;
+
+const spinnerBaseStyles = ({ theme }: StyleProps) => css`
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity ${theme.transitions.default},
+    visibility ${theme.transitions.default};
+`;
+
+const spinnerLoadingStyles = ({ isLoading }: { isLoading: boolean }) =>
+  isLoading &&
+  css`
+    opacity: 1;
+    visibility: visible;
+  `;
+
+const LoadingIcon = styled(Spinner)<{ isLoading: boolean }>(
+  spinnerBaseStyles,
+  spinnerLoadingStyles,
+);
+
+const LoadingLabel = styled.span(hideVisually);
+
+const contentStyles = ({ theme }: StyleProps) => css`
+  display: inline-flex;
+  align-items: center;
+  opacity: 1;
+  visibility: visible;
+  transform: scale3d(1, 1, 1);
+  transition: opacity ${theme.transitions.default},
+    transform ${theme.transitions.default},
+    visibility ${theme.transitions.default};
+`;
+
+const contentLoadingStyles = ({ isLoading }: { isLoading: boolean }) =>
+  isLoading &&
+  css`
+    opacity: 0;
+    visibility: hidden;
+    transform: scale3d(0, 0, 0);
+  `;
+
+const Content = styled.span<{ isLoading: boolean }>(
+  contentStyles,
+  contentLoadingStyles,
+);
+
 const StyledButton = styled('button', {
   shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'size',
 })<ButtonProps>(
@@ -274,6 +335,7 @@ const StyledButton = styled('button', {
   sizeStyles,
   tertiaryStyles,
   stretchStyles,
+  loadingStyles,
 );
 
 /**
@@ -282,9 +344,27 @@ const StyledButton = styled('button', {
  */
 export const Button = forwardRef(
   (
-    { children, icon: Icon, tracking, ...props }: ButtonProps,
+    {
+      children,
+      isLoading,
+      loadingLabel,
+      icon: Icon,
+      tracking,
+      ...props
+    }: ButtonProps,
     ref?: BaseProps['ref'],
   ): ReturnType => {
+    if (
+      process.env.UNSAFE_DISABLE_ACCESSIBILITY_ERRORS !== 'true' &&
+      process.env.NODE_ENV !== 'production' &&
+      process.env.NODE_ENV !== 'test' &&
+      isLoading !== undefined &&
+      !loadingLabel
+    ) {
+      throw new Error(
+        'The Button component has `isLoading` but is missing a `loadingLabel` prop. This is an accessibility requirement.',
+      );
+    }
     const components = useComponents();
     const Link = components.Link as AsPropType;
 
@@ -293,12 +373,22 @@ export const Button = forwardRef(
     return (
       <StyledButton
         {...props}
+        {...(loadingLabel && {
+          'disabled': isLoading,
+          'aria-live': 'polite',
+          'aria-busy': isLoading,
+        })}
         ref={ref}
         as={props.href ? Link : 'button'}
         onClick={handleClick}
       >
-        {Icon && <Icon css={iconStyles} role="presentation" />}
-        {children}
+        <LoadingIcon isLoading={Boolean(isLoading)} size="byte">
+          <LoadingLabel>{loadingLabel}</LoadingLabel>
+        </LoadingIcon>
+        <Content isLoading={Boolean(isLoading)}>
+          {Icon && <Icon css={iconStyles} role="presentation" />}
+          {children}
+        </Content>
       </StyledButton>
     );
   },