From fb8c61c632167786ab14d4f320e677fd799b38e4 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 12 Jul 2023 08:54:00 -0700 Subject: [PATCH 1/5] Fix EuiTab icons not inheriting the selected color --- src/components/tabs/tab.styles.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/tabs/tab.styles.ts b/src/components/tabs/tab.styles.ts index 999aa311dfe..b2126020d0a 100644 --- a/src/components/tabs/tab.styles.ts +++ b/src/components/tabs/tab.styles.ts @@ -36,6 +36,7 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => { `, selected: css` box-shadow: inset 0 -${euiTheme.border.width.thick} 0 ${euiTheme.colors.primary}; + color: ${euiTheme.colors.primaryText}; `, disabled: { disabled: css` From c501df3b2bfa18df23871f0b391f82db909a062e Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 12 Jul 2023 09:04:05 -0700 Subject: [PATCH 2/5] Clean up tab CSS to reduce unnecessary color setting/overrides - Using the `euiTitle()` util gives us too much we don't need (color, font-weight, etc.) - it makes more sense to simply use `euiFontSize` directly - doing so allows us to set `color` once on the parent button --- src/components/tabs/tab.styles.ts | 25 +++++++++++-------------- src/components/tabs/tab.tsx | 2 -- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/components/tabs/tab.styles.ts b/src/components/tabs/tab.styles.ts index b2126020d0a..1f9a2d2e89b 100644 --- a/src/components/tabs/tab.styles.ts +++ b/src/components/tabs/tab.styles.ts @@ -7,9 +7,8 @@ */ import { css } from '@emotion/react'; -import { logicalCSS, mathWithUnits } from '../../global_styling'; +import { logicalCSS, mathWithUnits, euiFontSize } from '../../global_styling'; import { UseEuiTheme } from '../../services'; -import { euiTitle } from '../title/title.styles'; export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => { return { @@ -18,11 +17,14 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => { cursor: pointer; flex-direction: row; align-items: center; - font-weight: ${euiTheme.font.weight.semiBold}; gap: ${euiTheme.size.s}; ${logicalCSS('padding-vertical', 0)} ${logicalCSS('padding-horizontal', euiTheme.size.xs)} + /* Font-weight used by append/prepend nodes - the tab title receives a heavier weight */ + font-weight: ${euiTheme.font.weight.semiBold}; + color: ${euiTheme.colors.title}; + &:focus { background-color: transparent; outline-offset: -${euiTheme.focus.width}; @@ -55,39 +57,34 @@ export const euiTabContentStyles = (euiThemeContext: UseEuiTheme) => { return { euiTab__content: css` + font-weight: ${euiTheme.font.weight[euiTheme.font.title.weight]}; + &:hover { text-decoration: none; } `, // sizes s: css` - ${euiTitle(euiThemeContext, 'xxxs')} + font-size: ${euiFontSize(euiThemeContext, 'xs').fontSize}; line-height: ${euiTheme.size.xl}; `, m: css` - ${euiTitle(euiThemeContext, 'xxs')} + font-size: ${euiFontSize(euiThemeContext, 's').fontSize}; line-height: ${euiTheme.size.xxl}; `, l: css` - ${euiTitle(euiThemeContext, 'xs')} + font-size: ${euiFontSize(euiThemeContext, 'm').fontSize}; line-height: ${mathWithUnits( [euiTheme.size.xl, euiTheme.size.s], (x, y) => x + y )}; `, xl: css` - ${euiTitle(euiThemeContext, 's')} + font-size: ${euiFontSize(euiThemeContext, 'l').fontSize}; line-height: ${mathWithUnits( [euiTheme.size.xxxl, euiTheme.size.s], (x, y) => x + y )}; `, - // variations - selected: css` - color: ${euiTheme.colors.primaryText}; - `, - disabled: css` - color: ${euiTheme.colors.disabledText}; - `, }; }; diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx index 627f8bbdbbe..9a349bb16a0 100644 --- a/src/components/tabs/tab.tsx +++ b/src/components/tabs/tab.tsx @@ -84,8 +84,6 @@ export const EuiTab: FunctionComponent = ({ const cssTabContentStyles = [ tabContentStyles.euiTab__content, size && tabContentStyles[size], - isSelected && tabContentStyles.selected, - disabled && tabContentStyles.disabled, ]; const prependNode = prepend && ( From bd0183dd3c75528444e616290cd2f1b3420b76c4 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 12 Jul 2023 09:06:35 -0700 Subject: [PATCH 3/5] More CSS cleanup - focus and hover styles aren't necessary or doing anything - remove them --- src/components/tabs/tab.styles.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/components/tabs/tab.styles.ts b/src/components/tabs/tab.styles.ts index 1f9a2d2e89b..c7b01efddf1 100644 --- a/src/components/tabs/tab.styles.ts +++ b/src/components/tabs/tab.styles.ts @@ -26,7 +26,6 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => { color: ${euiTheme.colors.title}; &:focus { - background-color: transparent; outline-offset: -${euiTheme.focus.width}; } `, @@ -58,10 +57,6 @@ export const euiTabContentStyles = (euiThemeContext: UseEuiTheme) => { return { euiTab__content: css` font-weight: ${euiTheme.font.weight[euiTheme.font.title.weight]}; - - &:hover { - text-decoration: none; - } `, // sizes s: css` From 45524348ce9a1a88d691cd3556d3a413775082b9 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 12 Jul 2023 09:06:44 -0700 Subject: [PATCH 4/5] Update snapshots --- .../__snapshots__/page_header.test.tsx.snap | 2 +- .../page_header_content.test.tsx.snap | 6 +++--- .../tabs/__snapshots__/tab.test.tsx.snap | 6 +++--- .../__snapshots__/tabbed_content.test.tsx.snap | 16 ++++++++-------- 4 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap index c9509d783d8..fb55485994b 100644 --- a/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap @@ -337,7 +337,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`] type="button" > Tab 1 diff --git a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap index 81b452c07dd..1c24f17cc92 100644 --- a/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap +++ b/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap @@ -297,7 +297,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a type="button" > Tab 1 @@ -586,7 +586,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = ` type="button" > Tab 1 @@ -637,7 +637,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = ` type="button" > Tab 1 diff --git a/src/components/tabs/__snapshots__/tab.test.tsx.snap b/src/components/tabs/__snapshots__/tab.test.tsx.snap index 54b49590fe1..279a138bd17 100644 --- a/src/components/tabs/__snapshots__/tab.test.tsx.snap +++ b/src/components/tabs/__snapshots__/tab.test.tsx.snap @@ -29,7 +29,7 @@ exports[`EuiTab props disabled and selected 1`] = ` type="button" > Click Me @@ -45,7 +45,7 @@ exports[`EuiTab props disabled is rendered 1`] = ` type="button" > Click Me @@ -78,7 +78,7 @@ exports[`EuiTab props isSelected is rendered 1`] = ` type="button" > children diff --git a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap index 39400b2c3e6..ad996adf55e 100644 --- a/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap +++ b/src/components/tabs/tabbed_content/__snapshots__/tabbed_content.test.tsx.snap @@ -15,7 +15,7 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t type="button" > Elasticsearch @@ -95,7 +95,7 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up prepend Kibana @@ -139,7 +139,7 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = ` type="button" > Elasticsearch @@ -199,7 +199,7 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = ` type="button" > Elasticsearch @@ -259,7 +259,7 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = ` type="button" > Elasticsearch @@ -339,7 +339,7 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] = prepend Kibana @@ -399,7 +399,7 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = ` prepend Kibana @@ -439,7 +439,7 @@ exports[`EuiTabbedContent props size can be small 1`] = ` type="button" > Elasticsearch From 4b124aa2b239bf277bdaa5016ef65c314f42c866 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 12 Jul 2023 09:23:18 -0700 Subject: [PATCH 5/5] changelog --- upcoming_changelogs/6938.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 upcoming_changelogs/6938.md diff --git a/upcoming_changelogs/6938.md b/upcoming_changelogs/6938.md new file mode 100644 index 00000000000..7b98764d9a6 --- /dev/null +++ b/upcoming_changelogs/6938.md @@ -0,0 +1,4 @@ +**Bug fixes** + +- Fixed `EuiTab` not correctly passing selection color state to `prepend` and `append` children +