feat(button): size enum on Button, add deprecationWarning util (#229)

* feat(button): size enum on Button component Provide a size enum to eventually replace the small and big boolean props on Button re #187 * feat(Button): Add deprecation warnings, size preferred * Log deprecation warnings * Prefer size over big/small; test that interaction * Comment deprecationWarning in production * Button prop deprecation starts in v1.6.0
trussworks · Jun 29, 2020 · e156a8b · e156a8b
1 parent 040fc1d
commit e156a8b
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 8 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -47,13 +47,13 @@ export const inverse = (): React.ReactElement => (
 )
 
 export const big = (): React.ReactElement => (
-  <Button type="button" big>
+  <Button type="button" size="big">
     Click Me
   </Button>
 )
 
 export const small = (): React.ReactElement => (
-  <Button type="button" small>
+  <Button type="button" size="small">
     Click Me
   </Button>
 )

diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
@@ -1,9 +1,15 @@
 import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 
+jest.mock('../../deprecation')
+import { deprecationWarning } from '../../deprecation'
 import { Button } from './Button'
 
 describe('Button component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
   it('renders without errors', () => {
     const { queryByTestId } = render(<Button type="button">Click Me</Button>)
     expect(queryByTestId('button')).toBeInTheDocument()
@@ -15,19 +21,17 @@ describe('Button component', () => {
       expect(queryByTestId('button')).toHaveClass('usa-button')
     })
 
-    const optionalClasses = [
+    const optionalBooleanClasses = [
       ['secondary', 'usa-button--secondary'],
       ['base', 'usa-button--base'],
       ['accent', 'usa-button--accent-cool'],
       ['outline', 'usa-button--outline'],
       ['inverse', 'usa-button--inverse'],
-      ['big', 'usa-button--big'],
-      ['small', 'usa-button--small'],
       ['icon', 'usa-button--icon'],
       ['unstyled', 'usa-button--unstyled'],
     ]
 
-    optionalClasses.map((data) => {
+    optionalBooleanClasses.map((data) => {
       it(`${data[1]}`, () => {
         const additionalProps: { [key: string]: boolean } = {}
         additionalProps[data[0]] = true
@@ -40,6 +44,51 @@ describe('Button component', () => {
         expect(queryByTestId('button')).toHaveClass(data[1])
       })
     })
+
+    it('renders uswds class for size small', () => {
+      const { queryByTestId } = render(
+        <Button type="button" size="small">
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--small')
+      expect(queryByTestId('button')).not.toHaveClass('usa-button--big')
+      expect(deprecationWarning).toHaveBeenCalledTimes(0)
+    })
+
+    it('renders uswds class for size big', () => {
+      const { queryByTestId } = render(
+        <Button type="button" size="big">
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--big')
+      expect(queryByTestId('button')).not.toHaveClass('usa-button--small')
+      expect(deprecationWarning).toHaveBeenCalledTimes(0)
+    })
+
+    it('prefers size to deprecated big', () => {
+      Button.bind
+      const { queryByTestId } = render(
+        <Button type="button" size="small" big>
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--small')
+      expect(queryByTestId('button')).not.toHaveClass('usa-button--big')
+      expect(deprecationWarning).toHaveBeenCalledTimes(1)
+    })
+
+    it('prefers size to deprecated small', () => {
+      const { queryByTestId } = render(
+        <Button type="button" size="big" small>
+          Click Me
+        </Button>
+      )
+      expect(queryByTestId('button')).toHaveClass('usa-button--big')
+      expect(queryByTestId('button')).not.toHaveClass('usa-button--small')
+      expect(deprecationWarning).toHaveBeenCalledTimes(1)
+    })
   })
 
   it('implements an onClick handler', () => {

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
+import { deprecationWarning } from '../../deprecation'
 
 interface ButtonProps {
   type: 'button' | 'submit' | 'reset'
@@ -10,7 +11,14 @@ interface ButtonProps {
   accent?: boolean
   outline?: boolean
   inverse?: boolean
+  size?: 'big' | 'small'
+  /**
+   * @deprecated since 1.6.0, use size
+   */
   big?: boolean
+  /**
+   * @deprecated since 1.6.0, use size
+   */
   small?: boolean
   icon?: boolean
   unstyled?: boolean
@@ -28,6 +36,7 @@ export const Button = (
     accent,
     outline,
     inverse,
+    size,
     big,
     small,
     icon,
@@ -36,6 +45,16 @@ export const Button = (
     className,
   } = props
 
+  if (big) {
+    deprecationWarning('Button property big is deprecated.  Use size')
+  }
+  if (small) {
+    deprecationWarning('Button property small is deprecated.  Use size')
+  }
+
+  const isBig = size ? size === 'big' : big
+  const isSmall = size ? size === 'small' : small
+
   const classes = classnames(
     'usa-button',
     {
@@ -44,8 +63,8 @@ export const Button = (
       'usa-button--accent-cool': accent,
       'usa-button--outline': outline,
       'usa-button--inverse': inverse,
-      'usa-button--big': big,
-      'usa-button--small': small,
+      'usa-button--big': isBig,
+      'usa-button--small': isSmall,
       'usa-button--icon': icon,
       'usa-button--unstyled': unstyled,
     },

diff --git a/src/deprecation.ts b/src/deprecation.ts
@@ -0,0 +1,6 @@
+export const deprecationWarning =
+  process.env.NODE_ENV !== 'production'
+    ? console.warn
+    : () => {
+        // do nothing in production
+      }