@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
|
@@ -603,8 +603,8 @@ The following elements of the Shell Bar are optional:
|
|
|
603
603
|
<div class="fd-popover fd-popover--right">
|
|
604
604
|
<button
|
|
605
605
|
class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
|
|
606
|
-
aria-label="
|
|
607
|
-
title="
|
|
606
|
+
aria-label="App Launcher"
|
|
607
|
+
title="App Launcher"
|
|
608
608
|
aria-controls="product-switch-body"
|
|
609
609
|
aria-expanded="false"
|
|
610
610
|
aria-haspopup="dialog"
|
|
@@ -824,8 +824,8 @@ When Side Navigation is displayed, the left and right spacing is fixed at 1rem (
|
|
|
824
824
|
<div class="fd-popover fd-popover--right">
|
|
825
825
|
<button
|
|
826
826
|
class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
|
|
827
|
-
aria-label="
|
|
828
|
-
title="
|
|
827
|
+
aria-label="App Launcher"
|
|
828
|
+
title="App Launcher"
|
|
829
829
|
aria-controls="YSGDGFD82347"
|
|
830
830
|
aria-expanded="false"
|
|
831
831
|
aria-haspopup="dialog"
|
|
@@ -1040,8 +1040,8 @@ When Side Navigation is displayed, the left and right spacing is fixed at 1rem (
|
|
|
1040
1040
|
<div class="fd-popover fd-popover--right">
|
|
1041
1041
|
<button
|
|
1042
1042
|
class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
|
|
1043
|
-
aria-label="
|
|
1044
|
-
title="
|
|
1043
|
+
aria-label="App Launcher"
|
|
1044
|
+
title="App Launcher"
|
|
1045
1045
|
aria-controls="YSGDGFD82347f"
|
|
1046
1046
|
aria-expanded="false"
|
|
1047
1047
|
aria-haspopup="dialog"
|
|
@@ -1264,8 +1264,8 @@ Controls like Search, Notifications, Joule, Help, and Feedback can be placed ins
|
|
|
1264
1264
|
<div class="fd-popover fd-popover--right">
|
|
1265
1265
|
<button
|
|
1266
1266
|
class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
|
|
1267
|
-
aria-label="
|
|
1268
|
-
title="
|
|
1267
|
+
aria-label="App Launcher"
|
|
1268
|
+
title="App Launcher"
|
|
1269
1269
|
aria-controls="UYYAY276YRW"
|
|
1270
1270
|
aria-expanded="false"
|
|
1271
1271
|
aria-haspopup="dialog"
|
|
@@ -1504,8 +1504,8 @@ The overflow is displayed via a Popover and is used when there is more than one
|
|
|
1504
1504
|
<div class="fd-popover fd-popover--right">
|
|
1505
1505
|
<button
|
|
1506
1506
|
class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
|
|
1507
|
-
aria-label="
|
|
1508
|
-
title="
|
|
1507
|
+
aria-label="App Launcher"
|
|
1508
|
+
title="App Launcher"
|
|
1509
1509
|
aria-controls="POIYRQW"
|
|
1510
1510
|
aria-expanded="false"
|
|
1511
1511
|
aria-haspopup="dialog"
|
|
@@ -1689,8 +1689,8 @@ The overflow is displayed via a Popover and is used when there is more than one
|
|
|
1689
1689
|
<div class="fd-popover fd-popover--right">
|
|
1690
1690
|
<button
|
|
1691
1691
|
class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
|
|
1692
|
-
aria-label="
|
|
1693
|
-
title="
|
|
1692
|
+
aria-label="App Launcher"
|
|
1693
|
+
title="App Launcher"
|
|
1694
1694
|
aria-controls="QWERTYI"
|
|
1695
1695
|
aria-expanded="false"
|
|
1696
1696
|
aria-haspopup="dialog"
|
|
@@ -1885,8 +1885,8 @@ The overflow is displayed via a Popover and is used when there is more than one
|
|
|
1885
1885
|
<div class="fd-popover fd-popover--right">
|
|
1886
1886
|
<button
|
|
1887
1887
|
class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
|
|
1888
|
-
aria-label="
|
|
1889
|
-
title="
|
|
1888
|
+
aria-label="App Launcher"
|
|
1889
|
+
title="App Launcher"
|
|
1890
1890
|
aria-controls="NHYUJM,KI"
|
|
1891
1891
|
aria-expanded="false"
|
|
1892
1892
|
aria-haspopup="dialog"
|
|
@@ -2078,8 +2078,8 @@ The overflow is displayed via a Popover and is used when there is more than one
|
|
|
2078
2078
|
<div class="fd-popover fd-popover--right">
|
|
2079
2079
|
<button
|
|
2080
2080
|
class="fd-button fd-button--transparent fd-shellbar__button fd-popover__control"
|
|
2081
|
-
aria-label="
|
|
2082
|
-
title="
|
|
2081
|
+
aria-label="App Launcher"
|
|
2082
|
+
title="App Launcher"
|
|
2083
2083
|
aria-controls="CVSNZCVSDCUY"
|
|
2084
2084
|
aria-expanded="false"
|
|
2085
2085
|
aria-haspopup="dialog"
|
|
@@ -2,12 +2,7 @@
|
|
|
2
2
|
<nav class="fd-navigation fd-navigation--horizontal" aria-label="Horizontal Navigation">
|
|
3
3
|
<div class="fd-navigation__container">
|
|
4
4
|
<ul class="fd-navigation__list" role="menubar" aria-label="Horizontal Navigation">
|
|
5
|
-
<li
|
|
6
|
-
role="none"
|
|
7
|
-
tabindex="-1"
|
|
8
|
-
class="fd-navigation__list-item fd-navigation__list-item--home"
|
|
9
|
-
aria-hidden="true"
|
|
10
|
-
>
|
|
5
|
+
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
11
6
|
<div
|
|
12
7
|
class="fd-navigation__item"
|
|
13
8
|
aria-current="page"
|
|
@@ -32,63 +27,6 @@
|
|
|
32
27
|
</div>
|
|
33
28
|
</li>
|
|
34
29
|
|
|
35
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
36
|
-
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
37
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
38
|
-
<span
|
|
39
|
-
class="fd-navigation__icon sap-icon--calendar"
|
|
40
|
-
role="presentation"
|
|
41
|
-
aria-hidden="true"
|
|
42
|
-
></span>
|
|
43
|
-
<span class="fd-navigation__text">Appointment</span>
|
|
44
|
-
<span
|
|
45
|
-
class="fd-navigation__selection-indicator"
|
|
46
|
-
role="presentation"
|
|
47
|
-
aria-hidden="true"
|
|
48
|
-
aria-label="selection indicator"
|
|
49
|
-
></span>
|
|
50
|
-
</a>
|
|
51
|
-
</div>
|
|
52
|
-
</li>
|
|
53
|
-
|
|
54
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
55
|
-
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
56
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
57
|
-
<span
|
|
58
|
-
class="fd-navigation__icon sap-icon--database"
|
|
59
|
-
role="presentation"
|
|
60
|
-
aria-hidden="true"
|
|
61
|
-
></span>
|
|
62
|
-
<span class="fd-navigation__text">Data</span>
|
|
63
|
-
<span
|
|
64
|
-
class="fd-navigation__selection-indicator"
|
|
65
|
-
role="presentation"
|
|
66
|
-
aria-hidden="true"
|
|
67
|
-
aria-label="selection indicator"
|
|
68
|
-
></span>
|
|
69
|
-
</a>
|
|
70
|
-
</div>
|
|
71
|
-
</li>
|
|
72
|
-
|
|
73
|
-
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
74
|
-
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
75
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
76
|
-
<span
|
|
77
|
-
class="fd-navigation__icon sap-icon--attachment"
|
|
78
|
-
role="presentation"
|
|
79
|
-
aria-hidden="true"
|
|
80
|
-
></span>
|
|
81
|
-
<span class="fd-navigation__text">Attachment</span>
|
|
82
|
-
<span
|
|
83
|
-
class="fd-navigation__selection-indicator"
|
|
84
|
-
role="presentation"
|
|
85
|
-
aria-hidden="true"
|
|
86
|
-
aria-label="selection indicator"
|
|
87
|
-
></span>
|
|
88
|
-
</a>
|
|
89
|
-
</div>
|
|
90
|
-
</li>
|
|
91
|
-
|
|
92
30
|
<li role="none" tabindex="-1" class="fd-navigation__list-item" aria-hidden="true">
|
|
93
31
|
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
94
32
|
<a class="fd-navigation__link" role="link" href="#">
|
|
@@ -114,6 +52,7 @@
|
|
|
114
52
|
aria-current="false"
|
|
115
53
|
aria-expanded="true"
|
|
116
54
|
aria-haspopup="tree"
|
|
55
|
+
aria-selected="true"
|
|
117
56
|
role="menuitem"
|
|
118
57
|
>
|
|
119
58
|
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
@@ -290,7 +229,7 @@
|
|
|
290
229
|
class="fd-navigation__item fd-navigation__item--with-expander"
|
|
291
230
|
aria-current="false"
|
|
292
231
|
aria-expanded="false"
|
|
293
|
-
aria-selected="
|
|
232
|
+
aria-selected="false"
|
|
294
233
|
role="menuitem"
|
|
295
234
|
>
|
|
296
235
|
<a class="fd-navigation__link" role="link" href="#">
|
|
@@ -328,7 +267,7 @@
|
|
|
328
267
|
class="fd-navigation__list-item fd-navigation__list-item--overflow"
|
|
329
268
|
aria-hidden="true"
|
|
330
269
|
>
|
|
331
|
-
<div class="fd-navigation__item" aria-current="false" aria-expanded="
|
|
270
|
+
<div class="fd-navigation__item" aria-current="false" aria-expanded="false" role="menuitem">
|
|
332
271
|
<a class="fd-navigation__link" role="button" tabindex="0">
|
|
333
272
|
<span
|
|
334
273
|
class="fd-navigation__icon sap-icon--overflow"
|
|
@@ -337,175 +276,6 @@
|
|
|
337
276
|
></span>
|
|
338
277
|
</a>
|
|
339
278
|
</div>
|
|
340
|
-
<div
|
|
341
|
-
class="fd-navigation__list-container fd-navigation__list-container--menu fd-menu"
|
|
342
|
-
aria-hidden="false"
|
|
343
|
-
id="navMenuOverflow"
|
|
344
|
-
>
|
|
345
|
-
<div class="fd-navigation__list-wrapper">
|
|
346
|
-
<ul
|
|
347
|
-
class="fd-navigation__list fd-navigation__list--parent-items fd-menu__list"
|
|
348
|
-
role="menu"
|
|
349
|
-
aria-roledescription="Navigation List Tree"
|
|
350
|
-
tabindex="-1"
|
|
351
|
-
>
|
|
352
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
353
|
-
<div
|
|
354
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
355
|
-
role="menuitem"
|
|
356
|
-
aria-disabled="false"
|
|
357
|
-
aria-posinset="1"
|
|
358
|
-
aria-setsize="3"
|
|
359
|
-
aria-haspopup="false"
|
|
360
|
-
aria-labelledby="txt-1"
|
|
361
|
-
aria-expanded="false"
|
|
362
|
-
>
|
|
363
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
364
|
-
<span
|
|
365
|
-
class="fd-navigation__icon sap-icon--notes"
|
|
366
|
-
role="presentation"
|
|
367
|
-
aria-hidden="true"
|
|
368
|
-
></span>
|
|
369
|
-
<span class="fd-navigation__text" id="txt-1">Parent Item</span>
|
|
370
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
371
|
-
</a>
|
|
372
|
-
</div>
|
|
373
|
-
</li>
|
|
374
|
-
|
|
375
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
376
|
-
<div
|
|
377
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
378
|
-
role="menuitem"
|
|
379
|
-
aria-disabled="false"
|
|
380
|
-
aria-posinset="2"
|
|
381
|
-
aria-setsize="3"
|
|
382
|
-
aria-haspopup="menu"
|
|
383
|
-
aria-labelledby="txt-2"
|
|
384
|
-
aria-expanded="true"
|
|
385
|
-
aria-owns="children-menu"
|
|
386
|
-
>
|
|
387
|
-
<a
|
|
388
|
-
class="fd-navigation__link"
|
|
389
|
-
role="button"
|
|
390
|
-
tabindex="0"
|
|
391
|
-
aria-controls="navPopover3"
|
|
392
|
-
>
|
|
393
|
-
<span
|
|
394
|
-
class="fd-navigation__icon sap-icon--horizontal-bar-chart"
|
|
395
|
-
role="presentation"
|
|
396
|
-
aria-hidden="true"
|
|
397
|
-
></span>
|
|
398
|
-
<span class="fd-navigation__text" id="txt-2">Parent Item</span>
|
|
399
|
-
<span
|
|
400
|
-
class="fd-navigation__selection-indicator"
|
|
401
|
-
role="presentation"
|
|
402
|
-
aria-hidden="true"
|
|
403
|
-
aria-label="selection indicator"
|
|
404
|
-
></span>
|
|
405
|
-
<span
|
|
406
|
-
class="fd-navigation__has-children-indicator"
|
|
407
|
-
role="presentation"
|
|
408
|
-
aria-hidden="true"
|
|
409
|
-
aria-label="has children indicator, expanded"
|
|
410
|
-
></span>
|
|
411
|
-
</a>
|
|
412
|
-
</div>
|
|
413
|
-
<div
|
|
414
|
-
class="fd-navigation__list-container fd-navigation__list-container--submenu"
|
|
415
|
-
aria-hidden="false"
|
|
416
|
-
>
|
|
417
|
-
<div class="fd-navigation__list-wrapper">
|
|
418
|
-
<ul
|
|
419
|
-
class="fd-navigation__list fd-navigation__list--child-items"
|
|
420
|
-
id="children-menu"
|
|
421
|
-
role="menu"
|
|
422
|
-
aria-roledescription="Navigation List Tree - Children Items"
|
|
423
|
-
tabindex="-1"
|
|
424
|
-
>
|
|
425
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
426
|
-
<div
|
|
427
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
428
|
-
aria-labelledby="txt-child-1"
|
|
429
|
-
role="menuitem"
|
|
430
|
-
aria-posinset="1"
|
|
431
|
-
aria-setsize="3"
|
|
432
|
-
aria-disabled="false"
|
|
433
|
-
aria-selected="false"
|
|
434
|
-
>
|
|
435
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
436
|
-
<span class="fd-navigation__text" id="txt-child-1"
|
|
437
|
-
>Child Item</span
|
|
438
|
-
>
|
|
439
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
440
|
-
</a>
|
|
441
|
-
</div>
|
|
442
|
-
</li>
|
|
443
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
444
|
-
<div
|
|
445
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
446
|
-
aria-labelledby="txt-child-2"
|
|
447
|
-
role="menuitem"
|
|
448
|
-
aria-posinset="2"
|
|
449
|
-
aria-setsize="3"
|
|
450
|
-
aria-disabled="false"
|
|
451
|
-
aria-selected="false"
|
|
452
|
-
>
|
|
453
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
454
|
-
<span class="fd-navigation__text" id="txt-child-2"
|
|
455
|
-
>Child Item</span
|
|
456
|
-
>
|
|
457
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
458
|
-
</a>
|
|
459
|
-
</div>
|
|
460
|
-
</li>
|
|
461
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
462
|
-
<div
|
|
463
|
-
class="fd-navigation__item fd-navigation__item--child fd-navigation__item--submenu-child"
|
|
464
|
-
aria-labelledby="txt-child-3"
|
|
465
|
-
role="menuitem"
|
|
466
|
-
aria-posinset="3"
|
|
467
|
-
aria-setsize="3"
|
|
468
|
-
aria-disabled="false"
|
|
469
|
-
aria-selected="true"
|
|
470
|
-
>
|
|
471
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
472
|
-
<span class="fd-navigation__text" id="txt-child-3"
|
|
473
|
-
>Child Item</span
|
|
474
|
-
>
|
|
475
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
476
|
-
</a>
|
|
477
|
-
</div>
|
|
478
|
-
</li>
|
|
479
|
-
</ul>
|
|
480
|
-
</div>
|
|
481
|
-
</div>
|
|
482
|
-
</li>
|
|
483
|
-
|
|
484
|
-
<li class="fd-navigation__list-item" aria-hidden="true">
|
|
485
|
-
<div
|
|
486
|
-
class="fd-navigation__item fd-navigation__item--overflow"
|
|
487
|
-
role="menuitem"
|
|
488
|
-
aria-disabled="false"
|
|
489
|
-
aria-posinset="3"
|
|
490
|
-
aria-setsize="3"
|
|
491
|
-
aria-haspopup="false"
|
|
492
|
-
aria-labelledby="txt-3"
|
|
493
|
-
aria-expanded="false"
|
|
494
|
-
>
|
|
495
|
-
<a class="fd-navigation__link" role="link" href="#">
|
|
496
|
-
<span
|
|
497
|
-
class="fd-navigation__icon sap-icon--notes"
|
|
498
|
-
role="presentation"
|
|
499
|
-
aria-hidden="true"
|
|
500
|
-
></span>
|
|
501
|
-
<span class="fd-navigation__text" id="txt-3">Parent Item</span>
|
|
502
|
-
<span class="fd-navigation__selection-indicator"></span>
|
|
503
|
-
</a>
|
|
504
|
-
</div>
|
|
505
|
-
</li>
|
|
506
|
-
</ul>
|
|
507
|
-
</div>
|
|
508
|
-
</div>
|
|
509
279
|
</li>
|
|
510
280
|
</ul>
|
|
511
281
|
</div>
|