Skip to content

Commit 09e3f35

Browse files
LidiyaGeorgievaLidiyaGeorgieva
authored
feat(ui5-side-navigation): visual design enhancements (#10839)
* feat(ui5-side-navigation): visual design enhancements - Added Separator line for actions on two-click items - Increased height of Spacer from 8px to 10px to visually distinguish navigation groups better - Added --Button_BorderColor plus interaction borders to Quick Create (ACC requirement, secondary button style) Jira: BGSOFUIRODOPI-3403
1 parent 7e7b8ad commit 09e3f35

10 files changed

+117
-26
lines changed

‎packages/fiori/src/SideNavigationItem.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@ import {
1010
} from "@ui5/webcomponents-base/dist/Keys.js";
1111
import type SideNavigationItemBase from "./SideNavigationItemBase.js";
1212
import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase.js";
13-
import type SideNavigation from "./SideNavigation.js";
1413
import type SideNavigationSubItem from "./SideNavigationSubItem.js";
1514

1615
// Templates
@@ -134,7 +133,7 @@ class SideNavigationItem extends SideNavigationSelectableItemBase {
134133
get classesArray() {
135134
const classes = super.classesArray;
136135

137-
if (!this.disabled && (this.parentNode as SideNavigation).collapsed && this.items.length) {
136+
if (!this.disabled && this.sideNavigation?.collapsed && this.items.length) {
138137
classes.push("ui5-sn-item-with-expander");
139138
}
140139

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

-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,6 @@
4848
}
4949

5050
.ui5-navigation-menu-item-root .ui5-sn-item-external-link-icon {
51-
min-width: 2rem;
5251
height: 0.875rem;
5352
}
5453

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

+71-10
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
.ui5-sn-item {
88
display: flex;
99
align-items: center;
10-
width: 100%;
10+
width: auto;
1111
box-sizing: border-box;
1212
text-decoration: none;
1313
position: relative;
@@ -29,7 +29,33 @@
2929
}
3030

3131
:host([design="Action"]) {
32-
color: var(--sapButton_TextColor);
32+
color: var(--sapButton_TextColor);
33+
}
34+
35+
:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):active [ui5-icon],
36+
:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):active .ui5-sn-item-text {
37+
color: var(--_ui5_side_navigation_active_text_color);
38+
}
39+
40+
:host([design="Action"]) .ui5-sn-item {
41+
border: var(--sapButton_BorderWidth) solid var(--sapButton_BorderColor);
42+
box-sizing: content-box;
43+
}
44+
45+
:host([design="Action"]:not([side-nav-collapsed])) .ui5-sn-item {
46+
max-width: -moz-available;
47+
max-width: -webkit-fill-available;
48+
max-width: fill-available;
49+
}
50+
51+
:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):hover {
52+
border: var(--_ui5_side_navigation_action_item_border_hover);
53+
background: var(--sapButton_Hover_Background);
54+
}
55+
56+
:host([design="Action"]) .ui5-sn-item:not(.ui5-sn-item-disabled):active {
57+
border: var(--_ui5_side_navigation_action_item_border_active);
58+
background: var(--sapButton_Active_Background);
3359
}
3460

3561
.ui5-sn-item:focus {
@@ -123,7 +149,7 @@ and there is an additional border that appears on hover. */
123149
border-width: var(--_ui5_side_navigation_selected_border_width);
124150
}
125151

