[EuiTabs] Consolidated styling options for Amsterdam and updated usage in EuiPageHeader

CHANGELOG.md

@@ -1,6 +1,18 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `.eui-textNumber` utility class to apply `tnum` font-feature setting ([#5078](https://github.com/elastic/eui/pull/5078))
+- Changed `EuiPageHeader`'s tab implementation to use size `xl` when only content ([#5135](https://github.com/elastic/eui/pull/5135))
+- Added `pageTitleProps` prop to `EuiPageHeader` to pass through props to the `EuiTitle` ([#5135](https://github.com/elastic/eui/pull/5135))
+- Added screen-reader only `<h1>` to `EuiPageHeader` when tabs exist without a `pageTitle` ([#5135](https://github.com/elastic/eui/pull/5135))
+- Added `bottomBorder` prop and `xl` `size` to `EuiTabs` ([#5135](https://github.com/elastic/eui/pull/5135))
+- Added `prepend` and `append` props to `EuiTab` ([#5135](https://github.com/elastic/eui/pull/5135))
+- Refactored styles of `EuiTabs` ([#5135](https://github.com/elastic/eui/pull/5135))
+- Removed Sass variables for `EuiTabs` font size (`$euiTabFontSize, $euiTabFontSizeS, $euiTabFontSizeL`) ([#5135](https://github.com/elastic/eui/pull/5135))
+- Extended all `EuiTabProps` for each `EuiTabbedContentTab` ([#5135](https://github.com/elastic/eui/pull/5135))
+
+**Theme: Amsterdam**
+
+- Deprecated `display` prop of `EuiTabs` in favor of unified styles and `bottomBorder` ([#5135](https://github.com/elastic/eui/pull/5135))
 
 ## [`37.6.2`](https://github.com/elastic/eui/tree/v37.6.2)
 

src-docs/src/components/guide_section/_guide_section.scss

@@ -27,7 +27,7 @@
   }
 }
 
-.guideSectionTabs__tab {
+.guideSectionTabs__tab > * {
   font-weight: $euiFontWeightMedium !important; // sass-lint:disable-line no-important
 }
 

src-docs/src/views/page_header/page_header.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { EuiPageHeader, EuiButton } from '../../../../src/components';
+
+export default () => (
+  <EuiPageHeader
+    pageTitle="Page title"
+    iconType="logoKibana"
+    description="This description should be describing the current page as depicted by the page title. It will never extend beneath the right side content."
+    rightSideItems={[
+      <EuiButton fill>Add something</EuiButton>,
+      <EuiButton>Do something</EuiButton>,
+    ]}
+  />
+);

src-docs/src/views/page_header/page_header_example.js

@@ -16,6 +16,8 @@ const pageHeaderSource = require('!!raw-loader!./page_header');
 
 import PageHeaderTabs from './page_header_tabs';
 const pageHeaderTabsSource = require('!!raw-loader!./page_header_tabs');
+import PageHeaderTabsTitle from './page_header_tabs_title';
+const pageHeaderTabsTitleSource = require('!!raw-loader!./page_header_tabs_title');
 
 import PageHeaderCustom from './page_header_custom';
 import { EuiText } from '../../../../src/components/text';
@@ -76,10 +78,6 @@ export const PageHeaderExample = {
       props: { EuiPageHeader },
       snippet: `<EuiPageHeader
   pageTitle="Page title"
-  tabs={[
-    { label:"Tab 1", isSelected: true },
-    { label:"Tab 2" }
-  ]}
   description="Example of a description."
   rightSideItems={[
     <EuiButton fill>Button 1</EuiButton>,
@@ -89,6 +87,42 @@ export const PageHeaderExample = {
     },
     {
       title: 'Tabs in the page header',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: pageHeaderTabsTitleSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            A set of <EuiCode>tabs</EuiCode> can be displayed inside the page
+            header by passing an array of{' '}
+            <Link to="/navigation/tabs">
+              <strong>EuiTab</strong>
+            </Link>{' '}
+            objects using the <EuiCode>label</EuiCode> key for the tab content.
+            When displaying tabs it is recommended to also apply the{' '}
+            <EuiCode>bottomBorder</EuiCode> prop (on the{' '}
+            <strong>EuiPageHeader</strong> component not through{' '}
+            <EuiCode>tabsProps</EuiCode>) to create separation of the header and
+            content. You&apos;ll still need to manage the page content and
+            selected tab in your own instance.
+          </p>
+        </>
+      ),
+      demo: <PageHeaderTabsTitle />,
+      props: { EuiPageHeader },
+      snippet: `<EuiPageHeader
+  pageTitle="Page title"
+  tabs={[
+    { label:"Tab 1", isSelected: true },
+    { label:"Tab 2" }
+  ]}
+  bottomBorder
+/>`,
+    },
+    {
       source: [
         {
           type: GuideSectionTypes.JS,
@@ -102,7 +136,8 @@ export const PageHeaderExample = {
             <EuiCode>pageTitle</EuiCode>, <strong>EuiPageHeader</strong> will
             promote those tabs as if they are the page title. This means that
             any <EuiCode>description</EuiCode> or <EuiCode>children</EuiCode>{' '}
-            will sit <strong>below</strong> the tabs.
+            will sit <strong>below</strong> the tabs and should be describing
+            the currently selected tab.
           </p>
         </>
       ),
@@ -113,6 +148,7 @@ export const PageHeaderExample = {
     { label:"Tab 1", isSelected: true },
     { label:"Tab 2" }
   ]}
+  bottomBorder
   description="Example of a description."
 />`,
     },

src-docs/src/views/page_header/page_header_tabs.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { EuiPageHeader } from '../../../../src/components';
+
+export default () => (
+  <EuiPageHeader
+    tabs={[
+      {
+        label: 'Tab 1',
+        isSelected: true,
+      },
+      {
+        label: 'Tab 2',
+      },
+    ]}
+    description="This description should be describing the current page as depicted by the current tab. It has grow set to false to ensure a readable line-length."
+    bottomBorder
+  />
+);

src-docs/src/views/page_header/page_header_tabs_title.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { EuiPageHeader, EuiButton } from '../../../../src/components';
+
+export default () => (
+  <EuiPageHeader
+    pageTitle="Page title"
+    tabs={[
+      {
+        label: 'Tab 1',
+        isSelected: true,
+      },
+      {
+        label: 'Tab 2',
+      },
+    ]}
+    rightSideItems={[
+      <EuiButton fill>Add something</EuiButton>,
+      <EuiButton>Do something</EuiButton>,
+    ]}
+    bottomBorder
+  />
+);

src-docs/src/views/page_header/playground.js

@@ -56,6 +56,16 @@ export const pageHeaderConfig = () => {
     type: PropTypes.String,
   };
 
+  propsToUse.alignItems = {
+    ...propsToUse.alignItems,
+    value: 'top',
+  };
+
+  propsToUse.restrictWidth = {
+    ...propsToUse.restrictWidth,
+    type: PropTypes.Number,
+  };
+
   propsToUse.rightSideItems = simulateFunction({
     ...propsToUse.rightSideItems,
     custom: {

src-docs/src/views/tabs/controlled.js → src-docs/src/views/tabs/controlled.tsx

@@ -4,27 +4,27 @@ import {
   EuiButton,
   EuiIcon,
   EuiTabbedContent,
-  EuiTitle,
   EuiText,
   EuiSpacer,
+  EuiTabbedContentProps,
+  EuiTabbedContentTab,
 } from '../../../../src/components';
 
-const tabs = [
+const tabs: EuiTabbedContentProps['tabs'] = [
   {
     id: 'cobalt',
     name: 'Cobalt',
     content: (
       <Fragment>
         <EuiSpacer />
-        <EuiTitle>
-          <h3>Cobalt</h3>
-        </EuiTitle>
         <EuiText>
-          Cobalt is a chemical element with symbol Co and atomic number 27. Like
-          nickel, cobalt is found in the Earth&rsquo;s crust only in chemically
-          combined form, save for small deposits found in alloys of natural
-          meteoric iron. The free element, produced by reductive smelting, is a
-          hard, lustrous, silver-gray metal.
+          <p>
+            Cobalt is a chemical element with symbol Co and atomic number 27.
+            Like nickel, cobalt is found in the Earth&rsquo;s crust only in
+            chemically combined form, save for small deposits found in alloys of
+            natural meteoric iron. The free element, produced by reductive
+            smelting, is a hard, lustrous, silver-gray metal.
+          </p>
         </EuiText>
       </Fragment>
     ),
@@ -35,35 +35,29 @@ const tabs = [
     content: (
       <Fragment>
         <EuiSpacer />
-        <EuiTitle>
-          <h3>Dextrose</h3>
-        </EuiTitle>
         <EuiText>
-          Intravenous sugar solution, also known as dextrose solution, is a
-          mixture of dextrose (glucose) and water. It is used to treat low blood
-          sugar or water loss without electrolyte loss.
+          <p>
+            Intravenous sugar solution, also known as dextrose solution, is a
+            mixture of dextrose (glucose) and water. It is used to treat low
+            blood sugar or water loss without electrolyte loss.
+          </p>
         </EuiText>
       </Fragment>
     ),
   },
   {
     id: 'hydrogen',
-    name: (
-      <span>
-        <EuiIcon type="heatmap" />
-        &nbsp;Hydrogen
-      </span>
-    ),
+    name: 'Hydrogen',
+    prepend: <EuiIcon type="heatmap" />,
     content: (
       <Fragment>
         <EuiSpacer />
-        <EuiTitle>
-          <h3>Hydrogen</h3>
-        </EuiTitle>
         <EuiText>
-          Hydrogen is a chemical element with symbol H and atomic number 1. With
-          a standard atomic weight of 1.008, hydrogen is the lightest element on
-          the periodic table
+          <p>
+            Hydrogen is a chemical element with symbol H and atomic number 1.
+            With a standard atomic weight of 1.008, hydrogen is the lightest
+            element on the periodic table
+          </p>
         </EuiText>
       </Fragment>
     ),
@@ -74,14 +68,13 @@ const tabs = [
     content: (
       <Fragment>
         <EuiSpacer />
-        <EuiTitle>
-          <h3>Monosodium Glutamate</h3>
-        </EuiTitle>
         <EuiText>
-          Monosodium glutamate (MSG, also known as sodium glutamate) is the
-          sodium salt of glutamic acid, one of the most abundant naturally
-          occurring non-essential amino acids. Monosodium glutamate is found
-          naturally in tomatoes, cheese and other foods.
+          <p>
+            Monosodium glutamate (MSG, also known as sodium glutamate) is the
+            sodium salt of glutamic acid, one of the most abundant naturally
+            occurring non-essential amino acids. Monosodium glutamate is found
+            naturally in tomatoes, cheese and other foods.
+          </p>
         </EuiText>
       </Fragment>
     ),
@@ -91,7 +84,7 @@ const tabs = [
 export default () => {
   const [selectedTab, setSelectedTab] = useState(tabs[1]);
 
-  const onTabClick = (selectedTab) => {
+  const onTabClick = (selectedTab: EuiTabbedContentTab) => {
     setSelectedTab(selectedTab);
   };
 

src-docs/src/views/tabs/playground.js

@@ -54,7 +54,8 @@ export const tabsConfig = () => {
   const propsToUse = propUtilityForPlayground(docgenInfo.props);
 
   propsToUse.children = {
-    value: '<EuiTab>Tab 1</EuiTab><EuiTab isSelected>Tab 2</EuiTab>',
+    value:
+      '<EuiTab>Tab 1</EuiTab><EuiTab isSelected>Tab 2</EuiTab><EuiTab disabled>Tab 3</EuiTab><EuiTab href="#">Tab link</EuiTab>',
     type: PropTypes.ReactNode,
     hidden: false,
   };