Merge pull request #1042 from masakij/relaxing-proptypes

relaxing propTypes of Input & Autocomplete

components/autocomplete/Autocomplete.js

@@ -20,9 +20,15 @@ const factory = (Chip, Input) => {
      className: PropTypes.string,
      direction: PropTypes.oneOf(['auto', 'up', 'down']),
      disabled: PropTypes.bool,
-     error: PropTypes.string,
+     error: React.PropTypes.oneOfType([
+       React.PropTypes.string,
+       React.PropTypes.node
+     ]),
      keepFocusOnChange: PropTypes.bool,
-     label: PropTypes.string,
+     label: React.PropTypes.oneOfType([
+       React.PropTypes.string,
+       React.PropTypes.node
+     ]),
      multiple: PropTypes.bool,
      onBlur: PropTypes.func,
      onChange: PropTypes.func,

components/autocomplete/index.d.ts

@@ -58,11 +58,11 @@ interface AutocompleteProps extends ReactToolbox.Props {
    * Sets the error string for the internal input element.
    * @default false
    */
-  error?: string;
+  error?: string | React.ReactNode;
   /**
    * The text string to use for the floating label element.
    */
-  label?: string;
+  label?: string | React.ReactNode;
   /**
    * If true, component can hold multiple values.
    */

components/autocomplete/readme.md

@@ -47,8 +47,8 @@ If you want to provide a theme via context, the component key is `RTAutocomplete
 | `className`                     | `String`                      | `''`    | Sets a class to style of the Component.|
 | `direction`                     | `String`                      | `auto`  | Determines the opening direction. It can be `auto`, `top` or `down`. |
 | `disabled`                      | `Bool`                        | `false` | If true, component will be disabled. |
-| `error`                         | `String`                      |         | Sets the error string for the internal input element. |
+| `error`                         | `String` or `Node`            |         | Sets the error string for the internal input element. |
-| `label`                         | `String`                      |         | The text string to use for the floating label element. |
+| `label`                         | `String` or `Node`            |         | The text string to use for the floating label element. |
 | `multiple`                      | `Bool`                        | `true`  | If true, component can hold multiple values. |
 | `onBlur`                        | `Function`                    |         | Callback function that is fired when component is blurred. |
 | `onChange`                      | `Function`                    |         | Callback function that is fired when the components's value changes. |

components/input/Input.js

@@ -10,14 +10,23 @@ const factory = (FontIcon) => {
       children: React.PropTypes.any,
       className: React.PropTypes.string,
       disabled: React.PropTypes.bool,
-      error: React.PropTypes.string,
+      error: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.node
+      ]),
       floating: React.PropTypes.bool,
-      hint: React.PropTypes.string,
+      hint: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.node
+      ]),
       icon: React.PropTypes.oneOfType([
         React.PropTypes.string,
         React.PropTypes.element
       ]),
-      label: React.PropTypes.string,
+      label: React.PropTypes.oneOfType([
+        React.PropTypes.string,
+        React.PropTypes.node
+      ]),
       maxLength: React.PropTypes.number,
       multiline: React.PropTypes.bool,
       name: React.PropTypes.string,

components/input/index.d.ts

@@ -65,7 +65,7 @@ interface InputProps extends ReactToolbox.Props {
   /**
    * Give an error node to display under the field.
    */
-  error?: string;
+  error?: string | React.ReactNode;
   /**
    * Indicates if the label is floating in the input field or not.
    * @default true
@@ -74,7 +74,7 @@ interface InputProps extends ReactToolbox.Props {
   /**
    * The text string to use for hint text element.
    */
-  hint?: string;
+  hint?: string | React.ReactNode;
   /**
    * Name of an icon to use as a label for the input.
    */
@@ -82,7 +82,7 @@ interface InputProps extends ReactToolbox.Props {
   /**
    * The text string to use for the floating label element.
    */
-  label?: string;
+  label?: string | React.ReactNode;
   /**
    * Specifies the maximum number of characters allowed in the component
    */

components/input/readme.md

@@ -35,11 +35,11 @@ If you want to provide a theme via context, the component key is `RTInput`.
 |:-----|:-----|:-----|:-----|
 | `className`     | `String`                | `''`            | Sets a class name to give custom styles.|
 | `disabled`      | `Boolean`               | `false`         | If true, component will be disabled.|
-| `error`         | `String`                |                 | Give an error node to display under the field.|
+| `error`         | `String` or `Node`      |                 | Give an error node to display under the field.|
 | `floating`      | `Boolean`               | `true`          | Indicates if the label is floating in the input field or not.|
-| `hint`          | `String`                | `''`            | The text string to use for hint text element.|
+| `hint`          | `String` or `Node`      | `''`            | The text string to use for hint text element.|
 | `icon`          | `String` or `Element`   |                 | Name of an icon to use as a label for the input.|
-| `label`         | `String`                |                 | The text string to use for the floating label element.|
+| `label`         | `String` or `Node`      |                 | The text string to use for the floating label element.|
 | `maxLength`     | `Number`                |                 | Specifies the maximum number of characters allowed in the component.|
 | `multiline`     | `Boolean`               | `false`         | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
 | `rows`          | `Number`                |                 | The number of rows the multiline input field has.|

docs/app/components/layout/main/modules/examples/input_example_1.txt

@@ -15,6 +15,7 @@ class InputTest extends React.Component {
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
         <Input type='text' value={this.state.hint} label='Required Field' hint='With Hint' required onChange={this.handleChange.bind(this, 'hint')} icon='share' />
+        <Input type='text' label='error' error={<span>Error!! <a href="#!" onClick={e => { e.preventDefault(); console.log('some help'); }}>?</a></span>} />
       </section>
     );
   }