[Solution Side Nav] Fix panel styles by tsullivan · Pull Request #219478 · elastic/kibana

tsullivan · 2025-04-29T00:20:22Z

Summary

Epic: https://github.com/elastic/kibana-team/issues/1439
Depends on #218513

List of changes

Match header text style with the main panel
Match spacing between items with the main panel
Show horizontal line between groups in the panel
- This restores a custom error that was in the code prior to [Solution Side Nav] Remove PanelContentProvider & support optional title in nav node #218156, but adds better handling and tests to the error
Fix position of accordion group arrows in the secondary panel (viewable only from Storybook)
isOpen is not really needed and can be cleaned up
- (see https://github.com/elastic/kibana/pull/217708/files#diff-9e95eb3e4be14fb61caca86b48be4f03ca63393eeeadcd0b36f7371958a7e5e1L55)
(not panel-related) remove the on-hover and on-focus underline from nav items

Checklist from Kate:

text font-weight of solution title in main panel
text font-weight of secondary panel link content
zero space between items
use ~~12px~~ nice-looking margin from the link to the edge of the panel
ensure the divider reaches to the edge of the panel
increase space from panel header to the items
ensure the width of both panels is 248px
secondary panel header should vertically align with the below nav items
(not panel-related) font color and icon color of selected items should be "primary" blue

Screenshots

Security Solution Serverless

secondary-panel-nav-fixes.mp4

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
Unit or functional tests were updated or added to match the most common scenarios

tsullivan · 2025-05-02T15:31:50Z

src/core/packages/chrome/browser/src/project_navigation.ts

-   * Note: this property is currently only used for (1) "group" nodes and (2) in the navigation
-   * panel opening on the right of the side nav.
-   */
-  appendHorizontalRule?: boolean;


Horizontal rules will be automatically added in the panel in-between each group

elasticmachine · 2025-05-02T15:31:56Z

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

github-actions · 2025-05-02T15:32:03Z

🤖 GitHub comments

Expand to view the GitHub comments

Just comment with:

/oblt-deploy : Deploy a Kibana instance using the Observability test environments.
run docs-build : Re-trigger the docs validation. (use unformatted text in the comment!)

ek-so

Hey Tim! As we discussed:

ek-so

As discussed — alignment for the text inside the 2nd panel + blue color for selected items. @tsullivan and thank you again for all those changes :)

elasticmachine · 2025-05-07T22:00:21Z

Pinging @elastic/security-solution (Team: SecuritySolution)

kapral18

LGTM for explore

maryam-saeidi

defaultMessage changes LGTM

This reverts commit 45492a3.

elasticmachine · 2025-05-09T16:27:50Z

⏳ Build in-progress

Buildkite Build
Commit: 5b3498b
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-219478-5b3498b7ecd8

Failed CI Steps

History

💔 Build #300135 failed 44e1c47
💔 Build #299924 failed 4d27ee9
💔 Build #299903 failed 5aabfe4
💛 Build #299858 was flaky f0f82e6
💔 Build #299822 failed 45492a3
💔 Build #299813 failed f42bc6d

## Summary Epic: elastic/kibana-team#1439 Depends on elastic#218513 ### List of changes 1. Match header text style with the main panel 2. Match spacing between items with the main panel 3. Show horizontal line between groups in the panel - This restores a custom error that was in the code prior to elastic#218156, but adds better handling and tests to the error 5. Fix position of accordion group arrows in the secondary panel (viewable only from Storybook) 6. isOpen is not really needed and can be cleaned up - (see https://github.com/elastic/kibana/pull/217708/files#diff-9e95eb3e4be14fb61caca86b48be4f03ca63393eeeadcd0b36f7371958a7e5e1L55) 7. (not panel-related) remove the on-hover and on-focus underline from nav items ### Checklist from Kate: - [x] text font-weight of solution title in main panel - [x] text font-weight of secondary panel link content - [x] zero space between items - [x] use ~~12px~~ nice-looking margin from the link to the edge of the panel - [x] ensure the divider reaches to the edge of the panel - [x] increase space from panel header to the items - [x] ensure the width of both panels is 248px - [x] secondary panel header should vertically align with the below nav items - [x] (not panel-related) font color and icon color of selected items should be "primary" blue ### Screenshots **Security Solution Serverless** https://github.com/user-attachments/assets/83ca1c25-f44a-4270-96a8-e28e7b6d7041 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - [x] 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) - [x] [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

tsullivan · 2025-07-11T17:42:38Z

This PR exists in 8.19 as well.

tsullivan force-pushed the sidenav/panel-style-fixes branch 2 times, most recently from 34ebd43 to 6f5be50 Compare May 2, 2025 15:00

tsullivan marked this pull request as ready for review May 2, 2025 15:30

tsullivan requested review from a team as code owners May 2, 2025 15:30

tsullivan added release_note:skip Skip the PR/issue when compiling release notes backport:skip This PR does not require backporting labels May 2, 2025

tsullivan commented May 2, 2025

View reviewed changes

botelastic bot added ci:project-deploy-observability Create an Observability project Team:actionable-obs Formerly "obs-ux-management", responsible for SLO, o11y alerting, significant events, & synthetics. labels May 2, 2025

