Add an invalid state to EuiSuperSelect

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Converted `EuiTableHeaderMobile` to TS ([#1786](https://github.com/elastic/eui/pull/1786))
 - Added `menuLeft` and `menuRight` icons ([#1797](https://github.com/elastic/eui/pull/1797))
 - Updated EuiNavDrawer’s collapse/expand button to use `menuLeft` and `menuRight` icons ([#1797](https://github.com/elastic/eui/pull/1797))
+- Added `isInvalid` prop to `EuiSuperSelect` ([#1804](https://github.com/elastic/eui/pull/1804))
 
 ## [`9.8.0`](https://github.com/elastic/eui/tree/v9.8.0)
 

src-docs/src/views/super_select/super_select.js

@@ -88,6 +88,15 @@ export default class extends Component {
 
         <EuiSpacer size="m" />
 
+        <EuiSuperSelect
+          options={this.options}
+          valueOfSelected={this.state.value}
+          onChange={this.onChange}
+          isInvalid
+        />
+
+        <EuiSpacer size="m" />
+
         <EuiSuperSelect
           options={this.options}
           valueOfSelected={this.state.value}

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

@@ -8,6 +8,7 @@ exports[`EuiSuperSelect is rendered 1`] = `
     class="euiPopover__anchor euiSuperSelect__popoverAnchor"
   >
     <input
+      invalid="false"
       type="hidden"
       value=""
     />
@@ -75,6 +76,7 @@ exports[`EuiSuperSelect props custom display is propagated to dropdown 1`] = `
     class="euiPopover__anchor euiSuperSelect__popoverAnchor"
   >
     <input
+      invalid="false"
       type="hidden"
       value=""
     />
@@ -231,6 +233,7 @@ exports[`EuiSuperSelect props fullWidth is rendered 1`] = `
     class="euiPopover__anchor euiSuperSelect__popoverAnchor"
   >
     <input
+      invalid="false"
       type="hidden"
       value=""
     />
@@ -298,6 +301,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 1`] = `
     class="euiPopover__anchor euiSuperSelect__popoverAnchor"
   >
     <input
+      invalid="false"
       type="hidden"
       value="1"
     />
@@ -462,6 +466,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
   data-test-subj="superSelect"
   fullWidth={false}
   hasDividers={false}
+  isInvalid={false}
   onChange={[Function]}
   options={
     Array [
@@ -488,6 +493,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
         compressed={false}
         data-test-subj="superSelect"
         fullWidth={false}
+        isInvalid={false}
         isLoading={false}
         onChange={[Function]}
         onClick={[Function]}
@@ -538,6 +544,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
             compressed={false}
             data-test-subj="superSelect"
             fullWidth={false}
+            isInvalid={false}
             isLoading={false}
             onChange={[Function]}
             onClick={[Function]}
@@ -559,6 +566,7 @@ exports[`EuiSuperSelect props more props are propogated to each option 2`] = `
             value="1"
           >
             <input
+              invalid="false"
               type="hidden"
               value="1"
             />
@@ -1173,6 +1181,7 @@ exports[`EuiSuperSelect props options are rendered when select is open 1`] = `
     class="euiPopover__anchor euiSuperSelect__popoverAnchor"
   >
     <input
+      invalid="false"
       type="hidden"
       value=""
     />
@@ -1329,6 +1338,7 @@ exports[`EuiSuperSelect props select component is rendered 1`] = `
     class="euiPopover__anchor euiSuperSelect__popoverAnchor"
   >
     <input
+      invalid="false"
       type="hidden"
       value=""
     />
@@ -1394,6 +1404,7 @@ exports[`EuiSuperSelect props valueSelected is rendered 1`] = `
     class="euiPopover__anchor euiSuperSelect__popoverAnchor"
   >
     <input
+      invalid="false"
       type="hidden"
       value="2"
     />

src/components/form/super_select/__snapshots__/super_select_control.test.js.snap

@@ -3,6 +3,7 @@
 exports[`EuiSuperSelectControl is rendered 1`] = `
 Array [
   <input
+    invalid="false"
     type="hidden"
     value=""
   />,
@@ -64,6 +65,7 @@ Array [
 exports[`EuiSuperSelectControl props compressed is rendered 1`] = `
 Array [
   <input
+    invalid="false"
     type="hidden"
     value=""
   />,
@@ -123,6 +125,7 @@ Array [
 exports[`EuiSuperSelectControl props disabled options are rendered 1`] = `
 Array [
   <input
+    invalid="false"
     type="hidden"
     value=""
   />,
@@ -182,6 +185,7 @@ Array [
 exports[`EuiSuperSelectControl props empty value option is rendered 1`] = `
 Array [
   <input
+    invalid="false"
     type="hidden"
     value=""
   />,
@@ -241,6 +245,7 @@ Array [
 exports[`EuiSuperSelectControl props fullWidth is rendered 1`] = `
 Array [
   <input
+    invalid="false"
     type="hidden"
     value=""
   />,
@@ -297,9 +302,70 @@ Array [
 ]
 `;
 
+exports[`EuiSuperSelectControl props isInvalid is rendered 1`] = `
+Array [
+  <input
+    invalid="true"
+    type="hidden"
+    value=""
+  />,
+  <div
+    class="euiFormControlLayout"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <span
+        class="euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Select an option: , is selected
+      </span>
+      <button
+        aria-haspopup="true"
+        aria-labelledby="undefined generated-id"
+        class="euiSuperSelectControl euiSuperSelectControl-isInvalid"
+        role="option"
+        type="button"
+      />
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+      >
+        <span
+          class="euiFormControlLayoutCustomIcon"
+        >
+          <svg
+            aria-hidden="true"
+            class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+            focusable="false"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xlink="http://www.w3.org/1999/xlink"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <defs>
+              <path
+                d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
+                id="arrow_down-a"
+              />
+            </defs>
+            <use
+              fill-rule="nonzero"
+              href="#arrow_down-a"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`EuiSuperSelectControl props isLoading is rendered 1`] = `
 Array [
   <input
+    invalid="false"
     type="hidden"
     value=""
   />,
@@ -362,6 +428,7 @@ Array [
 exports[`EuiSuperSelectControl props value option is rendered 1`] = `
 Array [
   <input
+    invalid="false"
     type="hidden"
     value="1"
   />,

src/components/form/super_select/_super_select_control.scss

@@ -19,6 +19,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 
+  &-isInvalid {
+    @include euiFormControlInvalidStyle;
+  }
+
   &--compressed {
     line-height: $euiFormControlCompressedHeight; /* 2 */
     padding-top: 0; /* 2 */

src/components/form/super_select/super_select.js

@@ -159,6 +159,7 @@ export class EuiSuperSelect extends Component {
       valueOfSelected,
       onChange,
       isOpen,
+      isInvalid,
       hasDividers,
       itemClassName,
       itemLayoutAlign,
@@ -199,6 +200,7 @@ export class EuiSuperSelect extends Component {
         onKeyDown={this.onSelectKeyDown}
         className={buttonClasses}
         fullWidth={fullWidth}
+        isInvalid={isInvalid}
         {...rest}
       />
     );
@@ -302,6 +304,10 @@ EuiSuperSelect.propTypes = {
    * Make it wide
    */
   fullWidth: PropTypes.bool,
+  /**
+   * Provides invalid styling
+   */
+  isInvalid: PropTypes.bool,
   /**
    * Make it short
    */
@@ -316,5 +322,6 @@ EuiSuperSelect.defaultProps = {
   hasDividers: false,
   fullWidth: false,
   compressed: false,
+  isInvalid: false,
   options: [],
 };

src/components/form/super_select/super_select_control.js

@@ -16,6 +16,7 @@ export const EuiSuperSelectControl = ({
   name,
   fullWidth,
   isLoading,
+  isInvalid,
   defaultValue,
   compressed,
   value,
@@ -27,6 +28,7 @@ export const EuiSuperSelectControl = ({
       'euiSuperSelectControl--fullWidth': fullWidth,
       'euiSuperSelectControl--compressed': compressed,
       'euiSuperSelectControl-isLoading': isLoading,
+      'euiSuperSelectControl-isInvalid': isInvalid,
     },
     className
   );
@@ -59,6 +61,7 @@ export const EuiSuperSelectControl = ({
         name={name}
         defaultValue={selectDefaultValue}
         value={value}
+        invalid={`${isInvalid}`}
       />
 
       <EuiFormControlLayout
@@ -118,5 +121,6 @@ EuiSuperSelectControl.defaultProps = {
   options: [],
   fullWidth: false,
   isLoading: false,
+  isInvalid: false,
   compressed: false,
 };

src/components/form/super_select/super_select_control.test.js

@@ -44,6 +44,15 @@ describe('EuiSuperSelectControl', () => {
         .toMatchSnapshot();
     });
 
+    test('isInvalid is rendered', () => {
+      const component = render(
+        <EuiSuperSelectControl isInvalid/>
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
     test('disabled options are rendered', () => {
       const component = render(
         <EuiSuperSelectControl