@fundamental-styles/mcp 0.41.10-rc.3 → 0.41.10-rc.5
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 +15 -3
- package/data/components/dialog-docs-static-settings.md +9 -7
- package/data/components/dialog-docs-static.md +113 -0
- package/data/components/dialog.md +72 -0
- package/data/components/form-label-patterns.md +90 -0
- package/data/components/list.md +100 -0
- package/data/components/message-page-upload-collection.md +120 -0
- package/data/components/popover-message-popover.md +69 -0
- package/data/components/popover-patterns.md +140 -0
- package/data/components/side-nav.md +142 -0
- package/data/components/tree.md +66 -0
- package/data/components/vertical-nav.md +68 -0
- package/data/examples/Components/dialog/long-text-list.example.html +108 -0
- package/data/examples/Components/message-popover/long-text.example.html +64 -0
- package/data/examples/Components/object-list/long-text.example.html +99 -0
- package/data/examples/Components/settings/xl-notifications.example.html +9 -7
- package/data/examples/Components/side-navigation/long-text.example.html +137 -0
- package/data/examples/Components/tree/long-text.example.html +61 -0
- package/data/examples/Components/upload-collection/long-text.example.html +115 -0
- package/data/examples/Components/vertical-navigation/long-text.example.html +63 -0
- package/data/examples/Patterns/combobox-input/long-text.example.html +67 -0
- package/data/examples/Patterns/multi-combo-box/long-text.example.html +135 -0
- package/data/examples/Patterns/multi-input/long-text.example.html +85 -0
- package/package.json +1 -1
package/data/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,18 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.41.10-rc.5](https://github.com/SAP/fundamental-styles/compare/v0.41.10-rc.4...v0.41.10-rc.5) (2026-09-17)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- **styles:** extend new truncation rules for standard and byline lists to remaining list components ([#6401](https://github.com/SAP/fundamental-styles/issues/6401)) ([691f07a](https://github.com/SAP/fundamental-styles/commit/691f07ad4ef85b8cd5b4f9b3789dbe989ae86e2c))
|
|
11
|
+
|
|
12
|
+
## [0.41.10-rc.4](https://github.com/SAP/fundamental-styles/compare/v0.41.10-rc.3...v0.41.10-rc.4) (2026-09-15)
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
- **styles:** update List spacings in Notifications view of Settings dialog ([#6400](https://github.com/SAP/fundamental-styles/issues/6400)) ([940e18d](https://github.com/SAP/fundamental-styles/commit/940e18dec205a0111d40ef7d89e6ab77b07d5b72))
|
|
17
|
+
|
|
6
18
|
## [0.41.10-rc.3](https://github.com/SAP/fundamental-styles/compare/v0.41.10-rc.2...v0.41.10-rc.3) (2026-09-11)
|
|
7
19
|
|
|
8
20
|
**Note:** Version bump only for package fundamental-styles
|
|
@@ -7143,9 +7155,9 @@ Co-authored-by: droshev <mladen.droshev@sap.com>
|
|
|
7143
7155
|
|
|
7144
7156
|
- added a new modifier class to fd-row to achieve even alignment of its elements:fd-row--top in a form.
|
|
7145
7157
|
Before:
|
|
7146
|
-
|
|
7147
|
-
|
|
7148
|
-
|
|
7158
|
+
<div class="fd-row">
|
|
7159
|
+
After:
|
|
7160
|
+
<div class="fd-row fd-row--top">
|
|
7149
7161
|
|
|
7150
7162
|
### Bug Fixes
|
|
7151
7163
|
|
|
@@ -1144,7 +1144,7 @@ This component works with or depends on:
|
|
|
1144
1144
|
<button
|
|
1145
1145
|
role="button"
|
|
1146
1146
|
title="Click to navigate"
|
|
1147
|
-
class="fd-button fd-button--transparent"
|
|
1147
|
+
class="fd-button fd-button--transparent fd-list__button"
|
|
1148
1148
|
>
|
|
1149
1149
|
<i
|
|
1150
1150
|
class="sap-icon--navigation-right-arrow"
|
|
@@ -1178,7 +1178,7 @@ This component works with or depends on:
|
|
|
1178
1178
|
<button
|
|
1179
1179
|
role="button"
|
|
1180
1180
|
title="Click to navigate"
|
|
1181
|
-
class="fd-button fd-button--transparent"
|
|
1181
|
+
class="fd-button fd-button--transparent fd-list__button"
|
|
1182
1182
|
>
|
|
1183
1183
|
<i
|
|
1184
1184
|
class="sap-icon--navigation-right-arrow"
|
|
@@ -1212,7 +1212,7 @@ This component works with or depends on:
|
|
|
1212
1212
|
<button
|
|
1213
1213
|
role="button"
|
|
1214
1214
|
title="Click to navigate"
|
|
1215
|
-
class="fd-button fd-button--transparent"
|
|
1215
|
+
class="fd-button fd-button--transparent fd-list__button"
|
|
1216
1216
|
>
|
|
1217
1217
|
<i
|
|
1218
1218
|
class="sap-icon--navigation-right-arrow"
|
|
@@ -1249,7 +1249,7 @@ This component works with or depends on:
|
|
|
1249
1249
|
<button
|
|
1250
1250
|
role="button"
|
|
1251
1251
|
title="Click to navigate"
|
|
1252
|
-
class="fd-button fd-button--transparent"
|
|
1252
|
+
class="fd-button fd-button--transparent fd-list__button"
|
|
1253
1253
|
>
|
|
1254
1254
|
<i
|
|
1255
1255
|
class="sap-icon--navigation-right-arrow"
|
|
@@ -1283,7 +1283,7 @@ This component works with or depends on:
|
|
|
1283
1283
|
<button
|
|
1284
1284
|
role="button"
|
|
1285
1285
|
title="Click to navigate"
|
|
1286
|
-
class="fd-button fd-button--transparent"
|
|
1286
|
+
class="fd-button fd-button--transparent fd-list__button"
|
|
1287
1287
|
>
|
|
1288
1288
|
<i
|
|
1289
1289
|
class="sap-icon--navigation-right-arrow"
|
|
@@ -1317,7 +1317,7 @@ This component works with or depends on:
|
|
|
1317
1317
|
<button
|
|
1318
1318
|
role="button"
|
|
1319
1319
|
title="Click to navigate"
|
|
1320
|
-
class="fd-button fd-button--transparent"
|
|
1320
|
+
class="fd-button fd-button--transparent fd-list__button"
|
|
1321
1321
|
>
|
|
1322
1322
|
<i
|
|
1323
1323
|
class="sap-icon--navigation-right-arrow"
|
|
@@ -1333,7 +1333,9 @@ This component works with or depends on:
|
|
|
1333
1333
|
<footer class="fd-dialog__footer fd-bar fd-bar--footer fd-settings__dialog-footer">
|
|
1334
1334
|
<div class="fd-bar__right">
|
|
1335
1335
|
<div class="fd-bar__element">
|
|
1336
|
-
<button class="fd-dialog__decisive-button fd-button fd-button--transparent">
|
|
1336
|
+
<button class="fd-dialog__decisive-button fd-button fd-button--transparent fd-list__button">
|
|
1337
|
+
Close
|
|
1338
|
+
</button>
|
|
1337
1339
|
</div>
|
|
1338
1340
|
</div>
|
|
1339
1341
|
</footer>
|
|
@@ -967,6 +967,119 @@ To properly support resizing for all input methods, the optional resize handle i
|
|
|
967
967
|
</section>
|
|
968
968
|
```
|
|
969
969
|
|
|
970
|
+
### Long text list
|
|
971
|
+
|
|
972
|
+
Dialogs can contain lists with long item text. List items truncate text by default. Add the \
|
|
973
|
+
|
|
974
|
+
```html
|
|
975
|
+
<div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
|
|
976
|
+
<div class="fd-dialog__content" role="dialog" aria-modal="true" aria-labelledby="lt-dialog-title-1">
|
|
977
|
+
<header class="fd-dialog__header fd-bar fd-bar--header">
|
|
978
|
+
<div class="fd-bar__left">
|
|
979
|
+
<div class="fd-bar__element">
|
|
980
|
+
<h2 class="fd-title fd-title--h5" id="lt-dialog-title-1">Select Items</h2>
|
|
981
|
+
</div>
|
|
982
|
+
</div>
|
|
983
|
+
</header>
|
|
984
|
+
<section class="fd-dialog__body fd-dialog__body--no-vertical-padding">
|
|
985
|
+
<ul class="fd-list fd-list--selection fd-list--no-border" aria-label="selection list" role="listbox">
|
|
986
|
+
<li role="option" tabindex="0" class="fd-list__item">
|
|
987
|
+
<div class="fd-form-item fd-list__form-item">
|
|
988
|
+
<input type="checkbox" class="fd-checkbox" id="lt-dlg-1" aria-labelledby="lt-dlg-t1">
|
|
989
|
+
<label tabindex="-1" class="fd-checkbox__label" for="lt-dlg-1">
|
|
990
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
991
|
+
</label>
|
|
992
|
+
</div>
|
|
993
|
+
<span class="fd-list__title" id="lt-dlg-t1">Annual Budget Planning Document for All Departments in the Fiscal Year 2025</span>
|
|
994
|
+
</li>
|
|
995
|
+
<li role="option" tabindex="0" class="fd-list__item is-selected" aria-selected="true">
|
|
996
|
+
<div class="fd-form-item fd-list__form-item">
|
|
997
|
+
<input type="checkbox" class="fd-checkbox" id="lt-dlg-2" checked aria-labelledby="lt-dlg-t2">
|
|
998
|
+
<label tabindex="-1" class="fd-checkbox__label" for="lt-dlg-2">
|
|
999
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1000
|
+
</label>
|
|
1001
|
+
</div>
|
|
1002
|
+
<span class="fd-list__title" id="lt-dlg-t2">Customer Satisfaction Survey Consolidated Results and Analysis Report Q3 2024</span>
|
|
1003
|
+
</li>
|
|
1004
|
+
<li role="option" tabindex="0" class="fd-list__item">
|
|
1005
|
+
<div class="fd-form-item fd-list__form-item">
|
|
1006
|
+
<input type="checkbox" class="fd-checkbox" id="lt-dlg-3" aria-labelledby="lt-dlg-t3">
|
|
1007
|
+
<label tabindex="-1" class="fd-checkbox__label" for="lt-dlg-3">
|
|
1008
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1009
|
+
</label>
|
|
1010
|
+
</div>
|
|
1011
|
+
<span class="fd-list__title" id="lt-dlg-t3">Vendor Contract Review and Regulatory Compliance Assessment Final Report</span>
|
|
1012
|
+
</li>
|
|
1013
|
+
</ul>
|
|
1014
|
+
</section>
|
|
1015
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer">
|
|
1016
|
+
<div class="fd-bar__right">
|
|
1017
|
+
<div class="fd-bar__element">
|
|
1018
|
+
<button class="fd-button fd-button--emphasized fd-button--compact">Select</button>
|
|
1019
|
+
</div>
|
|
1020
|
+
<div class="fd-bar__element">
|
|
1021
|
+
<button class="fd-button fd-button--transparent fd-button--compact">Cancel</button>
|
|
1022
|
+
</div>
|
|
1023
|
+
</div>
|
|
1024
|
+
</footer>
|
|
1025
|
+
</div>
|
|
1026
|
+
</div>
|
|
1027
|
+
|
|
1028
|
+
<h3>With <code>fd-list--wrap</code> and <code>fd-list__item--wrap</code></h3>
|
|
1029
|
+
<div class="fd-dialog-docs-static fd-dialog fd-dialog--active">
|
|
1030
|
+
<div class="fd-dialog__content" role="dialog" aria-modal="true" aria-labelledby="lt-dialog-title-2">
|
|
1031
|
+
<header class="fd-dialog__header fd-bar fd-bar--header">
|
|
1032
|
+
<div class="fd-bar__left">
|
|
1033
|
+
<div class="fd-bar__element">
|
|
1034
|
+
<h2 class="fd-title fd-title--h5" id="lt-dialog-title-2">Select Items</h2>
|
|
1035
|
+
</div>
|
|
1036
|
+
</div>
|
|
1037
|
+
</header>
|
|
1038
|
+
<section class="fd-dialog__body fd-dialog__body--no-vertical-padding">
|
|
1039
|
+
<ul class="fd-list fd-list--selection fd-list--no-border fd-list--wrap" aria-label="selection list" role="listbox">
|
|
1040
|
+
<li role="option" tabindex="0" class="fd-list__item fd-list__item--wrap">
|
|
1041
|
+
<div class="fd-form-item fd-list__form-item">
|
|
1042
|
+
<input type="checkbox" class="fd-checkbox" id="lt-dlg-w1" aria-labelledby="lt-dlg-wt1">
|
|
1043
|
+
<label tabindex="-1" class="fd-checkbox__label" for="lt-dlg-w1">
|
|
1044
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1045
|
+
</label>
|
|
1046
|
+
</div>
|
|
1047
|
+
<span class="fd-list__title" id="lt-dlg-wt1">Annual Budget Planning Document for All Departments in the Fiscal Year 2025</span>
|
|
1048
|
+
</li>
|
|
1049
|
+
<li role="option" tabindex="0" class="fd-list__item fd-list__item--wrap is-selected" aria-selected="true">
|
|
1050
|
+
<div class="fd-form-item fd-list__form-item">
|
|
1051
|
+
<input type="checkbox" class="fd-checkbox" id="lt-dlg-w2" checked aria-labelledby="lt-dlg-wt2">
|
|
1052
|
+
<label tabindex="-1" class="fd-checkbox__label" for="lt-dlg-w2">
|
|
1053
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1054
|
+
</label>
|
|
1055
|
+
</div>
|
|
1056
|
+
<span class="fd-list__title" id="lt-dlg-wt2">Customer Satisfaction Survey Consolidated Results and Analysis Report Q3 2024</span>
|
|
1057
|
+
</li>
|
|
1058
|
+
<li role="option" tabindex="0" class="fd-list__item fd-list__item--wrap">
|
|
1059
|
+
<div class="fd-form-item fd-list__form-item">
|
|
1060
|
+
<input type="checkbox" class="fd-checkbox" id="lt-dlg-w3" aria-labelledby="lt-dlg-wt3">
|
|
1061
|
+
<label tabindex="-1" class="fd-checkbox__label" for="lt-dlg-w3">
|
|
1062
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1063
|
+
</label>
|
|
1064
|
+
</div>
|
|
1065
|
+
<span class="fd-list__title" id="lt-dlg-wt3">Vendor Contract Review and Regulatory Compliance Assessment Final Report</span>
|
|
1066
|
+
</li>
|
|
1067
|
+
</ul>
|
|
1068
|
+
</section>
|
|
1069
|
+
<footer class="fd-dialog__footer fd-bar fd-bar--footer">
|
|
1070
|
+
<div class="fd-bar__right">
|
|
1071
|
+
<div class="fd-bar__element">
|
|
1072
|
+
<button class="fd-button fd-button--emphasized fd-button--compact">Select</button>
|
|
1073
|
+
</div>
|
|
1074
|
+
<div class="fd-bar__element">
|
|
1075
|
+
<button class="fd-button fd-button--transparent fd-button--compact">Cancel</button>
|
|
1076
|
+
</div>
|
|
1077
|
+
</div>
|
|
1078
|
+
</footer>
|
|
1079
|
+
</div>
|
|
1080
|
+
</div>
|
|
1081
|
+
```
|
|
1082
|
+
|
|
970
1083
|
## Accessibility
|
|
971
1084
|
|
|
972
1085
|
- Use semantic HTML elements where appropriate
|
|
@@ -591,6 +591,78 @@ So instead of using popover and dropdown, it should be wrapped in \
|
|
|
591
591
|
</section>
|
|
592
592
|
```
|
|
593
593
|
|
|
594
|
+
### Long text
|
|
595
|
+
|
|
596
|
+
Combobox dropdown list items wrap long option text by default (\
|
|
597
|
+
|
|
598
|
+
```html
|
|
599
|
+
<div class="fd-form-item">
|
|
600
|
+
<label for="lt-combobox-wrap" class="fd-form-label">Configuration template</label>
|
|
601
|
+
<div class="fd-popover">
|
|
602
|
+
<div class="fd-popover__control">
|
|
603
|
+
<div class="fd-input-group fd-input-group--control">
|
|
604
|
+
<input type="text" class="fd-input fd-input-group__input" id="lt-combobox-wrap" value="Database Connectivity Protocol Configuration for Production Environment">
|
|
605
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
606
|
+
<button aria-label="Show options" aria-controls="lt-combobox-wrap-body" aria-expanded="true" aria-haspopup="true" class="fd-input-group__button fd-button fd-button--transparent">
|
|
607
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
608
|
+
</button>
|
|
609
|
+
</span>
|
|
610
|
+
</div>
|
|
611
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="false" id="lt-combobox-wrap-body">
|
|
612
|
+
<ul aria-label="Configuration template options" class="fd-list fd-list--dropdown" role="listbox">
|
|
613
|
+
<li role="option" tabindex="0" class="fd-list__item is-selected">
|
|
614
|
+
<span class="fd-list__title">Database Connectivity Protocol Configuration for Production Environment Cluster</span>
|
|
615
|
+
</li>
|
|
616
|
+
<li role="option" tabindex="0" class="fd-list__item">
|
|
617
|
+
<span class="fd-list__title">Enterprise Resource Planning System Integration with Legacy SAP Backend Services</span>
|
|
618
|
+
</li>
|
|
619
|
+
<li role="option" tabindex="0" class="fd-list__item">
|
|
620
|
+
<span class="fd-list__title">Supply Chain Management Workflow Automation and Real-Time Inventory Synchronisation</span>
|
|
621
|
+
</li>
|
|
622
|
+
<li role="option" tabindex="0" class="fd-list__item">
|
|
623
|
+
<span class="fd-list__title">Customer Relationship Management Analytics Dashboard Configuration Template</span>
|
|
624
|
+
</li>
|
|
625
|
+
</ul>
|
|
626
|
+
</div>
|
|
627
|
+
</div>
|
|
628
|
+
<p>Default — wraps</p>
|
|
629
|
+
</div>
|
|
630
|
+
|
|
631
|
+
<div class="fd-form-item">
|
|
632
|
+
<label for="lt-combobox-nowrap" class="fd-form-label">Configuration template</label>
|
|
633
|
+
<div class="fd-popover">
|
|
634
|
+
<div class="fd-popover__control">
|
|
635
|
+
<div class="fd-input-group fd-input-group--control">
|
|
636
|
+
<input type="text" class="fd-input fd-input-group__input" id="lt-combobox-nowrap" value="Database Connectivity Protocol Configuration for Production Environment">
|
|
637
|
+
<span class="fd-input-group__addon fd-input-group__addon--button">
|
|
638
|
+
<button aria-label="Show options" aria-controls="lt-combobox-nowrap-body" aria-expanded="true" aria-haspopup="true" class="fd-input-group__button fd-button fd-button--transparent">
|
|
639
|
+
<i class="sap-icon--navigation-down-arrow"></i>
|
|
640
|
+
</button>
|
|
641
|
+
</span>
|
|
642
|
+
</div>
|
|
643
|
+
</div>
|
|
644
|
+
<div class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill" aria-hidden="false" id="lt-combobox-nowrap-body">
|
|
645
|
+
<ul aria-label="Configuration template options" class="fd-list fd-list--dropdown" role="listbox">
|
|
646
|
+
<li role="option" tabindex="0" class="fd-list__item is-selected">
|
|
647
|
+
<span class="fd-list__title fd-list__title--no-wrap">Database Connectivity Protocol Configuration for Production Environment Cluster</span>
|
|
648
|
+
</li>
|
|
649
|
+
<li role="option" tabindex="0" class="fd-list__item">
|
|
650
|
+
<span class="fd-list__title fd-list__title--no-wrap">Enterprise Resource Planning System Integration with Legacy SAP Backend Services</span>
|
|
651
|
+
</li>
|
|
652
|
+
<li role="option" tabindex="0" class="fd-list__item">
|
|
653
|
+
<span class="fd-list__title fd-list__title--no-wrap">Supply Chain Management Workflow Automation and Real-Time Inventory Synchronisation</span>
|
|
654
|
+
</li>
|
|
655
|
+
<li role="option" tabindex="0" class="fd-list__item">
|
|
656
|
+
<span class="fd-list__title fd-list__title--no-wrap">Customer Relationship Management Analytics Dashboard Configuration Template</span>
|
|
657
|
+
</li>
|
|
658
|
+
</ul>
|
|
659
|
+
</div>
|
|
660
|
+
</div>
|
|
661
|
+
<p>With <code>fd-list__title--no-wrap</code> (opt-out)</p>
|
|
662
|
+
</div>
|
|
663
|
+
</div>
|
|
664
|
+
```
|
|
665
|
+
|
|
594
666
|
## Accessibility
|
|
595
667
|
|
|
596
668
|
- Use semantic HTML elements where appropriate
|
|
@@ -1160,6 +1160,96 @@ The user can filter selectable options by typing in the input. A button with the
|
|
|
1160
1160
|
</div>
|
|
1161
1161
|
```
|
|
1162
1162
|
|
|
1163
|
+
### Long text
|
|
1164
|
+
|
|
1165
|
+
Multi input list option labels truncate long text by default. Add the \
|
|
1166
|
+
|
|
1167
|
+
```html
|
|
1168
|
+
<div>
|
|
1169
|
+
<p>Default (truncation)</p>
|
|
1170
|
+
<ul aria-multiselectable="true" role="listbox" class="fd-list fd-list--multi-input">
|
|
1171
|
+
<li class="fd-list__item is-selected" role="option">
|
|
1172
|
+
<input type="checkbox" checked class="fd-checkbox fd-list__input" id="lt-mi-1">
|
|
1173
|
+
<label class="fd-checkbox__label fd-list__label" for="lt-mi-1">
|
|
1174
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1175
|
+
<div class="fd-checkbox__label-container">
|
|
1176
|
+
<span class="fd-checkbox__text">Forecast Category Override Reason</span>
|
|
1177
|
+
</label>
|
|
1178
|
+
</li>
|
|
1179
|
+
<li class="fd-list__item is-selected" role="option">
|
|
1180
|
+
<input type="checkbox" checked class="fd-checkbox fd-list__input" id="lt-mi-2">
|
|
1181
|
+
<label class="fd-checkbox__label fd-list__label" for="lt-mi-2">
|
|
1182
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1183
|
+
<div class="fd-checkbox__label-container">
|
|
1184
|
+
<span class="fd-checkbox__text">Purchase Order Approval Threshold Exceeded</span>
|
|
1185
|
+
</div>
|
|
1186
|
+
</label>
|
|
1187
|
+
</li>
|
|
1188
|
+
<li class="fd-list__item" role="option">
|
|
1189
|
+
<input type="checkbox" class="fd-checkbox fd-list__input" id="lt-mi-3">
|
|
1190
|
+
<label class="fd-checkbox__label fd-list__label" for="lt-mi-3">
|
|
1191
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1192
|
+
<div class="fd-checkbox__label-container">
|
|
1193
|
+
<span class="fd-checkbox__text">Customer Satisfaction Score Below Target</span>
|
|
1194
|
+
</div>
|
|
1195
|
+
</label>
|
|
1196
|
+
</li>
|
|
1197
|
+
<li class="fd-list__item" role="option">
|
|
1198
|
+
<input type="checkbox" class="fd-checkbox fd-list__input" id="lt-mi-4">
|
|
1199
|
+
<label class="fd-checkbox__label fd-list__label" for="lt-mi-4">
|
|
1200
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1201
|
+
<div class="fd-checkbox__label-container">
|
|
1202
|
+
<span class="fd-checkbox__text">Delivery Confirmation Required</span>
|
|
1203
|
+
</div>
|
|
1204
|
+
</label>
|
|
1205
|
+
</li>
|
|
1206
|
+
</ul>
|
|
1207
|
+
</div>
|
|
1208
|
+
|
|
1209
|
+
<div>
|
|
1210
|
+
<p>With <code>fd-list__label--wrap</code></p>
|
|
1211
|
+
<ul aria-multiselectable="true" role="listbox" class="fd-list fd-list--multi-input">
|
|
1212
|
+
<li class="fd-list__item is-selected" role="option">
|
|
1213
|
+
<input type="checkbox" checked class="fd-checkbox fd-list__input" id="lt-mi-w-1">
|
|
1214
|
+
<label class="fd-checkbox__label fd-list__label fd-list__label--wrap" for="lt-mi-w-1">
|
|
1215
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1216
|
+
<div class="fd-checkbox__label-container">
|
|
1217
|
+
<span class="fd-checkbox__text">Forecast Category Override Reason</span>
|
|
1218
|
+
</div>
|
|
1219
|
+
</label>
|
|
1220
|
+
</li>
|
|
1221
|
+
<li class="fd-list__item is-selected" role="option">
|
|
1222
|
+
<input type="checkbox" checked class="fd-checkbox fd-list__input" id="lt-mi-w-2">
|
|
1223
|
+
<label class="fd-checkbox__label fd-list__label fd-list__label--wrap" for="lt-mi-w-2">
|
|
1224
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1225
|
+
<div class="fd-checkbox__label-container">
|
|
1226
|
+
<span class="fd-checkbox__text">Purchase Order Approval Threshold Exceeded</span>
|
|
1227
|
+
</div>
|
|
1228
|
+
</label>
|
|
1229
|
+
</li>
|
|
1230
|
+
<li class="fd-list__item" role="option">
|
|
1231
|
+
<input type="checkbox" class="fd-checkbox fd-list__input" id="lt-mi-w-3">
|
|
1232
|
+
<label class="fd-checkbox__label fd-list__label fd-list__label--wrap" for="lt-mi-w-3">
|
|
1233
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1234
|
+
<div class="fd-checkbox__label-container">
|
|
1235
|
+
<span class="fd-checkbox__text">Customer Satisfaction Score Below Target</span>
|
|
1236
|
+
</div>
|
|
1237
|
+
</label>
|
|
1238
|
+
</li>
|
|
1239
|
+
<li class="fd-list__item" role="option">
|
|
1240
|
+
<input type="checkbox" class="fd-checkbox fd-list__input" id="lt-mi-w-4">
|
|
1241
|
+
<label class="fd-checkbox__label fd-list__label fd-list__label--wrap" for="lt-mi-w-4">
|
|
1242
|
+
<span class="fd-checkbox__checkmark" aria-hidden="true"></span>
|
|
1243
|
+
<div class="fd-checkbox__label-container">
|
|
1244
|
+
<span class="fd-checkbox__text">Delivery Confirmation Required</span>
|
|
1245
|
+
</div>
|
|
1246
|
+
</label>
|
|
1247
|
+
</li>
|
|
1248
|
+
</ul>
|
|
1249
|
+
</div>
|
|
1250
|
+
</div>
|
|
1251
|
+
```
|
|
1252
|
+
|
|
1163
1253
|
## Accessibility
|
|
1164
1254
|
|
|
1165
1255
|
- Use semantic HTML elements where appropriate
|
package/data/components/list.md
CHANGED
|
@@ -1271,6 +1271,106 @@ Object list items can be displayed without borders. To display a borderless list
|
|
|
1271
1271
|
</div>
|
|
1272
1272
|
```
|
|
1273
1273
|
|
|
1274
|
+
### Long text
|
|
1275
|
+
|
|
1276
|
+
Object list items truncate long text by default. Add the \
|
|
1277
|
+
|
|
1278
|
+
```html
|
|
1279
|
+
<p>Default (truncation)</p>
|
|
1280
|
+
<ul class="fd-list fd-object-list" role="list">
|
|
1281
|
+
<li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
|
|
1282
|
+
<div class="fd-object-list__container">
|
|
1283
|
+
<div class="fd-object-list__intro">
|
|
1284
|
+
Optional additional context about this sales order line item originating from the global procurement and supply chain management system
|
|
1285
|
+
<div class="fd-object-list__header">
|
|
1286
|
+
<div class="fd-object-list__header-left">
|
|
1287
|
+
<div class="fd-object-identifier fd-object-list__object-identifier">
|
|
1288
|
+
<p class="fd-object-identifier__title">
|
|
1289
|
+
Dell XPS 15 Laptop with 11th Gen Intel Core i7 Processor and NVIDIA GeForce RTX Graphics
|
|
1290
|
+
</p>
|
|
1291
|
+
</div>
|
|
1292
|
+
<div class="fd-object-list__header-right">
|
|
1293
|
+
<span class="fd-object-number fd-object-list__object-number">
|
|
1294
|
+
<span class="fd-object-number__text">1,299.00</span>
|
|
1295
|
+
<span class="fd-object-number__unit">USD</span>
|
|
1296
|
+
</span>
|
|
1297
|
+
</div>
|
|
1298
|
+
</div>
|
|
1299
|
+
<div class="fd-object-list__content">
|
|
1300
|
+
<div class="fd-object-list__row">
|
|
1301
|
+
<div class="fd-object-list__row-left">
|
|
1302
|
+
<div class="fd-object-list__object-attribute">
|
|
1303
|
+
Enterprise Resource Planning Product Category
|
|
1304
|
+
</div>
|
|
1305
|
+
</div>
|
|
1306
|
+
<div class="fd-object-list__row-right">
|
|
1307
|
+
<span class="fd-object-status fd-object-status--critical">
|
|
1308
|
+
<span class="fd-object-status__text">Below Minimum Required Inventory Level for Restocking</span>
|
|
1309
|
+
</span>
|
|
1310
|
+
</div>
|
|
1311
|
+
</div>
|
|
1312
|
+
<div class="fd-object-list__row">
|
|
1313
|
+
<div class="fd-object-list__row-left">
|
|
1314
|
+
<div class="fd-object-list__object-attribute">
|
|
1315
|
+
Country of Origin and Manufacturing Facility
|
|
1316
|
+
</div>
|
|
1317
|
+
</div>
|
|
1318
|
+
</div>
|
|
1319
|
+
</div>
|
|
1320
|
+
</div>
|
|
1321
|
+
</li>
|
|
1322
|
+
</ul>
|
|
1323
|
+
</div>
|
|
1324
|
+
|
|
1325
|
+
<p>With <code>fd-object-list--wrap</code></p>
|
|
1326
|
+
<ul class="fd-list fd-object-list fd-object-list--wrap" role="list">
|
|
1327
|
+
<li role="listitem" tabindex="0" class="fd-list__item fd-object-list__item">
|
|
1328
|
+
<div class="fd-object-list__container">
|
|
1329
|
+
<div class="fd-object-list__intro">
|
|
1330
|
+
Optional additional context about this sales order line item originating from the global procurement and supply chain management system
|
|
1331
|
+
<div class="fd-object-list__header">
|
|
1332
|
+
<div class="fd-object-list__header-left">
|
|
1333
|
+
<div class="fd-object-identifier fd-object-list__object-identifier">
|
|
1334
|
+
<p class="fd-object-identifier__title">
|
|
1335
|
+
Dell XPS 15 Laptop with 11th Gen Intel Core i7 Processor and NVIDIA GeForce RTX Graphics
|
|
1336
|
+
</p>
|
|
1337
|
+
</div>
|
|
1338
|
+
</div>
|
|
1339
|
+
<div class="fd-object-list__header-right">
|
|
1340
|
+
<span class="fd-object-number fd-object-list__object-number">
|
|
1341
|
+
<span class="fd-object-number__text">1,299.00</span>
|
|
1342
|
+
<span class="fd-object-number__unit">USD</span>
|
|
1343
|
+
</span>
|
|
1344
|
+
</div>
|
|
1345
|
+
</div>
|
|
1346
|
+
<div class="fd-object-list__content">
|
|
1347
|
+
<div class="fd-object-list__row">
|
|
1348
|
+
<div class="fd-object-list__row-left">
|
|
1349
|
+
<div class="fd-object-list__object-attribute">
|
|
1350
|
+
Enterprise Resource Planning Product Category
|
|
1351
|
+
</div>
|
|
1352
|
+
</div>
|
|
1353
|
+
<div class="fd-object-list__row-right">
|
|
1354
|
+
<span class="fd-object-status fd-object-status--critical">
|
|
1355
|
+
<span class="fd-object-status__text">Below Minimum Required Inventory Level for Restocking</span>
|
|
1356
|
+
</span>
|
|
1357
|
+
</div>
|
|
1358
|
+
</div>
|
|
1359
|
+
<div class="fd-object-list__row">
|
|
1360
|
+
<div class="fd-object-list__row-left">
|
|
1361
|
+
<div class="fd-object-list__object-attribute">
|
|
1362
|
+
Country of Origin and Manufacturing Facility
|
|
1363
|
+
</div>
|
|
1364
|
+
</div>
|
|
1365
|
+
</div>
|
|
1366
|
+
</div>
|
|
1367
|
+
</div>
|
|
1368
|
+
</li>
|
|
1369
|
+
</ul>
|
|
1370
|
+
</div>
|
|
1371
|
+
</div>
|
|
1372
|
+
```
|
|
1373
|
+
|
|
1274
1374
|
## Accessibility
|
|
1275
1375
|
|
|
1276
1376
|
- Use semantic HTML elements where appropriate
|
|
@@ -663,6 +663,126 @@ Use a message page component when the user has yet to upload any files.
|
|
|
663
663
|
</div>
|
|
664
664
|
```
|
|
665
665
|
|
|
666
|
+
### Long text
|
|
667
|
+
|
|
668
|
+
Upload collection file names truncate long text by default. Add the \
|
|
669
|
+
|
|
670
|
+
```html
|
|
671
|
+
<div>
|
|
672
|
+
<p>Default (truncation)</p>
|
|
673
|
+
<ul class="fd-list fd-list--byline fd-upload-collection" role="list">
|
|
674
|
+
<li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
|
|
675
|
+
<span class="fd-list__thumbnail fd-upload-collection__thumbnail">
|
|
676
|
+
<i role="presentation" class="sap-icon--pdf-attachment"></i>
|
|
677
|
+
</span>
|
|
678
|
+
<div class="fd-list__content">
|
|
679
|
+
<a href="#" class="fd-list__title fd-link fd-upload-collection__title">
|
|
680
|
+
Annual_Financial_Report_Q4_2024_Consolidated_Version_Final_Approved.pdf
|
|
681
|
+
</a>
|
|
682
|
+
<div class="fd-upload-collection__description">
|
|
683
|
+
Uploaded by John Smith on behalf of Finance Department
|
|
684
|
+
<span class="fd-upload-collection__text-separator"> </span>
|
|
685
|
+
Version 3.2
|
|
686
|
+
<div class="fd-upload-collection__status-group">
|
|
687
|
+
<span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
|
|
688
|
+
<span class="fd-object-status__text fd-upload-collection__status-group-item-text">Upload complete – available for download</span>
|
|
689
|
+
</span>
|
|
690
|
+
</div>
|
|
691
|
+
</div>
|
|
692
|
+
<div class="fd-upload-collection__button-group">
|
|
693
|
+
<button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
|
|
694
|
+
<button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
|
|
695
|
+
</div>
|
|
696
|
+
</li>
|
|
697
|
+
<li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
|
|
698
|
+
<span class="fd-list__thumbnail fd-upload-collection__thumbnail">
|
|
699
|
+
<i role="presentation" class="sap-icon--excel-attachment"></i>
|
|
700
|
+
</span>
|
|
701
|
+
<div class="fd-list__content">
|
|
702
|
+
<div class="fd-upload-collection__title-container">
|
|
703
|
+
<a href="#" class="fd-list__title fd-link fd-upload-collection__title">
|
|
704
|
+
Customer_Data_Export_EMEA_Region_December_2024_Unprocessed_Raw.xlsx
|
|
705
|
+
</a>
|
|
706
|
+
<div class="fd-object-marker">
|
|
707
|
+
<i class="fd-object-marker__icon sap-icon--request" aria-label="icon for request" role="img"></i>
|
|
708
|
+
</div>
|
|
709
|
+
</div>
|
|
710
|
+
<div class="fd-upload-collection__description">
|
|
711
|
+
Exported from Customer Intelligence Platform by Sarah Johnson
|
|
712
|
+
</div>
|
|
713
|
+
<div class="fd-upload-collection__status-group">
|
|
714
|
+
<span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
|
|
715
|
+
<span class="fd-object-status__text fd-upload-collection__status-group-item-text">Virus scan failed – file quarantined pending review</span>
|
|
716
|
+
</span>
|
|
717
|
+
</div>
|
|
718
|
+
</div>
|
|
719
|
+
<div class="fd-upload-collection__button-group">
|
|
720
|
+
<button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
|
|
721
|
+
<button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
|
|
722
|
+
</div>
|
|
723
|
+
</li>
|
|
724
|
+
</ul>
|
|
725
|
+
</div>
|
|
726
|
+
|
|
727
|
+
<div>
|
|
728
|
+
<p>With <code>fd-list--wrap</code></p>
|
|
729
|
+
<ul class="fd-list fd-list--byline fd-list--wrap fd-upload-collection" role="list">
|
|
730
|
+
<li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
|
|
731
|
+
<span class="fd-list__thumbnail fd-upload-collection__thumbnail">
|
|
732
|
+
<i role="presentation" class="sap-icon--pdf-attachment"></i>
|
|
733
|
+
</span>
|
|
734
|
+
<div class="fd-list__content">
|
|
735
|
+
<a href="#" class="fd-list__title fd-link fd-upload-collection__title">
|
|
736
|
+
Annual_Financial_Report_Q4_2024_Consolidated_Version_Final_Approved.pdf
|
|
737
|
+
</a>
|
|
738
|
+
<div class="fd-upload-collection__description">
|
|
739
|
+
Uploaded by John Smith on behalf of Finance Department
|
|
740
|
+
<span class="fd-upload-collection__text-separator"> </span>
|
|
741
|
+
Version 3.2
|
|
742
|
+
</div>
|
|
743
|
+
<div class="fd-upload-collection__status-group">
|
|
744
|
+
<span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--positive">
|
|
745
|
+
<span class="fd-object-status__text fd-upload-collection__status-group-item-text">Upload complete – available for download</span>
|
|
746
|
+
</span>
|
|
747
|
+
</div>
|
|
748
|
+
</div>
|
|
749
|
+
<div class="fd-upload-collection__button-group">
|
|
750
|
+
<button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
|
|
751
|
+
<button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
|
|
752
|
+
</div>
|
|
753
|
+
</li>
|
|
754
|
+
<li role="listitem" tabindex="0" class="fd-list__item fd-upload-collection__item">
|
|
755
|
+
<span class="fd-list__thumbnail fd-upload-collection__thumbnail">
|
|
756
|
+
<i role="presentation" class="sap-icon--excel-attachment"></i>
|
|
757
|
+
</span>
|
|
758
|
+
<div class="fd-list__content">
|
|
759
|
+
<div class="fd-upload-collection__title-container">
|
|
760
|
+
<a href="#" class="fd-list__title fd-link fd-upload-collection__title">
|
|
761
|
+
Customer_Data_Export_EMEA_Region_December_2024_Unprocessed_Raw.xlsx
|
|
762
|
+
</a>
|
|
763
|
+
<div class="fd-object-marker">
|
|
764
|
+
<i class="fd-object-marker__icon sap-icon--request" aria-label="icon for request" role="img"></i>
|
|
765
|
+
</div>
|
|
766
|
+
</div>
|
|
767
|
+
<div class="fd-upload-collection__description">
|
|
768
|
+
Exported from Customer Intelligence Platform by Sarah Johnson
|
|
769
|
+
</div>
|
|
770
|
+
<div class="fd-upload-collection__status-group">
|
|
771
|
+
<span class="fd-object-status fd-upload-collection__status-group-item fd-object-status--negative">
|
|
772
|
+
<span class="fd-object-status__text fd-upload-collection__status-group-item-text">Virus scan failed – file quarantined pending review</span>
|
|
773
|
+
</span>
|
|
774
|
+
</div>
|
|
775
|
+
</div>
|
|
776
|
+
<div class="fd-upload-collection__button-group">
|
|
777
|
+
<button aria-label="Edit" class="fd-button fd-button--transparent"><i class="sap-icon--edit"></i></button>
|
|
778
|
+
<button aria-label="Delete" class="fd-button fd-button--transparent"><i class="sap-icon--decline"></i></button>
|
|
779
|
+
</div>
|
|
780
|
+
</li>
|
|
781
|
+
</ul>
|
|
782
|
+
</div>
|
|
783
|
+
</div>
|
|
784
|
+
```
|
|
785
|
+
|
|
666
786
|
## Accessibility
|
|
667
787
|
|
|
668
788
|
- Use semantic HTML elements where appropriate
|