From deca0c0cbfb8ef4d09861df1f9c4997bb60911e8 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 May 2018 14:28:12 -0700 Subject: [PATCH 1/4] remove specificity on text coloring --- src-docs/src/views/text/text_color.js | 2 +- src-docs/src/views/text/text_example.js | 4 +--- src/components/text/_text_color.scss | 13 ++----------- 3 files changed, 4 insertions(+), 15 deletions(-) diff --git a/src-docs/src/views/text/text_color.js b/src-docs/src/views/text/text_color.js index 02c7ebd6a45..f7d587310c3 100644 --- a/src-docs/src/views/text/text_color.js +++ b/src-docs/src/views/text/text_color.js @@ -68,7 +68,7 @@ export default () => (

Sometimes you need to color entire blocks of text, no matter what is in them. You can always apply color directly (versus using the separated component) to - make it easy. + make it easy. Links should still properly color.

diff --git a/src-docs/src/views/text/text_example.js b/src-docs/src/views/text/text_example.js index a17aaa728d1..7e38d36b7fa 100644 --- a/src-docs/src/views/text/text_example.js +++ b/src-docs/src/views/text/text_example.js @@ -87,9 +87,7 @@ export const TextExample = { There are two ways to color text. Either individually by applying EuiTextColor on individual text objects, or by passing the color prop directly on EuiText for - a blanket approach across the entirely of your text. Either solution wraps - the element in a span with the !important applied to the color. - It will override any other colors in use, so be careful. + a blanket approach across the entirely of your text.

), props: { EuiTextColor }, diff --git a/src/components/text/_text_color.scss b/src/components/text/_text_color.scss index 7b867ef636e..9a69ba04f56 100644 --- a/src/components/text/_text_color.scss +++ b/src/components/text/_text_color.scss @@ -11,22 +11,13 @@ $textColors: ( // Create color modifiers based on the map @each $name, $color in $textColors { - .euiTextColor.euiTextColor--#{$name} { + .euiTextColor--#{$name} { // The below function makes sure the color is accessible on our default background. - color: makeHighContrastColor($color, $euiColorEmptyShade) !important; + color: makeHighContrastColor($color, $euiColorEmptyShade); @if $name == "ghost" { color: $color !important; } - - // We need a blanket approach for coloring. It should overule everything. - * { - color: makeHighContrastColor($color, $euiColorEmptyShade) !important; - - @if $name == "ghost" { - color: $color !important; - } - } } } From a8def324c2b55e92b4d442c5d92cd425c6b915b2 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 May 2018 14:44:18 -0700 Subject: [PATCH 2/4] euiText should inherit coloring --- src/components/text/_text.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/text/_text.scss b/src/components/text/_text.scss index 18527fcb538..83785d45c47 100644 --- a/src/components/text/_text.scss +++ b/src/components/text/_text.scss @@ -88,6 +88,10 @@ .euiText { @include euiText; @include euiFontSize; + // The euiText mixin forces a color. Since euiText is usually a child + // of other styling concerns, we should inherit their coloring. The default + // coloring will likely coming from the reset.scss anyway. + color: inherit; a { color: $euiLinkColor; From 2d59e843e51c2c55373a453507d6d7d312b3ebca Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 May 2018 14:48:36 -0700 Subject: [PATCH 3/4] changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e0708c0c063..e25b75c37ec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Added `describedByIds` prop to `EuiFormRow` to help with accessibility ([#707](https://github.com/elastic/eui/pull/707)) - Added `isLoading` prop to `EuiButtonEmpty` ([#768](https://github.com/elastic/eui/pull/768)) - Removed individual badge cross icon when `EuiComboBox` has `singleSelection` prop enabled. ([#769](https://github.com/elastic/eui/pull/769)) +- Removed specificity on `EuiText` that was causing cascade conflicts around text coloring. ([#770](https://github.com/elastic/eui/pull/770)) ## [`0.0.45`](https://github.com/elastic/eui/tree/v0.0.45) From c6ce53560ecdc332cc53b9c26d9b09a7901130a0 Mon Sep 17 00:00:00 2001 From: Dave Snider Date: Thu, 3 May 2018 14:50:56 -0700 Subject: [PATCH 4/4] mark as bug fix --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e25b75c37ec..c4af767cc29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,9 @@ - Added `describedByIds` prop to `EuiFormRow` to help with accessibility ([#707](https://github.com/elastic/eui/pull/707)) - Added `isLoading` prop to `EuiButtonEmpty` ([#768](https://github.com/elastic/eui/pull/768)) - Removed individual badge cross icon when `EuiComboBox` has `singleSelection` prop enabled. ([#769](https://github.com/elastic/eui/pull/769)) + +**Bug fixes** + - Removed specificity on `EuiText` that was causing cascade conflicts around text coloring. ([#770](https://github.com/elastic/eui/pull/770)) ## [`0.0.45`](https://github.com/elastic/eui/tree/v0.0.45)