Added property name into form fields on addon knobs

addons/knobs/src/components/types/Array.js

@@ -29,7 +29,15 @@ class ArrayType extends React.Component {
     const { knob } = this.props;
     const value = knob.value.join(knob.separator);
 
-    return <Form.Textarea id={knob.name} value={value} onChange={this.handleChange} size="flex" />;
+    return (
+      <Form.Textarea
+        id={knob.name}
+        name={knob.name}
+        value={value}
+        onChange={this.handleChange}
+        size="flex"
+      />
+    );
   }
 }
 

addons/knobs/src/components/types/Boolean.js

@@ -17,6 +17,7 @@ const Input = styled.input({
 const BooleanType = ({ knob, onChange }) => (
   <Input
     id={knob.name}
+    name={knob.name}
     type="checkbox"
     onChange={e => onChange(e.target.checked)}
     checked={knob.value}

addons/knobs/src/components/types/Button.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { Form } from '@storybook/components';
 
 const ButtonType = ({ knob, onClick }) => (
-  <Form.Button type="button" onClick={() => onClick(knob)}>
+  <Form.Button type="button" name={knob.name} onClick={() => onClick(knob)}>
     {knob.name}
   </Form.Button>
 );

addons/knobs/src/components/types/Color.js

@@ -74,7 +74,7 @@ class ColorType extends React.Component {
     };
 
     return (
-      <Button type="button" onClick={this.handleClick} size="flex">
+      <Button type="button" name={knob.name} onClick={this.handleClick} size="flex">
         {knob.value}
         <Swatch style={colorStyle} />
         {displayColorPicker ? (

addons/knobs/src/components/types/Date.js

@@ -104,11 +104,13 @@ class DateType extends Component {
             this.dateInput = el;
           }}
           id={`${name}date`}
+          name={`${name}date`}
           onChange={this.onDateChange}
         />
         <FlexInput
           type="time"
           id={`${name}time`}
+          name={`${name}time`}
           ref={el => {
             this.timeInput = el;
           }}

addons/knobs/src/components/types/Files.js

@@ -20,6 +20,7 @@ function fileReaderPromise(file) {
 const FilesType = ({ knob, onChange }) => (
   <FileInput
     type="file"
+    name={knob.name}
     multiple
     onChange={e => Promise.all(Array.from(e.target.files).map(fileReaderPromise)).then(onChange)}
     accept={knob.accept}

addons/knobs/src/components/types/Number.js

@@ -61,6 +61,7 @@ class NumberType extends React.Component {
         <RangeInput
           value={knob.value}
           type="range"
+          name={knob.name}
           min={knob.min}
           max={knob.max}
           step={knob.step}
@@ -72,6 +73,7 @@ class NumberType extends React.Component {
       <Form.Input
         value={knob.value}
         type="number"
+        name={knob.name}
         min={knob.min}
         max={knob.max}
         step={knob.step}

addons/knobs/src/components/types/Object.js

@@ -45,9 +45,11 @@ class ObjectType extends Component {
 
   render() {
     const { value, failed } = this.state;
+    const { knob } = this.props;
 
     return (
       <Form.Textarea
+        name={knob.name}
         valid={failed ? 'error' : null}
         value={value}
         onChange={this.handleChange}

addons/knobs/src/components/types/Select.js

@@ -14,6 +14,7 @@ const SelectType = ({ knob, onChange }) => {
   return (
     <Form.Select
       value={selectedKey}
+      name={knob.name}
       onChange={e => {
         onChange(entries[e.target.value]);
       }}

addons/knobs/src/components/types/Text.js

@@ -21,7 +21,13 @@ class TextType extends React.Component {
     const { knob } = this.props;
 
     return (
-      <Form.Textarea id={knob.name} value={knob.value} onChange={this.handleChange} size="flex" />
+      <Form.Textarea
+        id={knob.name}
+        name={knob.name}
+        value={knob.value}
+        onChange={this.handleChange}
+        size="flex"
+      />
     );
   }
 }