From 5adce56445a41c87d3474e6757221a7759d6ebbc Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Wed, 12 Jul 2023 14:15:39 -0700
Subject: [PATCH] [EuiTab] Fix prepend/append elements not inheriting selected
colors + misc CSS cleanup (#6938)
* Fix EuiTab icons not inheriting the selected color
* 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
* More CSS cleanup
- focus and hover styles aren't necessary or doing anything - remove them
* Update snapshots
* changelog
---
.../__snapshots__/page_header.test.tsx.snap | 2 +-
.../page_header_content.test.tsx.snap | 6 ++--
.../tabs/__snapshots__/tab.test.tsx.snap | 6 ++--
src/components/tabs/tab.styles.ts | 29 +++++++------------
src/components/tabs/tab.tsx | 2 --
.../tabbed_content.test.tsx.snap | 16 +++++-----
upcoming_changelogs/6938.md | 4 +++
7 files changed, 30 insertions(+), 35 deletions(-)
create mode 100644 upcoming_changelogs/6938.md
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/tab.styles.ts b/src/components/tabs/tab.styles.ts
index 999aa311dfe..c7b01efddf1 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,13 +17,15 @@ 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};
}
`,
@@ -36,6 +37,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`
@@ -54,39 +56,30 @@ export const euiTabContentStyles = (euiThemeContext: UseEuiTheme) => {
return {
euiTab__content: css`
- &:hover {
- text-decoration: none;
- }
+ font-weight: ${euiTheme.font.weight[euiTheme.font.title.weight]};
`,
// 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 && (
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
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
+