Reduce `EuiPageHeader` tabs sizes for Borealis theme #9049

ryankeairns · 2025-09-22T20:36:30Z

Summary

Part of a series of adjustments to realize the Borealis vision and move away from the hallmarks of Amsterdam.

Why are we making this change?

Stylistic decisions for Amsterdam - like large, heavy titles and tabs - were baked into the components. This PR is one of several that bring additional theme override capabilities.

Screenshots

Before and after from docs examples; reduce tabs from 16 to 14

Looking ahead, this screenshot include forthcoming changes to also reduce title and text

Impact to users

Improved visual hierarchy.
Adjacent to undoing large, 'shouty' titles

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

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

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

weronikaolejniczak · 2025-09-23T18:22:30Z

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

    !!responsive
  );

+  const euiTheme = useEuiTheme();


I think we can restructure it here, right?

Suggested change

const euiTheme = useEuiTheme();

const { euiTheme } = useEuiTheme();

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

ryankeairns · 2025-09-24T00:28:14Z

I see I have conflicts on these visual regression updates... is that typical?
I have a bunch on #9055 , too.

ryankeairns · 2025-09-24T19:09:04Z

Moving back to Draft; refactoring to use theme component tokens which proved to be much simpler in #9057

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

weronikaolejniczak · 2025-09-25T09:45:38Z

I see I have conflicts on these visual regression updates... is that typical?

That may be the case if the VRT images have been updated on main. In such a situation, I'd accept the incoming version and re-run yarn test-visual-regression update.

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

ryankeairns · 2025-09-25T17:10:42Z

Ok, addressed feedback, ready again!
Thanks @weronikaolejniczak

weronikaolejniczak

LGTM! 🟢 Thank you for the contribution and for the patience, @ryankeairns 🙏🏻

- Add _EuiThemePage interface and page theme extension to Borealis theme - Set pageHeader.tabsSize to 'm' for Borealis (reduced from default 'l') - Update EuiPageHeaderContent to use theme-based tabs size with fallback - Maintain backward compatibility - Amsterdam continues to use default 'l' - Update static JSON theme files to include page configuration - Fix interactive examples in docs to make tabs clickable - Update test snapshots to reflect new theming behavior This allows themes to customize page header tab sizes while maintaining sensible defaults for themes that don't specify custom values.

Update snapshots to reflect new theming behavior for tabs size.

- Updated EuiPageHeader and EuiPageHeaderContent baselines to reflect new Borealis theme tab size 'm' - Updated EuiPageTemplate baselines that use EuiPageHeader - Updated other component baselines from visual regression test run

- Add _EuiThemePageHeader type to eui-theme-common - Create pageHeader component tokens in Borealis theme (tabsSize: 'm') - Add default pageHeader tokens in Amsterdam theme (tabsSize: 'l') - Update EuiPageHeaderContent to use euiTheme.components.pageHeader.tabsSize - Export EuiTabsSizes type for proper TypeScript support - Update THEMING_TEMPLATE.md with real-world implementation lessons - Follow component tokens pattern for type safety and consistency Resolves circular dependency issues through proper type export chain and correct build order (eui-theme-common → eui-theme-borealis → eui)

- Remove type assertion and let TypeScript infer EuiTabsSizes from theme - Remove unused EuiTabsSizes import from page header component - Add proper type import and annotation to Amsterdam theme components

- Use explicit type annotation instead of type assertion - Fixes TypeScript error: Type 'string' is not assignable to type 'EuiTabsSizes' - Apply Prettier formatting fixes

elasticmachine · 2025-09-26T15:03:35Z

💚 Build Succeeded

History

💚 Build #1375 succeeded b8f2911
💚 Build #1374 succeeded b8f2911
💚 Build #1357 succeeded 0032a35
💚 Build #1356 succeeded 0032a35
💚 Build #1355 succeeded c26bb51
💚 Build #1354 succeeded c26bb51

elasticmachine · 2025-09-26T15:23:00Z

💚 Build Succeeded

Buildkite Build
Commit: 6661a33

History

💚 Build #4811 succeeded b8f2911
💚 Build #4801 succeeded 0032a35
💚 Build #4800 succeeded c26bb51
💚 Build #4772 succeeded 0e52af8

mgadewoll · 2025-09-29T09:56:35Z

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

  "euiColorBorderStrongDanger": "#C61E25",
-  "euiColorBorderStrongText": "#5A6D8C"
+  "euiColorBorderStrongText": "#5A6D8C",
+  "page": {


💭 I'm not sure that this is really that useful on the JSON export (it's not a value to use as a token).

That being said, if we add these for Borealis we should add them for Amsterdam as well (example file), otherwise switching themes would break if these are used somewhere.

Also, I realize, we still have these files duplicated in packages/eui/src/themes/json and packages/eui-theme-borealis/src.

