[EuiTabs] More Emotion cleanup (#6336)

* Remove mounted snapshot * Emotion cleanup - remove unnecessary `calc`s * CSS cleanup - remove incorrect text color and unnecessary extra hover styles - text color is set by `euiTitle` and should not be disabled by default - disabled already inherits hover disabling from the default * CSS - misc logical property conversion - default shorthands sadly do not account for logical/direction changes * Flatten/fix disabled selected selector * Revert removed `__append/prepend` classNames - we're generally not removing `__` classNames in our conversion to give consumers something to hook onto * DRY out tab sizes types/consts + fix type name to match type name pre-Emotion conversion * Add missing `shouldRenderCustomStyles` tests to sub components * [misc] rename Emotion vars to match other components/conversions * Remove unnecessary padding sizes on `euiTab` Per old Amsterdam overrides, *all* padding for all sizes should be the same (0 xs) * changelog
elastic · Nov 7, 2022 · 83d7a6d · 83d7a6d
1 parent 849243f
commit 83d7a6d
Show file tree

Hide file tree

Showing 13 changed files with 201 additions and 1,751 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
@@ -330,7 +330,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           >
             <button
               aria-selected="true"
-              class="euiTab euiTab-isSelected emotion-euiTab-selected-l"
+              class="euiTab euiTab-isSelected emotion-euiTab-selected"
               role="tab"
               type="button"
             >
@@ -342,7 +342,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
             </button>
             <button
               aria-selected="false"
-              class="euiTab emotion-euiTab-l"
+              class="euiTab emotion-euiTab"
               role="tab"
               type="button"
             >

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
@@ -290,7 +290,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
         >
           <button
             aria-selected="true"
-            class="euiTab euiTab-isSelected emotion-euiTab-selected-l"
+            class="euiTab euiTab-isSelected emotion-euiTab-selected"
             role="tab"
             type="button"
           >
@@ -302,7 +302,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
           </button>
           <button
             aria-selected="false"
-            class="euiTab emotion-euiTab-l"
+            class="euiTab emotion-euiTab"
             role="tab"
             type="button"
           >
@@ -579,7 +579,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
       >
         <button
           aria-selected="true"
-          class="euiTab euiTab-isSelected emotion-euiTab-selected-xl"
+          class="euiTab euiTab-isSelected emotion-euiTab-selected"
           role="tab"
           type="button"
         >
@@ -591,7 +591,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="euiTab emotion-euiTab-xl"
+          class="euiTab emotion-euiTab"
           role="tab"
           type="button"
         >
@@ -630,7 +630,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
       >
         <button
           aria-selected="true"
-          class="euiTab euiTab-isSelected emotion-euiTab-selected-xl"
+          class="euiTab euiTab-isSelected emotion-euiTab-selected"
           role="tab"
           type="button"
         >
@@ -642,7 +642,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
         </button>
         <button
           aria-selected="false"
-          class="euiTab emotion-euiTab-xl"
+          class="euiTab emotion-euiTab"
           role="tab"
           type="button"
         >

diff --git a/src/components/tabs/__snapshots__/tab.test.tsx.snap b/src/components/tabs/__snapshots__/tab.test.tsx.snap
@@ -7,7 +7,9 @@ exports[`EuiTab props append is rendered 1`] = `
   role="tab"
   type="button"
 >
-  <span>
+  <span
+    class="euiTab__prepend"
+  >
     Append
   </span>
   <span
@@ -18,6 +20,22 @@ exports[`EuiTab props append is rendered 1`] = `
 </button>
 `;
 
+exports[`EuiTab props disabled and selected 1`] = `
+<button
+  aria-selected="true"
+  class="euiTab euiTab-isSelected emotion-euiTab-disabled-selected"
+  disabled=""
+  role="tab"
+  type="button"
+>
+  <span
+    class="euiTab__content emotion-euiTab__content-selected-disabled"
+  >
+    Click Me
+  </span>
+</button>
+`;
+
 exports[`EuiTab props disabled is rendered 1`] = `
 <button
   aria-selected="false"
@@ -91,7 +109,9 @@ exports[`EuiTab props prepend is rendered 1`] = `
   role="tab"
   type="button"
 >
-  <span>
+  <span
+    class="euiTab__prepend"
+  >
     Prepend
   </span>
   <span

diff --git a/src/components/tabs/tab.styles.ts b/src/components/tabs/tab.styles.ts
@@ -7,6 +7,7 @@
  */
 
 import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 import { euiTitle } from '../title/title.styles';
 
@@ -19,44 +20,32 @@ export const euiTabStyles = ({ euiTheme }: UseEuiTheme) => {
       align-items: center;
       font-weight: ${euiTheme.font.weight.semiBold};
       gap: ${euiTheme.size.s};
+      ${logicalCSS('padding-vertical', 0)}
+      ${logicalCSS('padding-horizontal', euiTheme.size.xs)}
 
       &:focus {
         background-color: transparent;
         outline-offset: -${euiTheme.focus.width};
       }
     `,
-    // sizes
-    s: css`
-      padding: 0 ${euiTheme.size.xs};
-    `,
-    m: css`
-      padding: 0 ${euiTheme.size.xs};
-    `,
-    l: css`
-      padding: 0 ${euiTheme.size.xs};
-    `,
-    xl: css`
-      padding: ${euiTheme.size.s} ${euiTheme.size.xs};
-    `,
     // variations
     expanded: css`
       flex-basis: 0%;
       flex-grow: 1;
       justify-content: center;
     `,
     selected: css`
-      box-shadow: inset 0 calc(${euiTheme.border.width.thick} * -1) 0
-        ${euiTheme.colors.primary};
-    `,
-    disabled: css`
-      cursor: not-allowed;
-      color: ${euiTheme.colors.disabledText};
-
-      .euiTab.euiTab__isSelected {
-        box-shadow: inset 0 calc(${euiTheme.border.width.thick} * -1) 0
-          ${euiTheme.colors.disabledText};
-      }
+      box-shadow: inset 0 -${euiTheme.border.width.thick} 0 ${euiTheme.colors.primary};
     `,
+    disabled: {
+      disabled: css`
+        cursor: not-allowed;
+        color: ${euiTheme.colors.disabledText};
+      `,
+      selected: css`
+        box-shadow: inset 0 -${euiTheme.border.width.thick} 0 ${euiTheme.colors.disabledText};
+      `,
+    },
   };
 };
 
