fix(Pill): Make Pill close button a type of button instead of submit (#…

…625)

BREAKING CHANGE: If you need the close button of the `Pill` to be of `type` `submit`, you can pass
it a `buttonType` like so <Pill buttonType="submit"/>

react/Pill/Pill.js

@@ -8,6 +8,7 @@ import ScreenReaderOnly from '../ScreenReaderOnly/ScreenReaderOnly';
 
 type Props = {
   children?: React$Node,
+  buttonType?: string,
   text?: React$Node,
   onClose?: Function,
   className?: string
@@ -39,7 +40,14 @@ export default class Pill extends Component<Props> {
   }
 
   renderInteractivePill() {
-    const { children, text, onClose, className, ...restProps } = this.props;
+    const {
+      children,
+      text,
+      onClose,
+      buttonType = 'button',
+      className,
+      ...restProps
+    } = this.props;
     const content = children || text;
 
     return (
@@ -50,7 +58,11 @@ export default class Pill extends Component<Props> {
         <Text baseline={false} raw>
           {content}
         </Text>
-        <button className={styles.removeButton} onClick={onClose}>
+        <button
+          type={buttonType}
+          className={styles.removeButton}
+          onClick={onClose}
+        >
           <ScreenReaderOnly>Remove item {content}</ScreenReaderOnly>
           <div className={styles.removeCircle}>
             <CrossIcon

react/Pill/__snapshots__/Pill.test.js.snap

@@ -53,6 +53,7 @@ exports[`Pill: should render an additional class for the interactive pill 1`] =
   <button
     className="Pill__removeButton"
     onClick={[Function]}
+    type="button"
   >
     <ScreenReaderOnly
       component="span"
@@ -98,6 +99,7 @@ exports[`Pill: should render an interactive pill 1`] = `
   <button
     className="Pill__removeButton"
     onClick={[Function]}
+    type="button"
   >
     <ScreenReaderOnly
       component="span"
@@ -130,6 +132,7 @@ exports[`Pill: should render an interactive pill with the legacy "text" prop 1`]
   <button
     className="Pill__removeButton"
     onClick={[Function]}
+    type="button"
   >
     <ScreenReaderOnly
       component="span"