Reduce EuiPageHeader tabs sizes for Borealis theme

packages/eui-theme-borealis/changelogs/upcoming/9049.md

@@ -0,0 +1 @@
+- Added `tabsSize` theme override to size `m` for `EuiPageHeader`

packages/eui-theme-borealis/src/variables/_components.ts

@@ -21,6 +21,7 @@ import { border_colors } from './colors/_colors_light';
 import { buttons } from './_buttons';
 import { forms } from './_forms';
 import { emptyPrompt } from './_empty_prompt';
+import { pageHeader } from './_page_header';
 
 const component_colors: _EuiThemeComponentColors = {
   badgeBackground: computed(
@@ -372,6 +373,7 @@ export const components: _EuiThemeComponents = {
   buttons,
   forms,
   emptyPrompt,
+  pageHeader,
   LIGHT: component_colors,
   DARK: {
     ...component_colors,

packages/eui-theme-borealis/src/variables/_page_header.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { _EuiThemePageHeader } from '@elastic/eui-theme-common';
+
+export const pageHeader: _EuiThemePageHeader = {
+  tabsSize: 'm', // Reduced from default 'l'
+};

packages/eui-theme-common/changelogs/upcoming/9049.md

@@ -0,0 +1 @@
+- Added `_EuiThemePageHeader` type and `pageHeader` component token

packages/eui-theme-common/src/global_styling/variables/components.ts

@@ -13,6 +13,7 @@ import {
 import { _EuiThemeButton } from './buttons';
 import { _EuiThemeForm, _EuiThemeFormColors } from './forms';
 import { _EuiThemeEmptyPrompt } from './empty_prompt';
+import { _EuiThemePageHeader } from './page_header';
 
 export type _EuiThemeComponentColors = {
   badgeBackground: ColorModeSwitch;
@@ -159,6 +160,7 @@ export type _EuiThemeComponents = {
   buttons: _EuiThemeButton;
   forms: _EuiThemeForm & StrictColorModeSwitch<_EuiThemeFormColors>;
   emptyPrompt: _EuiThemeEmptyPrompt;
+  pageHeader: _EuiThemePageHeader;
   /**
    * internal-only key that holds temporary tokens used while migrating themes
    */

packages/eui-theme-common/src/global_styling/variables/index.ts

@@ -20,6 +20,7 @@ export * from './typography';
 export * from './buttons';
 export * from './forms';
 export * from './empty_prompt';
+export * from './page_header';
 export * from './components';
 export * from './flags';
 export * from './overrides';

packages/eui-theme-common/src/global_styling/variables/page_header.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export type _EuiThemePageHeader = {
+  tabsSize: string;
+};

packages/eui/changelogs/upcoming/9049.md

@@ -0,0 +1 @@
+- Changed `EuiPageHeader` tabs to `m` size for Borealis theme

packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap

@@ -334,7 +334,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
       />
       <div
         aria-label="aria-label"
-        class="euiTabs testClass1 testClass2 emotion-euiTabs-l-euiTestCss"
+        class="euiTabs testClass1 testClass2 emotion-euiTabs-m-euiTestCss"
         data-test-subj="test subject string"
         role="tablist"
       >
@@ -346,7 +346,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 1
           </span>
@@ -359,7 +359,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 2
           </span>

packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap

@@ -293,7 +293,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
       class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
     />
     <div
-      class="euiTabs emotion-euiTabs-l"
+      class="euiTabs emotion-euiTabs-m"
       role="tablist"
     >
       <button
@@ -304,7 +304,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
         type="button"
       >
         <span
-          class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+          class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
         >
           Tab 1
         </span>
@@ -317,7 +317,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
         type="button"
       >
         <span
-          class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+          class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
         >
           Tab 2
         </span>
@@ -552,7 +552,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
         Tab 1
       </h1>
       <div
-        class="euiTabs emotion-euiTabs-l"
+        class="euiTabs emotion-euiTabs-m"
         role="tablist"
       >
         <button
@@ -563,7 +563,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 1
           </span>
@@ -576,7 +576,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 2
           </span>
@@ -604,7 +604,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
       </h1>
       <div
         aria-label="aria-label"
-        class="euiTabs testClass1 testClass2 emotion-euiTabs-l-euiTestCss"
+        class="euiTabs testClass1 testClass2 emotion-euiTabs-m-euiTestCss"
         data-test-subj="test subject string"
         role="tablist"
       >
@@ -616,7 +616,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 1
           </span>
@@ -629,7 +629,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
           type="button"
         >
           <span
-            class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
+            class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
           >
             Tab 2
           </span>

packages/eui/src/components/page/page_header/page_header_content.tsx

@@ -10,7 +10,7 @@ import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../../common';
 import { EuiIcon, EuiIconProps, IconType } from '../../icon';
-import { EuiTab, EuiTabs, EuiTabsProps } from '../../tabs';
+import { EuiTab, EuiTabs, EuiTabsProps, EuiTabsSizes } from '../../tabs';
 import { Props as EuiTabProps } from '../../tabs/tab';
 import { EuiFlexGroup, EuiFlexItem, EuiFlexGroupProps } from '../../flex';
 import { EuiSpacer } from '../../spacer';
@@ -19,6 +19,7 @@ import { EuiText } from '../../text';
 import {
   useIsWithinBreakpoints,
   useEuiMemoizedStyles,
+  useEuiTheme,
 } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiBreadcrumbs, EuiBreadcrumbsProps } from '../../breadcrumbs';
@@ -174,11 +175,17 @@ export const EuiPageHeaderContent: FunctionComponent<
     !!responsive
   );
 
+  const { euiTheme } = useEuiTheme();
+
   const classes = classNames('euiPageHeaderContent', className);
   const pageHeaderStyles = useEuiMemoizedStyles(euiPageHeaderStyles);
   const contentStyles = useEuiMemoizedStyles(euiPageHeaderContentStyles);
   const styles = setStyleForRestrictedPageWidth(restrictWidth, style);
 
+  // Get tabs size from theme, fallback to 'l' for other themes
+  const themeTabsSize = (euiTheme.components.pageHeader?.tabsSize ??
+    'l') as EuiTabsSizes;
+
   let paddingSides: LogicalSides = 'vertical';
   let paddingSize = _paddingSize;
   let bottomBorder = _bottom_border;
@@ -300,7 +307,7 @@ export const EuiPageHeaderContent: FunctionComponent<
       <>
         {pageTitleNode && <EuiSpacer />}
         {screenReaderPageTitle}
-        <EuiTabs {...tabsProps} bottomBorder={false} size="l">
+        <EuiTabs {...tabsProps} bottomBorder={false} size={themeTabsSize}>
           {renderTabs()}
         </EuiTabs>
       </>

packages/eui/src/components/tabs/index.ts

@@ -8,7 +8,7 @@
 
 export type { EuiTabProps } from './tab';
 export { EuiTab } from './tab';
-export type { EuiTabsProps } from './tabs';
+export type { EuiTabsProps, EuiTabsSizes } from './tabs';
 export { EuiTabs } from './tabs';
 export type {
   EuiTabbedContentTab,

packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts

@@ -9,6 +9,7 @@
 import {
   _EuiThemeComponentColors,
   _EuiThemeComponents,
+  _EuiThemePageHeader,
 } from '@elastic/eui-theme-common';
 
 import { computed } from '../../../../services/theme/utils';
@@ -475,10 +476,16 @@ const component_colors: _EuiThemeComponentColors = {
   ),
 };
 
+// Amsterdam theme uses default tab size for pageHeader
+const pageHeader: _EuiThemePageHeader = {
+  tabsSize: 'l',
+};
+
 export const components: _EuiThemeComponents = {
   buttons,
   forms,
   emptyPrompt,
+  pageHeader,
   LIGHT: component_colors,
   DARK: {
     ...component_colors,

packages/eui/src/themes/json/eui_theme_borealis_dark.json

@@ -423,5 +423,10 @@
   "euiColorBorderStrongWarning": "#FACB3D",
   "euiColorBorderStrongRisk": "#FC8544",
   "euiColorBorderStrongDanger": "#F6726A",
-  "euiColorBorderStrongText": "#8E9FBC"
+  "euiColorBorderStrongText": "#8E9FBC",
+  "page": {
+    "pageHeader": {
+      "tabsSize": "m"
+    }
+  }
 }

packages/eui/src/themes/json/eui_theme_borealis_light.json

@@ -423,5 +423,10 @@
   "euiColorBorderStrongWarning": "#966B03",
   "euiColorBorderStrongRisk": "#C24411",
   "euiColorBorderStrongDanger": "#C61E25",
-  "euiColorBorderStrongText": "#5A6D8C"
+  "euiColorBorderStrongText": "#5A6D8C",
+  "page": {
+    "pageHeader": {
+      "tabsSize": "m"
+    }
+  }
 }

packages/website/docs/components/layout/page-header.mdx

@@ -34,49 +34,67 @@ export default () => (
 A set of `tabs` can be displayed inside the page header by passing an array of [EuiTab](../containers/tabs/index.mdx) objects using the `label` key for the tab content. When displaying tabs, the `bottomBorder` prop will be enforced to create separation of the header and content. You'll still need to manage the page content and selected tab in your own instance.
 
 ```tsx interactive
-import React from 'react';
+import React, { useState } from 'react';
 import { EuiPageHeader, EuiButton } from '@elastic/eui';
 
-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>,
-    ]}
-  />
-);
+export default () => {
+  const [selectedTabId, setSelectedTabId] = useState('tab1');
+
+  const tabs = [
+    {
+      label: 'Tab 1',
+      isSelected: selectedTabId === 'tab1',
+      onClick: () => setSelectedTabId('tab1'),
+    },
+    {
+      label: 'Tab 2',
+      isSelected: selectedTabId === 'tab2',
+      onClick: () => setSelectedTabId('tab2'),
+    },
+  ];
+
+  return (
+    <EuiPageHeader
+      pageTitle="Page title"
+      tabs={tabs}
+      rightSideItems={[
+        <EuiButton fill>Add something</EuiButton>,
+        <EuiButton>Do something</EuiButton>,
+      ]}
+    />
+  );
+};
 ```
 
 When supplying `tabs` without a `pageTitle`, **EuiPageHeader** will promote those tabs as if they are the page title. This means that any `description` or `children` will sit **below** the tabs and should used to describe the currently selected tab.
 
 ```tsx interactive
-import React from 'react';
+import React, { useState } from 'react';
 import { EuiPageHeader } from '@elastic/eui';
 
-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."
-  />
-);
+export default () => {
+  const [selectedTabId, setSelectedTabId] = useState('tab1');
+
+  const tabs = [
+    {
+      label: 'Tab 1',
+      isSelected: selectedTabId === 'tab1',
+      onClick: () => setSelectedTabId('tab1'),
+    },
+    {
+      label: 'Tab 2',
+      isSelected: selectedTabId === 'tab2',
+      onClick: () => setSelectedTabId('tab2'),
+    },
+  ];
+
+  return (
+    <EuiPageHeader
+      tabs={tabs}
+      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."
+    />
+  );
+};
 ```
 
 ## Breadcrumbs in the page header