[Workspace Chrome] Bootstrap new grid layout components by Dosant · Pull Request #223890 · elastic/kibana

Dosant · 2025-06-13T10:45:54Z

This is largely based of @clintandrewhall's work that he extracted from the new workspace layout poc. These components are a decent starting point for new grid layout and I validated that the layout mostly works for Kibana (fixing a couple of edge cases)

I believe the components are ready to be merged into the main branch to make future reviews easier:

Bootstraps a new @kbn/core-chrome-layout-components package to provide composable React primitives for Kibana’s Chrome layout, including region components, a debug overlay, Storybook stories, and initial docs.

Adds layout region components (Banner, Header, Navigation, Sidebar, Panels, Application, Footer) and a debug overlay with Emotion styling.
Provides a README with usage examples (Storybook-driven) and API documentation.

yarn storybook sharedux

…out-fix-scroll

…lication-layout

…-fix'

…plication-layout

Copilot

Pull Request Overview

Bootstraps a new @kbn/core-chrome-layout-components package to provide composable React primitives for Kibana’s Chrome layout, including region components, a debug overlay, Storybook stories, and initial docs.

Adds layout region components (Banner, Header, Navigation, Sidebar, Panels, Application, Footer) and a debug overlay with Emotion styling.
Sets up Jest and Storybook configuration, introduces a Box utility, and updates package.json and CODEOWNERS.
Provides a README with usage examples (Storybook-driven) and API documentation.

Reviewed Changes

Copilot reviewed 44 out of 44 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/core/packages/chrome/layout/core-chrome-layout-components/jest.config.js	Jest config for the new layout package
src/core/packages/chrome/layout/core-chrome-layout-components/index.ts	Exports core components and config provider
src/core/packages/chrome/layout/core-chrome-layout-components/header/*	Header region component and styles
src/core/packages/chrome/layout/core-chrome-layout-components/footer/*	Footer region component and styles
src/core/packages/chrome/layout/core-chrome-layout-components/banner/*	Banner region component and styles
src/core/packages/chrome/layout/core-chrome-layout-components/application/*	Application region component, overflow handling
src/core/packages/chrome/layout/core-chrome-layout-components/debug/*	LayoutDebugOverlay for visualizing grid slots
src/core/packages/chrome/layout/core-chrome-layout-components/stories/*	Storybook stories for layout and Box examples
src/core/packages/chrome/layout/core-chrome-layout-components/README.md	Documentation and usage examples
package.json	Registers the new layout package
.github/CODEOWNERS	Adds ownership for the new package

Comments suppressed due to low confidence (7)

src/core/packages/chrome/layout/core-chrome-layout-components/README.md:55

The snippet uses <ChromeLayoutComponent> but the actual component name is ChromeLayout. Update this to <ChromeLayout> for accuracy.

    <ChromeLayoutComponent

src/core/packages/chrome/layout/core-chrome-layout-components/README.md:41

The README references LayoutConfigProvider, but the package exports ChromeLayoutConfigProvider. Update the import and usage to match the actual export.

  LayoutConfigProvider,

src/core/packages/chrome/layout/core-chrome-layout-components/banner/index.ts:10

The public API exports LayoutBanner but does not export its LayoutBannerProps type. Consider adding type LayoutBannerProps to maintain consistency with other components.

export { LayoutBanner } from './layout_banner';

src/core/packages/chrome/layout/core-chrome-layout-components/footer/index.ts:10

The API surface exports LayoutFooter but omits the LayoutFooterProps type. For consistency, export type LayoutFooterProps as well.

export { LayoutFooter } from './layout_footer';

src/core/packages/chrome/layout/core-chrome-layout-components/jest.config.js:14

Jest is configured for this package, but there are no test files present yet. Consider adding basic unit or snapshot tests for the new components to ensure they behave as expected.

};

src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts:15

The CSS grid-area is set to "app" but other slot names and variables use "application". This mismatch will break layout alignment—rename to grid-area: application; to match the rest of the system.

    grid-area: app;

src/core/packages/chrome/layout/core-chrome-layout-components/application/layout_application.styles.ts:11

The import path '../types' does not exist in this package. You need to add or correct the types.ts file so that EmotionFn can be resolved, otherwise this will cause a build error.

import { EmotionFn } from '../types';

src/core/packages/chrome/layout/core-chrome-layout-components/footer/layout_footer.tsx

elasticmachine · 2025-06-16T12:33:49Z

Pinging @elastic/appex-sharedux (Team:SharedUX)

clintandrewhall

Awesome work. Please address my comments before shipping. Thank you for tackling this!

clintandrewhall · 2025-06-17T15:09:37Z

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

+
+import { styles } from './layout_application.styles';
+
+export const LayoutApplication = ({ children }: { children: ReactNode }) => {


nit: let's be sure these have docblocks

I added them, but I'm not sure they are helpful, especially since most of these are private components.

clintandrewhall · 2025-06-17T15:10:48Z

src/core/packages/chrome/layout/core-chrome-layout-components/banner/layout_banner.styles.ts

+  grid-area: banner;
+  overflow: hidden;
+  position: sticky;
+  width: var(--kbn-layout--banner-width);


So we decided to leverage the CSS variables, which is fine... but we should be sure to document this fact in the README and/or the global style component.

src/core/packages/chrome/layout/core-chrome-layout-components/debug/LayoutDebugOverlay.tsx

src/core/packages/chrome/layout/core-chrome-layout-components/layout.types.ts

clintandrewhall · 2025-06-17T15:16:36Z

src/core/packages/chrome/layout/core-chrome-layout-components/layout.types.ts

+import React from 'react';
+
+export interface LayoutStyleArgs {
+  bannerHeight: number;


Suggested change

bannerHeight: number;

/** The height of the top-most banner */

