[EuiComboBox] Fixed disabled pills and text contrast (#4901)

* Fixed `EuiComboBox` disabled pills and text contrast

* euiFormControlDisabledTextStyle mixin

* Overriding cursor text that displays on hover for combo boxes with multiple pills

* Adding disabled text styles to placeholder

CHANGELOG.md

@@ -14,6 +14,7 @@
 
 - Fixed `EuiRange` container expansion due to negative margin value ([#4815](https://github.com/elastic/eui/pull/4815))
 - Fixed `EuiRange` ticks position to better align with thumbs ([#4815](https://github.com/elastic/eui/pull/4815))
+- Fixed `EuiComboBox` disabled pills and text contrast ([#4901](https://github.com/elastic/eui/issues/4901))
 - Fixed `EuiDataGrid` footer and header rows jumps in Firefox ([#4869](https://github.com/elastic/eui/issues/4869))
 - Fixed shaded colors of `EuiButtonIcon` ([#4874](https://github.com/elastic/eui/pull/4874))
 - Fixed `pageHeader` display in `EuiPageTemplate` when template is `empty` or `default` ([#4905](https://github.com/elastic/eui/pull/4905))

src-docs/src/views/combo_box/colors.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 
 import { EuiComboBox } from '../../../../src/components';
 import { euiPaletteColorBlindBehindText } from '../../../../src/services';
+import { DisplayToggles } from '../form_controls/display_toggles';
 
 const visColorsBehindText = euiPaletteColorBlindBehindText();
 const optionsStatic = [
@@ -86,12 +87,16 @@ export default () => {
   };
 
   return (
-    <EuiComboBox
-      placeholder="Select or create options"
-      options={options}
-      selectedOptions={selectedOptions}
-      onChange={onChange}
-      onCreateOption={onCreateOption}
-    />
+    /* DisplayToggles wrapper for Docs only */
+    <DisplayToggles canDisabled={false} canReadOnly={false} canIsDisabled>
+      <EuiComboBox
+        placeholder="Select or create options"
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onChange}
+        onCreateOption={onCreateOption}
+        isDisabled
+      />
+    </DisplayToggles>
   );
 };

src-docs/src/views/combo_box/combo_box.js

@@ -72,7 +72,7 @@ export default () => {
 
   return (
     /* DisplayToggles wrapper for Docs only */
-    <DisplayToggles canDisabled={false} canReadOnly={false}>
+    <DisplayToggles canDisabled={false} canReadOnly={false} canIsDisabled>
       <EuiComboBox
         placeholder="Select or create options"
         options={options}

src-docs/src/views/combo_box/single_selection.js

@@ -51,14 +51,16 @@ export default () => {
       canDisabled={false}
       canReadOnly={false}
       canLoading={false}
-      canPrepend
+      canPrepend={false}
+      canIsDisabled
       canAppend>
       <EuiComboBox
         placeholder="Select a single option"
         singleSelection={{ asPlainText: true }}
         options={options}
         selectedOptions={selectedOptions}
         onChange={onChange}
+        isDisabled
       />
     </DisplayToggles>
   );

src/components/combo_box/_combo_box.scss

@@ -107,7 +107,19 @@
 
   &.euiComboBox-isDisabled {
     .euiComboBox__inputWrap {
+      // sass-lint:disable-block no-vendor-prefixes
       @include euiFormControlDisabledStyle;
+      -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors 
+    }
+
+    .euiComboBoxPlaceholder,
+    .euiComboBoxPill--plainText {
+      @include euiFormControlDisabledTextStyle;
+    }
+
+    // overrides the `cursor: text;` that displays on hover for combo boxes that allow multiple pills
+    .euiComboBox__inputWrap:not(.euiComboBox__inputWrap--noWrap):hover {
+      cursor: not-allowed;
     }
   }
 

src/global_styling/mixins/_form.scss

@@ -194,11 +194,15 @@
   background-size: 100%;
 }
 
-@mixin euiFormControlDisabledStyle {
+@mixin euiFormControlDisabledTextStyle {
   // sass-lint:disable-block no-vendor-prefixes
-  cursor: not-allowed;
   color: $euiFormControlDisabledColor;
   -webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari
+}
+
+@mixin euiFormControlDisabledStyle {
+  @include euiFormControlDisabledTextStyle;
+  cursor: not-allowed;
   background: $euiFormBackgroundDisabledColor;
   box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;