fix(Button): Deprecate icon, size small properties (#362)

* fix(Button): Deprecate icon, size small properties * Cleanup tests, maybe make warning more clear * Correct version number
trussworks · Jul 30, 2020 · 23a2e4b · 23a2e4b
1 parent bc30bbe
commit 23a2e4b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 50 deletions.
diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -53,18 +53,6 @@ export const big = (): React.ReactElement => (
   </Button>
 )
 
-export const small = (): React.ReactElement => (
-  <Button type="button" size="small">
-    Click Me
-  </Button>
-)
-
-export const icon = (): React.ReactElement => (
-  <Button type="button" icon>
-    Click Me
-  </Button>
-)
-
 export const unstyled = (): React.ReactElement => (
   <Button type="button" unstyled>
     Click Me

diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
@@ -27,7 +27,6 @@ describe('Button component', () => {
       ['accent', 'usa-button--accent-cool'],
       ['outline', 'usa-button--outline'],
       ['inverse', 'usa-button--inverse'],
-      ['icon', 'usa-button--icon'],
       ['unstyled', 'usa-button--unstyled'],
     ]
 
@@ -45,49 +44,15 @@ describe('Button component', () => {
       })
     })
 
-    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', () => {
-      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
@@ -10,7 +10,7 @@ interface ButtonProps {
   accent?: boolean
   outline?: boolean
   inverse?: boolean
-  size?: 'big' | 'small'
+  size?: 'big' | 'small' // small is deprecated
   /**
    * @deprecated since 1.6.0, use size
    */
@@ -19,6 +19,9 @@ interface ButtonProps {
    * @deprecated since 1.6.0, use size
    */
   small?: boolean
+  /**
+   * @deprecated since 1.9.0
+   */
   icon?: boolean
   unstyled?: boolean
 }
@@ -47,13 +50,20 @@ export const Button = (
   if (big) {
     deprecationWarning('Button property big is deprecated.  Use size')
   }
-  if (small) {
-    deprecationWarning('Button property small is deprecated.  Use size')
+
+  if (icon) {
+    deprecationWarning('Button property icon is deprecated.')
   }
 
   const isBig = size ? size === 'big' : big
   const isSmall = size ? size === 'small' : small
 
+  if (isSmall) {
+    deprecationWarning(
+      'Small button is deprecated. Use the default, pass in a custom className, or use size big.'
+    )
+  }
+
   const classes = classnames(
     'usa-button',
     {