Skip to content

Commit 7977d02

Browse files
s-todorovas-todorova
authored
refactor(ui5-side-navigation): allow long item texts to wrap instead of truncating (#12577)
JIRA: BGSOFUIRODOPI-3547
1 parent d303627 commit 7977d02

File tree

7 files changed

+149
-14
lines changed

7 files changed

+149
-14
lines changed

‎packages/fiori/src/themes/SideNavigationItemBase.css‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@
1515
box-sizing: border-box;
1616
text-decoration: none;
1717
position: relative;
18-
19-
height: var(--_ui5_side_navigation_item_height);
2018
min-height: var(--_ui5_side_navigation_item_height);
2119
cursor: pointer;
2220
color: inherit;
@@ -338,11 +336,25 @@ and there is an additional border that appears on hover. */
338336
.ui5-sn-item-text {
339337
flex: 1;
340338
min-width: 0;
339+
}
340+
341+
:host([side-nav-collapsed]) .ui5-sn-item-text,
342+
:host([design="Action"]) .ui5-sn-item-text {
341343
overflow: hidden;
342344
text-overflow: ellipsis;
343345
white-space: nowrap;
344346
}
345347

348+
:host([in-popover]) .ui5-sn-item-text {
349+
overflow: visible;
350+
text-overflow: unset;
351+
white-space: nowrap;
352+
}
353+
354+
:host(:not([side-nav-collapsed]):not([in-popover])) .ui5-sn-item-text {
355+
margin: var(--_ui5_side_navigation_item_margin) 0;
356+
}
357+
346358
:host(:not([side-nav-collapsed])) .ui5-sn-item:not(.ui5-sn-item-group):not(.ui5-sn-item-with-expander) .ui5-sn-item-text {
347359
padding-inline-end: 0.375rem;
348360
}

‎packages/fiori/src/themes/SideNavigationPopover.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
padding: 0;
55
}
66

7+
.ui5-side-navigation-popover .ui5-side-navigation-in-popover {
8+
width: max-content;
9+
}
10+
711
.ui5-hidden-text {
812
position: absolute;
913
clip: rect(1px,1px,1px,1px);

‎packages/fiori/src/themes/base/SideNavigation-parameters.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
--_ui5_side_navigation_item_border_style_color: none;
2525
--_ui5_side_navigation_item_border_width: 0;
2626
--_ui5_side_navigation_item_height: 2.75rem;
27+
--_ui5_side_navigation_item_margin: 0.875rem;
2728
--_ui5_side_navigation_item_expand_arrow_padding: 0.6875rem;
2829
--_ui5_side_navigation_item_border_radius: 0;
2930
--_ui5_side_navigation_item_bottom_margin: 0;
@@ -72,6 +73,7 @@
7273
--_ui5_side_navigation_navigation_separator_margin: var(--_ui5_side_navigation_navigation_separator_margin_collapsed);
7374
--_ui5_side_navigation_item_height: 2rem;
7475
--_ui5_side_navigation_item_expand_arrow_padding: 0.3125rem;
76+
--_ui5_side_navigation_item_margin: 0.5rem;
7577
}
7678

