feat(button): loading state for button

packages/components/button/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@spark-ui/internal-utils": "^1.6.1",
     "@spark-ui/slot": "^1.5.2",
+    "@spark-ui/spinner": "^0.2.8",
     "class-variance-authority": "0.5.2"
   },
   "peerDependencies": {

packages/components/button/src/Button.doc.mdx

@@ -65,6 +65,15 @@ Compose the content of the button using the `Icon` component to add an icon to t
 
 <Canvas of={ButtonStories.Icons} />
 
+## Loading state
+
+Use the `isLoading` prop to render the button in loading state.
+This will prepend a spinner inside the button.
+
+It preserves the width of your button to avoid content layout shifting.
+
+<Canvas of={ButtonStories.LoadingState} />
+
 ## Link
 
 Use `intent` prop to set the color intent of a button.

packages/components/button/src/Button.stories.tsx

@@ -1,8 +1,10 @@
+import { StoryLabel } from '@docs/helpers/StoryLabel'
+import { Checkbox } from '@spark-ui/checkbox'
 import { Icon } from '@spark-ui/icon'
 import { Check } from '@spark-ui/icons/dist/icons/Check'
 import { FavoriteOutline } from '@spark-ui/icons/dist/icons/FavoriteOutline'
 import { Meta, StoryFn } from '@storybook/react'
-import { type ComponentProps } from 'react'
+import { type ComponentProps, useState } from 'react'
 
 import { Button } from '.'
 
@@ -35,7 +37,7 @@ export const Sizes: StoryFn = _args => (
   <div className="gap-md flex flex-wrap items-center">
     {sizes.map(size => {
       return (
-        <Button key={size} size={size}>
+        <Button key={size} size={size} className="!bg-error">
           Button {size}
         </Button>
       )
@@ -103,10 +105,44 @@ export const Icons: StoryFn = _args => (
   </div>
 )
 
+export const LoadingState: StoryFn = () => {
+  const [isLoading, setIsLoading] = useState(true)
+
+  return (
+    <div className="gap-lg flex flex-col">
+      <Checkbox checked={isLoading} onClick={() => setIsLoading(!isLoading)}>
+        Toggle loading state
+      </Checkbox>
+
+      <div className="gap-md flex flex-wrap">
+        <div>
+          <StoryLabel>Spinner only</StoryLabel>
+          <Button isLoading={isLoading} loadingLabel="Loading...">
+            <Icon>
+              <FavoriteOutline />
+            </Icon>
+            Button (width is preserved)
+          </Button>
+        </div>
+
+        <div>
+          <StoryLabel>Spinner + text</StoryLabel>
+          <Button isLoading={isLoading} loadingText="Loading...">
+            <Icon>
+              <FavoriteOutline />
+            </Icon>
+            Button
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export const Link: StoryFn = _args => (
   <div className="gap-md flex flex-wrap">
     <Button asChild>
-      <a href="/">button</a>
+      <a href="/">Button as a link</a>
     </Button>
   </div>
 )

packages/components/button/src/Button.test.tsx

@@ -16,6 +16,41 @@ describe('Button', () => {
     // Then
     expect(element).toBeInTheDocument()
     expect(document.querySelector('[data-spark-component="button"]')).toBeInTheDocument()
+    expect(document.querySelector('[data-spark-component="spinner"]')).not.toBeInTheDocument()
+  })
+
+  describe('Loading state', () => {
+    it('should display spinner and replace accessible name with hidden loading label', () => {
+      // Given
+      render(
+        <Button isLoading loadingLabel="Loading...">
+          Hello World!
+        </Button>
+      )
+
+      screen.debug(screen.getByText('Hello World!'))
+
+      // Then
+      expect(document.querySelector('[data-spark-component="spinner"]')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Loading...' })).toBeInTheDocument()
+      expect(screen.queryByText('Loading...')).not.toBeInTheDocument()
+    })
+
+    it('should display spinner and replace accessible name with visible loading text', () => {
+      // Given
+      render(
+        <Button isLoading loadingText="Loading...">
+          Hello World!
+        </Button>
+      )
+
+      screen.debug(screen.getByText('Hello World!'))
+
+      // Then
+      expect(document.querySelector('[data-spark-component="spinner"]')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Loading...' })).toBeInTheDocument()
+      expect(screen.getByText('Loading...')).toBeInTheDocument()
+    })
   })
 
   it('should render as link', async () => {

packages/components/button/src/Button.tsx

@@ -1,23 +1,60 @@
 import { Slot } from '@spark-ui/slot'
-import React, { PropsWithChildren } from 'react'
+import { Spinner } from '@spark-ui/spinner'
+import { cx } from 'class-variance-authority'
+import React, { MouseEvent, PropsWithChildren, ReactNode } from 'react'
 
 import { buttonStyles, type ButtonStylesProps } from './Button.styles'
 
+/**
+ *
+ * When using Radix `Slot` component, it will consider its first child to merge its props with.
+ * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.
+ */
+const wrapPolymorphicSlot = (
+  asChild: boolean | undefined,
+  children: ReactNode,
+  callback: (children: ReactNode) => ReactNode
+) => {
+  if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children
+
+  return React.isValidElement(children)
+    ? React.cloneElement(children, undefined, callback(children.props.children))
+    : null
+}
+
 export interface ButtonProps
   extends PropsWithChildren<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>>,
     ButtonStylesProps {
   /**
    * Change the component to the HTML tag or custom component of the only child.
    */
   asChild?: boolean
+  /**
+   * Display a spinner to indicate to the user that the button is loading something after they interacted with it.
+   */
+  isLoading?: boolean
+  /**
+   * If your loading state should only display a spinner, it's better to specify a label for it (a11y).
+   */
+  loadingLabel?: string
+  /**
+   * If your loading state should also display a label, you can use this prop instead of `loadingLabel`.
+   * **Please note that using this can result in layout shifting when the Button goes from loading state to normal state.**
+   */
+  loadingText?: string
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (
     {
+      children,
       design = 'filled',
       disabled = false,
       intent = 'primary',
+      isLoading = false,
+      loadingLabel,
+      loadingText,
+      onClick,
       shape = 'rounded',
       size = 'md',
       asChild,
@@ -27,6 +64,16 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     ref
   ) => {
     const Component = asChild ? Slot : 'button'
+    const isDisabled = !!disabled || isLoading
+
+    /**
+     * When using `asChild` (polymorphic) it's possible that the button becomes another HTML element.
+     * Depending on its tag, it could break the `disabled` html attribute preventing the clicks on a disabled button.
+     */
+    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+      if (isDisabled) event.preventDefault()
+      if (onClick) onClick(event)
+    }
 
     return (
       <Component
@@ -35,14 +82,37 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={buttonStyles({
           className,
           design,
-          disabled,
+          disabled: isDisabled,
           intent,
           shape,
           size,
         })}
-        disabled={!!disabled}
+        disabled={isDisabled}
+        aria-live={isLoading ? 'assertive' : 'off'}
+        onClick={handleClick}
         {...others}
-      />
+      >
+        {wrapPolymorphicSlot(asChild, children, slotted =>
+          isLoading ? (
+            <>
+              <Spinner
+                size="current"
+                className={loadingText ? 'inline-block' : 'absolute'}
+                {...(loadingLabel && { 'aria-label': loadingLabel })}
+              />
+              {loadingText && loadingText}
+              <div
+                aria-hidden
+                className={cx('gap-md inline-flex', loadingText ? 'hidden' : 'opacity-0')}
+              >
+                {slotted}
+              </div>
+            </>
+          ) : (
+            slotted
+          )
+        )}
+      </Component>
     )
   }
 )

packages/components/spinner/src/Spinner.styles.tsx

@@ -2,7 +2,7 @@ import { cva, VariantProps } from 'class-variance-authority'
 
 const defaultVariants = {
   intent: 'current',
-  size: 'sm',
+  size: 'current',
   isBackgroundVisible: false,
 } as const
 
@@ -11,6 +11,7 @@ export const spinnerStyles = cva(
   {
     variants: {
       size: {
+        current: ['w-[1em]', 'h-[1em]'],
         sm: ['w-sz-20', 'h-sz-20'],
         md: ['w-sz-28', 'h-sz-28'],
       },

packages/components/spinner/src/Spinner.tsx

@@ -8,9 +8,13 @@ export interface SpinnerProps extends ComponentPropsWithoutRef<'div'>, SpinnerSt
 }
 
 export const Spinner = forwardRef<HTMLDivElement, PropsWithChildren<SpinnerProps>>(
-  ({ className, size, intent, label, isBackgroundVisible, ...others }, ref) => {
+  (
+    { className, size = 'current', intent = 'current', label, isBackgroundVisible, ...others },
+    ref
+  ) => {
     return (
       <div
+        role="status"
         data-spark-component="spinner"
         ref={ref}
         className={spinnerStyles({ className, size, intent, isBackgroundVisible })}