[Visual Refresh] Add Borealis theme by mgadewoll · Pull Request #8386 · elastic/eui

mgadewoll · 2025-03-03T16:13:56Z

Summary

Important

The changes in this PR have already been reviewed as standalone PRs.
This PR merges all changes combined to main

Included PRs

Additional changes

updates VRT reference images based on latest changes introduced in main (commit)
fixes a missing dependency issue (introduced in this PR) that resulted in EUI+ not being built (failing build) (commit)
adds changelog [#8386]

QA

ℹ️ Most code changes have already been reviewed separately in the respective PRs mentioned above.
Review only the additional changes.

ci passes
smoke test the EUI docs if anything looks broken or off
review the changelog if the entries make sense or if anything is missing (since the changelog was composed manually from relevant changes = meaning actual impacting changes going to main)

…ui-theme-common`

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

…8212)

- updates based on rebased changes from main

tkajtoch

The changes look and work as expected. Code changes not reviewed in earlier PRs look good. LGTM 🚢

mgadewoll · 2025-03-04T08:56:16Z

ℹ️ I added an additional commit that fixes an issue with missing sass styles in the EUI docs on colorMode toggle when no theme localStorage item was set.

Edit: ⛔ Somehow it's still not working as expected for the PR deployment on reload 🤔 It works fine building it locally, but in the PR staging the theme value is a different one (somehow it looks like an old version)
✅ The issue is caused by something overriding the theme localStorage item, but it's not entirely clear what's overriding it. We opted to change the item key instead, which solves the issue.

before

kibanamachine · 2025-03-04T13:37:41Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_8386/
Storybook: https://eui.elastic.co/pr_8386/storybook
New docs: https://eui.elastic.co/pr_8386/new-docs

elasticmachine · 2025-03-04T13:38:37Z

💚 Build Succeeded

Buildkite Build
Commit: f8afd4d

History

💚 Build #3576 succeeded 315f705
💚 Build #3575 succeeded 2a0a776
💚 Build #3574 succeeded 5ba574d
💚 Build #3572 succeeded 5ba574d
💚 Build #3571 succeeded d90a419
💔 Build #3570 failed 3bce120

cc @mgadewoll

github-actions · 2025-03-04T13:42:29Z

This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:

If this PR contains prop/API changes:
- Search through Kibana for <EuiComponent usages (example search)
- In the PR description or in a PR comment, include a count or list with the number of component usages in Kibana that will need to be updated (if that amount is "none", include that information as well)
If this PR contains CSS changes:
- Search through Kibana for the changed EUI selectors, e.g. .euiComponent (example search)
- In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well)
🔍 Tip: When searching through Kibana, consider excluding **/target, **/*.snap, **/*.storyshot files to reduce noise and only look at source code usages
⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:
- Using a pre-release release candidate to test Kibana CI ahead of time
- Using kibana-a-la-carte for manual QA, and to give other Kibana teams a staging server to quickly test against

Log | Bot Usage

mgadewoll · 2025-03-04T13:44:54Z

This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:

If this PR contains prop/API changes:

Search through Kibana for <EuiComponent usages (example search)

In the PR description or in a PR comment, include a count or list with the number of component usages in Kibana that will need to be updated (if that amount is "none", include that information as well)

If this PR contains CSS changes:

Search through Kibana for the changed EUI selectors, e.g. .euiComponent (example search)

In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well)

🔍 Tip: When searching through Kibana, consider excluding **/target, **/*.snap, **/*.storyshot files to reduce noise and only look at source code usages

⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:

Using a pre-release release candidate to test Kibana CI ahead of time

Using kibana-a-la-carte for manual QA, and to give other Kibana teams a staging server to quickly test against

Log | Bot Usage

ℹ️ The breaking changes have already been handled on internal consumer side, as they have already been released in previous -borealis specific versions.

renaming of JSON token files
removing of isDefaultTheme (there were no usages)

Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co> Co-authored-by: Ryan Keairns <contactryank@gmail.com> Co-authored-by: Arturo Castillo Delgado <arturo.castillo@elastic.co> Co-authored-by: ek-so <eksomail@gmail.com> Co-authored-by: Kate Sosedova <36230123+ek-so@users.noreply.github.com> Co-authored-by: Tomasz Kajtoch <tomek@kajto.ch>

…isibility set to false (#260692) ## Summary Closes #248314 Removes the header row from the `EuiDataGrid` used in the Discover flyout Overview tab for both Traces and Logs documents. ### Context The original design for the Overview tab key fields table didn't include a column header, but we shipped with it visible because `EuiDataGrid` didn't support hiding it at the time. Now that EUI supports the `headerVisibility` prop ([EuiDataGrid: Support rendering the header optionally](elastic/eui#8386)), we can set it to `false` to match the original intended design. ### Changes - Added an optional `headerVisibility` prop to `TableGrid`, passing it through to `EuiDataGrid` - Set `headerVisibility={false}` in `ContentFrameworkTable`, which is the shared component used by both the Traces and Logs overview - Added CSS overrides scoped to `.euiDataGrid--noHeader` in `TableGrid` to handle visual adjustments when the header is hidden: - Removed the top border on the first data row (previously adjacent to the header) - Set `overflow: visible` on the grid root, content wrapper, and virtualized container so that the first row's cell actions popover toolbar (positioned above each cell) is not clipped - Simplified the Traces table panel by removing the custom `padding-bottom` override (matching Logs overview table panel) ### Demo https://github.com/user-attachments/assets/b111051e-0e53-4d23-82fa-f71b5dba26ce

…isibility set to false (elastic#260692) ## Summary Closes elastic#248314 Removes the header row from the `EuiDataGrid` used in the Discover flyout Overview tab for both Traces and Logs documents. ### Context The original design for the Overview tab key fields table didn't include a column header, but we shipped with it visible because `EuiDataGrid` didn't support hiding it at the time. Now that EUI supports the `headerVisibility` prop ([EuiDataGrid: Support rendering the header optionally](elastic/eui#8386)), we can set it to `false` to match the original intended design. ### Changes - Added an optional `headerVisibility` prop to `TableGrid`, passing it through to `EuiDataGrid` - Set `headerVisibility={false}` in `ContentFrameworkTable`, which is the shared component used by both the Traces and Logs overview - Added CSS overrides scoped to `.euiDataGrid--noHeader` in `TableGrid` to handle visual adjustments when the header is hidden: - Removed the top border on the first data row (previously adjacent to the header) - Set `overflow: visible` on the grid root, content wrapper, and virtualized container so that the first row's cell actions popover toolbar (positioned above each cell) is not clipped - Simplified the Traces table panel by removing the custom `padding-bottom` override (matching Logs overview table panel) ### Demo https://github.com/user-attachments/assets/b111051e-0e53-4d23-82fa-f71b5dba26ce

mgadewoll and others added 30 commits December 17, 2024 14:13

[Theme] Base theme setup (#8030)

1ff189d

[Visual Refresh] Update Typography scale (#8103)

39e60d6

[Visual Refresh] Setup semantic color tokens (#8097)

22b2d6c

[Visual Refresh] Design changes (#8111)

b6df1f3

fix: correct skeleton mapping

5e49686

refactor: prevent double background for seleton animation

e33639a

[Visual Refresh] Fix theme package builds (#8120)

c8aaaad

[Visual Refresh] Provide legacy JSON theme tokens (#8115)

68ced5b

[Visual Refresh] Update vis colors and palettes (#8112)

9f5f807

chore: cleanup package.json

baf3eee

[Visual Refresh] Provide legacy JSON tokens via EUI (#8125)

d8a5251

[Visual Refresh] Fix computed border token mapping (#8170)

7f7f303

[Visual Refresh] Fix euiColorFullShade Sass variable mapping (#8178)

08c1e56

chore: add licenses to eui-theme-borealis and eui-theme-common

939cf97

chore: bump versions of @elastic/eui-theme-borealis and `@elastic/e…

9c846e4

…ui-theme-common`

build(eui): move @elastic/eui-theme-common to dependencies

98d81ac

chore(eui): bump version of @elastic/eui

5ebf470

[Visual Refresh] Add forms.maxWidth token (#8221)

060530d

[Visual Refresh] Update color token mappings (#8211)

0cbe955

[Visual Refresh] Set darker shade for subdued text (#8224)

c934fe7

Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

[Visual Refresh] Remove support for accentSecondary badges (#8227)

4618641

[Visual Refresh] Introduce shared popover arrow styles to Borealis (#…

963a999

…8212)

chore: update versions

2f8376e

test: update snapshot

d9185e7

chore: update versions

d5ef329

[Visual Refresh] Add severity vis colors (#8247)

48232d4

[Visual Refresh] Fix transparent color variable definitions (#8249)

e136ce3

chore: update token deprecation JSDOC

f581efb

[Visual Refresh] Update EuiToken colors (#8250)

c11b692

chore: update versions

b597a53

tkajtoch and others added 6 commits February 19, 2025 02:06

Merge branch 'main' into eui-theme/borealis

19eee10

update versions

6078ed0

Add CLI for monorepo releases (#8308)

aa6ac6b

Merge branch 'main' into eui-theme/borealis

4523653

update versions

81af8cd

[Visual Refresh] Update Borealis VRT reference images (#8384)

6dfdc36

mgadewoll added the visual refresh label Mar 3, 2025

mgadewoll self-assigned this Mar 3, 2025

mgadewoll added 3 commits March 3, 2025 17:17

chore: add changelog

3bce120

test(VRT): update reference images

1746f64

- updates based on rebased changes from main

build: fix missing dependency

d90a419

mgadewoll marked this pull request as ready for review March 3, 2025 17:40

mgadewoll requested a review from a team as a code owner March 3, 2025 17:40

tkajtoch approved these changes Mar 3, 2025

View reviewed changes

docs: fix missing styles on colorMode switch

d1aa2ae

mgadewoll force-pushed the eui-theme/borealis branch from 2a0a776 to 315f705 Compare March 4, 2025 12:11

docs: update localStorage theme key

f8afd4d

mgadewoll force-pushed the eui-theme/borealis branch from 315f705 to f8afd4d Compare March 4, 2025 13:11

mgadewoll added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Mar 4, 2025

mgadewoll merged commit 11ed9f6 into main Mar 5, 2025
7 checks passed

mgadewoll deleted the eui-theme/borealis branch March 5, 2025 08:16

tfcmarques mentioned this pull request Apr 1, 2026

[Discover][Flyout] Update overview fields table with new prop headerVisibility set to false elastic/kibana#260692

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visual Refresh] Add Borealis theme #8386

[Visual Refresh] Add Borealis theme #8386
mgadewoll merged 96 commits intomainfrom
eui-theme/borealis

mgadewoll commented Mar 3, 2025 •

edited

Loading

Uh oh!

tkajtoch left a comment

Uh oh!

mgadewoll commented Mar 4, 2025 •

edited

Loading

Uh oh!

kibanamachine commented Mar 4, 2025

Uh oh!

elasticmachine commented Mar 4, 2025

Uh oh!

github-actions bot commented Mar 4, 2025

Uh oh!

mgadewoll commented Mar 4, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Conversation

mgadewoll commented Mar 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Included PRs

Additional changes

QA

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll commented Mar 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

kibanamachine commented Mar 4, 2025

Uh oh!

elasticmachine commented Mar 4, 2025

💚 Build Succeeded

History

Uh oh!

github-actions bot commented Mar 4, 2025

Uh oh!

mgadewoll commented Mar 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

mgadewoll commented Mar 3, 2025 •

edited

Loading

mgadewoll commented Mar 4, 2025 •

edited

Loading

mgadewoll commented Mar 4, 2025 •

edited

Loading