Update Button API to make more sense

Author: Jon Bellah

src/Button/index.tsx

@@ -5,15 +5,17 @@ import React from 'react';
 interface Props {
   /** text to display in the button */
   children: React.ReactChild;
-  /** button type */
-  type?:
+  /** button variant */
+  variant?:
     | 'primary'
     | 'primaryOutline'
     | 'warning'
     | 'success'
     | 'info'
     | 'danger'
     | 'black';
+  /** button type */
+  type?: 'button' | 'submit' | 'reset';
   /** onChange handler */
   onClick?: () => void;
   /** onFocus handler */
@@ -60,41 +62,41 @@ const styledButton = css`
     outline: 0;
   }
 
-  &[data-type='primary'] {
+  &[data-variant='primary'] {
     background-color: #4e4e4e;
   }
 
-  &[data-type='primaryOutline'] {
+  &[data-variant='primaryOutline'] {
     background-color: #fff;
     background-image: none;
     border-color: #111;
     color: #111;
   }
 
-  &[data-type='success'] {
+  &[data-variant='success'] {
     background-color: #61b563;
   }
 
-  &[data-type='info'] {
+  &[data-variant='info'] {
     background-color: #71c1d9;
   }
 
-  &[data-type='warning'] {
+  &[data-variant='warning'] {
     background-color: #eaa04a;
   }
 
-  &[data-type='danger'] {
+  &[data-variant='danger'] {
     background-color: #e12e28;
   }
 
-  &[data-type='black'] {
+  &[data-variant='black'] {
     background-image: none;
     background-color: #111;
     color: #fff;
     text-shadow: none;
   }
 
-  &[data-type='default'] {
+  &[data-variant='default'] {
     border-color: #d7d7d7;
     color: #444;
     font-weight: 700;
@@ -103,6 +105,7 @@ const styledButton = css`
 `;
 
 const Button = ({
+  variant,
   type,
   onClick,
   onFocus,
@@ -112,13 +115,13 @@ const Button = ({
 }: Props) => (
   <button
     css={styledButton}
-    type="button"
-    onClick={onClick}
+    data-testid="button"
+    data-variant={variant || 'default'}
+    disabled={disabled}
     onBlur={onBlur}
+    onClick={onClick}
     onFocus={onFocus}
-    disabled={disabled}
-    data-testid="button"
-    data-type={type || 'default'}
+    type={type || 'button'}
   >
     {children}
   </button>

src/Button/story.tsx

@@ -23,50 +23,50 @@ storiesOf('Button', module)
     'Primary',
     withInfo(`
     Provides extra visual weight and identifies the primary action in a set of buttons.
-  `)(() => <Button type="primary">Primary</Button>),
+  `)(() => <Button variant="primary">Primary</Button>),
   )
   .add(
     'Primary (Outline)',
     withInfo(`
     Provides extra visual weight and identifies the primary action in a set of buttons.
-  `)(() => <Button type="primaryOutline">Primary Outline</Button>),
+  `)(() => <Button variant="primaryOutline">Primary Outline</Button>),
   )
   .add(
     'Success',
     withInfo(`
     Indicates a successful or positive action.
-  `)(() => <Button type="success">Success</Button>),
+  `)(() => <Button variant="success">Success</Button>),
   )
   .add(
     'Info',
     withInfo(`
     Contextual button for informational alert messages.
-  `)(() => <Button type="info">Info</Button>),
+  `)(() => <Button variant="info">Info</Button>),
   )
   .add(
     'Warning',
     withInfo(`
     Indicates caution should be taken with this action.
-  `)(() => <Button type="warning">Warning</Button>),
+  `)(() => <Button variant="warning">Warning</Button>),
   )
   .add(
     'Danger',
     withInfo(`
     Indicates a dangerous or potentially negative action.
-  `)(() => <Button type="danger">Danger</Button>),
+  `)(() => <Button variant="danger">Danger</Button>),
   )
   .add(
     'Black',
     withInfo(`
     Basic flat button.
-  `)(() => <Button type="black">Danger</Button>),
+  `)(() => <Button variant="black">Danger</Button>),
   )
   .add(
     'Disabled',
     withInfo(`
     Indicates a disabled button.
   `)(() => (
-      <Button type="danger" disabled>
+      <Button variant="danger" disabled>
         Danger
       </Button>
     )),