[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
elastic · Jul 12, 2023 · 5adce56 · 5adce56
1 parent edc7062
commit 5adce56
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 35 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
@@ -337,7 +337,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
               type="button"
             >
               <span
-                class="euiTab__content emotion-euiTab__content-l-selected"
+                class="euiTab__content emotion-euiTab__content-l"
               >
                 Tab 1
               </span>

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
@@ -297,7 +297,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
             type="button"
           >
             <span
-              class="euiTab__content emotion-euiTab__content-l-selected"
+              class="euiTab__content emotion-euiTab__content-l"
             >
               Tab 1
             </span>
@@ -586,7 +586,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content emotion-euiTab__content-xl-selected"
+            class="euiTab__content emotion-euiTab__content-xl"
           >
             Tab 1
           </span>
@@ -637,7 +637,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content emotion-euiTab__content-xl-selected"
+            class="euiTab__content emotion-euiTab__content-xl"
           >
             Tab 1
           </span>

diff --git 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"
 >
   <span
-    class="euiTab__content emotion-euiTab__content-m-selected-disabled"
+    class="euiTab__content emotion-euiTab__content-m"
   >
     Click Me
   </span>
@@ -45,7 +45,7 @@ exports[`EuiTab props disabled is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiTab__content emotion-euiTab__content-m-disabled"
+    class="euiTab__content emotion-euiTab__content-m"
   >
     Click Me
   </span>
@@ -78,7 +78,7 @@ exports[`EuiTab props isSelected is rendered 1`] = `
   type="button"
 >
   <span
-    class="euiTab__content emotion-euiTab__content-m-selected"
+    class="euiTab__content emotion-euiTab__content-m"
   >
     children
   </span>

diff --git 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
@@ -84,8 +84,6 @@ export const EuiTab: FunctionComponent<Props> = ({
   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
@@ -15,7 +15,7 @@ exports[`EuiTabbedContent behavior when selected tab state isn't controlled by t
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m-selected"
+        class="euiTab__content emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -95,7 +95,7 @@ exports[`EuiTabbedContent behavior when uncontrolled, the selected tab should up
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-m-selected"
+        class="euiTab__content emotion-euiTab__content-m"
       >
         <strong>
           Kibana
@@ -139,7 +139,7 @@ exports[`EuiTabbedContent is rendered with required props and tabs 1`] = `
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m-selected"
+        class="euiTab__content emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -199,7 +199,7 @@ exports[`EuiTabbedContent props autoFocus initial is rendered 1`] = `
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m-selected"
+        class="euiTab__content emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -259,7 +259,7 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-m-selected"
+        class="euiTab__content emotion-euiTab__content-m"
       >
         Elasticsearch
       </span>
@@ -339,7 +339,7 @@ exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] =
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-m-selected"
+        class="euiTab__content emotion-euiTab__content-m"
       >
         <strong>
           Kibana
@@ -399,7 +399,7 @@ exports[`EuiTabbedContent props selectedTab renders a selected tab 1`] = `
         prepend
       </span>
       <span
-        class="euiTab__content emotion-euiTab__content-m-selected"
+        class="euiTab__content emotion-euiTab__content-m"
       >
         <strong>
           Kibana
@@ -439,7 +439,7 @@ exports[`EuiTabbedContent props size can be small 1`] = `
       type="button"
     >
       <span
-        class="euiTab__content emotion-euiTab__content-s-selected"
+        class="euiTab__content emotion-euiTab__content-s"
       >
         Elasticsearch
       </span>

diff --git a/upcoming_changelogs/6938.md b/upcoming_changelogs/6938.md
@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed `EuiTab` not correctly passing selection color state to `prepend` and `append` children
+