[Chrome] Update Discover field list background for new chrome by tsullivan · Pull Request #248024 · elastic/kibana

tsullivan · 2026-01-06T21:57:09Z

Summary

This PR gives a lighter background to the field list in Discover under the new chrome so that it does not have the same color as the main side navigation.

Closes #248022

Screenshots

New Chrome - lighter background of the field list

Classic navigation - unchanged

Checklist

Check the PR satisfies following conditions.

Reviewers should verify this PR satisfies this list as well.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Documentation was added for features that require explanation or tutorials
Unit or functional tests were updated or added to match the most common scenarios
If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the docker list
This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The release_note:breaking label should be applied in these situations.
Flaky Test Runner was used on any tests changed
The PR description includes the appropriate Release Notes section, and the correct release_note:* label is applied per the guidelines
Review the backport guidelines and apply applicable backport:* labels.

Identify risks

Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss.

Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging.

See some risk examples
...

elasticmachine · 2026-01-07T00:00:13Z

💚 Build Succeeded

Buildkite Build
Commit: 5bb1b6c

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`discover`	1.4MB	1.4MB	+98.0B

cc @tsullivan

davismcphee

Much nicer, thanks! Should we backport to 9.3 or is new chrome only in 9.4?

tsullivan · 2026-01-07T05:13:48Z

Much nicer, thanks! Should we backport to 9.3 or is new chrome only in 9.4?

Thanks @davismcphee! The new chrome unfortunately missed 9.3 FF, so this will not be backported.

andreadelrio

Thanks for the quick turnaround. Design changes LGTM, checked locally.

…c#248024) ## Summary This PR gives a lighter background to the field list in Discover under the new chrome so that it does not have the same color as the main side navigation. Closes elastic#248022 ### Screenshots **New Chrome - lighter background of the field list** - <img width="1949" height="1299" alt="image" src="https://github.com/user-attachments/assets/0e92961b-6206-4d15-b513-43de5d365663" /> - <img width="1949" height="1299" alt="image" src="https://github.com/user-attachments/assets/107a0c41-6c26-4a69-8b84-3048c3bb79b0" /> **Classic navigation - unchanged** - <img width="1949" height="1299" alt="image" src="https://github.com/user-attachments/assets/87675beb-98cf-4d40-b932-4b307c00950f" /> - <img width="1949" height="1299" alt="image" src="https://github.com/user-attachments/assets/86ded446-c8ca-4679-a8c1-903c24b31a79" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ...

## Summary ### Issue The app workspace was recently changed to `plain` color but was not intended to affect Classic mode. This PR makes the background color conditional based upon ChromeStyle as was the initial intention. ### Changes - Add ChromeStyle type ('classic' | 'project') to LayoutConfig - Pass chromeStyle through layout config context - Make background, border-radius, border, and shadow conditional - Classic mode: transparent background, no styling - Project mode: distinguished background with rounded corners and shadow Similar pattern to Discover sidebar [fix](#248024) (discover_sidebar_responsive.tsx) ### Before and After _Before; green shade to highlight the issue_ <img width="2500" height="1754" alt="CleanShot 2026-01-09 at 11 15 01@2x" src="https://github.com/user-attachments/assets/462416c6-7401-4fa1-84e4-e289807e1dd8" /> _After; light shade returned in Classic mode_ <img width="2648" height="1274" alt="CleanShot 2026-01-09 at 11 25 41@2x" src="https://github.com/user-attachments/assets/b53c27e3-de1a-42fd-b748-0d850f6c7566" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ... --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

## Summary ### Issue The app workspace was recently changed to `plain` color but was not intended to affect Classic mode. This PR makes the background color conditional based upon ChromeStyle as was the initial intention. ### Changes - Add ChromeStyle type ('classic' | 'project') to LayoutConfig - Pass chromeStyle through layout config context - Make background, border-radius, border, and shadow conditional - Classic mode: transparent background, no styling - Project mode: distinguished background with rounded corners and shadow Similar pattern to Discover sidebar [fix](elastic#248024) (discover_sidebar_responsive.tsx) ### Before and After _Before; green shade to highlight the issue_ <img width="2500" height="1754" alt="CleanShot 2026-01-09 at 11 15 01@2x" src="https://github.com/user-attachments/assets/462416c6-7401-4fa1-84e4-e289807e1dd8" /> _After; light shade returned in Classic mode_ <img width="2648" height="1274" alt="CleanShot 2026-01-09 at 11 25 41@2x" src="https://github.com/user-attachments/assets/b53c27e3-de1a-42fd-b748-0d850f6c7566" /> ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md) - [ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials - [ ] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - [ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations. - [ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed - [ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) - [ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels. ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. Describe the risk, its severity, and mitigation for each identified risk. Invite stakeholders and evaluate how to proceed before merging. - [ ] [See some risk examples](https://github.com/elastic/kibana/blob/main/RISK_MATRIX.mdx) - [ ] ... --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>

tsullivan requested a review from a team as a code owner January 6, 2026 21:57

tsullivan requested a review from ryankeairns January 6, 2026 21:57

tsullivan added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting labels Jan 6, 2026

tsullivan self-assigned this Jan 6, 2026

Update Discover field list background for new chrome

5bb1b6c

tsullivan force-pushed the workspace-chrome/discover-visual-improvements-i branch from 5d26af8 to 5bb1b6c Compare January 6, 2026 22:00

davismcphee approved these changes Jan 7, 2026

View reviewed changes

tsullivan mentioned this pull request Jan 7, 2026

[Chrome] Change Discover's field list background for the New Chrome #248022

Closed

ghudgins requested review from andreadelrio and l-suarez January 7, 2026 14:58

andreadelrio approved these changes Jan 7, 2026

View reviewed changes

tsullivan merged commit 5538e4e into elastic:main Jan 7, 2026
14 checks passed

tsullivan deleted the workspace-chrome/discover-visual-improvements-i branch January 7, 2026 18:21

kibanamachine added the v9.4.0 label Jan 7, 2026

ryankeairns mentioned this pull request Jan 9, 2026

Make application layout background color conditional #248543

Merged

10 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Chrome] Update Discover field list background for new chrome#248024

[Chrome] Update Discover field list background for new chrome#248024
tsullivan merged 1 commit intoelastic:mainfrom
tsullivan:workspace-chrome/discover-visual-improvements-i

tsullivan commented Jan 6, 2026 •

edited

Loading

Uh oh!

elasticmachine commented Jan 7, 2026

Uh oh!

davismcphee left a comment

Uh oh!

tsullivan commented Jan 7, 2026

Uh oh!

andreadelrio left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

tsullivan commented Jan 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

Checklist

Identify risks

Uh oh!

elasticmachine commented Jan 7, 2026

💚 Build Succeeded

Metrics [docs]

Async chunks

Uh oh!

davismcphee left a comment

Choose a reason for hiding this comment

Uh oh!

tsullivan commented Jan 7, 2026

Uh oh!

andreadelrio left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

tsullivan commented Jan 6, 2026 •

edited

Loading