Removed display prop from EuiTabs/EuiTabbedContent

elastic · May 4, 2022 · f36693b · f36693b · cchaos · May 4, 2022
1 parent e070e27
commit f36693b
Show file tree

Hide file tree

Showing 12 changed files with 10 additions and 183 deletions.
diff --git a/src-docs/src/components/guide_section/guide_section_parts/guide_section_tabs.tsx b/src-docs/src/components/guide_section/guide_section_parts/guide_section_tabs.tsx
@@ -57,7 +57,7 @@ export const GuideSectionExampleTabs: FunctionComponent<GuideSectionExampleTabsP
 
   const renderTabs = () => {
     return (
-      <EuiTabs size="s" display="condensed">
+      <EuiTabs size="s" bottomBorder={false}>
         {tabs.map((tab, index) => {
           const {
             displayName,

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
@@ -306,7 +306,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
       />
       <div
         aria-label="aria-label"
-        class="euiTabs euiTabs--large euiTabs--condensed testClass1 testClass2"
+        class="euiTabs euiTabs--large testClass1 testClass2"
         data-test-subj="test subject string"
         role="tablist"
       >

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
@@ -329,7 +329,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
       class="euiSpacer euiSpacer--l css-p2o3x6-euiSpacer-l"
     />
     <div
-      class="euiTabs euiTabs--large euiTabs--condensed"
+      class="euiTabs euiTabs--large"
       role="tablist"
     >
       <button
@@ -594,7 +594,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
         Tab 1
       </h1>
       <div
-        class="euiTabs euiTabs--xlarge euiTabs--condensed"
+        class="euiTabs euiTabs--xlarge"
         role="tablist"
       >
         <button
@@ -644,7 +644,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
       </h1>
       <div
         aria-label="aria-label"
-        class="euiTabs euiTabs--xlarge euiTabs--condensed testClass1 testClass2"
+        class="euiTabs euiTabs--xlarge testClass1 testClass2"
         data-test-subj="test subject string"
         role="tablist"
       >

diff --git a/src/components/page/page_header/page_header_content.tsx b/src/components/page/page_header/page_header_content.tsx
@@ -68,7 +68,7 @@ export interface EuiPageHeaderContentTabs {
    * Any extras to apply to the outer tabs container.
    * Extends `EuiTabs`
    */
-  tabsProps?: Omit<EuiTabsProps, 'size' | 'expand' | 'display'>;
+  tabsProps?: Omit<EuiTabsProps, 'size' | 'expand'>;
 }
 
 /**
@@ -218,12 +218,7 @@ export const EuiPageHeaderContent: FunctionComponent<EuiPageHeaderContentProps>
       <>
         {pageTitleNode && <EuiSpacer />}
         {screenReaderPageTitle}
-        <EuiTabs
-          {...tabsProps}
-          display="condensed"
-          bottomBorder={false}
-          size={tabsSize}
-        >
+        <EuiTabs {...tabsProps} bottomBorder={false} size={tabsSize}>
           {renderTabs()}
         </EuiTabs>
       </>

diff --git a/src/components/tabs/__snapshots__/tabs.test.tsx.snap b/src/components/tabs/__snapshots__/tabs.test.tsx.snap
@@ -1,23 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiTabs props display condensed is rendered 1`] = `
-<div
-  class="euiTabs euiTabs--condensed"
-  role="tablist"
->
-  children
-</div>
-`;
-
-exports[`EuiTabs props display default is rendered 1`] = `
-<div
-  class="euiTabs euiTabs--bottomBorder"
-  role="tablist"
->
-  children
-</div>
-`;
-
 exports[`EuiTabs props expand is rendered 1`] = `
 <div
   class="euiTabs euiTabs--expand euiTabs--bottomBorder"

diff --git a/src/components/tabs/_tabs.scss b/src/components/tabs/_tabs.scss
@@ -106,46 +106,3 @@
 .euiTab__append {
   margin-left: $euiSizeS;
 }
-
-// Condensed Tabs Group Modifier
-
-.euiTabs--condensed {
-  .euiTab {
-    padding: $euiSizeS $euiSizeXS;
-
-    .euiTab__content {
-      @include euiFontSize;
-      font-weight: $euiFontWeightSemiBold;
-    }
-
-    + .euiTab {
-      margin-left: $euiSize;
-    }
-  }
-
-  &.euiTabs--small .euiTab {
-    padding: ($euiSizeM / 2) $euiSizeXS;
-
-    .euiTab__content {
-      @include euiFontSizeS;
-    }
-  }
-
-  &.euiTabs--large .euiTab {
-    + .euiTab {
-      margin-left: $euiSizeL;
-    }
-  }
-
-  &.euiTabs--xlarge .euiTab {
-    padding: $euiSizeM $euiSizeXS;
-
-    .euiTab__content {
-      @include euiFontSizeL;
-    }
-
-    + .euiTab {
-      margin-left: $euiSizeL;
-    }
-  }
-}
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
@@ -361,66 +361,6 @@ exports[`EuiTabbedContent props autoFocus selected is rendered 1`] = `
 </div>
 `;
 
-exports[`EuiTabbedContent props display can be condensed 1`] = `
-<div>
-  <div
-    class="euiTabs euiTabs--condensed"
-    role="tablist"
-  >
-    <button
-      aria-controls="generated-id"
-      aria-selected="true"
-      class="euiTab euiTab-isSelected"
-      id="es"
-      role="tab"
-      type="button"
-    >
-      <span
-        class="euiTab__content"
-      >
-        Elasticsearch
-      </span>
-    </button>
-    <button
-      aria-controls="generated-id"
-      aria-selected="false"
-      class="euiTab kibanaTab"
-      data-test-subj="kibanaTab"
-      id="kibana"
-      role="tab"
-      type="button"
-    >
-      <span
-        class="euiTab__prepend"
-      >
-        prepend
-      </span>
-      <span
-        class="euiTab__content"
-      >
-        <strong>
-          Kibana
-        </strong>
-      </span>
-      <span
-        class="euiTab__append"
-      >
-        append
-      </span>
-    </button>
-  </div>
-  <div
-    aria-labelledby="es"
-    id="generated-id"
-    role="tabpanel"
-  >
-    <p>
-      Elasticsearch content
-    </p>
-  </div>
-</div>
-`;
-
 exports[`EuiTabbedContent props initialSelectedTab renders a selected tab 1`] = `
 <div>
   <div

diff --git a/src/components/tabs/tabbed_content/tabbed_content.test.tsx b/src/components/tabs/tabbed_content/tabbed_content.test.tsx
@@ -76,15 +76,6 @@ describe('EuiTabbedContent', () => {
       });
     });
 
-    describe('display', () => {
-      test('can be condensed', () => {
-        const component = render(
-          <EuiTabbedContent display="condensed" tabs={tabs} />
-        );
-        expect(component).toMatchSnapshot();
-      });
-    });
-
     describe('autoFocus', () => {
       AUTOFOCUS.forEach((focusType) => {
         test(`${focusType} is rendered`, () => {

diff --git a/src/components/tabs/tabbed_content/tabbed_content.tsx b/src/components/tabs/tabbed_content/tabbed_content.tsx
@@ -10,7 +10,7 @@ import React, { Component, createRef, HTMLAttributes, ReactNode } from 'react';
 
 import { htmlIdGenerator } from '../../../services';
 
-import { EuiTabs, EuiTabsDisplaySizes, EuiTabsSizes } from '../tabs';
+import { EuiTabs, EuiTabsSizes } from '../tabs';
 import { EuiTab, EuiTabProps } from '../tab';
 import { CommonProps } from '../../common';
 
@@ -38,10 +38,6 @@ export type EuiTabbedContentProps = CommonProps &
      * overlay content like popovers or flyouts.
      */
     autoFocus?: 'initial' | 'selected';
-    /**
-     * Choose `default` or alternative `condensed` display styles
-     */
-    display?: EuiTabsDisplaySizes;
     /**
      * Evenly stretches each tab to fill the horizontal space
      */
@@ -163,7 +159,6 @@ export class EuiTabbedContent extends Component<
   render() {
     const {
       className,
-      display,
       expand,
       initialSelectedTab,
       onTabClick,
@@ -188,7 +183,6 @@ export class EuiTabbedContent extends Component<
         <EuiTabs
           ref={this.tabsRef}
           expand={expand}
-          display={display}
           size={size}
           onFocus={this.initializeFocus}
         >

diff --git a/src/components/tabs/tabs.test.tsx b/src/components/tabs/tabs.test.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
-import { EuiTabs, SIZES, DISPLAYS } from './tabs';
+import { EuiTabs, SIZES } from './tabs';
 
 describe('EuiTabs', () => {
   test('renders', () => {
@@ -30,18 +30,6 @@ describe('EuiTabs', () => {
       });
     });
 
-    describe('display', () => {
-      DISPLAYS.forEach((display) => {
-        it(`${display} is rendered`, () => {
-          const component = render(
-            <EuiTabs display={display}>children</EuiTabs>
-          );
-
-          expect(component).toMatchSnapshot();
-        });
-      });
-    });
-
     describe('expand', () => {
       test('is rendered', () => {
         const component = render(<EuiTabs expand>children</EuiTabs>);

diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
@@ -15,15 +15,6 @@ import React, {
 import classNames from 'classnames';
 import { CommonProps, keysOf } from '../common';
 
-const displayToClassNameMap = {
-  condensed: 'euiTabs--condensed',
-  default: null,
-};
-
-export const DISPLAYS = keysOf(displayToClassNameMap);
-
-export type EuiTabsDisplaySizes = keyof typeof displayToClassNameMap;
-
 const sizeToClassNameMap = {
   s: 'euiTabs--small',
   m: null,
@@ -41,11 +32,6 @@ export type EuiTabsProps = CommonProps &
      * ReactNode to render as this component's content
      */
     children?: ReactNode;
-    /**
-     * **DEPRECATED IN AMSTERDAM**
-     * Choose `default` or alternative `condensed` display styles.
-     */
-    display?: EuiTabsDisplaySizes;
     /**
      * Evenly stretches each tab to fill the
      * horizontal space
@@ -69,23 +55,16 @@ export const EuiTabs = forwardRef<EuiTabRef, PropsWithChildren<EuiTabsProps>>(
     {
       children,
       className,
-      display = 'default',
       bottomBorder = true,
       expand = false,
       size = 'm',
       ...rest
     }: PropsWithChildren<EuiTabsProps>,
     ref
   ) => {
-    /**
-     * Temporary force of bottom border based on `display`
-     */
-    bottomBorder = display === 'condensed' ? false : bottomBorder;
-
     const classes = classNames(
       'euiTabs',
       sizeToClassNameMap[size],
-      displayToClassNameMap[display],
       {
         'euiTabs--expand': expand,
         'euiTabs--bottomBorder': bottomBorder,

diff --git a/upcoming_changelogs/5868.md b/upcoming_changelogs/5868.md
@@ -6,3 +6,4 @@
 - Removed `noDivider` prop from `EuiFilterButton` - use `withNext` prop instead
 - Removed `isSelected` and `isComplete` props from `EuiHorizontalStep` - use `status` prop instead
 - Removed `isHollow` prop from `EuiStep` - this visual appearance is no longer used in Amsterdam
+- Removed condensed `display` prop from `EuiTabs` & `EuiTabbedContent` - this visual appearance is no longer used in Amsterdam