diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index a62505b3a9..e8361a482c 100644 --- 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 => ( - ) export const small = (): React.ReactElement => ( - ) diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx index 30ee01d4f7..c816bac595 100644 --- 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() 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( + + ) + 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( + + ) + 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( + + ) + 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( + + ) + 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 index 18fdfd8cfd..a299a57f37 100644 --- 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 new file mode 100644 index 0000000000..5e3111d0e1 --- /dev/null +++ b/src/deprecation.ts @@ -0,0 +1,6 @@ +export const deprecationWarning = + process.env.NODE_ENV !== 'production' + ? console.warn + : () => { + // do nothing in production + }