Styles for all basic form components

src/components/Form/Checkbox/index.js

@@ -101,11 +101,11 @@ class Checkbox extends Component {
       }
 
       const primaryColor = this.context.OIOStyles.primaryColor
-      let checkboxIcon = 'ion-ios-circle-outline'
+      let checkboxIcon = 'ion-android-checkbox-outline-blank'
       let checkboxIconStyle = {}
 
       if (this.state.checked) {
-         checkboxIcon = 'ion-ios-checkmark'
+         checkboxIcon = 'ion-android-checkbox'
          checkboxIconStyle = {
             color: primaryColor
          }

src/components/Form/Checkbox/style.less

@@ -15,6 +15,6 @@
       opacity: 0;
    }
    span {
-      color: #888;
+      color: #A8A8A8;
    }
 }

src/components/Form/Input/index.js

@@ -14,17 +14,21 @@ class Input extends Component {
       id: PropTypes.string,
       initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
       label: PropTypes.string,
+      description: PropTypes.string,
       name: PropTypes.string.isRequired,
       oioFormContext: PropTypes.object.isRequired,
       onBlur: PropTypes.func,
       onChange: PropTypes.func,
       placeholder: PropTypes.string,
       type: PropTypes.string,
       readOnly: PropTypes.bool,
+      required: PropTypes.bool,
       value: PropTypes.string
    }
 
    static defaultProps = {
+      // error: 'required ',
+      required: true,
       type: 'text'
    }
 
