Skip to content

Commit 95f6891

Browse files
TeodorTaushanovTeodorTaushanov
authored
feat(ui5-side-navigation): make items customizable (#8479)
* feat(ui5-side-navigation): make items customizable * feat(ui5-side-navigation): make items customizable * feat(ui5-side-navigation): fix wording
1 parent c032c0c commit 95f6891

File tree

6 files changed

+316
-302
lines changed

6 files changed

+316
-302
lines changed

‎packages/fiori/src/SideNavigationGroup.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
} from "./generated/i18n/i18n-defaults.js";
2222

2323
// Styles
24-
import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
24+
import SideNavigationGroupCss from "./generated/themes/SideNavigationGroup.css.js";
2525

2626
/**
2727
* @class
@@ -45,7 +45,7 @@ import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js"
4545
tag: "ui5-side-navigation-group",
4646
renderer: litRender,
4747
template: SideNavigationGroupTemplate,
48-
styles: SideNavigationItemCss,
48+
styles: SideNavigationGroupCss,
4949
dependencies: [
5050
Icon,
5151
],

‎packages/fiori/src/SideNavigationSubItem.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import SideNavigationSelectableItemBase from "./SideNavigationSelectableItemBase
66
import SideNavigationSubItemTemplate from "./generated/templates/SideNavigationSubItemTemplate.lit.js";
77

88
// Styles
9-
import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js";
9+
import SideNavigationSubItemCss from "./generated/themes/SideNavigationSubItem.css.js";
1010

1111
/**
1212
* @class
@@ -29,7 +29,7 @@ import SideNavigationItemCss from "./generated/themes/SideNavigationItem.css.js"
2929
tag: "ui5-side-navigation-sub-item",
3030
renderer: litRender,
3131
template: SideNavigationSubItemTemplate,
32-
styles: SideNavigationItemCss,
32+
styles: SideNavigationSubItemCss,
3333
dependencies: [
3434
Icon,
3535
],

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
@import "./SideNavigationItemBase.css";
2+
3+
:host {
4+
font-size: var(--sapFontSmallSize);
5+
font-family: var(--sapFontSemiboldFamily);
6+
color: var(--sapContent_LabelColor);
7+
}
8+
9+
.ui5-sn-item.ui5-sn-item-group {
10+
height: 2rem;
11+
min-height: 2rem;
12+
padding-inline-start: 0.5rem;
13+
gap: 0.4375rem;
14+
}
15+
16+
.ui5-sn-item.ui5-sn-item-group .ui5-sn-item-toggle-icon {
17+
display: none;
18+
}
19+
20+
.ui5-sn-item.ui5-sn-item-group:hover .ui5-sn-item-toggle-icon,
21+
.ui5-sn-item.ui5-sn-item-group:focus .ui5-sn-item-toggle-icon {
22+
display: block;
23+
}
24+
25+
:host(:first-child) .ui5-sn-item-separator:first-child,
26+
:host(:last-child) .ui5-sn-item-separator:last-child,
27+
.ui5-sn-item-group-below-group.ui5-sn-item-separator,
28+
.ui5-sn-item-group-below-group .ui5-sn-item-separator:first-child {
29+
display: none;
30+
}

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

Lines changed: 5 additions & 298 deletions
Original file line numberDiff line numberDiff line change
@@ -1,258 +1,9 @@
1-
.ui5-sn-item-ul {
2-
margin: 0;
3-
padding: 0;
4-
list-style: none;
5-
}
6-
7-
.ui5-sn-item {
8-
display: flex;
9-
align-items: center;
10-
width: 100%;
11-
box-sizing: border-box;
12-
text-decoration: none;
13-
position: relative;
14-
15-
height: var(--_ui5_side_navigation_item_height);
16-
min-height: var(--_ui5_side_navigation_item_height);
17-
cursor: pointer;
18-
background-color: var(--sapList_Background);
19-
border-radius: var(--_ui5_side_navigation_item_border_radius);
20-
transition: var(--_ui5_side_navigation_item_transition);
21-
22-
margin-block-end: var(--_ui5_side_navigation_item_bottom_margin);
23-
}
24-
25-
.ui5-sn-item.ui5-sn-item-group {
26-
height: 2rem;
27-
min-height: 2rem;
28-
padding-inline-start: 0.5rem;
29-
gap: 0.4375rem;
30-
}
31-
32-
.ui5-sn-item.ui5-sn-item-group .ui5-sn-item-toggle-icon {
33-
display: none;
34-
}
35-
36-
.ui5-sn-item.ui5-sn-item-group:hover .ui5-sn-item-toggle-icon,
37-
.ui5-sn-item.ui5-sn-item-group:focus .ui5-sn-item-toggle-icon {
38-
display: block;
39-
}
40-
41-
:host(.ui5-sn-item-hidden[side-nav-collapsed]),
42-
:host([side-nav-collapsed]) .ui5-sn-item-hidden {
43-
display: none;
44-
}
45-
46-
.ui5-sn-item:focus {
47-
outline: none;
48-
}
49-
50-
.ui5-sn-item:focus::after {
51-
border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
52-
position: absolute;
53-
content: "";
54-
inset: var(--_ui5_side_navigation_item_focus_border_offset);
55-
z-index: 2;
56-
pointer-events: none;
57-
border-radius: var(--_ui5_side_navigation_item_focus_border_radius);
58-
}
59-
60-
.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:focus::before {
61-
border: var(--_ui5_side_navigation_selected_and_focused_border_style_color);
62-
}
63-
64-
.ui5-sn-item.ui5-sn-item-group::before,
65-
.ui5-sn-item.ui5-sn-item-level1::before {
66-
border: var(--_ui5_side_navigation_group_border_style_color);
67-
border-width: var(--_ui5_side_navigation_group_border_width);
68-
}
69-
70-
.ui5-sn-item-group[aria-expanded="true"]::before,
71-
.ui5-sn-item-level1[aria-expanded="true"]::before {
72-
border-width: var(--_ui5_side_navigation_group_expanded_border_width);
73-
}
74-
75-
:host(:last-child) .ui5-sn-item.ui5-sn-item-level2:not(.ui5-sn-item-selected)::before {
76-
border: var(--_ui5_side_navigation_group_border_style_color);
77-
border-width: var(--_ui5_side_navigation_group_border_width);
78-
}
79-
80-
/* borders are drawn using a pseudo element.
81-
in some themes, the border is drawn only on the bottom.
82-
in high contrast themes the border is on all sides and there is extra border on hover */
83-
.ui5-sn-item::before {
84-
content: "";
85-
position: absolute;
86-
inset: 0;
87-
pointer-events: none;
88-
}
89-
90-
.ui5-sn-item.ui5-sn-item-disabled {
91-
opacity: var(--sapContent_DisabledOpacity);
92-
cursor: default;
93-
}
94-
95-
.ui5-sn-item:not(.ui5-sn-item-disabled):hover {
96-
background: var(--sapList_Hover_Background);
97-
}
98-
99-
.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected {
100-
background: var(--sapList_SelectionBackgroundColor);
101-
}
102-
103-
.ui5-sn-item:not(.ui5-sn-item-disabled):active .ui5-sn-item-text,
104-
.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-active .ui5-sn-item-text {
105-
color: var(--sapList_Active_TextColor);
106-
}
107-
108-
.ui5-sn-item:not(.ui5-sn-item-disabled):active [ui5-icon],
109-
.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-active [ui5-icon] {
110-
color: var(--sapList_Active_TextColor);
111-
}
112-
113-
.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:hover {
114-
background: var(--sapList_Hover_SelectionBackground);
115-
}
116-
117-
.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:active,
118-
.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected.ui5-sn-item-active,
119-
.ui5-sn-item:not(.ui5-sn-item-disabled):active,
120-
.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-active,
121-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected:active,
122-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected.ui5-sn-item-active {
123-
background: var(--sapList_Active_Background);
124-
}
125-
126-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected {
127-
background: var(--_ui5_side_navigation_collapsed_selected_item_background);
128-
}
129-
130-
.ui5-sn-item::before {
131-
border: var(--_ui5_side_navigation_item_border_style_color);
132-
border-width: var(--_ui5_side_navigation_item_border_width);
133-
}
134-
135-
:host([side-nav-collapsed]) .ui5-sn-item::before {
136-
border-width: var(--_ui5_side_navigation_item_border_width);
137-
}
138-
139-
.ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected::before {
140-
border: var(--_ui5_side_navigation_selected_border_style_color);
141-
border-width: var(--_ui5_side_navigation_selected_border_width);
142-
}
143-
144-
.ui5-sn-item:not(.ui5-sn-item-disabled):not(.ui5-sn-item-selected):hover::before {
145-
border: var(--_ui5_side_navigation_hover_border_style_color);
146-
border-width: var(--_ui5_side_navigation_hover_border_width);
147-
}
148-
149-
.ui5-sn-item.ui5-sn-item-level2::before {
150-
border: var(--_ui5_side_navigation_item_border_style_color);
151-
border-width: var(--_ui5_side_navigation_item_border_width);
152-
}
1+
@import "./SideNavigationItemBase.css";
1532

