[Chrome Workspace] split application area into topBar, bottomBar and content area#225824
Merged
Dosant merged 5 commits intoelastic:mainfrom Jun 30, 2025
Merged
Conversation
Contributor
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
clintandrewhall
approved these changes
Jun 30, 2025
Contributor
clintandrewhall
left a comment
There was a problem hiding this comment.
Awesome. Approving to unblock-- let's address my open question before merging.
| - `--kbn-layout--footer-width` | ||
| - `--kbn-layout--application-[top|bottom|left|right|height|width]` | ||
| - **Application Top Bar** | ||
| - `--kbn-layout--application-top-bar-[height|top|left|width|right|bottom]` |
Contributor
There was a problem hiding this comment.
nit: perhaps we could consider splitting these away from layout...?
**Application**
- `--kbn-layout--application-[top|bottom|left|right|height|width]`
- `--kbn-application--top-bar-[top|bottom|left|right|height|width]`
- `--kbn-application--content-[top|bottom|left|right|height|width]`
- `--kbn-application--bottom-bar-[top|bottom|left|right|height|width]`
This would also reflect the reality of the grid divisions, (i.e. the application area has its own grid)
The benefit would also be for consumers: they wouldn't have to touch the --kbn-layout--* namespace at all, reducing any confusion.
Contributor
Author
There was a problem hiding this comment.
I was unsure about this and wanted to keep the word layout in the variable name. What do you think about --kbn-application-layout--bottom-bar-[top|bottom|left|right|height|width]? Is it too verbose?
Contributor
Author
There was a problem hiding this comment.
I updated as you suggested, but let me know if you'd prefer more verbose version
…ibana into d/2025-06-30-grid-layout-appbar
Contributor
💚 Build Succeeded
Metrics [docs]Async chunks
Page load bundle
History
|
Dosant
added a commit
that referenced
this pull request
Jul 3, 2025
> [!IMPORTANT] > **Should be no user-facing changes!!!** The new layout work is behind a feature flag! ## Summary Part of [workspace chrome](elastic/kibana-team#1581 ) work. This is follow up to #224255, #225824 which mostly implements the new layout for project (serverless) navigation.  ### Implementation notes: - The project navigation sidebar still uses the EuiCollapsibleNavBeta component. It works as a push flyout on larger screens and as an overlay on smaller screens. - In the next steps, we will start using the new navigation grid cell for the upcoming side navigation component. ## How to review 1. Most importantly, we need to ensure that nothing is broken in the old layout during the refactor. - Functional tests + visual/manual testing 2. Then for the new layout: kibana.yml: ``` feature_flags.overrides: core.chrome.layoutType: 'grid' core.chrome.layoutDebug: true ``` - Check that it mostly works (some specific edge cases and bugs are expected and are gathered in #225263) - Code-review: focus on the layout implementation split approach
kertal
pushed a commit
to kertal/kibana
that referenced
this pull request
Jul 25, 2025
) > [!IMPORTANT] > **Should be no user-facing changes!!!** The new layout work is behind a feature flag! ## Summary Part of [workspace chrome](elastic/kibana-team#1581 ) work. This is follow up to elastic#224255, elastic#225824 which mostly implements the new layout for project (serverless) navigation.  ### Implementation notes: - The project navigation sidebar still uses the EuiCollapsibleNavBeta component. It works as a push flyout on larger screens and as an overlay on smaller screens. - In the next steps, we will start using the new navigation grid cell for the upcoming side navigation component. ## How to review 1. Most importantly, we need to ensure that nothing is broken in the old layout during the refactor. - Functional tests + visual/manual testing 2. Then for the new layout: kibana.yml: ``` feature_flags.overrides: core.chrome.layoutType: 'grid' core.chrome.layoutDebug: true ``` - Check that it mostly works (some specific edge cases and bugs are expected and are gathered in elastic#225263) - Code-review: focus on the layout implementation split approach
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Based on the discussion 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(andapplicationBottomBarfor 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.applicationBottomBarnow works like the previousfooter, but it is implemented differently—it is part of the application cell instead of being its own grid cell.footerjust 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
After