@@ -65,8 +54,6 @@ export const euiTabContentStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     euiTab__content: css`
-      color: ${euiTheme.colors.disabledText};
-
       &:hover {
         text-decoration: none;
       }
@@ -82,22 +69,24 @@ export const euiTabContentStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     l: css`
       ${euiTitle(euiThemeContext, 'xs')};
-      line-height: calc(${euiTheme.size.xl} + ${euiTheme.size.s});
+      line-height: ${mathWithUnits(
+        [euiTheme.size.xl, euiTheme.size.s],
+        (x, y) => x + y
+      )};
     `,
     xl: css`
       ${euiTitle(euiThemeContext, 's')};
-      line-height: calc(${euiTheme.size.xxxl} + ${euiTheme.size.s});
+      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};
-
-      &:hover {
-        text-decoration: none;
-      }
     `,
   };
 };
diff --git a/src/components/tabs/tab.test.tsx b/src/components/tabs/tab.test.tsx
@@ -8,11 +8,14 @@
 
 import React from 'react';
 import { render, shallow } from 'enzyme';
+import { shouldRenderCustomStyles } from '../../test/internal';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiTab } from './tab';
 
 describe('EuiTab', () => {
+  shouldRenderCustomStyles(<EuiTab onClick={() => {}}>children</EuiTab>);
+
   describe('props', () => {
     describe('onClick', () => {
       test('renders button', () => {
@@ -57,6 +60,16 @@ describe('EuiTab', () => {
       expect(render(component)).toMatchSnapshot();
     });
 
+    test('disabled and selected', () => {
+      const component = render(
+        <EuiTab disabled isSelected>
+          Click Me
+        </EuiTab>
+      );
+
+      expect(component).toMatchSnapshot();
+    });
+
     test('prepend is rendered', () => {
       const component = (
         <EuiTab onClick={() => {}} prepend="Prepend">

diff --git a/src/components/tabs/tab.tsx b/src/components/tabs/tab.tsx
@@ -19,7 +19,7 @@ import { getSecureRelForTarget, useEuiTheme } from '../../services';
 import { validateHref } from '../../services/security/href_validator';
 
 import { euiTabStyles, euiTabContentStyles } from './tab.styles';
-import { EuiTabsProps, EuiTabSizes } from './tabs';
+import { EuiTabsProps, EuiTabsSizes } from './tabs';
 
 export interface EuiTabProps extends CommonProps {
   isSelected?: boolean;
@@ -43,7 +43,7 @@ export interface EuiTabProps extends CommonProps {
    * Sizes affect both font size and overall size.
    * Only use the `xl` size when displayed as page titles.
    */
-  size?: EuiTabSizes;
+  size?: EuiTabsSizes;
 }
 
 type EuiTabPropsForAnchor = EuiTabProps &
@@ -86,9 +86,8 @@ export const EuiTab: FunctionComponent<Props> = ({
   const cssTabStyles = [
     tabStyles.euiTab,
     expand && tabStyles.expanded,
-    isSelected && tabStyles.selected,
-    disabled && tabStyles.disabled,
-    size && tabStyles[size],
+    disabled && tabStyles.disabled.disabled,
+    isSelected && (disabled ? tabStyles.disabled.selected : tabStyles.selected),
   ];
 
   const tabContentStyles = euiTabContentStyles(euiTheme);
@@ -99,12 +98,13 @@ export const EuiTab: FunctionComponent<Props> = ({
     disabled && tabContentStyles.disabled,
   ];
 
-  const prependNode = prepend && <span>{prepend}</span>;
-  const appendNode = append && <span>{append}</span>;
+  const prependNode = prepend && (
+    <span className="euiTab__prepend">{prepend}</span>
+  );
+  const appendNode = append && <span className="euiTab__append">{append}</span>;
 
   //  <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
   //  this is a button and piggyback off its disabled styles.
-
   if (href && !disabled) {
     const secureRel = getSecureRelForTarget({ href, target, rel });