126-
.ui5-sn-item:not(.ui5-sn-item-disabled):not(.ui5-sn-item-selected):hover::before {
152+
:host(:not([design="Action"])) .ui5-sn-item:not(.ui5-sn-item-disabled):not(.ui5-sn-item-selected):hover::before {
127153
border: var(--_ui5_side_navigation_hover_border_style_color);
128154
border-width: var(--_ui5_side_navigation_hover_border_width);
129155
}
@@ -157,15 +183,29 @@ and there is an additional border that appears on hover. */
157183
:host([design="Action"]) .ui5-sn-item-external-link-icon {
158184
color: var(--sapButton_TextColor);
159185
}
160-
161-
:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon,
162186
.ui5-sn-item-external-link-icon {
187+
min-width: 3rem;
188+
}
189+
190+
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-toggle-icon,
191+
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-toggle-icon,
192+
:host(:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon {
163193
min-width: var(--_ui5_side_navigation_expand_icon_width);
194+
padding-inline: 0.25rem 0.375rem;
195+
padding-block: 0.25rem; /* height of the separator (the border left) should be --sapElement_Condensed_Heightwhich is equal to 1.375rem (22px) */
196+
border-inline-start: 0.0625rem solid var(--sapTextColor);
197+
margin-inline-start: 1rem;
198+
}
199+
200+
:host([unselectable]:not([side-nav-collapsed])) .ui5-sn-item-toggle-icon,
201+
:host(:not([side-nav-collapsed])) .ui5-sn-item-group .ui5-sn-item-toggle-icon,
202+
:host([unselectable][side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-toggle-icon,
203+
:host([unselectable][side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-toggle-icon {
204+
border-inline-start: none;
164205
}
165206

166207
:host([in-popover]) .ui5-sn-item-toggle-icon {
167208
display: none;
168-
min-width: var(--_ui5_side_navigation_expand_icon_width);
169209
}
170210

171211
:host([side-nav-collapsed]) .ui5-sn-item {
@@ -175,11 +215,15 @@ and there is an additional border that appears on hover. */
175215
:host([slot="fixedItems"]:not(side-nav-collapsed)) .ui5-sn-item.ui5-sn-item-level1 {
176216
margin-top: var(--_ui5_side_navigation_first_fixed_item_margin_top); /* space for the focus*/
177217
}
178-
179218
:host([side-nav-collapsed]) .ui5-sn-item-icon {
180219
padding-inline-end: 1rem;
181220
}
182221

222+
:host([design="Action"][side-nav-collapsed]) .ui5-sn-item-icon {
223+
padding-inline-end: calc(1rem - 1px); /* minus the width of the border */
224+
padding-inline-start: calc(1rem - 1px); /* minus the width of the border */
225+
}
226+
183227
:host([side-nav-collapsed]) .ui5-sn-item-text {
184228
display: none;
185229
}
@@ -203,13 +247,30 @@ and there is an additional border that appears on hover. */
203247
padding-inline-end: var(--_ui5_side_navigation_item_collapsed_padding_right);
204248
}
205249

250+
:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
251+
:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander) {
252+
padding-inline-end: 0;
253+
}
254+
255+
:host([unselectable][side-nav-collapsed]) .ui5-sn-item.ui5-sn-item.ui5-sn-item-with-expander:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover,
256+
:host([unselectable][side-nav-collapsed]) .ui5-sn-item.ui5-sn-item.ui5-sn-item-with-expander:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus {
257+
padding-inline-end: var(--_ui5_side_navigation_item_collapsed_unselectable_padding);
258+
}
259+
260+
:host([unselectable][side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-with-expander):hover,
261+
:host([unselectable][side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):not(.ui5-sn-item-with-expander):focus {
262+
padding-inline-end: var(--_ui5_side_navigation_action_item_collapsed_padding);
263+
}
264+
206265
:host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-selected:hover,
207266
:host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-selected:focus {
208267
background: var(--sapList_SelectionBackgroundColor);
209268
}
210269

211-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
212-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander) {
270+
:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander),
271+
:host([side-nav-collapsed]) div.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander),
272+
:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover:not(.ui5-sn-item-with-expander):not([target="_blank"]),
273+
:host([side-nav-collapsed]) a.ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus:not(.ui5-sn-item-with-expander):not([target="_blank"]) {
213274
padding-inline-end: var(--_ui5_side_navigation_item_collapsed_hover_focus_padding_right);
214275
}
215276

@@ -253,5 +314,5 @@ and there is an additional border that appears on hover. */
253314
}
254315

255316
.ui5-sn-item-separator {
256-
min-height: 0.5rem;
317+
min-height: 0.625rem;
257318
}

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

+7-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
--_ui5_side_navigation_icon_color: var(--sapContent_IconColor);
2020
--_ui5_side_navigation_expand_icon_color: var(--sapContent_IconColor);
2121
--_ui5_side_navigation_expand_icon_width: 2rem;
22+
--_ui5_side_navigation_external_link_width: 3rem;
2223
--_ui5_side_navigation_hover_border_style_color: none;
2324
--_ui5_side_navigation_hover_border_width: 0;
2425
--_ui5_side_navigation_group_border_style_color: solid var(--sapList_BorderColor);
@@ -64,14 +65,19 @@
6465
--_ui5_side_navigation_first_fixed_item_margin_top: 0;
6566

6667
--_ui5_side_navigation_item_expand_icon_visibility: none;
67-
--_ui5_side_navigation_item_collapsed_hover_focus_width: 100%;
68+
--_ui5_side_navigation_item_collapsed_hover_focus_width: auto;
6869
--_ui5_side_navigation_item_collapsed_hover_focus_display: none;
6970
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 0;
7071
--_ui5_side_navigation_item_collapsed_padding_right: 0;
72+
--_ui5_side_navigation_action_item_collapsed_padding: 0;
73+
--_ui5_side_navigation_item_collapsed_unselectable_padding: 0;
74+
--_ui5_side_navigation_action_item_border_hover: var(--sapButton_BorderWidth) solid var(--sapButton_Hover_BorderColor);
75+
--_ui5_side_navigation_action_item_border_active: var(--sapButton_BorderWidth) solid var(--sapButton_Active_BorderColor);
7176

7277
--_ui5_side_navigation_item_expand_icon_right: -0.5rem;
7378
--_ui5_side_navigation_item_expand_icon_hover_left: auto;
7479
--_ui5_side_navigation_item_expand_icon_hover_right: 0;
80+
--_ui5_side_navigation_active_text_color: var(--sapList_Active_TextColor);
7581
}
7682

7783
[data-ui5-compact-size],

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

+7-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717

1818
--_ui5_side_navigation_icon_color: var(--sapList_TextColor);
1919
--_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor);
20-
--_ui5_side_navigation_expand_icon_width: 3rem;
20+
--_ui5_side_navigation_expand_icon_width: 2.25rem;
21+
--_ui5_side_navigation_external_link_width: 3rem;
2122
--_ui5_side_navigation_group_border_style_color: none;
2223
--_ui5_side_navigation_item_border_radius: 0.375rem;
2324
--_ui5_side_navigation_item_bottom_margin: 0.25rem;
@@ -47,12 +48,15 @@
4748
--_ui5_side_navigation_popup_title_line_height: 1.5rem;
4849
--_ui5_side_navigation_selection_indicator_display: inline-block;
4950
--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
51+
--_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
5052

5153
--_ui5_side_navigation_item_expand_icon_visibility: block;
5254
--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;
5355
--_ui5_side_navigation_item_collapsed_hover_focus_display: block;
54-
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 2rem;
55-
--_ui5_side_navigation_item_collapsed_padding_right: 2rem;
56+
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
57+
--_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
58+
--_ui5_side_navigation_action_item_collapsed_padding: 1rem;
59+
--_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
5660
}
5761

5862
[data-ui5-compact-size],

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

+7-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717

1818
--_ui5_side_navigation_icon_color: var(--sapList_TextColor);
1919
--_ui5_side_navigation_expand_icon_color: var(--sapList_TextColor);
20-
--_ui5_side_navigation_expand_icon_width: 3rem;
20+
--_ui5_side_navigation_expand_icon_width: 2.25rem;
21+
--_ui5_side_navigation_external_link_width: 3rem;
2122
--_ui5_side_navigation_group_border_style_color: none;
2223
--_ui5_side_navigation_item_border_radius: 0.375rem;
2324
--_ui5_side_navigation_item_bottom_margin: 0.25rem;
@@ -47,12 +48,15 @@
4748
--_ui5_side_navigation_popup_title_line_height: 1.5rem;
4849
--_ui5_side_navigation_selection_indicator_display: inline-block;
4950
--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
51+
--_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
5052

5153
--_ui5_side_navigation_item_expand_icon_visibility: block;
5254
--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;
5355
--_ui5_side_navigation_item_collapsed_hover_focus_display: block;
54-
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 2rem;
55-
--_ui5_side_navigation_item_collapsed_padding_right: 2rem;
56+
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
57+
--_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
58+
--_ui5_side_navigation_action_item_collapsed_padding: 1rem;
59+
--_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
5660
}
5761