154-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-disabled).ui5-sn-item-selected::before {
155-
border-radius: var(--_ui5_side_navigation_item_border_radius);
156-
}
157-
158-
:host([in-popover]:last-of-type) .ui5-sn-item:not(:hover):not(:active)::before {
159-
border: var(--_ui5_side_navigation_last_item_border_style);
160-
}
161-
162-
.ui5-sn-item-icon {
163-
color: var(--_ui5_side_navigation_icon_color);
164-
height: var(--_ui5_side_navigation_icon_font_size);
165-
min-width: var(--_ui5_side_navigation_group_icon_width);
166-
}
167-
168-
.ui5-sn-item-toggle-icon,
169-
.ui5-sn-item-external-link-icon {
170-
color: var(--_ui5_side_navigation_expand_icon_color);
171-
min-width: 2rem;
172-
height: 0.875rem;
173-
}
174-
175-
.ui5-sn-item-external-link-icon {
176-
color: var(--_ui5_side_navigation_external_link_icon_color);
177-
}
178-
179-
.ui5-sn-item-fixed .ui5-sn-item-toggle-icon,
180-
.ui5-sn-item-fixed .ui5-sn-item-external-link-icon {
181-
display: none;
182-
}
183-
184-
:host([side-nav-collapsed]) .ui5-sn-item {
185-
justify-content: center;
186-
}
187-
188-
:host([side-nav-collapsed]) .ui5-sn-item-icon {
189-
padding: var(--_ui5_side_navigation_item_collapsed_icon_padding);
190-
}
191-
192-
:host([side-nav-collapsed]) .ui5-sn-item-text {
193-
display: none;
194-
}
195-
196-
:host([side-nav-collapsed]) .ui5-sn-item-toggle-icon,
197-
:host([side-nav-collapsed]) .ui5-sn-item-external-link-icon {
198-
display: none;
199-
}
200-
201-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover,
202-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus {
203-
width: var(--_ui5_side_navigation_item_collapsed_hover_focus_width);
204-
box-shadow: var(--_ui5_side_navigation_box_shadow);
205-
z-index: 1;
206-
}
207-
208-
:host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-selected:hover,
209-
:host([side-nav-collapsed]) .ui5-sn-item.ui5-sn-item-selected:focus {
210-
background: var(--sapList_SelectionBackgroundColor);
211-
}
212-
213-
: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),
214-
: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) {
215-
padding-inline-end: var(--_ui5_side_navigation_item_collapsed_hover_focus_padding_right);
216-
}
217-
218-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-text,
219-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-text,
220-
: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,
221-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):hover .ui5-sn-item-external-link-icon,
222-
: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,
223-
:host([side-nav-collapsed]) .ui5-sn-item:not(.ui5-sn-item-active):not(.ui5-sn-item-no-hover-effect):focus .ui5-sn-item-external-link-icon {
224-
display: var(--_ui5_side_navigation_item_collapsed_hover_focus_display);
225-
}
226-
227-
: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,
228-
: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 {
229-
display: var(--_ui5_side_navigation_item_collapsed_hover_focus_display);
230-
}
231-
232-
.ui5-sn-item[aria-expanded=false] + .ui5-sn-item-ul {
233-
display: none;
234-
}
235-
236-
.ui5-sn-item-level2 {
237-
padding-inline-start: var(--_ui5_side_navigation_group_icon_width);
238-
}
239-
240-
.ui5-sn-item-text {
241-
flex: 1;
242-
min-width: 0;
243-
overflow: hidden;
244-
text-overflow: ellipsis;
245-
white-space: nowrap;
3+
:host {
2464
color: var(--sapList_TextColor);
247-
}
248-
249-
.ui5-sn-item-group .ui5-sn-item-text {
250-
font-size: var(--sapFontSmallSize);
251-
font-family: var(--sapFontSemiboldFamily);
252-
color: var(--sapContent_LabelColor);
253-
}
254-
255-
.ui5-sn-item-level1 .ui5-sn-item-text {
5+
font-family: "72override", var(--sapFontFamily);
6+
font-size: var(--sapFontSize);
2567
font-weight: var(--_ui5_side_navigation_group_text_weight);
2578
}
2589

@@ -261,39 +12,6 @@
26112
padding-inline-start: var(--_ui5_side_navigation_item_padding_left);
26213
}
26314