7779
[dir="rtl"] {

‎packages/fiori/test/pages/SideNavigationWrapping.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Side Navigation with Long Wrapping Texts</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
7+
<script src="%VITE_BUNDLE_PATH%" type="module"></script>
8+
</head>
9+
10+
<body style="background-color: var(--sapBackgroundColor)">
11+
<ui5-side-navigation style="height: 90vh; " id="sn1">
12+
<ui5-side-navigation-item text="Home"
13+
icon="home"
14+
href="#home"
15+
tooltip="Home tooltip"></ui5-side-navigation-item>
16+
<ui5-side-navigation-group id="group1" expanded text="Group with very long text that should wrap" tooltip="Group tooltip">
17+
<!-- Items -->
18+
<ui5-side-navigation-item text="Home 1 lorem ipsum dolor sit amet, consectetur adipiscing elit"
19+
icon="home"
20+
href="#home"
21+
tooltip="Home 1 tooltip"></ui5-side-navigation-item>
22+
<ui5-side-navigation-item text="People" href="#people" icon="group" tooltip="People tooltip">
23+
<ui5-side-navigation-sub-item text="From Other Teams lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="employee-rejections"></ui5-side-navigation-sub-item>
24+
</ui5-side-navigation-item>
25+
<ui5-side-navigation-item text="People unselectable lorem ipsum dolor sit amet, consectetur adipiscing elit" href="#people" expanded unselectable icon="group" tooltip="People unselectable tooltip">
26+
<ui5-side-navigation-sub-item href="#disabled" text="Disabled" title="Disabled item tooltip"></ui5-side-navigation-sub-item>
27+
<ui5-side-navigation-sub-item text="From Other Teams 2 lorem ipsum dolor sit amet, consectetur adipiscing elit"></ui5-side-navigation-sub-item>
28+
</ui5-side-navigation-item>
29+
<ui5-side-navigation-item text="Service Management and Customer Support Operations" href="#people" expanded unselectable icon="group" tooltip="People unselectable tooltip">
30+
<ui5-side-navigation-sub-item href="#disabled" text="Disabled" title="Service Tickets and Customer Issue Resolution"></ui5-side-navigation-sub-item>
31+
<ui5-side-navigation-sub-item text="From Other Teams 2 lorem ipsum dolor sit amet, consectetur adipiscing elit"></ui5-side-navigation-sub-item>
32+
</ui5-side-navigation-item>
33+
</ui5-side-navigation-group>
34+
<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me" ></ui5-side-navigation-item>
35+
<ui5-side-navigation-item href="#events" expanded text="Events lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="calendar">
36+
<ui5-side-navigation-sub-item href="#page1" target="_self" text="Local lorem ipsum dolor sit amet, consectetur adipiscing elit"></ui5-side-navigation-sub-item>
37+
<ui5-side-navigation-sub-item text="Others" selected></ui5-side-navigation-sub-item>
38+
</ui5-side-navigation-item>
39+
<ui5-side-navigation-item href="#locations" text="Locations 2 lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="locate-me"></ui5-side-navigation-item>
40+
<ui5-side-navigation-group expanded text="Group 2 lorem ipsum dolor sit amet, consectetur adipiscing elit">
41+
<!-- Items -->
42+
<ui5-side-navigation-item text="Home 1 lorem ipsum dolor sit amet, consectetur adipiscing elit"
43+
icon="home"
44+
href="#home"
45+
title="Home tooltip"></ui5-side-navigation-item>
46+
<ui5-side-navigation-item text="People 2 lorem ipsum dolor sit amet, consectetur adipiscing elit" href="#people" expanded icon="group">
47+
<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="employee-approvals" title="From My Team tooltip"></ui5-side-navigation-sub-item>
48+
<ui5-side-navigation-sub-item text="From Other Teams 3 lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="employee-rejections"></ui5-side-navigation-sub-item>
49+
</ui5-side-navigation-item>
50+
</ui5-side-navigation-group>
51+
<ui5-side-navigation-group expanded text="Group 2 1">
52+
<!-- Items -->
53+
<ui5-side-navigation-item text="Home 1"
54+
icon="home"
55+
href="#home"
56+
title="Home tooltip"></ui5-side-navigation-item>
57+
<ui5-side-navigation-item text="People" href="#people" expanded icon="group">
58+
<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled" icon="employee-approvals" title="From My Team tooltip"></ui5-side-navigation-sub-item>
59+
<ui5-side-navigation-sub-item text="From Other Teams 4" icon="employee-rejections"></ui5-side-navigation-sub-item>
60+
</ui5-side-navigation-item>
61+
</ui5-side-navigation-group>
62+
<ui5-side-navigation-item href="#page1" target="_self" text="Locations 25" icon="group">
63+
<ui5-side-navigation-sub-item icon="home" href="#page1" target="_self" text="Local lorem ipsum dolor sit amet, consectetur adipiscing elit"></ui5-side-navigation-sub-item>
64+
<ui5-side-navigation-sub-item icon="female" text="Others lorem ipsum dolor sit amet, consectetur adipiscing elit"></ui5-side-navigation-sub-item>
65+
</ui5-side-navigation-item>
66+
<ui5-side-navigation-group expanded text="Group 3">
67+
<ui5-side-navigation-item text="Home 10" icon="home" href="#home" tooltip="Home 10 tooltip"></ui5-side-navigation-item>
68+
<ui5-side-navigation-item text="People" href="#people" expanded icon="group" tooltip="People tooltip">
69+
<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled" icon="employee-approvals" tooltip="Disabled item tooltip"></ui5-side-navigation-sub-item>
70+
<ui5-side-navigation-sub-item text="From Other Teams 5" icon="employee-rejections" tooltip="From Other Teams 5 tooltip"></ui5-side-navigation-sub-item>
71+
</ui5-side-navigation-item>
72+
</ui5-side-navigation-group>
73+
<!-- Fixed Items -->
74+
<ui5-side-navigation-item slot="fixedItems" text="Quick Create" icon="write-new" design="Action" unselectable id="quickCreate" tooltip="Quick Create Tooltip"></ui5-side-navigation-item>
75+
<ui5-side-navigation-item slot="fixedItems" text="Quick Create lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="write-new" design="Action" unselectable id="quickCreate2" tooltip="Quick Create Tooltip"></ui5-side-navigation-item>
76+
<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link" title="Useful links tooltip">
77+
<ui5-side-navigation-sub-item text="Vacation Tool" title="Vacation Tool tooltip"></ui5-side-navigation-sub-item>
78+
<ui5-side-navigation-sub-item text="HR tool"></ui5-side-navigation-sub-item>
79+
</ui5-side-navigation-item>
80+
<ui5-side-navigation-item slot="fixedItems" text="History lorem ipsum dolor sit amet, consectetur adipiscing elit" icon="history"></ui5-side-navigation-item>
81+
</ui5-side-navigation>
82+
83+
<div style="float: right">
84+
<ui5-checkbox id="collapsed" text="Collapsed"></ui5-checkbox>
85+
<ui5-checkbox id="density" text="Compact density"></ui5-checkbox>
86+
<br>
87+
<ui5-label for="slider" show-colon>Change width</ui5-label>
88+
<ui5-slider id="slider" value="0" min="0" max="600" step="50" show-tickmarks label-interval="2"></ui5-slider>
89+
</div>
90+
91+
<script>
92+
const sn = document.getElementById("sn1");
93+
94+
const collapsedBtn = document.getElementById("collapsed");
95+
96+
collapsedBtn.addEventListener("change", e => {
97+
sn.toggleAttribute("collapsed", e.target.checked);
98+
});
99+
100+
const densityBtn = document.getElementById("density");
101+
density.addEventListener("change", e => {
102+
document.body.classList.toggle("ui5-content-density-compact", e.target.checked);
103+
});
104+
105+
slider.addEventListener("ui5-input", function (event) {
106+
sn1.style.width = event.target.value + 'px';
107+
});
108+
</script>
109+
</body>
110+
</html>

‎packages/website/docs/_components_pages/fiori/SideNavigation/SideNavigation.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,6 @@ SideNavigation is enabled to be used inside a responsive popover. This example s
2929
<OverlayMode />
3030

3131
### Defining Custom Width
32-
The horizontal size of the side navigation panel can be customized through CSS. The panel must be at least 16 rem wide to maintain readability and layout stability. You can set a larger width as needed, but it cannot be reduced below 16 rem.
32+
The width of the side navigation panel can be customized using CSS. The panel must be at least 16 rem wide to maintain readability and layout stability. You can set a larger width as needed, but it cannot be reduced below 16 rem. If the panel does not have sufficient space, long texts will wrap automatically.
3333

3434
<CustomWidth />

‎packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/main.js‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@ import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";
44
import "@ui5/webcomponents-fiori/dist/SideNavigation.js";
55

66
import "@ui5/webcomponents-icons/dist/home.js";
7-
import "@ui5/webcomponents-icons/dist/chain-link.js";
8-
import "@ui5/webcomponents-icons/dist/group.js";
9-
import "@ui5/webcomponents-icons/dist/locate-me.js";
10-
import "@ui5/webcomponents-icons/dist/calendar.js";
11-
import "@ui5/webcomponents-icons/dist/history.js";
12-
import "@ui5/webcomponents-icons/dist/customer.js";
7+
import "@ui5/webcomponents-icons/dist/bbyd-dashboard.js";
8+
import "@ui5/webcomponents-icons/dist/bar-chart.js";
9+
import "@ui5/webcomponents-icons/dist/wrench.js";
10+
import "@ui5/webcomponents-icons/dist/address-book.js";
11+
import "@ui5/webcomponents-icons/dist/area-chart.js";
12+
import "@ui5/webcomponents-icons/dist/message-information.js";
13+
import "@ui5/webcomponents-icons/dist/history.js";

‎packages/website/docs/_samples/fiori/SideNavigation/CustomWidth/sample.html‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,19 @@
1414

1515
<ui5-side-navigation>
1616
<ui5-side-navigation-item text="Home" icon="home"></ui5-side-navigation-item>
17-
<ui5-side-navigation-group text="Group" expanded>
18-
<ui5-side-navigation-item text="Locations" icon="locate-me" selected></ui5-side-navigation-item>
19-
<ui5-side-navigation-item text="Events" icon="calendar">
20-
<ui5-side-navigation-sub-item text="Local"></ui5-side-navigation-sub-item>
21-
<ui5-side-navigation-sub-item text="Others"></ui5-side-navigation-sub-item>
17+
<ui5-side-navigation-item text="Resource Planning and Business Management Solutions" icon="bbyd-dashboard"></ui5-side-navigation-item>
18+
<ui5-side-navigation-group text="System & Administration Management" expanded>
19+
<ui5-side-navigation-item text="Analytics and Data Visualization Tools" icon="bar-chart"></ui5-side-navigation-item>
20+
<ui5-side-navigation-item text="System Administration and Configuration Management" icon="wrench">
21+
<ui5-side-navigation-sub-item text="Environment Settings"></ui5-side-navigation-sub-item>
22+
<ui5-side-navigation-sub-item text="Audit Log and Security Monitoring Dashboard"></ui5-side-navigation-sub-item>
2223
</ui5-side-navigation-item>
2324
</ui5-side-navigation-group>
25+
<ui5-side-navigation-group text="Business Operations">
26+
<ui5-side-navigation-item text="Business Partners" icon="address-book" selected></ui5-side-navigation-item>
27+
<ui5-side-navigation-item text="Sales Management and Revenue Operations" icon="area-chart"></ui5-side-navigation-item>
28+
</ui5-side-navigation-group>
29+
<ui5-side-navigation-item text="SAP Support Portal and Technical Assistance" href="https://openui5.hana.ondemand.com/demoapps" target="_blank" icon="message-information"></ui5-side-navigation-item>
2430
<ui5-side-navigation-item slot="fixedItems" text="History" icon="history"></ui5-side-navigation-item>
2531
</ui5-side-navigation>
2632
<!-- playground-fold -->

0 commit comments

Comments
 (0)