button type (#63)

* support button type

* simplify

* v0.4.15

Author: mikeldking

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.14",
+  "version": "0.4.15",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

src/button/types.ts

@@ -1,10 +1,13 @@
 import { ReactNode } from 'react';
+import { AriaLabelingProps, FocusableDOMProps } from '../types';
 
-export interface BaseButtonProps {
+interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps {
   /**
-   * A custom id for ally, analytics
+   * The behavior of the button when used in an HTML form.
    */
-  id?: string;
+  type?: 'button' | 'submit' | 'reset';
+}
+export interface BaseButtonProps extends AriaBaseButtonProps {
   /** Whether the button is disabled. */
   isDisabled?: boolean;
   /** The content to display in the button. */

stories/Button.stories.tsx

@@ -42,7 +42,9 @@ export const Gallery = () => {
     >
       <li>
         <ButtonToolbar>
-          <Button variant="primary">Create Dashboard</Button>
+          <Button id="primary-test-button" variant="primary">
+            Create Dashboard
+          </Button>
           <Button variant="primary" icon={plusIcon}>
             Create Dashboard
           </Button>

stories/Form.stories.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react';
-import { Form, FormProps, TextField, Picker, Item, Field } from '../src';
+import {
+  Form,
+  FormProps,
+  TextField,
+  Picker,
+  Item,
+  Field,
+  Button,
+} from '../src';
 import { useForm, Controller } from 'react-hook-form';
 
 const meta: Meta = {
@@ -89,7 +97,7 @@ const Template: Story<FormProps> = args => {
           )}
         />
       </Field>
-      <input type="submit" />
+      <Button variant="primary" type="submit" />
     </Form>
   );
 };