@@ -47,7 +51,7 @@ class Input extends Component {
 
       if (typeof nextProps.initialValue !== 'undefined') {
          if (nextProps.initialValue !== prevState.initialValue) {
-            nextProps.oioFormContext.setInitialValue(nextProps.name, nextProps.initialValue)
+            // nextProps.oioFormContext.setInitialValue(nextProps.name, nextProps.initialValue)
             return {
                controlled,
                initialValue: nextProps.initialValue,
@@ -56,7 +60,7 @@ class Input extends Component {
          }
       // Default
       } else if (typeof prevState.value === 'undefined') {
-         nextProps.oioFormContext.setInitialValue(nextProps.name, '')
+         // nextProps.oioFormContext.setInitialValue(nextProps.name, '')
          return {
             controlled,
             initialValue: '',
@@ -92,7 +96,7 @@ class Input extends Component {
    }
 
    render() {
-      const classes = [styles.input, this.props.className]
+      const classes = [styles.input, this.props.className, this.props.error && styles.error]
       const inputStyles = {}
 
       if (this.context.OIOStyles && this.context.OIOStyles.fontFamily) {
@@ -101,7 +105,17 @@ class Input extends Component {
 
       return (
          <div className={formStyles.container}>
-            {this.props.label && <label htmlFor={this.props.id}>{this.props.label}</label>}
+            <div className={formStyles.lab}>
+               {this.props.label && (
+                  <label htmlFor={this.props.id}>
+                     {this.props.label}
+                     {this.props.required && <div style={{ color: 'red', display: 'inline' }}> *</div>}
+                  </label>
+               )}
+               {this.props.description
+                  && <div className={formStyles.description}>{this.props.description}</div>}
+            </div>
+
             <input
                id={this.props.id}
                style={inputStyles}
@@ -114,6 +128,7 @@ class Input extends Component {
                type={this.props.type}
                value={this.state.controlled ? this.props.value : this.state.value}
             />
+
             {this.props.error && (
                <div className={formStyles.error}>
                   {this.props.error}

src/components/Form/Input/styles.less

@@ -1,6 +1,11 @@
 @import '../../../foundation/mixins';
 
+@uiBaseBorderColor2: #DFDFDF;
+@uiBasePlaceholderColor: #A8A8A8;
+@uiBaseDescription: #454545;
+
 .input {
+   color: rgba(0, 0, 0, 0.87);
    -webkit-appearance: none;
    margin: 0;
    background: none;
@@ -11,12 +16,20 @@
    //.rounded(@uiBaseComponentRadius);
    .uiTextSize3;
    line-height: @uiBaseComponentHeightMedium - 13px;
-   padding: 5px 0px 5px 0px;
+   padding: 10px 10px 10px 10px;
    .transition(300ms);
    //border: none;
-   border-bottom: 2px solid @uiBaseBorderColor;
+   border: 1px solid @uiBaseBorderColor2;
+   border-radius: 3px;
+
+   &:focus {border: 1px solid #aaa;}
 
-   &:focus {
-      border-bottom: 2px solid #aaa;
+   &.error {
+      background-color: #FFF7F7;
+      border: 1px solid #DD3300;
    }
 }
+
+input::placeholder  {
+   color: @uiBasePlaceholderColor;
+}

src/components/Form/Radio/index.js

@@ -100,11 +100,11 @@ class Radio extends Component {
       }
 
       const primaryColor = this.context.OIOStyles.primaryColor
-      let radioIcon = 'ion-ios-circle-outline'
+      let radioIcon = 'ion-android-radio-button-off'
       let radioIconStyle = {}
 
       if (checked) {
-         radioIcon = 'ion-ios-circle-filled'
+         radioIcon = 'ion-android-radio-button-on'
          radioIconStyle = {
             color: primaryColor
          }

src/components/Form/Radio/style.less

@@ -15,6 +15,6 @@
       opacity: 0;
    }
    span {
-      color: #888;
+      color: #A8A8A8;
    }
 }

src/components/Form/Select/index.js

@@ -14,17 +14,20 @@ class Select extends Component {
       id: PropTypes.string,
       initialValue: PropTypes.string,
       label: PropTypes.string,
+      description: PropTypes.string,
       name: PropTypes.string.isRequired,
       oioFormContext: PropTypes.object.isRequired,
       onBlur: PropTypes.func,
       onChange: PropTypes.func,
       options: PropTypes.array,
       readOnly: PropTypes.bool,
+      required: PropTypes.bool,
       value: PropTypes.string
    }
 
    static defaultProps = {
-      options: []
+      options: [],
+      required: false
    }
 
    static getDerivedStateFromProps(nextProps, prevState) {
@@ -85,7 +88,7 @@ class Select extends Component {
    }
 
    render() {
-      const classes = [styles.select, this.props.className]
+      const classes = [styles.select, this.props.className, this.props.error && styles.error]
       const options = this.props.options.map(option => (
          <option
             key={option.value}
@@ -97,7 +100,20 @@ class Select extends Component {
 
       return (
          <div className={formStyles.container}>
-            {this.props.label && <label htmlFor={this.props.id}>{this.props.label}</label>}
+            <div className={formStyles.lab}>
+               {this.props.label && (
+                  <label htmlFor={this.props.id}>
+                     {this.props.label}
+                     {this.props.required && <div style={{ color: 'red', display: 'inline' }}> *</div>}
+                  </label>
+               )}
+               {this.props.description && (
+                  <div
+                     className={formStyles.description}>
+                     {this.props.description}
+                  </div>
+               )}
+            </div>
             <select
                className={classNames(classes)}
                id={this.props.id}

src/components/Form/Select/styles.less

@@ -1,6 +1,10 @@
 @import '../../../foundation/mixins';
 
+@uiBaseBorderColor2: #DFDFDF;
+@uiBasePlaceholderColor: #A8A8A8;
+
 .select {
+   color: @uiBasePlaceholderColor;
    -webkit-appearance: none;
    margin: 0;
    background: none;
@@ -13,12 +17,21 @@
    line-height: @uiBaseComponentHeightMedium - 13px;
    padding: 5px 10px 5px 10px;
    .transition(300ms);
-   border: 2px solid @uiBaseBorderColor;
-   background-position: 98% 50%;
+   border: 1px solid @uiBaseBorderColor2;
+   background-position: 99% 50%;
    background-repeat: no-repeat;
    background-image: url('data:image/png;base64,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');
 
    &:focus {
-      border: 2px solid #aaa;
+      border: 1px solid #aaa;
+   }
+
+   &.error {
+      background-color: #FFF7F7;
+      border: 1px solid #DD3300;
+   }
+
+   option:disabled {
+      color: red;
    }
 }

src/components/Form/Textarea/index.js

@@ -14,17 +14,20 @@ class Textarea extends Component {
       error: PropTypes.string,
       id: PropTypes.string,
       label: PropTypes.string,
+      description: PropTypes.string,
       name: PropTypes.string,
       oioFormContext: PropTypes.object.isRequired,
       onBlur: PropTypes.func,
       placeholder: PropTypes.string,
       readOnly: PropTypes.bool,
+      required: PropTypes.bool,
       rows: PropTypes.string,
       onChange: PropTypes.func,
       value: PropTypes.string
    }
 
    static defaultProps = {
+      required: false,
       disabled: false,
       rows: '5'
    }
@@ -89,11 +92,24 @@ class Textarea extends Component {
    }
 
    render() {
-      const classes = [styles.textarea, this.props.className]
+      const classes = [styles.textarea, this.props.className, this.props.error && styles.error]
 
       return (
          <div className={formStyles.container}>
-            {this.props.label && <label htmlFor={this.props.id}>{this.props.label}</label>}
+            <div className={formStyles.lab}>
+               {this.props.label && (
+                  <label htmlFor={this.props.id}>
+                     {this.props.label}
+                     {this.props.required && <div style={{ color: 'red', display: 'inline' }}> *</div>}
+                  </label>
+               )}
+               {this.props.description && (
+                  <div
+                     className={formStyles.description}>
+                     {this.props.description}
+                  </div>
+               )}
+            </div>
             <textarea
                className={classNames(classes)}
                disabled={this.props.disabled}

src/components/Form/Textarea/styles.less

@@ -1,5 +1,8 @@
 @import '../../../foundation/mixins';
 
+@uiBaseBorderColor2: #DFDFDF;
+@uiBasePlaceholderColor: #A8A8A8;
+
 .textarea {
    -webkit-appearance: none;
    margin: 0;
@@ -9,10 +12,19 @@
    width: 100%;
    .rounded(@uiBaseComponentRadius);
    .uiTextSize3;
-   padding: 5px 10px;
+   padding: 10px 10px;
    .transition(300ms);
-   border: 2px solid @uiBaseBorderColor;
+   border: 1px solid @uiBaseBorderColor2;
 
-   &:focus { border: 2px solid #aaa; }
+   &:focus { border: 1px solid #aaa; }
    &:disabled { opacity: 0.5; }
+
+   &.error {
+      background-color: #FFF7F7;
+      border: 1px solid #DD3300;
+   }
+}
+
+.textarea::placeholder {
+   color: @uiBasePlaceholderColor;
 }