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/_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
    */

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
   );