Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 10 commits into from
Apr 27, 2021
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
@include euiTextBreakWord; /* 2 */
padding: $euiSizeS;
text-align: center;
color: $euiColorDarkShade;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

While looking through all the instances of $euiColorDarkShade it seemed like this one never did anything. (Directly inside of this class is EuiText which overrides the color again so this color is never used.)

word-wrap: break-word;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/date_picker/_date_picker.scss
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@
&.react-datepicker__time-list-item--selected {
color: $euiColorGhost;
}

&.react-datepicker__time-list-item--disabled{
color: $euiColorDisabledText
}
Expand Down
2 changes: 1 addition & 1 deletion src/global_styling/mixins/_form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@

// sass-lint:disable-block mixins-before-declarations
@include euiPlaceholderPerBrowser {
myasonik marked this conversation as resolved.
Show resolved Hide resolved
color: $euiColorDarkShade;
color: $euiFormControlPlaceholderText;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/global_styling/variables/_form.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -62,4 +63,3 @@ $euiRangeTrackRadius: $euiBorderRadius !default;
$euiRangeDisabledOpacity: .25 !default;

$euiRangeHighlightHeight: $euiSizeXS !default;