Allow disabling of EuiSelect options (#324)

* Allow disabling of EuiSelect options

CHANGELOG.md

@@ -1,5 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added support for `disabled` options in `EuiSelect`. [#324](https://github.com/elastic/eui/pull/324)
 - Badges can now accept onClicks and custom colors. They were changed stylistically to be bolder and smaller by default. ([#381](https://github.com/elastic/eui/pull/381))
 - Added component to wrap blocks of substeps `EuiSubSteps` in a shaded container. ([#375](https://github.com/elastic/eui/pull/375))
 - Added horizontal steps component ([#375](https://github.com/elastic/eui/pull/375))

src/components/form/select/__snapshots__/select.test.js.snap

@@ -19,6 +19,33 @@ exports[`EuiSelect is rendered 1`] = `
 </eui-form-control-layout>
 `;
 
+exports[`EuiSelect props disabled options are rendered 1`] = `
+<eui-form-control-layout
+  fullwidth="false"
+  icon="arrowDown"
+  iconside="right"
+  isloading="false"
+>
+  <eui-validatable-control>
+    <select
+      class="euiSelect"
+    >
+      <option
+        value="1"
+      >
+        Option #1
+      </option>
+      <option
+        disabled=""
+        value="2"
+      >
+        Option #2
+      </option>
+    </select>
+  </eui-validatable-control>
+</eui-form-control-layout>
+`;
+
 exports[`EuiSelect props fullWidth is rendered 1`] = `
 <eui-form-control-layout
   fullwidth="true"

src/components/form/select/select.js

@@ -45,9 +45,13 @@ export const EuiSelect = ({
           ref={inputRef}
           {...rest}
         >
-          {options.map((option, index) => (
-            <option value={option.value} key={index}>{option.text}</option>
-          ))}
+          {options.map((option, index) => {
+            const {
+              text,
+              ...rest
+            } = option;
+            return <option {...rest} key={index}>{text}</option>;
+          })}
         </select>
       </EuiValidatableControl>
     </EuiFormControlLayout>
@@ -58,8 +62,7 @@ EuiSelect.propTypes = {
   name: PropTypes.string,
   id: PropTypes.string,
   options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
+    text: PropTypes.string.isRequired
   })).isRequired,
   isInvalid: PropTypes.bool,
   fullWidth: PropTypes.bool,

src/components/form/select/select.test.js

@@ -62,5 +62,19 @@ describe('EuiSelect', () => {
       expect(component)
         .toMatchSnapshot();
     });
+
+    test('disabled options are rendered', () => {
+      const component = render(
+        <EuiSelect
+          options={[
+            { value: '1', text: 'Option #1', disabled: false },
+            { value: '2', text: 'Option #2', disabled: true }
+          ]}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
   });
 });