@fundamental-styles/mcp 0.41.9 → 0.41.10-rc.0
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 +9 -3
- package/data/components/list-2.md +92 -18
- package/data/components/list-3.md +90 -22
- package/data/components/list-list.md +88 -38
- package/data/components/popover-user-menu.md +16 -16
- package/data/examples/Components/List/list/byline/borderless.example.html +1 -1
- package/data/examples/Components/List/list/byline/buttons.example.html +25 -4
- package/data/examples/Components/List/list/byline/counter.example.html +2 -2
- package/data/examples/Components/List/list/byline/long-text.example.html +64 -33
- package/data/examples/Components/List/list/byline/navigation-indicator.example.html +3 -3
- package/data/examples/Components/List/list/byline/selection.example.html +6 -6
- package/data/examples/Components/List/list/standard/buttons.example.html +4 -4
- package/data/examples/Components/List/list/standard/icons.example.html +3 -3
- package/data/examples/Components/List/list/standard/item-counter.example.html +4 -4
- package/data/examples/Components/List/list/standard/long-text.example.html +59 -0
- package/data/examples/Components/List/list/standard/navigation-indicator.example.html +4 -4
- package/data/examples/Components/List/list/standard/secondary-data.example.html +3 -3
- package/data/examples/Components/List/list/standard/selection.example.html +4 -4
- package/data/examples/Components/List/list/subline/long-text.example.html +68 -0
- package/data/examples/Components/List/list/subline/standard.example.html +7 -7
- package/data/examples/Components/user-menu/default.example.html +6 -6
- package/package.json +1 -1
|
@@ -95,6 +95,7 @@ npm install fundamental-styles
|
|
|
95
95
|
| `fd-list--no-border` | Style variant |
|
|
96
96
|
| `fd-list--selection` | Byline list items can contain navigation links |
|
|
97
97
|
| `fd-list--unread-indicator` | Style variant |
|
|
98
|
+
| `fd-list--wrap` | By default, long title and byline text is truncated with an ellipsis |
|
|
98
99
|
|
|
99
100
|
## States
|
|
100
101
|
|
|
@@ -125,6 +126,7 @@ This component uses the following BEM elements:
|
|
|
125
126
|
- `fd-list__item--interractive`
|
|
126
127
|
- `fd-list__item--link`
|
|
127
128
|
- `fd-list__item--unread`
|
|
129
|
+
- `fd-list__item--wrap`
|
|
128
130
|
- `fd-list__item-counter`
|
|
129
131
|
- `fd-list__link`
|
|
130
132
|
- `fd-list__link--more`
|
|
@@ -280,16 +282,38 @@ Byline list items can contain navigation links. To add navigation, add the \
|
|
|
280
282
|
<li role="listitem" class="fd-list__item">
|
|
281
283
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
282
284
|
<div class="fd-list__content">
|
|
283
|
-
<span class="fd-list__title">List item 1</span>
|
|
285
|
+
<span class="fd-list__title fd-list__title--wrap">List item 1</span>
|
|
286
|
+
<span class="fd-list__byline">Byline (description) List item 1 </span>
|
|
284
287
|
</div>
|
|
285
|
-
<button class="fd-button fd-button--transparent fd-list__button">
|
|
288
|
+
<button class="fd-button fd-button--transparent fd-list__button" aria-label="Edit>
|
|
286
289
|
<i class="sap-icon--edit"></i>
|
|
287
290
|
</button>
|
|
288
|
-
<button class="fd-button fd-button--transparent fd-list__button">
|
|
291
|
+
<button class="fd-button fd-button--transparent fd-list__button" aria-label="Decline">
|
|
289
292
|
<i class="sap-icon--decline"></i>
|
|
290
293
|
</button>
|
|
291
294
|
</li>
|
|
292
|
-
|
|
295
|
+
<li role="listitem" class="fd-list__item">
|
|
296
|
+
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
297
|
+
<div class="fd-list__content">
|
|
298
|
+
<span class="fd-list__title fd-list__title--wrap"
|
|
299
|
+
>Title that wraps. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
|
300
|
+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
301
|
+
consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span
|
|
302
|
+
>
|
|
303
|
+
<span class="fd-list__byline fd-list__byline--wrap"
|
|
304
|
+
>Byline that wraps. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit
|
|
305
|
+
neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin elementum sapien vel enim facilisis, at faucibus
|
|
306
|
+
nibh ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</span
|
|
307
|
+
>
|
|
308
|
+
</div>
|
|
309
|
+
<button class="fd-button fd-button--transparent fd-list__button" aria-label="Edit">
|
|
310
|
+
<i class="sap-icon--edit"></i>
|
|
311
|
+
</button>
|
|
312
|
+
<button class="fd-button fd-button--transparent fd-list__button" aria-label="Decline">
|
|
313
|
+
<i class="sap-icon--decline"></i>
|
|
314
|
+
</button>
|
|
315
|
+
</li>
|
|
316
|
+
</ul>
|
|
293
317
|
```
|
|
294
318
|
|
|
295
319
|
### Interractive
|
|
@@ -356,12 +380,12 @@ If only some of the list items are navigable, you should indicate them with an a
|
|
|
356
380
|
|
|
357
381
|
```html
|
|
358
382
|
<ul class="fd-list fd-list--byline fd-list--navigation fd-list--navigation-indication" role="list">
|
|
359
|
-
<li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link">
|
|
383
|
+
<li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link ">
|
|
360
384
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
361
385
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
362
386
|
<div class="fd-list__content">
|
|
363
|
-
<div class="fd-list__title">
|
|
364
|
-
<div class="fd-list__byline">
|
|
387
|
+
<div class="fd-list__title fd-list__title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</div>
|
|
388
|
+
<div class="fd-list__byline fd-list__byline--wrap">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin elementum sapien vel enim facilisis, at faucibus nibh ornare. Pellentesque habitant morbi tristique senectus et netus</div>
|
|
365
389
|
</div>
|
|
366
390
|
</a>
|
|
367
391
|
</li>
|
|
@@ -420,7 +444,7 @@ To display a borderless byline list, add the \
|
|
|
420
444
|
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
421
445
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--world"></i></span>
|
|
422
446
|
<div class="fd-list__content">
|
|
423
|
-
<div class="fd-list__title">
|
|
447
|
+
<div class="fd-list__title fd-list__title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</div>
|
|
424
448
|
<div class="fd-list__byline fd-list__byline--2-col">
|
|
425
449
|
<div class="fd-list__byline-left">First text item in byline (standard text)</div>
|
|
426
450
|
<div class="fd-list__byline-right fd-list__byline-right--informative">Second text item in byline (information)</div>
|
|
@@ -436,7 +460,7 @@ Byline list items can display checkboxes that users can select from. To display
|
|
|
436
460
|
|
|
437
461
|
```html
|
|
438
462
|
<ul class="fd-list fd-list--selection fd-list--byline" role="listbox" aria-labelledby="O09lk9">
|
|
439
|
-
<li role="option" tabindex="0" class="fd-list__item is-selected">
|
|
463
|
+
<li role="option" tabindex="0" class="fd-list__item fd-list__item--wrap is-selected">
|
|
440
464
|
<div class="fd-form-item fd-list__form-item">
|
|
441
465
|
<input type="checkbox" class="fd-checkbox" id="Ai4ez6111Z" checked aria-labelledby="O09lk1">
|
|
442
466
|
<label tabindex="-1" class="fd-checkbox__label" for="Ai4ez6111Z">
|
|
@@ -445,8 +469,8 @@ Byline list items can display checkboxes that users can select from. To display
|
|
|
445
469
|
</div>
|
|
446
470
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
447
471
|
<div class="fd-list__content">
|
|
448
|
-
<span class="fd-list__title" id="O09lk1">
|
|
449
|
-
<span class="fd-list__byline">
|
|
472
|
+
<span class="fd-list__title" id="O09lk1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit</span>
|
|
473
|
+
<span class="fd-list__byline">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin elementum sapien vel enim facilisis</span>
|
|
450
474
|
</div>
|
|
451
475
|
</li>
|
|
452
476
|
<li role="option" tabindex="0" class="fd-list__item">
|
|
@@ -459,9 +483,9 @@ Byline list items can display checkboxes that users can select from. To display
|
|
|
459
483
|
<span class="fd-image--s fd-list__thumbnail" aria-label="Godafoss waterfall in northern Iceland"
|
|
460
484
|
></span>
|
|
461
485
|
<div class="fd-list__content">
|
|
462
|
-
<div class="fd-list__title" id="O09lk2">
|
|
463
|
-
<div class="fd-list__byline fd-list__byline--2-col">
|
|
464
|
-
<div class="fd-list__byline-left">
|
|
486
|
+
<div class="fd-list__title fd-list__title--wrap" id="O09lk2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</div>
|
|
487
|
+
<div class="fd-list__byline fd-list__byline--wrap fd-list__byline--2-col">
|
|
488
|
+
<div class="fd-list__byline-left">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, excepteur sint occaecat cupidatat non proident</div>
|
|
465
489
|
<div class="fd-list__byline-right">Second text item in byline (can be semantic)</div>
|
|
466
490
|
</div>
|
|
467
491
|
</div>
|
|
@@ -546,8 +570,8 @@ To display byline list items with selection and navigation, add these following
|
|
|
546
570
|
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
547
571
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
548
572
|
<div class="fd-list__content">
|
|
549
|
-
<div class="fd-list__title">
|
|
550
|
-
<div class="fd-list__byline">
|
|
573
|
+
<div class="fd-list__title fd-list__title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</div>
|
|
574
|
+
<div class="fd-list__byline fd-list__byline--wrap">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin elementum sapien vel enim facilisis, at faucibus nibh ornare. Pellentesque habitant morbi tristique senectus et netus</div>
|
|
551
575
|
</div>
|
|
552
576
|
<span class="fd-list__item-counter">123</span>
|
|
553
577
|
</li>
|
|
@@ -582,44 +606,70 @@ To display byline list items with selection and navigation, add these following
|
|
|
582
606
|
|
|
583
607
|
### List with long Title and Byline
|
|
584
608
|
|
|
585
|
-
By default,
|
|
609
|
+
By default, long title and byline text is truncated with an ellipsis. Wrapping can be enabled at three levels:
|
|
586
610
|
|
|
587
|
-
|
|
611
|
+
**List level** — add \
|
|
588
612
|
|
|
589
613
|
```html
|
|
614
|
+
<p class="fd-form-label">Default — truncation</p>
|
|
590
615
|
<ul class="fd-list fd-list--byline" role="list">
|
|
591
616
|
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
592
617
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
593
618
|
<div class="fd-list__content">
|
|
594
|
-
<div class="fd-list__title">
|
|
595
|
-
<div class="fd-list__byline
|
|
596
|
-
</
|
|
597
|
-
|
|
598
|
-
|
|
619
|
+
<div class="fd-list__title">Annual Budget Review for Q3 and Q4 — please review the attached documents and provide your feedback before the end of the fiscal quarter to ensure timely processing.</div>
|
|
620
|
+
<div class="fd-list__byline">Finance · Updated 2 hours ago by Michael Thompson, Senior Analyst, Global Finance Division, Central Europe · Reviewed by Anna Schmidt, Finance Controller · Pending approval from Regional CFO</div>
|
|
621
|
+
</li>
|
|
622
|
+
</ul>
|
|
623
|
+
</div>
|
|
624
|
+
|
|
625
|
+
<p class="fd-form-label">List level — <code>fd-list--wrap</code></p>
|
|
626
|
+
<ul class="fd-list fd-list--byline fd-list--wrap" role="list">
|
|
599
627
|
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
600
628
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--employee"></i></span>
|
|
601
629
|
<div class="fd-list__content">
|
|
602
|
-
<div class="fd-list__title
|
|
603
|
-
|
|
604
|
-
|
|
630
|
+
<div class="fd-list__title">All titles wrap at list level, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
|
|
631
|
+
<div class="fd-list__byline">All bylines wrap too, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
|
|
632
|
+
</li>
|
|
633
|
+
</ul>
|
|
634
|
+
</div>
|
|
635
|
+
|
|
636
|
+
<p class="fd-form-label">Item level — <code>fd-list__item--wrap</code> (collapsed and expanded states)</p>
|
|
637
|
+
<!-- The fd-list__link--more element is placed outside fd-list__title so it stays
|
|
638
|
+
visible even when the title truncates. -->
|
|
639
|
+
<ul class="fd-list fd-list--byline" role="list">
|
|
605
640
|
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
606
|
-
<span class="fd-
|
|
607
|
-
|
|
608
|
-
<div class="fd-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
<div class="fd-list__byline-left">First text item in byline (standard text), Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<a href="#" class="fd-link fd-list__link--more" tabindex="0"><span class="fd-link__content">Less</span></a></div>
|
|
612
|
-
<div class="fd-list__byline-right">Second text item in byline (can be semantic)</div>
|
|
613
|
-
</div>
|
|
614
|
-
</div>
|
|
641
|
+
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--employee"></i></span>
|
|
642
|
+
<div class="fd-list__content">
|
|
643
|
+
<div class="fd-list__title">Collapsed — title truncated, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
|
|
644
|
+
<a href="#" class="fd-link fd-list__link--more" aria-expanded="false" tabindex="0"><span class="fd-link__content">More</span></a>
|
|
645
|
+
<div class="fd-list__byline">Byline truncated, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
|
|
615
646
|
</li>
|
|
616
|
-
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
647
|
+
<li role="listitem" tabindex="0" class="fd-list__item fd-list__item--wrap">
|
|
648
|
+
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--employee"></i></span>
|
|
617
649
|
<div class="fd-list__content">
|
|
618
|
-
<div class="fd-list__title">
|
|
619
|
-
<div class="fd-list__byline">Byline
|
|
650
|
+
<div class="fd-list__title">Expanded — fd-list__item--wrap applied, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. <a href="#" class="fd-link fd-list__link--more" aria-expanded="true" tabindex="0"><span class="fd-link__content">Less</span></a></div>
|
|
651
|
+
<div class="fd-list__byline">Byline wraps too, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
|
|
620
652
|
</div>
|
|
621
653
|
</li>
|
|
622
654
|
</ul>
|
|
655
|
+
</div>
|
|
656
|
+
|
|
657
|
+
<div>
|
|
658
|
+
<p class="fd-form-label">Element level — <code>fd-list__title--wrap</code> / <code>fd-list__byline--wrap</code></p>
|
|
659
|
+
<ul class="fd-list fd-list--byline" role="list">
|
|
660
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
661
|
+
<span class="fd-image--s fd-list__thumbnail" role="img" aria-label="Godafoss waterfall in northern Iceland"
|
|
662
|
+
></span>
|
|
663
|
+
<div class="fd-list__content">
|
|
664
|
+
<div class="fd-list__title fd-list__title--wrap">Only the title wraps here, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
|
|
665
|
+
<div class="fd-list__byline fd-list__byline--2-col fd-list__byline--wrap">
|
|
666
|
+
<div class="fd-list__byline-left">First text item in byline, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
|
|
667
|
+
<div class="fd-list__byline-right">Second text item (semantic)</div>
|
|
668
|
+
</div>
|
|
669
|
+
</div>
|
|
670
|
+
</li>
|
|
671
|
+
</ul>
|
|
672
|
+
</div>
|
|
623
673
|
```
|
|
624
674
|
|
|
625
675
|
### With Group Header
|
|
@@ -48,10 +48,10 @@ Represents the current user and includes:
|
|
|
48
48
|
<ul>
|
|
49
49
|
<li>Popover: Contains the entire User Menu content.</li>
|
|
50
50
|
<li>Avatar: A key visual element displaying the user's profile picture. If no profile picture is available, it shows the user's initials. If the user is not signed in, an icon is displayed.</li>
|
|
51
|
-
<li>Title: A required UI element showing the user's First and Last names.
|
|
52
|
-
<li>Subtitle 1 (subline): An optional secondary identifier, such as user ID or email.</li>
|
|
53
|
-
<li>Subtitle 2 (subline): An optional identifier, such as role, position, organization, or unit.</li>
|
|
54
|
-
<li>Subtitle 3 (subline): An optional identifier, such as role, position, organization, or unit.
|
|
51
|
+
<li>Title: A required UI element showing the user's First and Last names. By default, long titles are clamped to two lines. To allow the title to wrap across multiple lines, use the <code>.fd-user-menu\\_\\_user-name--wrap</code> modifier class.</li>
|
|
52
|
+
<li>Subtitle 1 (subline): An optional secondary identifier, such as user ID or email. By default, long subtitles are truncated. To allow a subtitle to wrap across multiple lines, use the <code>.fd-user-menu\\_\\_subline--wrap</code> modifier class.</li>
|
|
53
|
+
<li>Subtitle 2 (subline): An optional identifier, such as role, position, organization, or unit. To allow it to wrap across multiple lines, use the <code>.fd-user-menu\\_\\_subline--wrap</code> modifier class.</li>
|
|
54
|
+
<li>Subtitle 3 (subline): An optional identifier, such as role, position, organization, or unit. By default, long subtitles are truncated. To allow it to wrap across multiple lines, use the <code>.fd-user-menu\\_\\_subline--wrap</code> modifier class.</li>
|
|
55
55
|
<li>Manage Account Button: Links to account settings.</li>
|
|
56
56
|
</ul>
|
|
57
57
|
|
|
@@ -500,15 +500,15 @@ npm install fundamental-styles
|
|
|
500
500
|
></i>
|
|
501
501
|
</span>
|
|
502
502
|
<div class="fd-user-menu__header-container">
|
|
503
|
-
<div class="fd-user-menu__user-name">
|
|
503
|
+
<div class="fd-user-menu__user-name fd-user-menu__user-name--wrap">
|
|
504
504
|
Lisa Miller Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa consequuntur
|
|
505
505
|
cum voluptate iure tenetu!
|
|
506
506
|
</div>
|
|
507
|
-
<div class="fd-user-menu__subline">
|
|
507
|
+
<div class="fd-user-menu__subline fd-user-menu__subline--wrap">
|
|
508
508
|
lisa.miller@test.com Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
|
|
509
509
|
quod accusamus quis magnam, reprehenderit anim.
|
|
510
510
|
</div>
|
|
511
|
-
<div class="fd-user-menu__subline">
|
|
511
|
+
<div class="fd-user-menu__subline fd-user-menu__subline--wrap">
|
|
512
512
|
A very long subline 2 that can be displayed by wrapping behaviour in the subtitle like
|
|
513
513
|
this.
|
|
514
514
|
</div>
|
|
@@ -563,15 +563,15 @@ npm install fundamental-styles
|
|
|
563
563
|
aria-label="Jane Doe"
|
|
564
564
|
></span>
|
|
565
565
|
<div class="fd-list__content">
|
|
566
|
-
<div class="fd-list__title">
|
|
566
|
+
<div class="fd-list__title fd-list__title--wrap">
|
|
567
567
|
Lisa Miller Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
|
568
568
|
Autem minima ex distinctio dolores vitae!
|
|
569
569
|
</div>
|
|
570
|
-
<div class="fd-list__subline">
|
|
570
|
+
<div class="fd-list__subline fd-list__subline--wrap">
|
|
571
571
|
lisa.miller@test.com Lorem, ipsum dolor sit amet consectetur adipisicing
|
|
572
572
|
elit.
|
|
573
573
|
</div>
|
|
574
|
-
<div class="fd-list__subline">
|
|
574
|
+
<div class="fd-list__subline fd-list__subline--wrap">
|
|
575
575
|
Delivery Manager Lorem ipsum dolor sit amet consectetur adipisicing
|
|
576
576
|
elit.
|
|
577
577
|
</div>
|
|
@@ -1111,15 +1111,15 @@ Key CSS variables used by this component:
|
|
|
1111
1111
|
></i>
|
|
1112
1112
|
</span>
|
|
1113
1113
|
<div class="fd-user-menu__header-container">
|
|
1114
|
-
<div class="fd-user-menu__user-name">
|
|
1114
|
+
<div class="fd-user-menu__user-name fd-user-menu__user-name--wrap">
|
|
1115
1115
|
Lisa Miller Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa consequuntur
|
|
1116
1116
|
cum voluptate iure tenetu!
|
|
1117
1117
|
</div>
|
|
1118
|
-
<div class="fd-user-menu__subline">
|
|
1118
|
+
<div class="fd-user-menu__subline fd-user-menu__subline--wrap">
|
|
1119
1119
|
lisa.miller@test.com Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem
|
|
1120
1120
|
quod accusamus quis magnam, reprehenderit anim.
|
|
1121
1121
|
</div>
|
|
1122
|
-
<div class="fd-user-menu__subline">
|
|
1122
|
+
<div class="fd-user-menu__subline fd-user-menu__subline--wrap">
|
|
1123
1123
|
A very long subline 2 that can be displayed by wrapping behaviour in the subtitle like
|
|
1124
1124
|
this.
|
|
1125
1125
|
</div>
|
|
@@ -1174,15 +1174,15 @@ Key CSS variables used by this component:
|
|
|
1174
1174
|
aria-label="Jane Doe"
|
|
1175
1175
|
></span>
|
|
1176
1176
|
<div class="fd-list__content">
|
|
1177
|
-
<div class="fd-list__title">
|
|
1177
|
+
<div class="fd-list__title fd-list__title--wrap">
|
|
1178
1178
|
Lisa Miller Lorem, ipsum dolor sit amet consectetur adipisicing elit.
|
|
1179
1179
|
Autem minima ex distinctio dolores vitae!
|
|
1180
1180
|
</div>
|
|
1181
|
-
<div class="fd-list__subline">
|
|
1181
|
+
<div class="fd-list__subline fd-list__subline--wrap">
|
|
1182
1182
|
lisa.miller@test.com Lorem, ipsum dolor sit amet consectetur adipisicing
|
|
1183
1183
|
elit.
|
|
1184
1184
|
</div>
|
|
1185
|
-
<div class="fd-list__subline">
|
|
1185
|
+
<div class="fd-list__subline fd-list__subline--wrap">
|
|
1186
1186
|
Delivery Manager Lorem ipsum dolor sit amet consectetur adipisicing
|
|
1187
1187
|
elit.
|
|
1188
1188
|
</div>
|
|
@@ -26,7 +26,7 @@ style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_no
|
|
|
26
26
|
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
27
27
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--world"></i></span>
|
|
28
28
|
<div class="fd-list__content">
|
|
29
|
-
<div class="fd-list__title">
|
|
29
|
+
<div class="fd-list__title fd-list__title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</div>
|
|
30
30
|
<div class="fd-list__byline fd-list__byline--2-col">
|
|
31
31
|
<div class="fd-list__byline-left">First text item in byline (standard text)</div>
|
|
32
32
|
<div class="fd-list__byline-right fd-list__byline-right--informative">Second text item in byline (information)</div>
|
|
@@ -1,14 +1,35 @@
|
|
|
1
|
-
|
|
2
1
|
<ul class="fd-list fd-list--byline" role="list">
|
|
3
2
|
<li role="listitem" class="fd-list__item">
|
|
4
3
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
5
4
|
<div class="fd-list__content">
|
|
6
|
-
<span class="fd-list__title">List item 1</span>
|
|
5
|
+
<span class="fd-list__title fd-list__title--wrap">List item 1</span>
|
|
6
|
+
<span class="fd-list__byline">Byline (description) List item 1 </span>
|
|
7
7
|
</div>
|
|
8
|
-
<button class="fd-button fd-button--transparent fd-list__button">
|
|
8
|
+
<button class="fd-button fd-button--transparent fd-list__button" aria-label="Edit>
|
|
9
9
|
<i class="sap-icon--edit"></i>
|
|
10
10
|
</button>
|
|
11
|
-
<button class="fd-button fd-button--transparent fd-list__button">
|
|
11
|
+
<button class="fd-button fd-button--transparent fd-list__button" aria-label="Decline">
|
|
12
|
+
<i class="sap-icon--decline"></i>
|
|
13
|
+
</button>
|
|
14
|
+
</li>
|
|
15
|
+
<li role="listitem" class="fd-list__item">
|
|
16
|
+
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
17
|
+
<div class="fd-list__content">
|
|
18
|
+
<span class="fd-list__title fd-list__title--wrap"
|
|
19
|
+
>Title that wraps. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
|
|
20
|
+
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
21
|
+
consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</span
|
|
22
|
+
>
|
|
23
|
+
<span class="fd-list__byline fd-list__byline--wrap"
|
|
24
|
+
>Byline that wraps. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit
|
|
25
|
+
neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin elementum sapien vel enim facilisis, at faucibus
|
|
26
|
+
nibh ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</span
|
|
27
|
+
>
|
|
28
|
+
</div>
|
|
29
|
+
<button class="fd-button fd-button--transparent fd-list__button" aria-label="Edit">
|
|
30
|
+
<i class="sap-icon--edit"></i>
|
|
31
|
+
</button>
|
|
32
|
+
<button class="fd-button fd-button--transparent fd-list__button" aria-label="Decline">
|
|
12
33
|
<i class="sap-icon--decline"></i>
|
|
13
34
|
</button>
|
|
14
35
|
</li>
|
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
4
4
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
5
5
|
<div class="fd-list__content">
|
|
6
|
-
<div class="fd-list__title">
|
|
7
|
-
<div class="fd-list__byline">
|
|
6
|
+
<div class="fd-list__title fd-list__title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</div>
|
|
7
|
+
<div class="fd-list__byline fd-list__byline--wrap">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin elementum sapien vel enim facilisis, at faucibus nibh ornare. Pellentesque habitant morbi tristique senectus et netus</div>
|
|
8
8
|
</div>
|
|
9
9
|
<span class="fd-list__item-counter">123</span>
|
|
10
10
|
</li>
|
|
@@ -1,34 +1,65 @@
|
|
|
1
|
+
<div style="margin-bottom: 2rem;">
|
|
2
|
+
<p class="fd-form-label" style="margin-bottom: 0.5rem;">Default — truncation</p>
|
|
3
|
+
<ul class="fd-list fd-list--byline" role="list">
|
|
4
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
5
|
+
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
6
|
+
<div class="fd-list__content">
|
|
7
|
+
<div class="fd-list__title">Annual Budget Review for Q3 and Q4 — please review the attached documents and provide your feedback before the end of the fiscal quarter to ensure timely processing.</div>
|
|
8
|
+
<div class="fd-list__byline">Finance · Updated 2 hours ago by Michael Thompson, Senior Analyst, Global Finance Division, Central Europe · Reviewed by Anna Schmidt, Finance Controller · Pending approval from Regional CFO</div>
|
|
9
|
+
</div>
|
|
10
|
+
</li>
|
|
11
|
+
</ul>
|
|
12
|
+
</div>
|
|
1
13
|
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
</
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
</
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
</li>
|
|
28
|
-
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</
|
|
34
|
-
</
|
|
14
|
+
<div style="margin-bottom: 2rem;">
|
|
15
|
+
<p class="fd-form-label" style="margin-bottom: 0.5rem;">List level — <code>fd-list--wrap</code></p>
|
|
16
|
+
<ul class="fd-list fd-list--byline fd-list--wrap" role="list">
|
|
17
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
18
|
+
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--employee"></i></span>
|
|
19
|
+
<div class="fd-list__content">
|
|
20
|
+
<div class="fd-list__title">All titles wrap at list level, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
|
|
21
|
+
<div class="fd-list__byline">All bylines wrap too, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
|
|
22
|
+
</div>
|
|
23
|
+
</li>
|
|
24
|
+
</ul>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
<div style="margin-bottom: 2rem;">
|
|
28
|
+
<p class="fd-form-label" style="margin-bottom: 0.5rem;">Item level — <code>fd-list__item--wrap</code> (collapsed and expanded states)</p>
|
|
29
|
+
<!-- The fd-list__link--more element is placed outside fd-list__title so it stays
|
|
30
|
+
visible even when the title truncates. -->
|
|
31
|
+
<ul class="fd-list fd-list--byline" role="list">
|
|
32
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
33
|
+
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--employee"></i></span>
|
|
34
|
+
<div class="fd-list__content">
|
|
35
|
+
<div class="fd-list__title">Collapsed — title truncated, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</div>
|
|
36
|
+
<a href="#" class="fd-link fd-list__link--more" aria-expanded="false" tabindex="0"><span class="fd-link__content">More</span></a>
|
|
37
|
+
<div class="fd-list__byline">Byline truncated, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
|
|
38
|
+
</div>
|
|
39
|
+
</li>
|
|
40
|
+
<li role="listitem" tabindex="0" class="fd-list__item fd-list__item--wrap">
|
|
41
|
+
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--employee"></i></span>
|
|
42
|
+
<div class="fd-list__content">
|
|
43
|
+
<div class="fd-list__title">Expanded — fd-list__item--wrap applied, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. <a href="#" class="fd-link fd-list__link--more" aria-expanded="true" tabindex="0"><span class="fd-link__content">Less</span></a></div>
|
|
44
|
+
<div class="fd-list__byline">Byline wraps too, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.</div>
|
|
45
|
+
</div>
|
|
46
|
+
</li>
|
|
47
|
+
</ul>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div>
|
|
51
|
+
<p class="fd-form-label" style="margin-bottom: 0.5rem;">Element level — <code>fd-list__title--wrap</code> / <code>fd-list__byline--wrap</code></p>
|
|
52
|
+
<ul class="fd-list fd-list--byline" role="list">
|
|
53
|
+
<li role="listitem" tabindex="0" class="fd-list__item">
|
|
54
|
+
<span class="fd-image--s fd-list__thumbnail" role="img" aria-label="Godafoss waterfall in northern Iceland"
|
|
55
|
+
style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_northern_Iceland.jpg'); background-size:cover;"></span>
|
|
56
|
+
<div class="fd-list__content">
|
|
57
|
+
<div class="fd-list__title fd-list__title--wrap">Only the title wraps here, Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</div>
|
|
58
|
+
<div class="fd-list__byline fd-list__byline--2-col fd-list__byline--wrap">
|
|
59
|
+
<div class="fd-list__byline-left">First text item in byline, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
|
|
60
|
+
<div class="fd-list__byline-right">Second text item (semantic)</div>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
</li>
|
|
64
|
+
</ul>
|
|
65
|
+
</div>
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<ul class="fd-list fd-list--byline fd-list--navigation fd-list--navigation-indication" role="list">
|
|
2
|
-
<li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link">
|
|
2
|
+
<li role="listitem" tabindex="-1" class="fd-list__item fd-list__item--link ">
|
|
3
3
|
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator" href="#">
|
|
4
4
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
5
5
|
<div class="fd-list__content">
|
|
6
|
-
<div class="fd-list__title">
|
|
7
|
-
<div class="fd-list__byline">
|
|
6
|
+
<div class="fd-list__title fd-list__title--wrap">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</div>
|
|
7
|
+
<div class="fd-list__byline fd-list__byline--wrap">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin elementum sapien vel enim facilisis, at faucibus nibh ornare. Pellentesque habitant morbi tristique senectus et netus</div>
|
|
8
8
|
</div>
|
|
9
9
|
</a>
|
|
10
10
|
</li>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<ul class="fd-list fd-list--selection fd-list--byline" role="listbox" aria-labelledby="O09lk9">
|
|
2
|
-
<li role="option" tabindex="0" class="fd-list__item is-selected">
|
|
2
|
+
<li role="option" tabindex="0" class="fd-list__item fd-list__item--wrap is-selected">
|
|
3
3
|
<div class="fd-form-item fd-list__form-item">
|
|
4
4
|
<input type="checkbox" class="fd-checkbox" id="Ai4ez6111Z" checked aria-labelledby="O09lk1">
|
|
5
5
|
<label tabindex="-1" class="fd-checkbox__label" for="Ai4ez6111Z">
|
|
@@ -8,8 +8,8 @@
|
|
|
8
8
|
</div>
|
|
9
9
|
<span class="fd-list__thumbnail"><i role="presentation" class="sap-icon--activate"></i></span>
|
|
10
10
|
<div class="fd-list__content">
|
|
11
|
-
<span class="fd-list__title" id="O09lk1">
|
|
12
|
-
<span class="fd-list__byline">
|
|
11
|
+
<span class="fd-list__title" id="O09lk1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit</span>
|
|
12
|
+
<span class="fd-list__byline">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Proin elementum sapien vel enim facilisis</span>
|
|
13
13
|
</div>
|
|
14
14
|
</li>
|
|
15
15
|
<li role="option" tabindex="0" class="fd-list__item">
|
|
@@ -22,9 +22,9 @@
|
|
|
22
22
|
<span class="fd-image--s fd-list__thumbnail" aria-label="Godafoss waterfall in northern Iceland"
|
|
23
23
|
style="background-image: url('assets/images/backgrounds/Godafoss_waterfall_in_northern_Iceland.jpg'); background-size:cover;"></span>
|
|
24
24
|
<div class="fd-list__content">
|
|
25
|
-
<div class="fd-list__title" id="O09lk2">
|
|
26
|
-
<div class="fd-list__byline fd-list__byline--2-col">
|
|
27
|
-
<div class="fd-list__byline-left">
|
|
25
|
+
<div class="fd-list__title fd-list__title--wrap" id="O09lk2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore</div>
|
|
26
|
+
<div class="fd-list__byline fd-list__byline--wrap fd-list__byline--2-col">
|
|
27
|
+
<div class="fd-list__byline-left">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, excepteur sint occaecat cupidatat non proident</div>
|
|
28
28
|
<div class="fd-list__byline-right">Second text item in byline (can be semantic)</div>
|
|
29
29
|
</div>
|
|
30
30
|
</div>
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
<ul class="fd-list" role="list">
|
|
2
|
-
<li tabindex="-1" role="listitem" class="fd-list__item">
|
|
3
|
-
<span class="fd-list__title">List item 1</span>
|
|
2
|
+
<li tabindex="-1" role="listitem" class="fd-list__item fd-list__item--wrap">
|
|
3
|
+
<span class="fd-list__title">List item 1 that wraps. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua, ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, excepteur sint occaecat cupidatat non proident</span>
|
|
4
4
|
<button class="fd-button fd-button--transparent fd-list__button">
|
|
5
5
|
<i class="sap-icon--edit"></i>
|
|
6
6
|
</button>
|
|
7
7
|
</li>
|
|
8
8
|
<li tabindex="-1" role="listitem" class="fd-list__item">
|
|
9
|
-
<span class="fd-list__title">List item
|
|
9
|
+
<span class="fd-list__title fd-list__title--wrap">List item 2 that wraps. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat, duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
|
|
10
10
|
<button class="fd-button fd-button--transparent fd-list__button">
|
|
11
11
|
<i class="sap-icon--decline"></i>
|
|
12
12
|
</button>
|
|
13
13
|
</li>
|
|
14
14
|
<li tabindex="-1" role="listitem" class="fd-list__item">
|
|
15
|
-
<span class="fd-list__title">List item
|
|
15
|
+
<span class="fd-list__title">List item 3</span>
|
|
16
16
|
<button class="fd-button fd-button--transparent fd-list__button">
|
|
17
17
|
<i class="sap-icon--edit"></i>
|
|
18
18
|
</button>
|