feat(input): add validation styling to select

fix HospitalRun#271

Author: ocBruno

.vscode/settings.json

@@ -1,16 +1,6 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "eslint.autoFixOnSave": true,
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    {
-      "autoFix": true,
-      "language": "typescript"
-    },
-    {
-      "autoFix": true,
-      "language": "typescriptreact"
-    }
-  ]
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }

src/components/Select/Select.tsx

@@ -33,14 +33,13 @@ interface Props {
   invalidInputMessage?: string
   /** Defines the message for valid input. */
   validInputMessage?: string
+  /** Defines the default value */
+  defaultValue?: string | Array<string>
 }
-/**
- * Defines the default style of the select.
- */
-const defaultStyles = { backgroundPosition: 'right calc(.375em + .55rem) center' }
 
 const Select = (props: Props) => {
   const {
+    defaultValue,
     value,
     multiple,
     isValid,
@@ -54,30 +53,44 @@ const Select = (props: Props) => {
     className,
     style,
   } = props
-
+  /**
+   * Defines the default style of the select.
+   */
+  const selectDefaultStyles = {
+    backgroundPosition: 'right calc(.375em + .55rem) center',
+    borderColor: isValid ? 'green' : isInvalid ? 'red' : 'black',
+  }
+  const validInputTextDefaultStyles = {
+    color: 'green',
+  }
   return (
-    <div>
+    <Form.Group>
       <Form.Control
         as="select"
         value={value}
+        defaultValue={defaultValue}
         multiple={multiple}
         isInvalid={isInvalid}
         isValid={isValid}
         disabled={disabled}
         size={getControlSize(size)}
         onChange={onChange}
         className={className}
-        style={Object.assign(style || {}, defaultStyles)}
+        style={Object.assign({}, style, ...[selectDefaultStyles])}
       >
         {children}
       </Form.Control>
-      <Form.Control.Feedback className="text-left ml-3 mt-1" type="valid">
+      <Form.Control.Feedback
+        style={validInputTextDefaultStyles}
+        className="text-left ml-3 mt-1"
+        type="valid"
+      >
         {validInputMessage}
       </Form.Control.Feedback>
       <Form.Control.Feedback className="text-left ml-3 mt-1" type="invalid">
         {invalidInputMessage}
       </Form.Control.Feedback>
-    </div>
+    </Form.Group>
   )
 }
 

stories/select.stories.tsx

@@ -13,8 +13,8 @@ storiesOf('Select', module)
   ))
   .add('Select', () => (
     <div>
-      <Select>
-        <option selected>Choose your sweet</option>
+      <Select defaultValue="Marshmallow">
+        <option>Choose your sweet</option>
         <option>Marshmallow</option>
         <option>Nougat</option>
         <option>Ice cream</option>
@@ -24,20 +24,18 @@ storiesOf('Select', module)
   ))
   .add('Select multiple', () => (
     <div>
-      <Select multiple>
+      <Select defaultValue={['Nougat', 'Ice cream']} multiple>
         <option>Marshmallow</option>
-        <option selected>Nougat</option>
+        <option>Nougat</option>
         <option>Ice cream</option>
-        <option selected>Gingerbread</option>
+        <option>Gingerbread</option>
       </Select>
     </div>
   ))
   .add('Disabled select', () => (
     <div>
       <Select disabled>
-        <option selected disabled>
-          Choose your sweet
-        </option>
+        <option disabled>Choose your sweet</option>
         <option>Marshmallow</option>
         <option>Nougat</option>
         <option>Ice cream</option>
@@ -47,10 +45,8 @@ storiesOf('Select', module)
   ))
   .add('Valid select', () => (
     <div>
-      <Select isValid>
-        <option selected disabled>
-          Choose your sweet
-        </option>
+      <Select defaultValue="Choose your sweet" isValid>
+        <option disabled>Choose your sweet</option>
         <option>Marshmallow</option>
         <option>Nougat</option>
         <option>Ice cream</option>
@@ -60,10 +56,12 @@ storiesOf('Select', module)
   ))
   .add('Valid select with custom message', () => (
     <div>
-      <Select isValid validInputMessage="This is a valid select input message">
-        <option selected disabled>
-          Choose your sweet
-        </option>
+      <Select
+        defaultValue="Choose your sweet"
+        isValid
+        validInputMessage="This is a valid select input message"
+      >
+        <option disabled>Choose your sweet</option>
         <option>Marshmallow</option>
         <option>Nougat</option>
         <option>Ice cream</option>
@@ -73,10 +71,8 @@ storiesOf('Select', module)
   ))
   .add('Invalid select', () => (
     <div>
-      <Select isInvalid>
-        <option selected disabled>
-          Choose your sweet
-        </option>
+      <Select defaultValue="Choose your sweet" isInvalid>
+        <option disabled>Choose your sweet</option>
         <option>Marshmallow</option>
         <option>Nougat</option>
         <option>Ice cream</option>
@@ -86,10 +82,12 @@ storiesOf('Select', module)
   ))
   .add('Invalid select with custom message', () => (
     <div>
-      <Select isInvalid invalidInputMessage="This is an invalid select input error message">
-        <option selected disabled>
-          Choose your sweet
-        </option>
+      <Select
+        defaultValue="Choose your sweet"
+        isInvalid
+        invalidInputMessage="This is an invalid select input error message"
+      >
+        <option disabled>Choose your sweet</option>
         <option>Marshmallow</option>
         <option>Nougat</option>
         <option>Ice cream</option>