5862
[data-ui5-compact-size],

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

+9-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
--_ui5_side_navigation_phone_width: 100% !important;
1414

1515
--_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor);
16-
--_ui5_side_navigation_expand_icon_width: 3rem;
16+
--_ui5_side_navigation_expand_icon_width: 2.25rem;
17+
--_ui5_side_navigation_external_link_width: 3rem;
1718
--_ui5_side_navigation_item_bottom_margin: 0.25rem;
1819
--_ui5_side_navigation_item_focus_border_offset: 0;
1920
--_ui5_side_navigation_item_border_style_color: solid var(--sapList_BorderColor);
@@ -43,12 +44,17 @@
4344
--_ui5_side_navigation_popup_title_line_height: 1.5rem;
4445
--_ui5_side_navigation_selection_indicator_display: block;
4546
--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
47+
--_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
4648

4749
--_ui5_side_navigation_item_expand_icon_visibility: block;
4850
--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;
4951
--_ui5_side_navigation_item_collapsed_hover_focus_display: block;
50-
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 2rem;
51-
--_ui5_side_navigation_item_collapsed_padding_right: 2rem;
52+
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
53+
--_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
54+
--_ui5_side_navigation_action_item_collapsed_padding: 1rem;
55+
--_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
56+
--_ui5_side_navigation_action_item_border_hover: var(--sapElement_BorderWidth) solid var(--sapButton_Hover_BorderColor); /*var(--sapList_BorderColor);*/
57+
--_ui5_side_navigation_action_item_border_active: var(--_ui5_side_navigation_action_item_border_hover);
5258
}
5359

