feat: button asChild

components/Button/Button.stories.tsx

@@ -5,6 +5,7 @@ import { ButtonForStory } from './Button';
 import { Flex } from '../Flex';
 import { Text } from '../Text';
 import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { UnstyledLink } from '../Link';
 
 export default {
   title: 'Components/Button',
@@ -88,5 +89,19 @@ Waiting.args = {
 };
 
 const Customize: ComponentStory<typeof ButtonForStory> = (args) => (
-  <ButtonForStory css={{ c: '$hiContrast' }} {...args}>Button</ButtonForStory>
+  <ButtonForStory css={{ c: '$hiContrast' }} {...args}>
+    Button
+  </ButtonForStory>
 );
+
+export const ButtonLink: ComponentStory<typeof ButtonForStory> = (args) => (
+  <ButtonForStory asChild {...args}>
+    <UnstyledLink href="https://traefik.io">Button</UnstyledLink>
+  </ButtonForStory>
+);
+ButtonLink.argTypes = {
+  state: {
+    options: ['waiting', undefined],
+    control: 'inline-radio',
+  },
+};

components/Button/Button.test.tsx

@@ -0,0 +1,15 @@
+import { Button } from './Button';
+import { UnstyledLink } from '../Link';
+import { render } from '@testing-library/react';
+
+describe('Button', () => {
+  it('should render Button as link', () => {
+    const { getByRole } = render(
+      <Button asChild>
+        <UnstyledLink href="https://traefik.io">Link</UnstyledLink>
+      </Button>
+    );
+
+    expect(getByRole('link')).toBeInTheDocument();
+  });
+});

components/Button/Button.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { ComponentProps, useMemo } from 'react';
 import { styled, keyframes, CSS, VariantProps } from '../../stitches.config';
 import { modifyVariantsForStory } from '../../utils/modifyVariantsForStory';
+import { Slot } from '@radix-ui/react-slot';
 
 export const BUTTON_BASE_STYLES = {
   appearance: 'none',
@@ -14,6 +15,27 @@ export const BUTTON_BASE_STYLES = {
   },
 };
 
+const BG_SIZES = {
+  small: '$sizes$8',
+  medium: '$sizes$9',
+  large: '$sizes$10',
+};
+
+const backgroundSizeAnimation = (size: keyof typeof BG_SIZES) => ({
+  $$bgSize: BG_SIZES[size],
+  backgroundSize: '$$bgSize',
+  backgroundImage: `linear-gradient(
+            -45deg,
+            transparent 33%,
+            $colors$deepBlue4 33%,
+            $colors$deepBlue4 66%,
+            transparent 66%
+          )`,
+  animation: `${keyframes({
+    '100%': { transform: 'translateX($$bgSize)' },
+  })} 500ms linear infinite`,
+});
+
 export const StyledButton = styled('button', BUTTON_BASE_STYLES, {
   // Reset
   all: 'unset',
@@ -24,19 +46,13 @@ export const StyledButton = styled('button', BUTTON_BASE_STYLES, {
     boxSizing: 'border-box',
     content: '""',
     position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
+    inset: 0,
   },
   '&::after': {
     boxSizing: 'border-box',
     content: '""',
     position: 'absolute',
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
+    inset: 0,
   },
 
   // Custom reset?
@@ -161,6 +177,11 @@ export const StyledButton = styled('button', BUTTON_BASE_STYLES, {
         c: 'transparent',
         overflow: 'hidden',
         pointerEvents: 'none',
+        '&::after': {
+          left: '-100%',
+          width: '200%',
+          ...backgroundSizeAnimation('medium'),
+        },
       },
     },
     ghost: {
@@ -232,69 +253,41 @@ export const StyledButton = styled('button', BUTTON_BASE_STYLES, {
         },
       },
     },
-  ],
-  defaultVariants: {
-    size: 'medium',
-    variant: 'primary',
-  },
-});
-
-type ButtonVariants = VariantProps<typeof StyledButton>;
-
-const Waiting = styled('div', {
-  position: 'absolute',
-  top: 0,
-  left: '-100%',
-  width: '200%',
-  height: '100%',
-  backgroundImage: `linear-gradient(
-                -45deg,
-                transparent 33%,
-                $colors$deepBlue4 33%,
-                $colors$deepBlue4 66%,
-                transparent 66%
-              )`,
-  variants: {
-    size: {
-      small: {
-        $$bgSize: '$sizes$8',
-        backgroundSize: '$$bgSize',
-        animation: `${keyframes({
-          '100%': { transform: 'translateX($sizes$8)' },
-        })} 500ms linear infinite`,
-      },
-      medium: {
-        $$bgSize: '$sizes$9',
-        backgroundSize: '$$bgSize',
-        animation: `${keyframes({
-          '100%': { transform: 'translateX($sizes$9)' },
-        })} 500ms linear infinite`,
+    {
+      size: 'small',
+      state: 'waiting',
+      css: {
+        '&::after': backgroundSizeAnimation('small'),
       },
-      large: {
-        $$bgSize: '$sizes$10',
-        backgroundSize: '$$bgSize',
-        animation: `${keyframes({
-          '100%': { transform: 'translateX($sizes$10)' },
-        })} 500ms linear infinite`,
+    },
+    {
+      size: 'large',
+      state: 'waiting',
+      css: {
+        '&::after': backgroundSizeAnimation('large'),
       },
     },
-  },
+  ],
   defaultVariants: {
     size: 'medium',
+    variant: 'primary',
   },
 });
+const StyledButtonSlot = styled(Slot, StyledButton);
 
-type ButtonProps = React.ButtonHTMLAttributes<any> & ButtonVariants & { css?: CSS };
+export interface ButtonVariants extends VariantProps<typeof StyledButton> {}
+export interface ButtonProps extends ComponentProps<typeof StyledButton>, ButtonVariants {
+  css?: CSS;
+  asChild?: boolean;
+}
 
 export const Button = React.forwardRef<React.ElementRef<typeof StyledButton>, ButtonProps>(
-  ({ children, ...props }, forwardedRef) => {
+  ({ children, asChild, ...props }, forwardedRef) => {
+    const Component = useMemo(() => (asChild ? StyledButtonSlot : StyledButton), [asChild]);
     return (
-      <StyledButton {...props} ref={forwardedRef}>
-        <>
-          {children}
-          {props.state === 'waiting' && <Waiting size={props.size} />}
-        </>
-      </StyledButton>
+      <Component ref={forwardedRef} {...props}>
+        {children}
+      </Component>
     );
   }
 );