Merge branch 'main' into pk/storybook-playfn

primer · Jul 27, 2022 · 8b0bf6a · 8b0bf6a
2 parents 9b46f0b + 75d2174
commit 8b0bf6a
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 53 deletions.
diff --git a/.changeset/odd-donuts-raise.md b/.changeset/odd-donuts-raise.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+button should be polymorphic
diff --git a/docs/content/Button.mdx b/docs/content/Button.mdx
@@ -151,7 +151,15 @@ Native `<button>` HTML attributes are forwarded to the underlying React `button`
     type="Component"
     description="provide an octicon. It will be placed after the button text"
   />
+  <PropsTableAsRow defaultElementType="button" />
   <PropsTableSxRow />
+  <PropsTablePassthroughPropsRow
+    elementName="button"
+    passthroughPropsLink={
+      <Link href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes">MDN</Link>
+    }
+    isPolymorphic
+  />
 </PropsTable>
 
 ### Button.Counter

diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx
@@ -1,6 +1,6 @@
-import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon} from '@primer/octicons-react'
+import {EyeClosedIcon, EyeIcon, SearchIcon, TriangleDownIcon, XIcon, TriangleRightIcon} from '@primer/octicons-react'
 import {Meta} from '@storybook/react'
-import React, {useState} from 'react'
+import React, {useState, forwardRef} from 'react'
 import {Button, ButtonProps, IconButton} from '.'
 import {BaseStyles, ThemeProvider} from '..'
 import Box from '../Box'
@@ -199,52 +199,52 @@ export const DisabledButton = ({...args}: ButtonProps) => {
   )
 }
 
-// type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
-// const ReactRouterLikeLink = forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(
-//   ({to, ...props}: {to: string; children: React.ReactNode}, ref) => {
-//     // eslint-disable-next-line jsx-a11y/anchor-has-content
-//     return <a ref={ref} href={to} {...props} />
-//   }
-// )
+type ReactRouterLikeLinkProps = {to: string; children: React.ReactNode}
+const ReactRouterLikeLink = forwardRef<HTMLAnchorElement, ReactRouterLikeLinkProps>(
+  ({to, ...props}: {to: string; children: React.ReactNode}, ref) => {
+    // eslint-disable-next-line jsx-a11y/anchor-has-content
+    return <a ref={ref} href={to} {...props} />
+  }
+)
 
-// export const linkButton = ({...args}: ButtonProps) => {
-//   return (
-//     <>
-//       <Box mb={2} display="flex">
-//         <LinkButton href="https://primer.style/" {...args}>
-//           Link to Primer
-//         </LinkButton>
-//       </Box>
-//       <Box mb={2} display="flex">
-//         <LinkButton href="https://primer.style/" variant="danger" {...args}>
-//           Link to Primer
-//         </LinkButton>
-//       </Box>
-//       <Box mb={2} display="flex">
-//         <LinkButton href="https://primer.style/" variant="primary" {...args}>
-//           Link to Primer
-//         </LinkButton>
-//       </Box>
-//       <Box mb={2} display="flex">
-//         <LinkButton href="https://primer.style/" variant="outline" {...args}>
-//           Link to Primer
-//         </LinkButton>
-//       </Box>
-//       <Box mb={2} display="flex">
-//         <LinkButton href="https://primer.style/" variant="invisible" {...args}>
-//           Link to Primer
-//         </LinkButton>
-//       </Box>
-//       <Box mb={2} display="flex">
-//         <LinkButton href="https://primer.style/" variant="primary" trailingIcon={TriangleRightIcon} {...args}>
-//           Link to Primer
-//         </LinkButton>
-//       </Box>
-//       <Box mb={2} display="flex">
-//         <LinkButton to="/dummy" as={ReactRouterLikeLink} variant="primary" trailingIcon={TriangleRightIcon} {...args}>
-//           Link to Primer
-//         </LinkButton>
-//       </Box>
-//     </>
-//   )
-// }
+export const linkButton = ({...args}: ButtonProps) => {
+  return (
+    <>
+      <Box mb={2} display="flex">
+        <Button as="a" href="https://primer.style/" {...args}>
+          Link to Primer
+        </Button>
+      </Box>
+      <Box mb={2} display="flex">
+        <Button as="a" href="https://primer.style/" variant="danger" {...args}>
+          Link to Primer
+        </Button>
+      </Box>
+      <Box mb={2} display="flex">
+        <Button as="a" href="https://primer.style/" variant="primary" {...args}>
+          Link to Primer
+        </Button>
+      </Box>
+      <Box mb={2} display="flex">
+        <Button as="a" href="https://primer.style/" variant="outline" {...args}>
+          Link to Primer
+        </Button>
+      </Box>
+      <Box mb={2} display="flex">
+        <Button as="a" href="https://primer.style/" variant="invisible" {...args}>
+          Link to Primer
+        </Button>
+      </Box>
+      <Box mb={2} display="flex">
+        <Button as="a" href="https://primer.style/" variant="primary" trailingIcon={TriangleRightIcon} {...args}>
+          Link to Primer
+        </Button>
+      </Box>
+      <Box mb={2} display="flex">
+        <Button to="/dummy" as={ReactRouterLikeLink} variant="primary" trailingIcon={TriangleRightIcon} {...args}>
+          Link to Primer
+        </Button>
+      </Box>
+    </>
+  )
+}
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -5,7 +5,7 @@ import {ButtonBase} from './ButtonBase'
 const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>(
   ({children, ...props}, forwardedRef): JSX.Element => {
     return (
-      <ButtonBase ref={forwardedRef} {...props} as="button">
+      <ButtonBase ref={forwardedRef} as="button" {...props}>
         {children}
       </ButtonBase>
     )

diff --git a/src/Button/types.ts b/src/Button/types.ts
@@ -13,7 +13,10 @@ export type VariantType = 'default' | 'primary' | 'invisible' | 'danger' | 'outl
 
 export type Size = 'small' | 'medium' | 'large'
 
-type StyledButtonProps = ComponentPropsWithRef<typeof StyledButton>
+/**
+ * Remove styled-components polymorphic as prop, which conflicts with radix's
+ */
+type StyledButtonProps = Omit<ComponentPropsWithRef<typeof StyledButton>, 'as'>
 
 type ButtonA11yProps = {'aria-label': string; 'aria-labelby'?: never} | {'aria-label'?: never; 'aria-labelby': string}
 

diff --git a/src/__tests__/Button.test.tsx b/src/__tests__/Button.test.tsx
@@ -8,7 +8,7 @@ import {SearchIcon} from '@primer/octicons-react'
 expect.extend(toHaveNoViolations)
 
 describe('Button', () => {
-  behavesAsComponent({Component: Button, options: {skipAs: true}})
+  behavesAsComponent({Component: Button})
 
   it('renders a <button>', () => {
     const container = render(<Button>Default</Button>)