Make application layout background color conditional by ryankeairns · Pull Request #248543 · elastic/kibana

ryankeairns · 2026-01-09T21:15:39Z

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 (discover_sidebar_responsive.tsx)

Before and After

Before; green shade to highlight the issue

After; light shade returned in Classic mode

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
...

ryankeairns · 2026-01-09T21:17:14Z

src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/grid_layout.tsx


 const layoutConfigs: { classic: ChromeLayoutConfig; project: ChromeLayoutConfig } = {
  classic: {
+    chromeStyle: 'classic',


Without this change, each component that needed to know the chrome style would have to:

Get access to the chrome service somehow

Subscribe to chromeStyle$

Handle the observable subscription lifecycle

Now it's just a one-liner hook call. So if other layout slots (header, navigation, sidebar, footer, etc.) or any nested components need style variations between classic and project mode in the future, the plumbing is already in place.

const { chromeStyle } = useLayoutConfig(); // Then use it for conditional styling const isProjectStyle = chromeStyle === 'project';

- 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 (discover_sidebar_responsive.tsx)

tsullivan

Left a small suggestion

...ackages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts

...core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.tsx

- Return EmotionFn type to leverage Emotion's automatic theme injection - Remove explicit useEuiTheme hook call from LayoutApplication component - UseEuiTheme type now inferred from EmotionFn

tsullivan · 2026-01-09T23:07:47Z

src/core/packages/chrome/layout/core-chrome-layout-components/layout_config_context.tsx

->;
+> & {
+  chromeStyle?: ChromeStyle;
+};


tsullivan

LGTM on green ci

Dosant

didn't test, but layout config change 👍

elasticmachine · 2026-01-13T03:45:12Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: c731c56

Failed CI Steps

Test Failures

[job] [logs] Scout: [ platform / discover_enhanced ] plugin / serverless-es - Discover app - value suggestions: useTimeRange disabled - show up if in range
[job] [logs] Scout: [ platform / discover_enhanced ] plugin / show up if in range

Metrics [docs]

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`@kbn/core-chrome-layout-components`	6	7	+1

Public APIs missing exports

Total count of every type that is part of your API that should be exported but is not. This will cause broken links in the API documentation system. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats exports for more detailed information.

id	before	after	diff
`@kbn/core`	931	932	+1

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`core`	500.0KB	500.2KB	+253.0B

Unknown metric groups

API count

id	before	after	diff
`@kbn/core-chrome-layout-components`	14	15	+1

History

## 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>

ryankeairns commented Jan 9, 2026

View reviewed changes

ryankeairns force-pushed the rk/new-chrome-background branch from 4f75a95 to a6c062b Compare January 9, 2026 21:30

ryankeairns added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting v9.4.0 labels Jan 9, 2026

ryankeairns marked this pull request as ready for review January 9, 2026 21:37

ryankeairns requested a review from a team as a code owner January 9, 2026 21:37

tsullivan mentioned this pull request Jan 9, 2026

[Workspace Chrome] Visual Improvements #245898

Merged

2 tasks

tsullivan reviewed Jan 9, 2026

View reviewed changes

...ackages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts Show resolved Hide resolved

...core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.tsx Outdated Show resolved Hide resolved

ryankeairns force-pushed the rk/new-chrome-background branch from edded7b to 3fffbe4 Compare January 9, 2026 23:00

ryankeairns requested a review from tsullivan January 9, 2026 23:01

refactor(chrome): use curried EmotionFn pattern for root styles

4e076cc

- Return EmotionFn type to leverage Emotion's automatic theme injection - Remove explicit useEuiTheme hook call from LayoutApplication component - UseEuiTheme type now inferred from EmotionFn

ryankeairns force-pushed the rk/new-chrome-background branch from 8cbc9f2 to 4e076cc Compare January 9, 2026 23:04

Merge branch 'main' into rk/new-chrome-background

ac452f7

tsullivan reviewed Jan 9, 2026

View reviewed changes

tsullivan approved these changes Jan 9, 2026

View reviewed changes

kibanamachine added 2 commits January 9, 2026 23:16

Changes from node scripts/lint_ts_projects --fix

81e4d30

Changes from node scripts/regenerate_moon_projects.js --update

3574433

Dosant approved these changes Jan 12, 2026

View reviewed changes

Merge branch 'main' into rk/new-chrome-background

c731c56

ryankeairns merged commit 561a462 into main Jan 13, 2026
13 checks passed

ryankeairns deleted the rk/new-chrome-background branch January 13, 2026 15:51

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Make application layout background color conditional#248543

Make application layout background color conditional#248543
ryankeairns merged 6 commits intomainfrom
rk/new-chrome-background

ryankeairns commented Jan 9, 2026 •

edited

Loading

Uh oh!

ryankeairns Jan 9, 2026

Uh oh!

tsullivan left a comment

Uh oh!

Uh oh!

Uh oh!

tsullivan Jan 9, 2026

Uh oh!

tsullivan left a comment

Uh oh!

Dosant left a comment

Uh oh!

elasticmachine commented Jan 13, 2026 •

edited

Loading

API count

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

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

Uh oh!

Summary

Issue

Changes

Before and After

Checklist

Identify risks

Uh oh!

ryankeairns Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

tsullivan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

tsullivan Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

tsullivan left a comment

Choose a reason for hiding this comment

Uh oh!

Dosant left a comment

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Public APIs missing comments

Public APIs missing exports

Page load bundle

API count

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ryankeairns commented Jan 9, 2026 •

edited

Loading

elasticmachine commented Jan 13, 2026 •

edited

Loading