5460
[data-ui5-compact-size],

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

+9-3
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
--_ui5_side_navigation_phone_width: 100% !important;
1414

1515
--_ui5_side_navigation_expand_icon_color: var(--sapContent_NonInteractiveIconColor);
16-
--_ui5_side_navigation_expand_icon_width: 3rem;
16+
--_ui5_side_navigation_expand_icon_width: 2.25rem;
17+
--_ui5_side_navigation_external_link_width: 3rem;
1718
--_ui5_side_navigation_item_bottom_margin: 0.25rem;
1819
--_ui5_side_navigation_item_focus_border_offset: 0;
1920
--_ui5_side_navigation_item_border_style_color: solid var(--sapList_BorderColor);
@@ -43,12 +44,17 @@
4344
--_ui5_side_navigation_popup_title_line_height: 1.5rem;
4445
--_ui5_side_navigation_selection_indicator_display: block;
4546
--_ui5_side_navigation_first_fixed_item_margin_top: 0.125rem;
47+
--_ui5_side_navigation_active_text_color: var(--sapButton_TextColor);
4648

4749
--_ui5_side_navigation_item_expand_icon_visibility: block;
4850
--_ui5_side_navigation_item_collapsed_hover_focus_width: fit-content;
4951
--_ui5_side_navigation_item_collapsed_hover_focus_display: block;
50-
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 2rem;
51-
--_ui5_side_navigation_item_collapsed_padding_right: 2rem;
52+
--_ui5_side_navigation_item_collapsed_hover_focus_padding_right: 1rem;
53+
--_ui5_side_navigation_item_collapsed_padding_right: 3.9375rem;
54+
--_ui5_side_navigation_action_item_collapsed_padding: 1rem;
55+
--_ui5_side_navigation_item_collapsed_unselectable_padding: 3rem;
56+
--_ui5_side_navigation_action_item_border_hover: var(--sapElement_BorderWidth) solid var(--sapButton_Hover_BorderColor); /*var(--sapList_BorderColor);*/
57+
--_ui5_side_navigation_action_item_border_active: var(--_ui5_side_navigation_action_item_border_hover);
5258
}
5359

5460
[data-ui5-compact-size],

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

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
<ui5-side-navigation-item design="Action" text="Quick Create" icon="write-new" unselectable>
6464
<ui5-side-navigation-sub-item design="Action" text="Quick Create" unselectable></ui5-side-navigation-sub-item>
6565
</ui5-side-navigation-item>
66+
<ui5-side-navigation-item design="Action" text="Quick Create" icon="write-new" disabled unselectable></ui5-side-navigation-item>
6667
<ui5-side-navigation-item design="Action" href="https://sap.com" target="_blank" text="Quick Create" icon="write-new" unselectable></ui5-side-navigation-item>
6768

6869
<!-- Fixed Items -->

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

+5
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,10 @@
2323
<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled" icon="employee-approvals" title="From My Team tooltip"></ui5-side-navigation-sub-item>
2424
<ui5-side-navigation-sub-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
2525
</ui5-side-navigation-item>
26+
<ui5-side-navigation-item text="People unselectable" href="#people" expanded unselectable icon="group">
27+
<ui5-side-navigation-sub-item href="#disabled" disabled text="Disabled" icon="employee-approvals" title="From My Team tooltip"></ui5-side-navigation-sub-item>
28+
<ui5-side-navigation-sub-item text="From Other Teams" icon="employee-rejections"></ui5-side-navigation-sub-item>
29+
</ui5-side-navigation-item>
2630
</ui5-side-navigation-group>
2731
<ui5-side-navigation-item href="#locations" text="Locations" icon="locate-me" ></ui5-side-navigation-item>
2832
<ui5-side-navigation-item href="#events" expanded text="Events.............................................................." icon="calendar">
@@ -79,6 +83,7 @@
7983
<ui5-side-navigation-sub-item icon="female" text="Others"></ui5-side-navigation-sub-item>
8084
</ui5-side-navigation-item>
8185
<!-- Fixed Items -->
86+
<ui5-side-navigation-item slot="fixedItems" text="Quick Create" icon="write-new" design="Action" unselectable id="quickCreate"></ui5-side-navigation-item>
8287
<ui5-side-navigation-item slot="fixedItems" text="Useful Links" icon="chain-link" title="Useful links tooltip">
8388
<ui5-side-navigation-sub-item text="Vacation Tool" title="Vacation Tool tooltip"></ui5-side-navigation-sub-item>
8489
<ui5-side-navigation-sub-item text="HR tool"></ui5-side-navigation-sub-item>

0 commit comments

Comments
 (0)