Originally it was duplicated when introducing Borealis as there were issues loading the file from the theme package. But that is not the case anymore and Kibana was updated (file) to use the eui-theme-borealis file.
That means this change is not actually available in Kibana as the packages/eui-theme-borealis/src files were not updated.

This reverts commit 7f2df0d.

ryankeairns added the visual refresh label Sep 22, 2025

ryankeairns changed the title ~~Reduce [EuiPageHeader] tabs sizes for Borealis theme~~ Reduce EuiPageHeader tabs sizes for Borealis theme Sep 22, 2025

ryankeairns marked this pull request as ready for review September 22, 2025 21:24

ryankeairns requested a review from a team as a code owner September 22, 2025 21:24

weronikaolejniczak self-requested a review September 23, 2025 09:20

weronikaolejniczak reviewed Sep 23, 2025

View reviewed changes

packages/eui-theme-borealis/src/variables/_page.ts Outdated Show resolved Hide resolved

weronikaolejniczak reviewed Sep 23, 2025

View reviewed changes

packages/eui/src/components/page/page_header/page_header_content.tsx Outdated Show resolved Hide resolved

weronikaolejniczak reviewed Sep 23, 2025

View reviewed changes

packages/eui-theme-borealis/src/variables/_page_header.ts Show resolved Hide resolved

ryankeairns marked this pull request as draft September 24, 2025 19:08

ryankeairns force-pushed the rk/page-header-tab-size branch from c26bb51 to 0032a35 Compare September 24, 2025 21:45

ryankeairns marked this pull request as ready for review September 24, 2025 21:46

weronikaolejniczak self-requested a review September 25, 2025 06:30

weronikaolejniczak reviewed Sep 25, 2025

View reviewed changes

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

weronikaolejniczak reviewed Sep 25, 2025

View reviewed changes

packages/eui/src/components/page/page_header/page_header_content.tsx Outdated Show resolved Hide resolved

ryankeairns requested a review from weronikaolejniczak September 25, 2025 17:09

weronikaolejniczak approved these changes Sep 26, 2025

View reviewed changes

ryankeairns added 9 commits September 26, 2025 07:39

test: update page header test snapshots

e0ed37c

Update snapshots to reflect new theming behavior for tabs size.

Add changelogs

335af17

Address PR feedback: improve type safety and update theming template

448eeb3

- Remove type assertion and let TypeScript infer EuiTabsSizes from theme - Remove unused EuiTabsSizes import from page header component - Add proper type import and annotation to Amsterdam theme components

Adding this back, alternatives produced type errors

16b18c8

Fix TypeScript type annotation for pageHeader tabsSize

afd957d

- Use explicit type annotation instead of type assertion - Fixes TypeScript error: Type 'string' is not assignable to type 'EuiTabsSizes' - Apply Prettier formatting fixes

Add eui-theme-common changelog

6661a33

ryankeairns force-pushed the rk/page-header-tab-size branch from b8f2911 to 6661a33 Compare September 26, 2025 14:45

ryankeairns merged commit 7f2df0d into main Sep 26, 2025
5 checks passed

ryankeairns deleted the rk/page-header-tab-size branch September 26, 2025 15:24

mgadewoll reviewed Sep 29, 2025

View reviewed changes

mgadewoll added a commit that referenced this pull request Sep 30, 2025

Revert "Reduce EuiPageHeader tabs sizes for Borealis theme (#9049)"

ae1782a

This reverts commit 7f2df0d.

mgadewoll mentioned this pull request Sep 30, 2025

Revert "Reduce EuiPageHeader tabs sizes for Borealis theme" and "Add EuiEmptyPrompt theme component tokens for spacing overrides" #9069

Merged

tsullivan pushed a commit that referenced this pull request Oct 15, 2025

Reduce EuiPageHeader tabs sizes for Borealis theme (#9049)

86a6115

	const euiTheme = useEuiTheme();
	const { euiTheme } = useEuiTheme();

Reduce EuiPageHeader tabs sizes for Borealis theme #9049

Reduce EuiPageHeader tabs sizes for Borealis theme #9049

Uh oh!

Conversation

ryankeairns commented Sep 22, 2025

Summary

Why are we making this change?

Screenshots

Impact to users

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ryankeairns commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ryankeairns commented Sep 24, 2025

Uh oh!

Uh oh!

weronikaolejniczak commented Sep 25, 2025

Uh oh!

Uh oh!

ryankeairns commented Sep 25, 2025

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Sep 26, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Sep 26, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

mgadewoll Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

mgadewoll Sep 29, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Reduce `EuiPageHeader` tabs sizes for Borealis theme #9049

Reduce `EuiPageHeader` tabs sizes for Borealis theme #9049

ryankeairns commented Sep 24, 2025 •

edited

Loading