From acd2e4b3c92d4b8defe3365d7587739b0eae19c8 Mon Sep 17 00:00:00 2001 From: David Pickart Date: Thu, 9 Jan 2020 14:44:56 -0600 Subject: [PATCH 1/5] Remove custom style prop on button --- docs.md | 4 ++-- src/forms/buttons/button.js | 27 ++++++++++++++++------- src/forms/helpers/button-classes.js | 12 ---------- src/forms/helpers/index.js | 1 - src/forms/inputs/file-input/file-input.js | 9 ++++---- test/forms/buttons/button.test.js | 13 +++++++---- test/forms/buttons/submit-button.test.js | 2 +- test/forms/helpers/button-classes.test.js | 21 ------------------ 8 files changed, 36 insertions(+), 53 deletions(-) delete mode 100644 src/forms/helpers/button-classes.js delete mode 100644 test/forms/helpers/button-classes.test.js diff --git a/docs.md b/docs.md index 3dd6818d..bfbfeada 100644 --- a/docs.md +++ b/docs.md @@ -329,7 +329,7 @@ _Note: Instead of targeting the `:disabled` pseudo-class or `[disabled]` attribu - `invalid` **[Boolean][139]?** Whether or not a related form is invalid (will set aria-disabled when `true`) - `pristine` **[Boolean][139]?** Whether or not a related form is pristine (will set aria-disabled when `true`) -- `style` **[String][137]** A descriptive string that will be appended to the button's class with format `button-` (optional, default `"primary"`) +- `priority` **[String][137]** A descriptive string that will be appended to the button's class with format `button-` (optional, default `"primary"`) - `submitting` **[Boolean][139]?** Whether or not a related form is submitting (will give button class `'in-progress` when `true`) - `type` **[Boolean][139]** The [type][147] attribute of the button element (optional, default `"button"`) - `children` **[Function][138]?** Any React component(s) being wrapped by the button @@ -340,7 +340,7 @@ _Note: Instead of targeting the `:disabled` pseudo-class or `[disabled]` attribu function MessageButton ({ message }) { return ( ) +test('Button adds priority string to class', () => { + const wrapper = shallow() expect(wrapper.hasClass('button-custom')).toBe(true) }) @@ -78,8 +78,8 @@ test('Button passes extra props to button element', () => { expect(wrapper.props().onClick).toBe(onClick) }) -test('Specifying a class name prop does not override style class', () => { - const wrapper = shallow() +test('Specifying a class name prop does not override priority class', () => { + const wrapper = shallow() expect(wrapper.hasClass('button-primary')).toBe(true) expect(wrapper.hasClass('button-large')).toBe(true) }) @@ -95,3 +95,8 @@ test('Specifying a class name prop does not override in-progress class', () => { expect(wrapper.hasClass('in-progress')).toBe(true) expect(wrapper.hasClass('button-large')).toBe(true) }) + +test('Button can receive object style prop', () => { + const wrapper = shallow() + expect(wrapper.find('button').prop('style').display).toEqual('none') +}) diff --git a/test/forms/buttons/submit-button.test.js b/test/forms/buttons/submit-button.test.js index f865e346..37bc1913 100644 --- a/test/forms/buttons/submit-button.test.js +++ b/test/forms/buttons/submit-button.test.js @@ -8,7 +8,7 @@ test('SubmitButton adds type="submit" to button', () => { }) test('SubmitButton passes down other props to button', () => { - const wrapper = shallow( Hi) + const wrapper = shallow( Hi) const button = wrapper.dive() expect(button.props()['aria-disabled']).toBe(true) expect(button.hasClass('button-custom')).toBe(true) diff --git a/test/forms/helpers/button-classes.test.js b/test/forms/helpers/button-classes.test.js deleted file mode 100644 index 7b7c08c9..00000000 --- a/test/forms/helpers/button-classes.test.js +++ /dev/null @@ -1,21 +0,0 @@ -import { buttonClasses } from '../../../src/' - -test('returns style with `button-` prepended', () => { - expect(buttonClasses({ style: 'primary' })).toEqual('button-primary') -}) - -test('returns correct classes when submitting', () => { - expect(buttonClasses({ style: 'primary', submitting: true })).toEqual('button-primary in-progress') -}) - -test('returns correct classes when invalid', () => { - expect(buttonClasses({ style: 'primary', invalid: true })).toEqual('button-primary is-disabled') -}) - -test('returns correct classes when pristine', () => { - expect(buttonClasses({ style: 'primary', pristine: true })).toEqual('button-primary is-disabled') -}) - -test('returns correct classes when classname is provided', () => { - expect(buttonClasses({ style: 'primary', className: 'button-large' })).toEqual('button-primary button-large') -}) From 03d941c45d84c3c4099055df58f5e2fbad1590bb Mon Sep 17 00:00:00 2001 From: David Pickart Date: Mon, 27 Jan 2020 16:08:07 -0600 Subject: [PATCH 2/5] Remove disabled button test --- test/forms/buttons/button.test.js | 8 -------- 1 file changed, 8 deletions(-) diff --git a/test/forms/buttons/button.test.js b/test/forms/buttons/button.test.js index 0519569f..a48df90f 100644 --- a/test/forms/buttons/button.test.js +++ b/test/forms/buttons/button.test.js @@ -12,14 +12,6 @@ test('Button is aria-disabled when form is pristine', () => { expect(wrapper.props()['aria-disabled']).toBe(true) }) -test('Button can still be pressed when aria-disabled', () => { - const onClick = jest.fn() - const wrapper = mount() - wrapper.find('button').simulate('click') - - expect(onClick).toHaveBeenCalled() -}) - test('Button onClick is run when the form is not submitting, pristine, or invalid', () => { const onClick = jest.fn() const formProps = { From 2ba9253a1e26b6ec98e3218ad64d8c1d4458493f Mon Sep 17 00:00:00 2001 From: David Pickart Date: Mon, 27 Jan 2020 16:11:08 -0600 Subject: [PATCH 3/5] Cleanup --- src/forms/inputs/file-input/file-input.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/forms/inputs/file-input/file-input.js b/src/forms/inputs/file-input/file-input.js index ba8e9dec..ba7f4af9 100644 --- a/src/forms/inputs/file-input/file-input.js +++ b/src/forms/inputs/file-input/file-input.js @@ -101,7 +101,6 @@ class FileInput extends React.Component { ...rest } = omitLabelProps(this.props) const { file } = this.state - // const wrapperClass = buttonClasses({ priority: 'secondary-light', submitting }) return (
@@ -109,7 +108,7 @@ class FileInput extends React.Component { !hidePreview && renderPreview({ file, value, ...rest }) } -
+
Select File Date: Mon, 27 Jan 2020 16:13:22 -0600 Subject: [PATCH 4/5] Some formatting --- src/forms/buttons/button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/forms/buttons/button.js b/src/forms/buttons/button.js index 67f08b94..2b4c207d 100644 --- a/src/forms/buttons/button.js +++ b/src/forms/buttons/button.js @@ -43,7 +43,7 @@ import classnames from 'classnames' const propTypes = { invalid: PropTypes.bool, pristine: PropTypes.bool, - priority: PropTypes.string, + priority: PropTypes.string, submitting: PropTypes.bool, type: PropTypes.string.isRequired, children: PropTypes.node, From fc36d27a137bd39e633e70d17a99db62f71e7dfa Mon Sep 17 00:00:00 2001 From: David Pickart Date: Thu, 30 Jan 2020 17:33:00 -0600 Subject: [PATCH 5/5] Priority -> variant --- docs.md | 4 ++-- src/forms/buttons/button.js | 16 ++++++++-------- test/forms/buttons/button.test.js | 8 ++++---- test/forms/buttons/submit-button.test.js | 2 +- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/docs.md b/docs.md index bfbfeada..f76642f5 100644 --- a/docs.md +++ b/docs.md @@ -329,7 +329,7 @@ _Note: Instead of targeting the `:disabled` pseudo-class or `[disabled]` attribu - `invalid` **[Boolean][139]?** Whether or not a related form is invalid (will set aria-disabled when `true`) - `pristine` **[Boolean][139]?** Whether or not a related form is pristine (will set aria-disabled when `true`) -- `priority` **[String][137]** A descriptive string that will be appended to the button's class with format `button-` (optional, default `"primary"`) +- `variant` **[String][137]** A descriptive string that will be appended to the button's class with format `button-` (optional, default `"primary"`) - `submitting` **[Boolean][139]?** Whether or not a related form is submitting (will give button class `'in-progress` when `true`) - `type` **[Boolean][139]** The [type][147] attribute of the button element (optional, default `"button"`) - `children` **[Function][138]?** Any React component(s) being wrapped by the button @@ -340,7 +340,7 @@ _Note: Instead of targeting the `:disabled` pseudo-class or `[disabled]` attribu function MessageButton ({ message }) { return ( ) +test('Button adds variant string to class', () => { + const wrapper = shallow() expect(wrapper.hasClass('button-custom')).toBe(true) }) @@ -70,8 +70,8 @@ test('Button passes extra props to button element', () => { expect(wrapper.props().onClick).toBe(onClick) }) -test('Specifying a class name prop does not override priority class', () => { - const wrapper = shallow() +test('Specifying a class name prop does not override variant class', () => { + const wrapper = shallow() expect(wrapper.hasClass('button-primary')).toBe(true) expect(wrapper.hasClass('button-large')).toBe(true) }) diff --git a/test/forms/buttons/submit-button.test.js b/test/forms/buttons/submit-button.test.js index 37bc1913..518785a2 100644 --- a/test/forms/buttons/submit-button.test.js +++ b/test/forms/buttons/submit-button.test.js @@ -8,7 +8,7 @@ test('SubmitButton adds type="submit" to button', () => { }) test('SubmitButton passes down other props to button', () => { - const wrapper = shallow( Hi) + const wrapper = shallow( Hi) const button = wrapper.dive() expect(button.props()['aria-disabled']).toBe(true) expect(button.hasClass('button-custom')).toBe(true)