fix(ui): polish SideNavigation and DataGridCell font-size revert#1778
Open
edda wants to merge 19 commits into
Open
fix(ui): polish SideNavigation and DataGridCell font-size revert#1778edda wants to merge 19 commits into
edda wants to merge 19 commits into
Conversation
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 <esther.schmitz@sap.com>
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
…spacing Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
🦋 Changeset detectedLatest commit: 4d65ee3 The changes in this PR will be included in the next version bump. This PR includes changesets to release 9 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
|
Contributor
There was a problem hiding this comment.
Pull request overview
This PR polishes SideNavigationItem/SideNavigationGroup behavior and styling for overflow/wrapping/hover + alignment, and restores DataGridCell’s default typography by removing the smaller text-sm default.
Changes:
- Adds title-tooltip support and wrapping/overflow handling improvements for
SideNavigationItem, plus hover styling for the expand chevron. - Refactors
LevelContextinto a shared module and updatesSideNavigationGroupto make the header row clickable. - Reverts
DataGridCelldefault font size back to1remby removingjn:text-sm.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.test.tsx | Adds tests for the new title attribute behavior on SideNavigationItem. |
| packages/ui-components/src/components/SideNavigationItem/sidenavigationitem.css | Adds hover background + clamp/wrapping styles and hover styling for the expand icon. |
| packages/ui-components/src/components/SideNavigationItem/SideNavigationItem.component.tsx | Uses shared LevelContext, improves alignment for wrapped labels, and adds title attribute logic. |
| packages/ui-components/src/components/SideNavigationGroup/SideNavigationGroup.component.tsx | Makes the group header row clickable and introduces clamping/wrapping styles; now uses shared LevelContext for indentation. |
| packages/ui-components/src/components/SideNavigation/levelContext.ts | New shared context module for indentation level. |
| packages/ui-components/src/components/DataGridCell/DataGridCell.component.tsx | Removes jn:text-sm to revert default font size to 1rem. |
| .gitignore | Ignores .mcp.json. |
| .changeset/sidenavigation-label-overflow.md | Changeset entry for SideNavigation polish. |
| .changeset/revert-datagridcell-font-size.md | Changeset entry for DataGridCell font-size revert. |
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
edda
changed the title
TilmanHaupt
previously approved these changes
Jun 18, 2026
franzheidl
previously approved these changes
Jun 18, 2026
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 <esther.schmitz@sap.com>
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 <esther.schmitz@sap.com>
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
…button Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
Signed-off-by: Esther Schmitz <esther.schmitz@sap.com>
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
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
SideNavigationItemandSideNavigationGroup.DataGridCellfont size back to1rem.SideNavigation
SideNavigationItemandSideNavigationGroupclamp to two lines and break mid-word, instead of overflowing the fixed-width sidenav. String labels are exposed as a nativetitletooltip.SideNavigationItemand its expand chevron show a hover background.SideNavigationGrouprow is clickable to expand/collapse, and its direct children are indented to match nested children ofSideNavigationItem.SideNavigationGroupnested inside another group or aSideNavigationItemnow indents its own label and propagates depth to its children, so items at the same nesting depth indent identically regardless of whether their parent is a Group or an Item.LevelContextwas extracted into a shared module so bothSideNavigationItemandSideNavigationGroupcan drive the indentation, and Item/Group CSS was consolidated into a singlesidenavigation.csskeyed on sharedlevel-Nclasses.DataGrid
DataGridCelldefault font size from0.875remback to1rem. A smaller, opt-in size may be reintroduced as a configurable option in the future.Linked issues
Closes #1776
Closes #1777
Closes #1773
Closes #1755
Test plan
SideNavigationItemandSideNavigationGroupwith long, unbreakable labels (long IDs, URLs, camelCase tokens) clamp to two lines.SideNavigationItemstays aligned with the first line when the label wraps.SideNavigationItemand its expand chevron, in both light and dark themes.SideNavigationGrouprow expands/collapses it.SideNavigationGroupare indented like nested children ofSideNavigationItem.SideNavigationGroupnested inside another group or aSideNavigationItemindents its own label and its children at the correct depth.SideNavigationGroupandSideNavigationItemrow heights match.DataGridCellrenders at1remfont size by default.pnpm testpasses.pnpm typecheckpasses.