diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx index 30ee01d4f7..a4932c8f67 100644 --- a/src/components/Button/Button.test.tsx +++ b/src/components/Button/Button.test.tsx @@ -40,6 +40,26 @@ describe('Button component', () => { expect(queryByTestId('button')).toHaveClass(data[1]) }) }) + + it('renders uswds class for size small', () => { + const { queryByTestId } = render( + + ) + expect(queryByTestId('button')).toHaveClass('usa-button--small') + expect(queryByTestId('button')).not.toHaveClass('usa-button--big') + }) + + it('renders uswds class for size big', () => { + const { queryByTestId } = render( + + ) + expect(queryByTestId('button')).toHaveClass('usa-button--big') + expect(queryByTestId('button')).not.toHaveClass('usa-button--small') + }) }) it('implements an onClick handler', () => { diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 18fdfd8cfd..76d2af0a79 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -10,7 +10,14 @@ interface ButtonProps { accent?: boolean outline?: boolean inverse?: boolean + size?: 'big' | 'small' + /** + * @deprecated since 1.5.0, use size + */ big?: boolean + /** + * @deprecated since 1.5.0, use size + */ small?: boolean icon?: boolean unstyled?: boolean @@ -28,6 +35,7 @@ export const Button = ( accent, outline, inverse, + size, big, small, icon, @@ -36,6 +44,14 @@ export const Button = ( className, } = props + let isBig = big || false + let isSmall = small || false + if (size === 'big') { + isBig = true + } + if (size === 'small') { + isSmall = true + } const classes = classnames( 'usa-button', { @@ -44,8 +60,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, },