Merge pull request #857 from rrott/feature/584-add_required_to_Dropdown_as_Input_fields

Added required to Dropdown

components/dropdown/Dropdown.js

@@ -20,6 +20,7 @@ const factory = (Input) => {
       onChange: PropTypes.func,
       onClick: PropTypes.func,
       onFocus: PropTypes.func,
+      required: PropTypes.bool,
       source: PropTypes.array.isRequired,
       template: PropTypes.func,
       theme: PropTypes.shape({
@@ -30,6 +31,7 @@ const factory = (Input) => {
         errored: PropTypes.string,
         field: PropTypes.string,
         label: PropTypes.string,
+        required: PropTypes.bool,
         selected: PropTypes.string,
         templateValue: PropTypes.string,
         up: PropTypes.string,
@@ -46,7 +48,8 @@ const factory = (Input) => {
       auto: true,
       className: '',
       allowBlank: true,
-      disabled: false
+      disabled: false,
+      required: false
     };
 
     state = {
@@ -118,7 +121,8 @@ const factory = (Input) => {
       const { theme } = this.props;
       const className = classnames(theme.field, {
         [theme.errored]: this.props.error,
-        [theme.disabled]: this.props.disabled
+        [theme.disabled]: this.props.disabled,
+        [theme.required]: this.props.required
       });
 
       return (
@@ -126,7 +130,12 @@ const factory = (Input) => {
           <div className={`${theme.templateValue} ${theme.value}`}>
             {this.props.template(selected)}
           </div>
-          {this.props.label ? <label className={theme.label}>{this.props.label}</label> : null}
+          {this.props.label
+            ? <label className={theme.label}>
+                {this.props.label}
+                {this.props.required ? <span className={theme.required}> * </span> : null}
+              </label>
+            : null}
           {this.props.error ? <span className={theme.error}>{this.props.error}</span> : null}
         </div>
       );
@@ -143,12 +152,13 @@ const factory = (Input) => {
     };
 
     render () {
-      const {template, theme, source, allowBlank, auto, ...others} = this.props; //eslint-disable-line no-unused-vars
+      const {template, theme, source, allowBlank, auto, required, ...others} = this.props; //eslint-disable-line no-unused-vars
       const selected = this.getSelectedItem();
       const className = classnames(theme.dropdown, {
         [theme.up]: this.state.up,
         [theme.active]: this.state.active,
-        [theme.disabled]: this.props.disabled
+        [theme.disabled]: this.props.disabled,
+        [theme.required]: this.props.required
       }, this.props.className);
 
       return (
@@ -157,6 +167,7 @@ const factory = (Input) => {
             {...others}
             className={theme.value}
             onClick={this.handleClick}
+            required={this.props.required}
             readOnly
             type={template && selected ? 'hidden' : null}
             value={selected && selected.label ? selected.label : ''}

components/dropdown/readme.md

@@ -51,6 +51,7 @@ If you want to provide a theme via context, the component key is `RTDropdown`.
 | `source`     | `Array`    |         | Array of data objects with the data to represent in the dropdown.|
 | `template`   | `Function` |         | Callback function that returns a JSX template to represent the element.|
 | `value`      | `String`   |         | Default value using JSON data.|
+| `required`   | `Boolean`  | `false` | If true, the dropdown has a required attribute.|
 
 ## Theming
 

components/dropdown/theme.scss

@@ -69,6 +69,9 @@
     > .templateValue {
       border-bottom: 1px solid $input-text-error-color;
     }
+    > .label > .required {
+      color: $input-text-required-color;
+    }
   }
   &.disabled {
     pointer-events: none;
@@ -96,6 +99,9 @@
   font-size: $input-label-font-size;
   line-height: $input-field-font-size;
   color: $input-text-label-color;
+  .required {
+    color: $input-text-required-color;
+  }
 }
 
 .error {

spec/components/dropdown.js

@@ -63,6 +63,14 @@ class DropdownTest extends React.Component {
           onChange={this.handleChange.bind(this, 'dropdown3')}
           source={countries}
         />
+
+        <Dropdown
+          label="Country"
+          ref="dropdown5"
+          onChange={this.handleChange.bind(this, 'dropdown5')}
+          source={countries}
+          required
+        />
       </section>
     );
   }