Remove custom style prop on button

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-<type>` (optional, default `"primary"`)
+-   `variant` **[String][137]** A descriptive string that will be appended to the button's class with format `button-<type>` (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 (
      <Button
-       style="secondary"
+       variant="secondary"
        onClick={ () => console.log(message) }
      > 
        Print Message

src/forms/buttons/button.js

@@ -1,13 +1,12 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { buttonClasses } from '../helpers'
 import { noop } from '../../utils'
+import classnames from 'classnames'
 
 /**
  *
  * A simple button component that can be used independently, or as part of a form.
  *
-
  * Conditionally adds classes and/or sets aria-disabled depending on passed props. If the button is `disabled` or `submitting`, the `onClick` handler will be overridden with a `noop`. This is especially helpful when preventing duplicate form submissions for **both** mouse and keyboard actions.
  * 
  * In addition to the props below, any extra props will be passed directly to the inner `<button>` element.
@@ -20,7 +19,7 @@ import { noop } from '../../utils'
  * @type Function
  * @param {Boolean} [invalid] - Whether or not a related form is invalid (will set aria-disabled when `true`)
  * @param {Boolean} [pristine] - Whether or not a related form is pristine (will set aria-disabled when `true`)
- * @param {String} [style="primary"] - A descriptive string that will be appended to the button's class with format `button-<type>`
+ * @param {String} [variant="primary"] - A descriptive string that will be appended to the button's class with format `button-<type>`
  * @param {Boolean} [submitting] - Whether or not a related form is submitting (will give button class `'in-progress` when `true`)
  * @param {Boolean} [type="button"] - The [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) attribute of the button element
  * @param {Function} [children] - Any React component(s) being wrapped by the button
@@ -29,7 +28,7 @@ import { noop } from '../../utils'
  * function MessageButton ({ message }) {
  *   return (
  *      <Button
- *        style="secondary"
+ *        variant="secondary"
  *        onClick={ () => console.log(message) }
  *      > 
  *        Print Message
@@ -44,7 +43,7 @@ import { noop } from '../../utils'
 const propTypes = {
   invalid:    PropTypes.bool,
   pristine:   PropTypes.bool,
-  style:      PropTypes.string,
+  variant:    PropTypes.string,
   submitting: PropTypes.bool,
   type:       PropTypes.string.isRequired,
   children:   PropTypes.node,
@@ -53,17 +52,29 @@ const propTypes = {
 }
 
 const defaultProps = {
-  style: 'primary',
+  variant: 'primary',
   type: 'button',
   className: '',
   onClick: noop,
 }
 
+function calculateClassName ({ className, variant, pristine, invalid, submitting }) {
+  return classnames(
+    `button-${variant}`,
+    {
+      'is-disabled': pristine || invalid,
+      'in-progress': submitting,
+    },
+    className,
+  )
+}
+
+
 // eslint-disable-next-line no-unused-vars
 function Button ({
   children,
   type,
-  style,
+  variant,
   pristine,
   invalid,
   submitting,
@@ -75,7 +86,7 @@ function Button ({
   return (
     <button
       type={ type }
-      className={ buttonClasses({ className, style, pristine, invalid, submitting }) }
+      className={ calculateClassName({ className, variant, pristine, invalid, submitting }) }
       aria-disabled={ pristine || invalid }
       onClick={ (disabled || submitting) ? noop : onClick }
       { ...rest }

src/forms/helpers/index.js

@@ -1,5 +1,4 @@
 export blurDirty from './blur-dirty'
-export buttonClasses from './button-classes'
 export convertNameToLabel from './convert-name-to-label'
 export DropdownSelect from './dropdown-select'
 export fromHex from './from-hex'

src/forms/inputs/file-input/file-input.js

@@ -1,10 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { buttonClasses, fieldPropTypes, hasInputError, isImageType, omitLabelProps } from '../../helpers'
+import { fieldPropTypes, hasInputError, isImageType, omitLabelProps } from '../../helpers'
 import { LabeledField } from '../../labels'
 import FilePreview from './file-preview'
-import ImagePreview from './image-preview';
+import ImagePreview from './image-preview'
 import { noop, generateInputErrorId } from '../../../utils'
+import classnames from 'classnames'
 
 /**
  *
@@ -100,15 +101,14 @@ class FileInput extends React.Component {
       ...rest
     } = omitLabelProps(this.props)
     const { file } = this.state
-    const wrapperClass = buttonClasses({ style: 'secondary-light', submitting })
     return (
       <LabeledField { ...this.props }>
         <div className="fileupload fileupload-exists">
           { 
             !hidePreview &&
             renderPreview({ file, value, ...rest })
           }
-          <div className={ wrapperClass }>
+          <div className={ classnames('button-secondary-light', {'in-progress': submitting })}>
             <span className="fileupload-exists"> Select File </span>
               <input 
                 {...{

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(<Button onClick={onClick} invalid={true}>Hi</Button>)
-  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 = {
@@ -57,8 +49,8 @@ test('Button onClick is not run when form is submitting', () => {
   expect(onClick).not.toHaveBeenCalled()
 })
 
-test('Button adds style string to class', () => {
-  const wrapper = shallow(<Button style="custom"> Hi</Button>)
+test('Button adds variant string to class', () => {
+  const wrapper = shallow(<Button variant="custom"> Hi</Button>)
   expect(wrapper.hasClass('button-custom')).toBe(true)
 })
 
@@ -78,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 style class', () => {
-  const wrapper = shallow(<Button style="primary" className="button-large">Click Me</Button>)
+test('Specifying a class name prop does not override variant class', () => {
+  const wrapper = shallow(<Button variant="primary" className="button-large">Click Me</Button>)
   expect(wrapper.hasClass('button-primary')).toBe(true)
   expect(wrapper.hasClass('button-large')).toBe(true)
 })
@@ -95,3 +87,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(<Button style={{ display: 'none' }}>Submit</Button>)
+  expect(wrapper.find('button').prop('style').display).toEqual('none')
+})

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(<SubmitButton pristine={true} style="custom"> Hi</SubmitButton>)
+  const wrapper = shallow(<SubmitButton pristine={true} variant="custom"> Hi</SubmitButton>)
   const button = wrapper.dive()
   expect(button.props()['aria-disabled']).toBe(true)
   expect(button.hasClass('button-custom')).toBe(true)