264-
.ui5-sn-item-with-expander .ui5-sn-item-icon::after {
265-
display: var(--_ui5_side_navigation_triangle_display);
266-
content: "";
267-
width: 0;
268-
height: 0;
269-
border-left: 0.375rem solid transparent;
270-
border-bottom: 0.375rem solid var(--_ui5_side_navigation_triangle_color);
271-
position: absolute;
272-
right: 0.1875rem;
273-
bottom: 0.125rem;
274-
}
275-
276-
.ui5-sn-item-selection-icon {
277-
display: none;
278-
height: 0.5rem;
279-
width: 0.5rem;
280-
margin-inline: 0.5rem;
281-
color: var(--sapList_SelectionBorderColor);
282-
}
283-
284-
.ui5-sn-item[aria-expanded] .ui5-sn-item-selection-icon {
285-
margin-inline: 0.5rem 0;
286-
}
287-
288-
.ui5-sn-item-selected .ui5-sn-item-selection-icon {
289-
display: var(--_ui5_side_navigation_selection_indicator_display);
290-
}
291-
292-
:host([in-popover]) .ui5-sn-item {
293-
padding: var(--_ui5_side_navigation_popup_item_padding);
294-
width: auto;
295-
}
296-
29715
:host([in-popover]) .ui5-sn-item-level1 {
29816
margin-bottom: var(--_ui5_side_navigation_group_bottom_margin_in_popup);
29917
}
@@ -306,15 +24,4 @@
30624

30725
.ui5-sn-item.ui5-sn-item-level1.ui5-sn-item-overflow {
30826
margin-top: auto;
309-
}
310-
311-
.ui5-sn-item-separator {
312-
min-height: 0.75rem;
313-
}
314-
315-
:host(:first-child) .ui5-sn-item-separator:first-child,
316-
:host(:last-child) .ui5-sn-item-separator:last-child,
317-
.ui5-sn-item-group-below-group.ui5-sn-item-separator,
318-
.ui5-sn-item-group-below-group .ui5-sn-item-separator:first-child {
319-
display: none;
320-
}
27+
}

0 commit comments

Comments
 (0)