bannerHeight: number;

I am adding the comments, but I am not sure how valuable they are? aren't they just repeat what the prop name or component name says? e.g. bannerHeight === /** The height of the top-most banner */

I think you have to address the public API exports called out by CI. Props tend to be publicly exposed from packages, and it's always nice to have them documented, (even if they feel redundant).

clintandrewhall · 2025-06-17T15:17:12Z

src/core/packages/chrome/layout/core-chrome-layout-components/layout.types.ts

+
+export type Slot = React.ReactNode | ((props: SlotProps) => React.ReactNode);
+
+export interface ChromeLayoutSlots {


nit: are all of these, indeed, optional?

my current thinking, they are. there is "isChromeVisible" state when we hide everything except application. I am thinking now I'd do it by hiding everything using these props

clintandrewhall · 2025-06-17T15:21:22Z

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

+  const sidebar = css`
+    --kbn-layout--sidebar-top: ${bannerHeight}px;
+    --kbn-layout--sidebar-height: calc(100vh - var(--kbn-layout--sidebar-top));
+    --kbn-layout--sidebar-width: ${sidebarWidth}px;


My only concern with putting this here, and not in the style property of the actual component, is a potential thrash if the sidebar is resized with a drag. Having this update with a debounce for consumers to alleviate performance issues would only be available if the node were sized with the raw value.

I'm ok shipping it this way, but at some point we might need to explore the performance implications, if any.

I see... another problem will be animation - (open/closing a panel). will likely have to also change something around these variables

…plication-layout

…-fix'

elasticmachine · 2025-06-18T13:20:33Z

💚 Build Succeeded

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`	-	4	+4

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`	884	886	+2

Unknown metric groups

API count

id	before	after	diff
`@kbn/core-chrome-layout-components`	-	9	+9

History

💚 Build #308741 succeeded 527585a
💔 Build #308420 failed 3c2e867

…and `content` area (#225824) ## Summary Based on the [discussion](https://elastic.slack.com/archives/C08GKQQ85U4/p1751027960744299) this PR slightly reworks the layout introduced in #223890. For the Application Menu Bar, we need a header that is technically part of the application grid cell. This PR introduces `applicationTopBar` (and `applicationBottomBar` for consistency). It also adds a new set of variables: `--kbn-application--content-[top|bottom|left|right|height|width]`, which will represent the "safe" application content space for applications to use. - `applicationBottomBar` now works like the previous `footer`, but it is implemented differently—it is part of the application cell instead of being its own grid cell. - I kept the global `footer` just in case we need it and to properly debug/test that the variables work correctly. I adjusted it to take up the full width, similar to the banner. ## Before ![Screenshot 2025-06-30 at 14 05 38](https://github.com/user-attachments/assets/00684707-e619-4936-8ca5-1746dea8ae89) ## After ![Screenshot 2025-06-30 at 13 59 36](https://github.com/user-attachments/assets/af5e9056-4600-4c4b-adfb-93f1ae05d219)

clintandrewhall and others added 8 commits June 4, 2025 11:25

[wip] initial package

73e740a

show the layout is broken with long content

e0beb8b

fix application inner scroll

59e1d3d

Merge pull request elastic#41 from Dosant/exploration/application-lay…

c0732aa

…out-fix-scroll

[nit] fix inlining dynamic styles

1abf2b0

Merge branch 'main' of github.com:elastic/kibana into exploration/app…

02be1fc

…lication-layout

make other items optional, prevent layout remounting on re-render

09e4b59

add readme

d124cf6

Dosant changed the title ~~D/2025 06 13 application layout~~ [Workspace Chrome] Bootstrap new grid layout components Jun 13, 2025

Dosant and others added 6 commits June 13, 2025 15:18

wip

66ddee6

add debug overlay

207c79b

[CI] Auto-commit changed files from 'node scripts/lint_packages --fix'

3c2e867

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

1a4a927

…-fix'

Merge branch 'main' of github.com:elastic/kibana into d/2025-06-13-ap…

7530da1

…plication-layout

fix

9c39797

Dosant requested a review from Copilot June 16, 2025 09:48

Copilot AI reviewed Jun 16, 2025

View reviewed changes

src/core/packages/chrome/layout/core-chrome-layout-components/footer/layout_footer.tsx Show resolved Hide resolved

nit copilot reviews

527585a

Dosant added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// labels Jun 16, 2025

Dosant marked this pull request as ready for review June 16, 2025 12:33

Dosant requested review from a team as code owners June 16, 2025 12:33

Dosant requested a review from clintandrewhall June 16, 2025 12:34

clintandrewhall approved these changes Jun 17, 2025

View reviewed changes

Dosant and others added 3 commits June 18, 2025 12:02

Merge branch 'main' of github.com:elastic/kibana into d/2025-06-13-ap…

268004e

…plication-layout

review comments

ff9e53f

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…

de7f84c

…-fix'

dokmic approved these changes Jun 19, 2025

View reviewed changes

Dosant merged commit ada7278 into elastic:main Jun 19, 2025
12 checks passed

kibanamachine added the v9.1.0 label Jun 19, 2025

Dosant mentioned this pull request Jun 30, 2025

[Chrome Workspace] split application area into topBar, bottomBar and content area #225824

Merged

Dosant added the chrome-grid Work related to Chrome refactor to grid layout label Nov 17, 2025


		import { styles } from './layout_application.styles';

		export const LayoutApplication = ({ children }: { children: ReactNode }) => {

	bannerHeight: number;
	/** The height of the top-most banner */
	bannerHeight: number;


		export type Slot = React.ReactNode \| ((props: SlotProps) => React.ReactNode);

		export interface ChromeLayoutSlots {

Conversation

Dosant commented Jun 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

elasticmachine commented Jun 16, 2025

Uh oh!

clintandrewhall left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Jun 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

💚 Build Succeeded

Metrics [docs]

Public APIs missing comments

Public APIs missing exports

API count

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Dosant commented Jun 13, 2025 •

edited

Loading

elasticmachine commented Jun 18, 2025 •

edited

Loading