[EuiComboBox] Matching placeholder color to other form elements (#4744)

Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com>
elastic · Apr 27, 2021 · 64dd576 · 64dd576
1 parent e6fd955
commit 64dd576
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 **Bug fixes**
 
 - Fixed missing i18n tokens for `EuiFilePicker` ([#4750](https://github.com/elastic/eui/pull/4750))
+- Fixed `EuiComoboBox` to use correct placeholder text color ([#4744](https://github.com/elastic/eui/pull/4744))
 
 ## [`32.2.0`](https://github.com/elastic/eui/tree/v32.2.0)
 

diff --git a/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss b/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss
@@ -6,6 +6,6 @@
   pointer-events: none;
   padding-left: $euiSizeXS;
   line-height: $euiSizeXL;
-  color: $euiColorMediumShade;
+  color: $euiFormControlPlaceholderText;
   margin-bottom: 0 !important; // sass-lint:disable-line no-important
 }
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
@@ -16,7 +16,6 @@
   @include euiTextBreakWord; /* 2 */
   padding: $euiSizeS;
   text-align: center;
-  color: $euiColorDarkShade;
   word-wrap: break-word;
 }
 

diff --git a/src/components/date_picker/_date_picker.scss b/src/components/date_picker/_date_picker.scss
@@ -87,7 +87,7 @@
           &.react-datepicker__time-list-item--selected {
             color: $euiColorGhost;
           }
-          
+
           &.react-datepicker__time-list-item--disabled{
             color: $euiColorDisabledText
           }

diff --git a/src/global_styling/mixins/_form.scss b/src/global_styling/mixins/_form.scss
@@ -56,11 +56,11 @@
 @mixin euiPlaceholderPerBrowser {
   // sass-lint:disable-block no-vendor-prefixes
   // Each prefix must be its own content block
-  &::-webkit-input-placeholder { @content; }
-  &::-moz-placeholder { @content; }
-  &:-ms-input-placeholder { @content; }
-  &:-moz-placeholder { @content; }
-  &::placeholder { @content; }
+  &::-webkit-input-placeholder { @content; opacity: 1; }
+  &::-moz-placeholder { @content; opacity: 1; }
+  &:-ms-input-placeholder { @content; opacity: 1; }
+  &:-moz-placeholder { @content; opacity: 1; }
+  &::placeholder { @content; opacity: 1; }
 }
 
 @function euiFormControlGradient($color: $euiColorPrimary) {
@@ -83,7 +83,7 @@
 
   // sass-lint:disable-block mixins-before-declarations
   @include euiPlaceholderPerBrowser {
-    color: $euiColorDarkShade;
+    color: $euiFormControlPlaceholderText;
   }
 }
 

diff --git a/src/global_styling/variables/_form.scss b/src/global_styling/variables/_form.scss
@@ -36,6 +36,7 @@ $euiFormCustomControlDisabledIconColor: shadeOrTint($euiColorMediumShade, 38%, 4
 $euiFormCustomControlBorderColor: shadeOrTint($euiColorLightestShade, 18%, 30%) !default;
 $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default;
+$euiFormControlPlaceholderText: makeHighContrastColor($euiTextSubduedColor, $euiFormBackgroundColor) !default;
 $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 50%, 40%) !default;
 $euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 2%, 4%) !default;
 $euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;
@@ -62,4 +63,3 @@ $euiRangeTrackRadius: $euiBorderRadius !default;
 $euiRangeDisabledOpacity: .25 !default;
 
 $euiRangeHighlightHeight: $euiSizeXS !default;
-