@fundamental-styles/mcp 0.41.9-rc.2 → 0.41.9-rc.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/data/CHANGELOG.md +91 -3
- package/data/component-guidance.json +2 -2
- package/data/components/avatar-product-switch.md +175 -60
- package/data/components/container.md +113 -0
- package/data/components/form-group.md +1 -0
- package/data/components/navigation-navigation.md +673 -957
- package/data/components/navigation.md +5869 -2148
- package/data/components/shellbar.md +16 -16
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html +4 -234
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal.example.html +196 -232
- package/data/examples/BTP/Navigation/vertical/navigation-legacy.example.html +353 -197
- package/data/examples/BTP/Navigation/vertical/navigation-popup.example.html +451 -245
- package/data/examples/BTP/Navigation/vertical/navigation-search.example.html +937 -0
- package/data/examples/BTP/Navigation/vertical/navigation-snapped.example.html +361 -157
- package/data/examples/BTP/Navigation/vertical/navigation-sticky-area.example.html +935 -0
- package/data/examples/BTP/Navigation/vertical/navigation-tags.example.html +948 -0
- package/data/examples/BTP/Navigation/vertical/navigation.example.html +444 -242
- package/data/examples/Components/Forms/form-group/group-header-in-form-grid-display-mode.example.html +106 -0
- package/data/examples/Components/product-switch/large.example.html +65 -19
- package/data/examples/Components/product-switch/medium.example.html +5 -7
- package/data/examples/Components/product-switch/small.example.html +4 -6
- package/data/examples/Components/product-switch/two-column.example.html +20 -0
- package/data/examples/Components/shellbar/optional-items.example.html +2 -2
- package/data/examples/Components/shellbar/overflow-toolbar.example.html +2 -2
- package/data/examples/Components/shellbar/responsive-paddings.example.html +4 -4
- package/data/examples/Components/shellbar/responsiveness.example.html +8 -8
- package/package.json +1 -1
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
<div
|
|
2
|
-
class="fd-navigation fd-navigation--vertical fd-navigation--snapped"
|
|
3
|
-
role="navigation"
|
|
4
|
-
aria-roledescription="Side Navigation Snapped Mode"
|
|
5
|
-
style="width: 18rem; height: 35rem
|
|
6
|
-
|
|
1
|
+
<div
|
|
2
|
+
class="fd-navigation fd-navigation--vertical fd-navigation--snapped"
|
|
3
|
+
role="navigation"
|
|
4
|
+
aria-roledescription="Side Navigation Snapped Mode"
|
|
5
|
+
style="width: 18rem; height: 35rem"
|
|
6
|
+
>
|
|
7
7
|
<div class="fd-navigation__container fd-navigation__container--top">
|
|
8
|
-
<ul
|
|
9
|
-
class="fd-navigation__list"
|
|
10
|
-
role="menubar"
|
|
8
|
+
<ul
|
|
9
|
+
class="fd-navigation__list"
|
|
10
|
+
role="menubar"
|
|
11
11
|
aria-orientation="vertical"
|
|
12
|
-
aria-roledescription="Navigation List Tree"
|
|
12
|
+
aria-roledescription="Navigation List Tree"
|
|
13
13
|
tabindex="-1"
|
|
14
14
|
>
|
|
15
|
-
<li class="fd-navigation__list-item
|
|
16
|
-
<div
|
|
15
|
+
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
16
|
+
<div
|
|
17
17
|
class="fd-navigation__item"
|
|
18
|
-
role="menuitemradio"
|
|
18
|
+
role="menuitemradio"
|
|
19
19
|
title="Home"
|
|
20
20
|
aria-roledescription="Navigation List Menu Item"
|
|
21
21
|
aria-selected="false"
|
|
@@ -25,19 +25,34 @@
|
|
|
25
25
|
>
|
|
26
26
|
<a class="fd-navigation__link" role="link" href="#">
|
|
27
27
|
<span class="fd-navigation__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
|
|
28
|
-
<span class="fd-navigation__text"
|
|
29
|
-
|
|
28
|
+
<span class="fd-navigation__text"
|
|
29
|
+
>Home
|
|
30
|
+
<span class="fd-object-status fd-object-status--inverted fd-object-status--indication-8">
|
|
31
|
+
<span class="fd-object-status__text">Beta</span>
|
|
32
|
+
<span class="fd-object-status__sr-only">Object Status</span>
|
|
33
|
+
<span class="fd-object-status__sr-only">Indication Color 8</span>
|
|
34
|
+
</span>
|
|
35
|
+
</span>
|
|
36
|
+
<span
|
|
37
|
+
class="fd-navigation__selection-indicator"
|
|
38
|
+
role="presentation"
|
|
39
|
+
aria-hidden="true"
|
|
40
|
+
aria-label="selection indicator"
|
|
41
|
+
></span>
|
|
30
42
|
</a>
|
|
31
43
|
</div>
|
|
32
44
|
</li>
|
|
33
45
|
|
|
34
|
-
<li
|
|
35
|
-
|
|
46
|
+
<li
|
|
47
|
+
class="fd-navigation__list-item fd-navigation__list-item--separator"
|
|
48
|
+
role="presentation"
|
|
49
|
+
aria-hidden="true"
|
|
50
|
+
></li>
|
|
36
51
|
|
|
37
52
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
38
|
-
<div
|
|
39
|
-
class="fd-navigation__item fd-navigation__item--group"
|
|
40
|
-
role="menuitemradio"
|
|
53
|
+
<div
|
|
54
|
+
class="fd-navigation__item fd-navigation__item--group"
|
|
55
|
+
role="menuitemradio"
|
|
41
56
|
title="Main Items Group"
|
|
42
57
|
aria-roledescription="Navigation List Menu Item - Group"
|
|
43
58
|
aria-selected="false"
|
|
@@ -48,21 +63,26 @@
|
|
|
48
63
|
>
|
|
49
64
|
<a class="fd-navigation__link" role="button" tabindex="0" onclick="toggleNavigationSubmenu(event)">
|
|
50
65
|
<span class="fd-navigation__text">Main Items</span>
|
|
51
|
-
<span
|
|
66
|
+
<span
|
|
67
|
+
class="fd-navigation__has-children-indicator"
|
|
68
|
+
role="presentation"
|
|
69
|
+
aria-hidden="true"
|
|
70
|
+
aria-label="has children indicator, expanded"
|
|
71
|
+
></span>
|
|
52
72
|
</a>
|
|
53
73
|
</div>
|
|
54
74
|
|
|
55
|
-
<ul
|
|
56
|
-
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
57
|
-
role="menubar"
|
|
75
|
+
<ul
|
|
76
|
+
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
77
|
+
role="menubar"
|
|
58
78
|
aria-orientation="vertical"
|
|
59
|
-
aria-roledescription="Navigation List Tree - Parent Items"
|
|
79
|
+
aria-roledescription="Navigation List Tree - Parent Items"
|
|
60
80
|
tabindex="-1"
|
|
61
81
|
>
|
|
62
82
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
63
|
-
<div
|
|
83
|
+
<div
|
|
64
84
|
class="fd-navigation__item"
|
|
65
|
-
role="menuitemradio"
|
|
85
|
+
role="menuitemradio"
|
|
66
86
|
title="Favorites"
|
|
67
87
|
aria-roledescription="Navigation List Menu Item - Parent"
|
|
68
88
|
aria-selected="false"
|
|
@@ -71,98 +91,197 @@
|
|
|
71
91
|
aria-haspopup="false"
|
|
72
92
|
>
|
|
73
93
|
<a class="fd-navigation__link" role="link" href="#">
|
|
74
|
-
<span
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
94
|
+
<span
|
|
95
|
+
class="fd-navigation__icon sap-icon--unfavorite"
|
|
96
|
+
role="presentation"
|
|
97
|
+
aria-hidden="true"
|
|
98
|
+
></span>
|
|
99
|
+
<span class="fd-navigation__text"
|
|
100
|
+
>Favorites
|
|
101
|
+
<span
|
|
102
|
+
class="fd-object-status fd-object-status--inverted fd-object-status--indication-4"
|
|
103
|
+
>
|
|
104
|
+
<span class="fd-object-status__text">Alpha</span>
|
|
105
|
+
<span class="fd-object-status__sr-only">Object Status</span>
|
|
106
|
+
<span class="fd-object-status__sr-only">Indication Color 4</span>
|
|
107
|
+
</span>
|
|
108
|
+
</span>
|
|
109
|
+
<span
|
|
110
|
+
class="fd-navigation__selection-indicator"
|
|
111
|
+
role="presentation"
|
|
112
|
+
aria-hidden="true"
|
|
113
|
+
aria-label="selection indicator"
|
|
114
|
+
></span>
|
|
115
|
+
<span
|
|
116
|
+
class="fd-navigation__external-link-indicator"
|
|
117
|
+
role="presentation"
|
|
118
|
+
aria-hidden="true"
|
|
119
|
+
aria-label="external link indicator"
|
|
120
|
+
></span>
|
|
78
121
|
</a>
|
|
79
122
|
</div>
|
|
80
123
|
</li>
|
|
81
124
|
|
|
82
125
|
<li class="fd-navigation__list-item fd-popover" aria-hidden="true">
|
|
83
|
-
<div
|
|
126
|
+
<div
|
|
84
127
|
class="fd-navigation__item fd-popover__control"
|
|
85
|
-
role="menuitemradio"
|
|
128
|
+
role="menuitemradio"
|
|
86
129
|
title="Customer Management"
|
|
87
130
|
aria-roledescription="Navigation List Menu Item - Parent"
|
|
88
|
-
aria-expanded="true"
|
|
131
|
+
aria-expanded="true"
|
|
89
132
|
aria-selected="true"
|
|
90
133
|
aria-haspopup="tree"
|
|
91
134
|
aria-checked="false"
|
|
92
135
|
>
|
|
93
|
-
<a
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
136
|
+
<a
|
|
137
|
+
class="fd-navigation__link"
|
|
138
|
+
role="button"
|
|
139
|
+
tabindex="0"
|
|
140
|
+
onclick="toggleNavigationSubmenu(event)"
|
|
141
|
+
>
|
|
142
|
+
<span
|
|
143
|
+
class="fd-navigation__icon sap-icon--account"
|
|
144
|
+
role="presentation"
|
|
145
|
+
aria-hidden="true"
|
|
146
|
+
></span>
|
|
147
|
+
<span class="fd-navigation__text"
|
|
148
|
+
>Customer Management
|
|
149
|
+
<span
|
|
150
|
+
class="fd-object-status fd-object-status--inverted fd-object-status--indication-2"
|
|
151
|
+
>
|
|
152
|
+
<span class="fd-object-status__text">New</span>
|
|
153
|
+
<span class="fd-object-status__sr-only">Object Status</span>
|
|
154
|
+
<span class="fd-object-status__sr-only">Indication Color 2</span>
|
|
155
|
+
</span>
|
|
156
|
+
</span>
|
|
157
|
+
<span
|
|
158
|
+
class="fd-navigation__selection-indicator"
|
|
159
|
+
role="presentation"
|
|
160
|
+
aria-hidden="true"
|
|
161
|
+
aria-label="selection indicator"
|
|
162
|
+
></span>
|
|
163
|
+
<span
|
|
164
|
+
class="fd-navigation__has-children-indicator"
|
|
165
|
+
role="presentation"
|
|
166
|
+
aria-hidden="true"
|
|
167
|
+
aria-label="has children indicator, expanded"
|
|
168
|
+
></span>
|
|
98
169
|
</a>
|
|
99
170
|
</div>
|
|
100
|
-
<ul
|
|
101
|
-
class="fd-navigation__list-container fd-popover__body fd-popover__body--after fd-popover__body--no-arrow"
|
|
171
|
+
<ul
|
|
172
|
+
class="fd-navigation__list-container fd-popover__body fd-popover__body--after fd-popover__body--no-arrow"
|
|
102
173
|
role="tree"
|
|
103
174
|
aria-roledescription="Navigation List Tree"
|
|
104
|
-
aria-hidden="false"
|
|
175
|
+
aria-hidden="false"
|
|
176
|
+
>
|
|
105
177
|
<li class="fd-navigation__list-wrapper fd-popover__wrapper" aria-hidden="true">
|
|
106
|
-
<div
|
|
178
|
+
<div
|
|
179
|
+
class="fd-navigation__item fd-navigation__item--title"
|
|
180
|
+
aria-level="1"
|
|
181
|
+
role="treeitem"
|
|
182
|
+
aria-expanded="true"
|
|
183
|
+
aria-selected="false"
|
|
184
|
+
>
|
|
107
185
|
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
108
|
-
<span
|
|
186
|
+
<span
|
|
187
|
+
class="fd-navigation__icon sap-icon--account"
|
|
188
|
+
role="presentation"
|
|
189
|
+
aria-hidden="true"
|
|
190
|
+
></span>
|
|
109
191
|
<span class="fd-navigation__text">Customer Management</span>
|
|
110
192
|
<span class="fd-navigation__selection-indicator"></span>
|
|
111
193
|
</a>
|
|
112
194
|
</div>
|
|
113
195
|
|
|
114
|
-
<ul
|
|
115
|
-
class="fd-navigation__list fd-navigation__list--child-items"
|
|
116
|
-
role="group"
|
|
117
|
-
aria-roledescription="Navigation List Tree - Child Items"
|
|
196
|
+
<ul
|
|
197
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
198
|
+
role="group"
|
|
199
|
+
aria-roledescription="Navigation List Tree - Child Items"
|
|
118
200
|
tabindex="-1"
|
|
119
201
|
aria-hidden="true"
|
|
120
202
|
>
|
|
121
203
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
122
|
-
<div
|
|
123
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
124
|
-
aria-level="2"
|
|
125
|
-
role="treeitem"
|
|
204
|
+
<div
|
|
205
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
206
|
+
aria-level="2"
|
|
207
|
+
role="treeitem"
|
|
126
208
|
title="Contacts"
|
|
127
209
|
aria-roledescription="Navigation List Menu Item - Child"
|
|
128
|
-
aria-expanded="false"
|
|
210
|
+
aria-expanded="false"
|
|
129
211
|
aria-selected="false"
|
|
130
212
|
>
|
|
131
213
|
<a class="fd-navigation__link" role="link" href="#">
|
|
132
|
-
<span class="fd-navigation__text">
|
|
133
|
-
|
|
214
|
+
<span class="fd-navigation__text">
|
|
215
|
+
Contacts
|
|
216
|
+
<span
|
|
217
|
+
class="fd-object-status fd-object-status--inverted fd-object-status--indication-8b"
|
|
218
|
+
>
|
|
219
|
+
<span class="fd-object-status__text">Beta</span>
|
|
220
|
+
<span class="fd-object-status__sr-only">Object Status</span>
|
|
221
|
+
<span class="fd-object-status__sr-only"
|
|
222
|
+
>Indication Color 8b</span
|
|
223
|
+
>
|
|
224
|
+
</span>
|
|
225
|
+
</span>
|
|
226
|
+
<span
|
|
227
|
+
class="fd-navigation__selection-indicator"
|
|
228
|
+
role="presentation"
|
|
229
|
+
aria-hidden="true"
|
|
230
|
+
aria-label="selection indicator"
|
|
231
|
+
></span>
|
|
134
232
|
</a>
|
|
135
233
|
</div>
|
|
136
234
|
</li>
|
|
137
235
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
138
|
-
<div
|
|
139
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
140
|
-
aria-level="2"
|
|
141
|
-
role="treeitem"
|
|
236
|
+
<div
|
|
237
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
238
|
+
aria-level="2"
|
|
239
|
+
role="treeitem"
|
|
142
240
|
title="Companies"
|
|
143
241
|
aria-roledescription="Navigation List Menu Item - Child"
|
|
144
|
-
aria-expanded="false"
|
|
242
|
+
aria-expanded="false"
|
|
145
243
|
aria-selected="true"
|
|
146
244
|
>
|
|
147
245
|
<a class="fd-navigation__link" role="link" href="#">
|
|
148
|
-
<span class="fd-navigation__text"
|
|
149
|
-
|
|
246
|
+
<span class="fd-navigation__text"
|
|
247
|
+
>Companies (selected)
|
|
248
|
+
<span
|
|
249
|
+
class="fd-object-status fd-object-status--inverted fd-object-status--indication-8"
|
|
250
|
+
>
|
|
251
|
+
<span class="fd-object-status__text">Sunset</span>
|
|
252
|
+
<span class="fd-object-status__sr-only">Object Status</span>
|
|
253
|
+
<span class="fd-object-status__sr-only"
|
|
254
|
+
>Indication Color 8</span
|
|
255
|
+
>
|
|
256
|
+
</span>
|
|
257
|
+
</span>
|
|
258
|
+
<span
|
|
259
|
+
class="fd-navigation__selection-indicator"
|
|
260
|
+
role="presentation"
|
|
261
|
+
aria-hidden="true"
|
|
262
|
+
aria-label="selection indicator"
|
|
263
|
+
></span>
|
|
150
264
|
</a>
|
|
151
265
|
</div>
|
|
152
266
|
</li>
|
|
153
267
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
154
|
-
<div
|
|
155
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
156
|
-
aria-level="2"
|
|
157
|
-
role="treeitem"
|
|
268
|
+
<div
|
|
269
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
270
|
+
aria-level="2"
|
|
271
|
+
role="treeitem"
|
|
158
272
|
title="Partners"
|
|
159
273
|
aria-roledescription="Navigation List Menu Item - Child"
|
|
160
|
-
aria-expanded="false"
|
|
274
|
+
aria-expanded="false"
|
|
161
275
|
aria-selected="false"
|
|
162
276
|
>
|
|
163
277
|
<a class="fd-navigation__link" role="link" href="#">
|
|
164
278
|
<span class="fd-navigation__text">Partners</span>
|
|
165
|
-
<span
|
|
279
|
+
<span
|
|
280
|
+
class="fd-navigation__selection-indicator"
|
|
281
|
+
role="presentation"
|
|
282
|
+
aria-hidden="true"
|
|
283
|
+
aria-label="selection indicator"
|
|
284
|
+
></span>
|
|
166
285
|
</a>
|
|
167
286
|
</div>
|
|
168
287
|
</li>
|
|
@@ -172,9 +291,9 @@
|
|
|
172
291
|
</li>
|
|
173
292
|
|
|
174
293
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
175
|
-
<div
|
|
294
|
+
<div
|
|
176
295
|
class="fd-navigation__item"
|
|
177
|
-
role="menuitemradio"
|
|
296
|
+
role="menuitemradio"
|
|
178
297
|
title="Sales"
|
|
179
298
|
aria-roledescription="Navigation List Menu Item - Parent"
|
|
180
299
|
aria-selected="false"
|
|
@@ -183,17 +302,26 @@
|
|
|
183
302
|
aria-haspopup="false"
|
|
184
303
|
>
|
|
185
304
|
<a class="fd-navigation__link" role="link" href="#">
|
|
186
|
-
<span
|
|
305
|
+
<span
|
|
306
|
+
class="fd-navigation__icon sap-icon--crm-sales"
|
|
307
|
+
role="presentation"
|
|
308
|
+
aria-hidden="true"
|
|
309
|
+
></span>
|
|
187
310
|
<span class="fd-navigation__text">Sales</span>
|
|
188
|
-
<span
|
|
311
|
+
<span
|
|
312
|
+
class="fd-navigation__selection-indicator"
|
|
313
|
+
role="presentation"
|
|
314
|
+
aria-hidden="true"
|
|
315
|
+
aria-label="selection indicator"
|
|
316
|
+
></span>
|
|
189
317
|
</a>
|
|
190
318
|
</div>
|
|
191
319
|
</li>
|
|
192
320
|
|
|
193
321
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
194
|
-
<div
|
|
322
|
+
<div
|
|
195
323
|
class="fd-navigation__item"
|
|
196
|
-
role="menuitemradio"
|
|
324
|
+
role="menuitemradio"
|
|
197
325
|
title="Products"
|
|
198
326
|
aria-roledescription="Navigation List Menu Item - Parent"
|
|
199
327
|
aria-selected="false"
|
|
@@ -202,22 +330,34 @@
|
|
|
202
330
|
aria-haspopup="false"
|
|
203
331
|
>
|
|
204
332
|
<a class="fd-navigation__link" role="link" href="#">
|
|
205
|
-
<span
|
|
333
|
+
<span
|
|
334
|
+
class="fd-navigation__icon sap-icon--customer-view"
|
|
335
|
+
role="presentation"
|
|
336
|
+
aria-hidden="true"
|
|
337
|
+
></span>
|
|
206
338
|
<span class="fd-navigation__text">Products</span>
|
|
207
|
-
<span
|
|
339
|
+
<span
|
|
340
|
+
class="fd-navigation__selection-indicator"
|
|
341
|
+
role="presentation"
|
|
342
|
+
aria-hidden="true"
|
|
343
|
+
aria-label="selection indicator"
|
|
344
|
+
></span>
|
|
208
345
|
</a>
|
|
209
346
|
</div>
|
|
210
347
|
</li>
|
|
211
348
|
</ul>
|
|
212
349
|
</li>
|
|
213
350
|
|
|
214
|
-
<li
|
|
215
|
-
|
|
351
|
+
<li
|
|
352
|
+
class="fd-navigation__list-item fd-navigation__list-item--separator"
|
|
353
|
+
role="presentation"
|
|
354
|
+
aria-hidden="true"
|
|
355
|
+
></li>
|
|
216
356
|
|
|
217
357
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
218
|
-
<div
|
|
219
|
-
class="fd-navigation__item fd-navigation__item--group"
|
|
220
|
-
role="menuitemradio"
|
|
358
|
+
<div
|
|
359
|
+
class="fd-navigation__item fd-navigation__item--group"
|
|
360
|
+
role="menuitemradio"
|
|
221
361
|
title="Additional Items"
|
|
222
362
|
aria-roledescription="Navigation List Menu Item - Group"
|
|
223
363
|
aria-selected="false"
|
|
@@ -228,21 +368,26 @@
|
|
|
228
368
|
>
|
|
229
369
|
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
230
370
|
<span class="fd-navigation__text">Additional Items</span>
|
|
231
|
-
<span
|
|
371
|
+
<span
|
|
372
|
+
class="fd-navigation__has-children-indicator"
|
|
373
|
+
role="presentation"
|
|
374
|
+
aria-hidden="true"
|
|
375
|
+
aria-label="has children indicator, expanded"
|
|
376
|
+
></span>
|
|
232
377
|
</a>
|
|
233
378
|
</div>
|
|
234
379
|
|
|
235
|
-
<ul
|
|
236
|
-
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
237
|
-
role="menubar"
|
|
380
|
+
<ul
|
|
381
|
+
class="fd-navigation__list fd-navigation__list--parent-items"
|
|
382
|
+
role="menubar"
|
|
238
383
|
aria-orientation="vertical"
|
|
239
|
-
aria-roledescription="Navigation List Tree - Parent Items"
|
|
384
|
+
aria-roledescription="Navigation List Tree - Parent Items"
|
|
240
385
|
tabindex="-1"
|
|
241
386
|
>
|
|
242
387
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
243
|
-
<div
|
|
388
|
+
<div
|
|
244
389
|
class="fd-navigation__item"
|
|
245
|
-
role="menuitemradio"
|
|
390
|
+
role="menuitemradio"
|
|
246
391
|
title="Marketing"
|
|
247
392
|
aria-roledescription="Navigation List Menu Item - Parent"
|
|
248
393
|
aria-selected="false"
|
|
@@ -251,42 +396,63 @@
|
|
|
251
396
|
aria-haspopup="false"
|
|
252
397
|
>
|
|
253
398
|
<a class="fd-navigation__link" role="link" href="#">
|
|
254
|
-
<span
|
|
399
|
+
<span
|
|
400
|
+
class="fd-navigation__icon sap-icon--marketing-campaign"
|
|
401
|
+
role="presentation"
|
|
402
|
+
aria-hidden="true"
|
|
403
|
+
></span>
|
|
255
404
|
<span class="fd-navigation__text">Marketing</span>
|
|
256
|
-
<span
|
|
405
|
+
<span
|
|
406
|
+
class="fd-navigation__selection-indicator"
|
|
407
|
+
role="presentation"
|
|
408
|
+
aria-hidden="true"
|
|
409
|
+
aria-label="selection indicator"
|
|
410
|
+
></span>
|
|
257
411
|
</a>
|
|
258
412
|
</div>
|
|
259
413
|
</li>
|
|
260
414
|
</ul>
|
|
261
415
|
</li>
|
|
262
416
|
|
|
263
|
-
<li
|
|
264
|
-
|
|
417
|
+
<li
|
|
418
|
+
class="fd-navigation__list-item fd-navigation__list-item--spacer"
|
|
419
|
+
role="presentation"
|
|
420
|
+
aria-hidden="true"
|
|
421
|
+
></li>
|
|
265
422
|
|
|
266
423
|
<li class="fd-navigation__list-item fd-navigation__list-item--overflow" aria-hidden="true">
|
|
267
|
-
<div
|
|
268
|
-
class="fd-navigation__item"
|
|
424
|
+
<div
|
|
425
|
+
class="fd-navigation__item"
|
|
269
426
|
aria-roledescription="Navigation List Menu Item"
|
|
270
|
-
aria-haspopup="menu"
|
|
271
|
-
role="menuitem"
|
|
427
|
+
aria-haspopup="menu"
|
|
428
|
+
role="menuitem"
|
|
272
429
|
aria-expanded="true"
|
|
273
|
-
tabindex="-1"
|
|
430
|
+
tabindex="-1"
|
|
431
|
+
>
|
|
274
432
|
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
275
|
-
<span
|
|
433
|
+
<span
|
|
434
|
+
class="fd-navigation__icon sap-icon--overflow"
|
|
435
|
+
role="presentation"
|
|
436
|
+
aria-hidden="true"
|
|
437
|
+
></span>
|
|
276
438
|
<span class="fd-navigation__text">More Items</span>
|
|
277
439
|
</a>
|
|
278
440
|
</div>
|
|
279
|
-
<div
|
|
441
|
+
<div
|
|
442
|
+
class="fd-navigation__list-container fd-navigation__list-container--menu fd-menu"
|
|
443
|
+
aria-hidden="false"
|
|
444
|
+
id="navMenuOverflow"
|
|
445
|
+
>
|
|
280
446
|
<div class="fd-navigation__list-wrapper">
|
|
281
|
-
<ul
|
|
282
|
-
class="fd-navigation__list fd-navigation__list--parent-items fd-menu__list"
|
|
283
|
-
role="menu"
|
|
284
|
-
aria-roledescription="Navigation List Tree"
|
|
285
|
-
tabindex="-1"
|
|
286
|
-
|
|
447
|
+
<ul
|
|
448
|
+
class="fd-navigation__list fd-navigation__list--parent-items fd-menu__list"
|
|
449
|
+
role="menu"
|
|
450
|
+
aria-roledescription="Navigation List Tree"
|
|
451
|
+
tabindex="-1"
|
|
452
|
+
>
|
|
287
453
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
288
|
-
<div
|
|
289
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
454
|
+
<div
|
|
455
|
+
class="fd-navigation__item fd-navigation__item--overflow"
|
|
290
456
|
role="menuitem"
|
|
291
457
|
aria-disabled="false"
|
|
292
458
|
aria-posinset="1"
|
|
@@ -296,16 +462,20 @@
|
|
|
296
462
|
aria-expanded="false"
|
|
297
463
|
>
|
|
298
464
|
<a class="fd-navigation__link" role="link" href="#">
|
|
299
|
-
<span
|
|
465
|
+
<span
|
|
466
|
+
class="fd-navigation__icon sap-icon--official-service"
|
|
467
|
+
role="presentation"
|
|
468
|
+
aria-hidden="true"
|
|
469
|
+
></span>
|
|
300
470
|
<span class="fd-navigation__text" id="txt-1">Manufactring</span>
|
|
301
471
|
<span class="fd-navigation__selection-indicator"></span>
|
|
302
472
|
</a>
|
|
303
473
|
</div>
|
|
304
474
|
</li>
|
|
305
|
-
|
|
475
|
+
|
|
306
476
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
307
|
-
<div
|
|
308
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
477
|
+
<div
|
|
478
|
+
class="fd-navigation__item fd-navigation__item--overflow"
|
|
309
479
|
role="menuitem"
|
|
310
480
|
aria-disabled="false"
|
|
311
481
|
aria-posinset="2"
|
|
@@ -316,80 +486,106 @@
|
|
|
316
486
|
aria-owns="children-menu"
|
|
317
487
|
aria-selected="false"
|
|
318
488
|
>
|
|
319
|
-
<a
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
489
|
+
<a
|
|
490
|
+
class="fd-navigation__link"
|
|
491
|
+
role="button"
|
|
492
|
+
tabindex="0"
|
|
493
|
+
aria-controls="navPopover3"
|
|
494
|
+
>
|
|
495
|
+
<span
|
|
496
|
+
class="fd-navigation__icon sap-icon--manager-insight"
|
|
497
|
+
role="presentation"
|
|
498
|
+
aria-hidden="true"
|
|
499
|
+
></span>
|
|
500
|
+
<span class="fd-navigation__text" id="txt-2">Reports </span>
|
|
501
|
+
<span
|
|
502
|
+
class="fd-navigation__selection-indicator"
|
|
503
|
+
role="presentation"
|
|
504
|
+
aria-hidden="true"
|
|
505
|
+
aria-label="selection indicator"
|
|
506
|
+
></span>
|
|
507
|
+
<span
|
|
508
|
+
class="fd-navigation__has-children-indicator"
|
|
509
|
+
role="presentation"
|
|
510
|
+
aria-hidden="true"
|
|
511
|
+
aria-label="has children indicator, expanded"
|
|
512
|
+
></span>
|
|
324
513
|
</a>
|
|
325
514
|
</div>
|
|
326
|
-
<div
|
|
327
|
-
class="fd-navigation__list-container fd-navigation__list-container--submenu fd-menu__sublist"
|
|
328
|
-
aria-hidden="false"
|
|
515
|
+
<div
|
|
516
|
+
class="fd-navigation__list-container fd-navigation__list-container--submenu fd-menu__sublist"
|
|
517
|
+
aria-hidden="false"
|
|
518
|
+
>
|
|
329
519
|
<div class="fd-navigation__list-wrapper">
|
|
330
|
-
<ul
|
|
331
|
-
class="fd-navigation__list fd-navigation__list--child-items"
|
|
332
|
-
|
|
333
|
-
|
|
520
|
+
<ul
|
|
521
|
+
class="fd-navigation__list fd-navigation__list--child-items"
|
|
522
|
+
id="children-menu"
|
|
523
|
+
role="menu"
|
|
524
|
+
aria-roledescription="Navigation List Tree - Children Items"
|
|
334
525
|
tabindex="-1"
|
|
335
526
|
>
|
|
336
527
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
337
|
-
<div
|
|
338
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
528
|
+
<div
|
|
529
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
339
530
|
aria-labelledby="txt-child-1"
|
|
340
|
-
role="menuitem"
|
|
531
|
+
role="menuitem"
|
|
341
532
|
aria-posinset="1"
|
|
342
533
|
aria-setsize="3"
|
|
343
534
|
aria-disabled="false"
|
|
344
535
|
aria-selected="false"
|
|
345
536
|
>
|
|
346
537
|
<a class="fd-navigation__link" role="link" href="#">
|
|
347
|
-
<span class="fd-navigation__text" id="txt-child-1"
|
|
538
|
+
<span class="fd-navigation__text" id="txt-child-1"
|
|
539
|
+
>Sales Reports</span
|
|
540
|
+
>
|
|
348
541
|
<span class="fd-navigation__selection-indicator"></span>
|
|
349
542
|
</a>
|
|
350
543
|
</div>
|
|
351
544
|
</li>
|
|
352
545
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
353
|
-
<div
|
|
354
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
546
|
+
<div
|
|
547
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
355
548
|
aria-labelledby="txt-child-2"
|
|
356
|
-
role="menuitem"
|
|
549
|
+
role="menuitem"
|
|
357
550
|
aria-posinset="2"
|
|
358
551
|
aria-setsize="3"
|
|
359
552
|
aria-disabled="false"
|
|
360
553
|
aria-selected="false"
|
|
361
554
|
>
|
|
362
555
|
<a class="fd-navigation__link" role="link" href="#">
|
|
363
|
-
<span class="fd-navigation__text" id="txt-child-2"
|
|
556
|
+
<span class="fd-navigation__text" id="txt-child-2"
|
|
557
|
+
>Customer Reports</span
|
|
558
|
+
>
|
|
364
559
|
<span class="fd-navigation__selection-indicator"></span>
|
|
365
560
|
</a>
|
|
366
561
|
</div>
|
|
367
562
|
</li>
|
|
368
563
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
369
|
-
<div
|
|
370
|
-
class="fd-navigation__item fd-navigation__item--child"
|
|
564
|
+
<div
|
|
565
|
+
class="fd-navigation__item fd-navigation__item--child"
|
|
371
566
|
aria-labelledby="txt-child-3"
|
|
372
|
-
role="menuitem"
|
|
567
|
+
role="menuitem"
|
|
373
568
|
aria-posinset="3"
|
|
374
569
|
aria-setsize="3"
|
|
375
570
|
aria-disabled="false"
|
|
376
571
|
aria-selected="false"
|
|
377
572
|
>
|
|
378
573
|
<a class="fd-navigation__link" role="link" href="#">
|
|
379
|
-
<span class="fd-navigation__text" id="txt-child-3"
|
|
574
|
+
<span class="fd-navigation__text" id="txt-child-3"
|
|
575
|
+
>Marketing Reports</span
|
|
576
|
+
>
|
|
380
577
|
<span class="fd-navigation__selection-indicator"></span>
|
|
381
578
|
</a>
|
|
382
579
|
</div>
|
|
383
580
|
</li>
|
|
384
|
-
|
|
385
581
|
</ul>
|
|
386
582
|
</div>
|
|
387
583
|
</div>
|
|
388
584
|
</li>
|
|
389
|
-
|
|
585
|
+
|
|
390
586
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
391
|
-
<div
|
|
392
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
587
|
+
<div
|
|
588
|
+
class="fd-navigation__item fd-navigation__item--overflow"
|
|
393
589
|
role="menuitem"
|
|
394
590
|
aria-disabled="false"
|
|
395
591
|
aria-posinset="3"
|
|
@@ -399,7 +595,11 @@
|
|
|
399
595
|
aria-expanded="false"
|
|
400
596
|
>
|
|
401
597
|
<a class="fd-navigation__link" role="link" href="#">
|
|
402
|
-
<span
|
|
598
|
+
<span
|
|
599
|
+
class="fd-navigation__icon sap-icon--sys-help"
|
|
600
|
+
role="presentation"
|
|
601
|
+
aria-hidden="true"
|
|
602
|
+
></span>
|
|
403
603
|
<span class="fd-navigation__text" id="txt-3">Help</span>
|
|
404
604
|
<span class="fd-navigation__selection-indicator"></span>
|
|
405
605
|
</a>
|
|
@@ -413,41 +613,45 @@
|
|
|
413
613
|
</div>
|
|
414
614
|
|
|
415
615
|
<div class="fd-navigation__container fd-navigation__container--bottom">
|
|
416
|
-
<ul
|
|
417
|
-
class="fd-navigation__list"
|
|
418
|
-
role="tree"
|
|
419
|
-
aria-roledescription="Navigation List Tree"
|
|
420
|
-
tabindex="-1">
|
|
616
|
+
<ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
|
|
421
617
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
422
|
-
<div
|
|
423
|
-
class="fd-navigation__item fd-navigation__item--create"
|
|
424
|
-
aria-level="1"
|
|
425
|
-
role="treeitem"
|
|
426
|
-
title="
|
|
618
|
+
<div
|
|
619
|
+
class="fd-navigation__item fd-navigation__item--create"
|
|
620
|
+
aria-level="1"
|
|
621
|
+
role="treeitem"
|
|
622
|
+
title="Create Ticket"
|
|
427
623
|
aria-roledescription="Navigation List Tree Item"
|
|
428
624
|
aria-selected="false"
|
|
429
625
|
aria-expanded="false"
|
|
430
626
|
>
|
|
431
627
|
<button class="fd-navigation__link">
|
|
432
|
-
<span
|
|
433
|
-
|
|
628
|
+
<span
|
|
629
|
+
class="fd-navigation__icon sap-icon--write-new"
|
|
630
|
+
role="presentation"
|
|
631
|
+
aria-hidden="true"
|
|
632
|
+
></span>
|
|
633
|
+
<span class="fd-navigation__text">Create Ticket</span>
|
|
434
634
|
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
|
|
435
635
|
</button>
|
|
436
636
|
</div>
|
|
437
637
|
</li>
|
|
438
638
|
|
|
439
639
|
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
440
|
-
<div
|
|
441
|
-
class="fd-navigation__item"
|
|
442
|
-
aria-level="1"
|
|
443
|
-
role="treeitem"
|
|
640
|
+
<div
|
|
641
|
+
class="fd-navigation__item"
|
|
642
|
+
aria-level="1"
|
|
643
|
+
role="treeitem"
|
|
444
644
|
title="Legal"
|
|
445
645
|
aria-roledescription="Navigation List Menu Item"
|
|
446
646
|
aria-selected="false"
|
|
447
647
|
aria-expanded="false"
|
|
448
648
|
>
|
|
449
649
|
<a class="fd-navigation__link" role="link" href="#">
|
|
450
|
-
<span
|
|
650
|
+
<span
|
|
651
|
+
class="fd-navigation__icon sap-icon--settings"
|
|
652
|
+
role="presentation"
|
|
653
|
+
aria-hidden="true"
|
|
654
|
+
></span>
|
|
451
655
|
<span class="fd-navigation__text">Product Settings</span>
|
|
452
656
|
<span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
|
|
453
657
|
</a>
|