fix(Button): handle type properly (#4321)

* fix(Button): handle `type` properly

* fix typings for FormButton

Author: layershifter

src/collections/Form/FormButton.d.ts

@@ -9,7 +9,9 @@ export interface FormButtonProps extends StrictFormButtonProps {
   [key: string]: any
 }
 
-export interface StrictFormButtonProps extends StrictFormFieldProps, StrictButtonProps {
+export interface StrictFormButtonProps
+  extends StrictFormFieldProps,
+    Omit<StrictButtonProps, 'type'> {
   /** An element type to render as (string or function). */
   as?: any
 

src/elements/Button/Button.d.ts

@@ -113,6 +113,9 @@ export interface StrictButtonProps {
 
   /** A button can be formatted to toggle on and off. */
   toggle?: boolean
+
+  /** The type of the HTML element. */
+  type?: 'submit' | 'reset' | 'button'
 }
 
 declare class Button extends React.Component<ButtonProps> {

src/elements/Button/Button.js

@@ -97,6 +97,7 @@ class Button extends Component {
       secondary,
       size,
       toggle,
+      type,
     } = this.props
 
     const baseClasses = cx(
@@ -144,6 +145,7 @@ class Button extends Component {
               className={buttonClasses}
               aria-pressed={toggle ? !!active : undefined}
               disabled={disabled}
+              type={type}
               tabIndex={tabIndex}
             >
               {Icon.create(icon, { autoGenerateKey: false })} {content}
@@ -167,6 +169,7 @@ class Button extends Component {
           disabled={(disabled && ElementType === 'button') || undefined}
           onClick={this.handleClick}
           role={role}
+          type={type}
           tabIndex={tabIndex}
         >
           {hasChildren && children}
@@ -296,6 +299,9 @@ Button.propTypes = {
 
   /** A button can be formatted to toggle on and off. */
   toggle: PropTypes.bool,
+
+  /** The type of the HTML element. */
+  type: PropTypes.oneOf(['button', 'submit', 'reset']),
 }
 
 Button.defaultProps = {

test/specs/elements/Button/Button-test.js

@@ -260,6 +260,26 @@ describe('Button', () => {
     })
   })
 
+  describe('type', () => {
+    it('is not set by default', () => {
+      mount(<Button />)
+        .find('button')
+        .should.not.have.prop('type')
+    })
+
+    it('is passed to <button />', () => {
+      mount(<Button type='submit' />)
+        .find('button')
+        .should.have.prop('type', 'submit')
+    })
+
+    it('is passed to <button /> when "label" is defined', () => {
+      mount(<Button label='Foo' type='submit' />)
+        .find('button')
+        .should.have.prop('type', 'submit')
+    })
+  })
+
   describe('tabIndex', () => {
     it('is not set by default', () => {
       shallow(<Button />, { autoNesting: true }).should.not.have.prop('tabIndex')