Fix side nav panel styles

d43557e

tsullivan force-pushed the sidenav/panel-style-fixes branch from 6f5be50 to d43557e Compare May 2, 2025 15:33

Merge branch 'main' into sidenav/panel-style-fixes

be8b5a0

ek-so requested changes May 6, 2025

View reviewed changes

tsullivan added 4 commits May 6, 2025 10:11

Merge branch 'main' into sidenav/panel-style-fixes

c53c55a

text font-weight of solution title in main panel

c6cdbb5

Updates from design feedback

0535bed

fix spacing in security nav

56c6918

tsullivan force-pushed the sidenav/panel-style-fixes branch from 3e596e2 to 56c6918 Compare May 7, 2025 00:28

tsullivan requested a review from a team as a code owner May 7, 2025 00:28

Merge branch 'main' into sidenav/panel-style-fixes

4d85f3d

ek-so approved these changes May 7, 2025

View reviewed changes

tsullivan added 3 commits May 7, 2025 10:22

Design feedback updates II

23e2bcf

remove toggle() from panel context and using state for isOpen

dc11ab9

More fixes from design feedback

754acb8

tsullivan added the Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. label May 7, 2025

Merge branch 'main' into sidenav/panel-style-fixes

991c218

kapral18 approved these changes May 8, 2025

View reviewed changes

maryam-saeidi approved these changes May 8, 2025

View reviewed changes

tsullivan and others added 3 commits May 8, 2025 07:07

Merge branch 'main' into sidenav/panel-style-fixes

ff62df5

Merge branch 'main' into sidenav/panel-style-fixes

f42bc6d

add debug flag to build and validate docs

45492a3

tsullivan requested a review from a team as a code owner May 8, 2025 16:59

tsullivan and others added 3 commits May 8, 2025 11:14

Merge branch 'main' into sidenav/panel-style-fixes

f0f82e6

Merge branch 'main' into sidenav/panel-style-fixes

3aea3ca

Revert "add debug flag to build and validate docs"

5aabfe4

This reverts commit 45492a3.

tsullivan removed the request for review from a team May 8, 2025 20:08

tsullivan added 2 commits May 8, 2025 15:07

Merge branch 'main' into sidenav/panel-style-fixes

4d27ee9

Merge branch 'main' into sidenav/panel-style-fixes

44e1c47

tsullivan enabled auto-merge (squash) May 9, 2025 14:48

tsullivan added 2 commits May 9, 2025 08:29

back out docs update to get ci to pass

a538e12

Merge branch 'main' into sidenav/panel-style-fixes

5b3498b

tsullivan merged commit 0fcc9a3 into elastic:main May 9, 2025
11 checks passed

kibanamachine added the v9.1.0 label May 9, 2025

tsullivan deleted the sidenav/panel-style-fixes branch May 9, 2025 17:39

tsullivan mentioned this pull request May 9, 2025

[Solution Side Nav] Organize custom styles on top of EUI components into the EUI repo #219751

Closed

jasonrhodes mentioned this pull request May 30, 2025

[Serverless Nav] Observability project navigation has nesting problems with Applications > Synthetics section #222112

Closed

tsullivan mentioned this pull request Jul 11, 2025

[SolutionSideNav] Collapsed nav no longer allows expanding #227616

Closed

tsullivan added the v8.19.0 label Jul 11, 2025

kibanamachine mentioned this pull request Jul 15, 2025

[SharedUX Project Navigation] Fix issue with items in panel openers when side nav is collapsed #227705

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

[Solution Side Nav] Fix panel styles#219478

[Solution Side Nav] Fix panel styles#219478
tsullivan merged 21 commits intoelastic:mainfrom
tsullivan:sidenav/panel-style-fixes

tsullivan commented Apr 29, 2025 •

edited

Loading

Uh oh!

tsullivan May 2, 2025

Uh oh!

elasticmachine commented May 2, 2025

Uh oh!

github-actions bot commented May 2, 2025

Uh oh!

ek-so left a comment •

edited

Loading

Uh oh!

ek-so left a comment

Uh oh!

elasticmachine commented May 7, 2025

Uh oh!

kapral18 left a comment

Uh oh!

maryam-saeidi left a comment

Uh oh!

elasticmachine commented May 9, 2025

Uh oh!

Uh oh!

tsullivan commented Jul 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Comments

Conversation

tsullivan commented Apr 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of changes

Checklist from Kate:

Screenshots

Checklist

Uh oh!

tsullivan May 2, 2025

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented May 2, 2025

Uh oh!

github-actions bot commented May 2, 2025

🤖 GitHub comments

Uh oh!

ek-so left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ek-so left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented May 7, 2025

Uh oh!

kapral18 left a comment

Choose a reason for hiding this comment

Uh oh!

maryam-saeidi left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented May 9, 2025

⏳ Build in-progress

Failed CI Steps

History

Uh oh!

Uh oh!

tsullivan commented Jul 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

tsullivan commented Apr 29, 2025 •

edited

Loading

ek-so left a comment •

edited

Loading