From 615558ceff30194eb904e9a08b634e7cc9c0e20f Mon Sep 17 00:00:00 2001 From: Esther Schmitz Date: Fri, 12 Jun 2026 18:07:49 +0200 Subject: [PATCH 01/17] fix(ui): revert DataGridCell font size to default (1rem) The reduced 0.875rem default from #1710 was not deliberate; revert for now. A configurable smaller size may be reintroduced later. Signed-off-by: Esther Schmitz --- .changeset/revert-datagridcell-font-size.md | 5 +++++ .../src/components/DataGridCell/DataGridCell.component.tsx | 1 - 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 .changeset/revert-datagridcell-font-size.md diff --git a/.changeset/revert-datagridcell-font-size.md b/.changeset/revert-datagridcell-font-size.md new file mode 100644 index 0000000000..3d1a5097d4 --- /dev/null +++ b/.changeset/revert-datagridcell-font-size.md @@ -0,0 +1,5 @@ +--- +"@cloudoperators/juno-ui-components": patch +--- + +Revert DataGridCell font size back to the default (1rem). The reduced font size (0.875rem) introduced in #1710 was made the default without sufficient consideration; a smaller, opt-in size may be reintroduced as a configurable option in the future. diff --git a/packages/ui-components/src/components/DataGridCell/DataGridCell.component.tsx b/packages/ui-components/src/components/DataGridCell/DataGridCell.component.tsx index a2fef688d6..4d4c579ae0 100644 --- a/packages/ui-components/src/components/DataGridCell/DataGridCell.component.tsx +++ b/packages/ui-components/src/components/DataGridCell/DataGridCell.component.tsx @@ -24,7 +24,6 @@ const cellBaseStyles = (nowrap: boolean, cellVerticalAlignment: CellVerticalAlig jn:border-b jn:border-theme-background-lvl-2 jn:h-full - jn:text-sm ` } From 7d0dbf56f2a0c95a5b377ddfcdde853001b7e735 Mon Sep 17 00:00:00 2001 From: Esther Schmitz Date: Fri, 12 Jun 2026 18:13:54 +0200 Subject: [PATCH 02/17] feat(ui): add title attribute to SideNavigationItem string labels Signed-off-by: Esther Schmitz --- .../SideNavigationItem/SideNavigationItem.component.tsx | 9 +++++++++ .../SideNavigationItem/SideNavigationItem.test.tsx | 6 ++++++ 2 files changed, 15 insertions(+) diff --git a/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx b/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx index 9605c7d111..f1eacb93a9 100644 --- a/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx +++ b/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx @@ -112,6 +112,13 @@ export const SideNavigationItem = ({ } } + const titleText: string | undefined = + typeof label === "string" && label.length > 0 + ? label + : typeof children === "string" && children.length > 0 + ? children + : undefined + const renderExpandButton = () => children && typeof children !== "string" && Children.count(children) ? ( + ) : null - const renderGroup = () => ( -
- {label} - {renderExpandButton()} -
+ const renderLabel = () => ( + + {label} + ) + const renderGroup = () => { + const className = `juno-sidenavigation-group ${sideNavGroupStyles} ${isOpen ? "juno-sidenavigation-group-open" : ""}` + + if (hasChildren) { + return ( + + ) + } + + return
{renderLabel()}
+ } + return ( <> {renderGroup()} - {isOpen && children} + {isOpen && {children}} ) } diff --git a/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx b/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx index c453ea1fdb..1bf3b54964 100644 --- a/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx +++ b/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx @@ -7,7 +7,6 @@ import React, { useState, useEffect, useContext, - createContext, ReactNode, HTMLAttributes, MouseEventHandler, @@ -16,10 +15,9 @@ import React, { Children, } from "react" import { Icon, KnownIcons } from "../Icon/Icon.component" +import { LevelContext } from "../SideNavigation/levelContext" import "./sidenavigationitem.css" -const LevelContext = createContext(0) - const sideNavItemStyles = ` jn:flex jn:items-center @@ -151,7 +149,7 @@ export const SideNavigationItem = ({ return ( -
+
{href ? ( Date: Wed, 17 Jun 2026 18:02:14 +0200 Subject: [PATCH 11/17] fix(ui): address review feedback on SideNavigation polish PR Signed-off-by: Esther Schmitz --- .../DataGridCell/DataGridCell.test.tsx | 5 +++ .../SideNavigationGroup.component.tsx | 16 ++++++-- .../SideNavigationGroup.test.tsx | 41 +++++++++++++++++++ .../SideNavigationItem/sidenavigationitem.css | 5 ++- 4 files changed, 63 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/src/components/DataGridCell/DataGridCell.test.tsx b/packages/ui-components/src/components/DataGridCell/DataGridCell.test.tsx index 669b7aa6a0..1c2f819d65 100644 --- a/packages/ui-components/src/components/DataGridCell/DataGridCell.test.tsx +++ b/packages/ui-components/src/components/DataGridCell/DataGridCell.test.tsx @@ -18,4 +18,9 @@ describe("DataGridCell", () => { expect(screen.getByRole("gridcell")).toBeInTheDocument() expect(screen.getByRole("gridcell")).toHaveClass("my-custom-class") }) + + test("does not apply a reduced font size by default", () => { + render() + expect(screen.getByRole("gridcell")).not.toHaveClass("jn:text-sm") + }) }) diff --git a/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.component.tsx b/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.component.tsx index 144195dea4..ae48dd049b 100644 --- a/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.component.tsx +++ b/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.component.tsx @@ -18,6 +18,9 @@ const sideNavGroupStyles = ` jn:rounded jn:border-l-[0.25rem] jn:border-transparent +` + +const interactiveGroupStyles = ` jn:cursor-pointer jn:hover:bg-theme-sidenav-item-hover ` @@ -77,6 +80,8 @@ export const SideNavigationGroup = ({ children, label = "", open = false }: Side const hasChildren = !!children && Children.count(children) > 0 + const titleText: string | undefined = typeof label === "string" && label.length > 0 ? label : undefined + const renderChevron = () => hasChildren ? ( }> + + + ) + + const group = screen.getByRole("button") + expect(group).not.toHaveAttribute("title") + }) }) diff --git a/packages/ui-components/src/components/SideNavigationItem/sidenavigationitem.css b/packages/ui-components/src/components/SideNavigationItem/sidenavigationitem.css index 2f39a47c01..0d82af1a53 100644 --- a/packages/ui-components/src/components/SideNavigationItem/sidenavigationitem.css +++ b/packages/ui-components/src/components/SideNavigationItem/sidenavigationitem.css @@ -10,10 +10,13 @@ } .juno-sidenavigation-item:hover { - background-color: var(--color-sidenav-item-background-hover); color: var(--color-sidenav-item-text-hover); } +.juno-sidenavigation-item:not(.juno-sidenavigation-item-selected):hover { + background-color: var(--color-sidenav-item-background-hover); +} + .juno-sidenavigation-item:focus { outline: none; box-shadow: 0 0 0 2px var(--color-accent); From 2ab93c48e347a926a7487eb340562057e24e04e3 Mon Sep 17 00:00:00 2001 From: Esther Schmitz Date: Thu, 18 Jun 2026 18:25:59 +0200 Subject: [PATCH 12/17] fix(ui): indent nested SideNavigationGroups correctly MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A SideNavigationGroup nested inside another group or a SideNavigationItem did not indent its own label, and reset the level provided to its children to 1 — so deeply nested items were under-indented. Make the Group read LevelContext for its own depth, propagate level + 1 to its children, and consolidate Item/Group CSS into a single sidenavigation.css that drives indentation from shared `level-N` classes. Signed-off-by: Esther Schmitz --- .changeset/sidenavigation-label-overflow.md | 1 + .../SideNavigation/SideNavigation.stories.tsx | 16 ++++----- .../components/SideNavigation/levelContext.ts | 2 +- .../sidenavigation.css} | 36 ++++++++++++------- .../SideNavigationGroup.component.tsx | 9 +++-- .../SideNavigationGroup.test.tsx | 28 +++++++++++++++ .../SideNavigationItem.component.tsx | 2 +- .../SideNavigationItem.test.tsx | 14 ++++++++ packages/ui-components/src/global.css | 2 +- 9 files changed, 84 insertions(+), 26 deletions(-) rename packages/ui-components/src/components/{SideNavigationItem/sidenavigationitem.css => SideNavigation/sidenavigation.css} (61%) diff --git a/.changeset/sidenavigation-label-overflow.md b/.changeset/sidenavigation-label-overflow.md index 8a0448005a..a9df3844df 100644 --- a/.changeset/sidenavigation-label-overflow.md +++ b/.changeset/sidenavigation-label-overflow.md @@ -8,3 +8,4 @@ SideNavigation polish: - Wrapped labels are left-aligned, and the expand/collapse chevron stays aligned with the first line. - `SideNavigationItem` and its expand chevron now show a hover background. - The whole `SideNavigationGroup` row is clickable to expand/collapse, and its children are indented to match nested `SideNavigationItem` children. +- Nested `SideNavigationGroup`s (a group inside another group, or inside a `SideNavigationItem`) now indent correctly. diff --git a/packages/ui-components/src/components/SideNavigation/SideNavigation.stories.tsx b/packages/ui-components/src/components/SideNavigation/SideNavigation.stories.tsx index 1c0efe7084..69146127ea 100644 --- a/packages/ui-components/src/components/SideNavigation/SideNavigation.stories.tsx +++ b/packages/ui-components/src/components/SideNavigation/SideNavigation.stories.tsx @@ -42,7 +42,7 @@ export const Default: Story = { - + ), @@ -60,20 +60,20 @@ export const NavigationWithGroups: Story = { render: (args) => ( - - + + - + - - + + - + - + diff --git a/packages/ui-components/src/components/SideNavigation/levelContext.ts b/packages/ui-components/src/components/SideNavigation/levelContext.ts index 1ebfeadc60..034731bfed 100644 --- a/packages/ui-components/src/components/SideNavigation/levelContext.ts +++ b/packages/ui-components/src/components/SideNavigation/levelContext.ts @@ -1,5 +1,5 @@ /* - * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-FileCopyrightText: 2026 SAP SE or an SAP affiliate company and Juno contributors * SPDX-License-Identifier: Apache-2.0 */ diff --git a/packages/ui-components/src/components/SideNavigationItem/sidenavigationitem.css b/packages/ui-components/src/components/SideNavigation/sidenavigation.css similarity index 61% rename from packages/ui-components/src/components/SideNavigationItem/sidenavigationitem.css rename to packages/ui-components/src/components/SideNavigation/sidenavigation.css index 0d82af1a53..d17aae3b50 100644 --- a/packages/ui-components/src/components/SideNavigationItem/sidenavigationitem.css +++ b/packages/ui-components/src/components/SideNavigation/sidenavigation.css @@ -1,8 +1,24 @@ /* - * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors + * SPDX-FileCopyrightText: 2026 SAP SE or an SAP affiliate company and Juno contributors * SPDX-License-Identifier: Apache-2.0 */ +/* Shared nesting levels. + * Both SideNavigationItem and SideNavigationGroup tag the element that carries + * their label with one of these classes; the indentation lives here so an item + * and a group at the same nesting depth always indent identically. + * level-1 has no margin-left rule (top level, flush with the navigation edge). + */ +.level-2 { + margin-left: 1.75rem; +} + +.level-3 { + margin-left: 2.5rem; +} + +/* SideNavigationItem */ + .juno-sidenavigation-item { border-radius: 0.25rem; border-left: 0.25rem solid transparent; @@ -38,9 +54,10 @@ background-color: var(--color-sidenav-item-background-hover); } -.level-1, -.level-2, -.level-3 { +/* Item label: clamp + per-level font weight, derived from the shared level-N classes. */ +.juno-sidenavigation-item .level-1, +.juno-sidenavigation-item .level-2, +.juno-sidenavigation-item .level-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; @@ -49,16 +66,11 @@ text-align: left; } -.level-1 { +.juno-sidenavigation-item .level-1 { font-weight: bold; } -.level-2 { - margin-left: 1.75rem; - font-weight: 500; -} - -.level-3 { - margin-left: 2.5rem; +.juno-sidenavigation-item .level-2, +.juno-sidenavigation-item .level-3 { font-weight: 500; } diff --git a/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.component.tsx b/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.component.tsx index ae48dd049b..326d231046 100644 --- a/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.component.tsx +++ b/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.component.tsx @@ -3,10 +3,11 @@ * SPDX-License-Identifier: Apache-2.0 */ -import React, { Children, ReactElement, ReactNode, useEffect, useState, MouseEvent } from "react" +import React, { Children, ReactElement, ReactNode, useContext, useEffect, useState, MouseEvent } from "react" import { Icon } from "../Icon" import { SideNavigationItemProps } from "../SideNavigationItem" import { LevelContext } from "../SideNavigation/levelContext" +import "../SideNavigation/sidenavigation.css" const sideNavGroupStyles = ` jn:flex @@ -67,6 +68,8 @@ export interface SideNavigationGroupProps { export const SideNavigationGroup = ({ children, label = "", open = false }: SideNavigationGroupProps): ReactNode => { const [isOpen, setIsOpen] = useState(open) + const level = useContext(LevelContext) + const levelClassName = `level-${level + 1}` // Sync internal state with external prop changes useEffect(() => { @@ -91,7 +94,7 @@ export const SideNavigationGroup = ({ children, label = "", open = false }: Side const renderLabel = () => ( - {label} + {label} ) @@ -123,7 +126,7 @@ export const SideNavigationGroup = ({ children, label = "", open = false }: Side return ( <> {renderGroup()} - {isOpen && {children}} + {isOpen && {children}} ) } diff --git a/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.test.tsx b/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.test.tsx index 3724fc1281..31345887e8 100644 --- a/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.test.tsx +++ b/packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.test.tsx @@ -102,4 +102,32 @@ describe("SideNavigationGroup", () => { const group = screen.getByRole("button") expect(group).not.toHaveAttribute("title") }) + + test("indents the group label based on its nesting level", () => { + render( + + + + + + + + ) + + expect(screen.getByText("Top")).toHaveClass("level-1") + expect(screen.getByText("Middle")).toHaveClass("level-2") + expect(screen.getByText("Inner")).toHaveClass("level-3") + }) + + test("propagates its level so child SideNavigationItems indent correctly", () => { + render( + + + + + + ) + + expect(screen.getByText("Leaf")).toHaveClass("level-3") + }) }) diff --git a/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx b/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx index 1bf3b54964..1d5ed80d14 100644 --- a/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx +++ b/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx @@ -16,7 +16,7 @@ import React, { } from "react" import { Icon, KnownIcons } from "../Icon/Icon.component" import { LevelContext } from "../SideNavigation/levelContext" -import "./sidenavigationitem.css" +import "../SideNavigation/sidenavigation.css" const sideNavItemStyles = ` jn:flex diff --git a/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.test.tsx b/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.test.tsx index 6c76d753a3..62bc6dcf3f 100644 --- a/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.test.tsx +++ b/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.test.tsx @@ -104,4 +104,18 @@ describe("SideNavigationItem", () => { const itemElement = screen.getByRole("button") expect(itemElement).not.toHaveAttribute("title") }) + + it("applies the top-level class at the root", () => { + render() + expect(screen.getByText("Top")).toHaveClass("level-1") + }) + + it("applies the second-level class when nested once", () => { + render( + + + + ) + expect(screen.getByText("Child")).toHaveClass("level-2") + }) }) diff --git a/packages/ui-components/src/global.css b/packages/ui-components/src/global.css index 0765870951..1b0666befc 100644 --- a/packages/ui-components/src/global.css +++ b/packages/ui-components/src/global.css @@ -13,7 +13,7 @@ @import "./components/TextInput/textinput.css" layer(utilities); @import "./components/ThemeToggle/themeToggle.css" layer(utilities); @import "./components/DataGridRow/data-grid-row.css" layer(utilities); -@import "./components/SideNavigationItem/sidenavigationitem.css" layer(utilities); +@import "./components/SideNavigation/sidenavigation.css" layer(utilities); @import "./components/PageFooter/page-footer.css" layer(utilities); :root, From e4b27c651c40222d1e7e3926a07d4e36d7858316 Mon Sep 17 00:00:00 2001 From: Esther Schmitz Date: Thu, 18 Jun 2026 18:41:17 +0200 Subject: [PATCH 13/17] fix(ui): align SideNavigationItem icon with first line of wrapped label When a SideNavigationItem label wraps to two lines, the leading icon now stays aligned with the first line of text instead of centering against the full two-line block, matching the chevron alignment fix. Signed-off-by: Esther Schmitz --- .changeset/sidenavigation-label-overflow.md | 2 +- .../SideNavigationItem/SideNavigationItem.component.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/sidenavigation-label-overflow.md b/.changeset/sidenavigation-label-overflow.md index a9df3844df..5c28c2f88b 100644 --- a/.changeset/sidenavigation-label-overflow.md +++ b/.changeset/sidenavigation-label-overflow.md @@ -5,7 +5,7 @@ SideNavigation polish: - Long labels in `SideNavigationItem` and `SideNavigationGroup` now clamp to two lines and break mid-word, instead of overflowing the sidenav. String labels are exposed as a native `title` tooltip so users can read the full text on hover. -- Wrapped labels are left-aligned, and the expand/collapse chevron stays aligned with the first line. +- Wrapped labels are left-aligned, and the expand/collapse chevron and optional icon stay aligned with the first line. - `SideNavigationItem` and its expand chevron now show a hover background. - The whole `SideNavigationGroup` row is clickable to expand/collapse, and its children are indented to match nested `SideNavigationItem` children. - Nested `SideNavigationGroup`s (a group inside another group, or inside a `SideNavigationItem`) now indent correctly. diff --git a/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx b/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx index 1d5ed80d14..b80f50b3cb 100644 --- a/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx +++ b/packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx @@ -30,7 +30,7 @@ const sideNavItemStyles = ` const leftStyles = ` jn:flex - jn:items-center + jn:items-start jn:flex-grow jn:min-w-0 ` From 4f09dd984bd3f766a3bc9ec65bac80025ba26a4b Mon Sep 17 00:00:00 2001 From: Esther Schmitz Date: Thu, 18 Jun 2026 18:42:19 +0200 Subject: [PATCH 14/17] chore(ui): drop stale selected flag from SideNavigation story Signed-off-by: Esther Schmitz --- .../src/components/SideNavigation/SideNavigation.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/components/SideNavigation/SideNavigation.stories.tsx b/packages/ui-components/src/components/SideNavigation/SideNavigation.stories.tsx index 69146127ea..8eb7749f22 100644 --- a/packages/ui-components/src/components/SideNavigation/SideNavigation.stories.tsx +++ b/packages/ui-components/src/components/SideNavigation/SideNavigation.stories.tsx @@ -72,7 +72,7 @@ export const NavigationWithGroups: Story = { - + From 1aa82208bddf82835b072ed45ccf49a12ffaef35 Mon Sep 17 00:00:00 2001 From: Esther Schmitz Date: Thu, 18 Jun 2026 18:59:34 +0200 Subject: [PATCH 15/17] test(ui): drop overly specific DataGridCell font-size test Signed-off-by: Esther Schmitz --- .../src/components/DataGridCell/DataGridCell.test.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/ui-components/src/components/DataGridCell/DataGridCell.test.tsx b/packages/ui-components/src/components/DataGridCell/DataGridCell.test.tsx index 1c2f819d65..669b7aa6a0 100644 --- a/packages/ui-components/src/components/DataGridCell/DataGridCell.test.tsx +++ b/packages/ui-components/src/components/DataGridCell/DataGridCell.test.tsx @@ -18,9 +18,4 @@ describe("DataGridCell", () => { expect(screen.getByRole("gridcell")).toBeInTheDocument() expect(screen.getByRole("gridcell")).toHaveClass("my-custom-class") }) - - test("does not apply a reduced font size by default", () => { - render() - expect(screen.getByRole("gridcell")).not.toHaveClass("jn:text-sm") - }) }) From eb0f3577c293e176b9920a4d8db9c2386a5aadcc Mon Sep 17 00:00:00 2001 From: Esther Schmitz Date: Thu, 18 Jun 2026 19:23:22 +0200 Subject: [PATCH 16/17] fix(ui): suppress hover background on disabled SideNavigation expand button Signed-off-by: Esther Schmitz --- .../src/components/SideNavigation/sidenavigation.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/components/SideNavigation/sidenavigation.css b/packages/ui-components/src/components/SideNavigation/sidenavigation.css index d17aae3b50..f87bda78f1 100644 --- a/packages/ui-components/src/components/SideNavigation/sidenavigation.css +++ b/packages/ui-components/src/components/SideNavigation/sidenavigation.css @@ -50,7 +50,7 @@ border-radius: 0.25rem; } -.expand-icon:hover { +.expand-icon:not(:disabled):hover { background-color: var(--color-sidenav-item-background-hover); } From 4d65ee347435e9398734ca285997a6f6794646a8 Mon Sep 17 00:00:00 2001 From: Esther Schmitz Date: Thu, 18 Jun 2026 19:26:15 +0200 Subject: [PATCH 17/17] chore(ui): note disabled chevron hover fix in SideNavigation changeset Signed-off-by: Esther Schmitz --- .changeset/sidenavigation-label-overflow.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/sidenavigation-label-overflow.md b/.changeset/sidenavigation-label-overflow.md index 5c28c2f88b..97510f7b13 100644 --- a/.changeset/sidenavigation-label-overflow.md +++ b/.changeset/sidenavigation-label-overflow.md @@ -6,6 +6,6 @@ SideNavigation polish: - Long labels in `SideNavigationItem` and `SideNavigationGroup` now clamp to two lines and break mid-word, instead of overflowing the sidenav. String labels are exposed as a native `title` tooltip so users can read the full text on hover. - Wrapped labels are left-aligned, and the expand/collapse chevron and optional icon stay aligned with the first line. -- `SideNavigationItem` and its expand chevron now show a hover background. +- `SideNavigationItem` and its expand chevron now show a hover background. The chevron's hover background is suppressed when the item is disabled. - The whole `SideNavigationGroup` row is clickable to expand/collapse, and its children are indented to match nested `SideNavigationItem` children. - Nested `SideNavigationGroup`s (a group inside another group, or inside a `SideNavigationItem`) now indent correctly.