@fundamental-styles/mcp 0.41.10-rc.4 → 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 +9 -3
- 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/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,12 @@
|
|
|
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
|
+
|
|
6
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)
|
|
7
13
|
|
|
8
14
|
### Bug Fixes
|
|
@@ -7149,9 +7155,9 @@ Co-authored-by: droshev <mladen.droshev@sap.com>
|
|
|
7149
7155
|
|
|
7150
7156
|
- added a new modifier class to fd-row to achieve even alignment of its elements:fd-row--top in a form.
|
|
7151
7157
|
Before:
|
|
7152
|
-
|
|
7153
|
-
|
|
7154
|
-
|
|
7158
|
+
<div class="fd-row">
|
|
7159
|
+
After:
|
|
7160
|
+
<div class="fd-row fd-row--top">
|
|
7155
7161
|
|
|
7156
7162
|
### Bug Fixes
|
|
7157
7163
|
|
|
@@ -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
|
|
@@ -668,6 +668,75 @@ Key CSS variables used by this component:
|
|
|
668
668
|
</button>
|
|
669
669
|
```
|
|
670
670
|
|
|
671
|
+
### Long text
|
|
672
|
+
|
|
673
|
+
Message view list items truncate long titles and subtitles by default. Add the \
|
|
674
|
+
|
|
675
|
+
```html
|
|
676
|
+
<div class="fd-popover">
|
|
677
|
+
<div class="fd-popover__control">
|
|
678
|
+
<button aria-controls="msgPopoverWrap" aria-expanded="true" aria-haspopup="dialog" class="fd-button fd-message-popover__trigger fd-message-popover__trigger--negative" role="button">
|
|
679
|
+
<i class="sap-icon--message-error" role="presentation" aria-hidden="true"></i>
|
|
680
|
+
<span class="fd-button__text">2</span>
|
|
681
|
+
</button>
|
|
682
|
+
<section aria-hidden="false" class="fd-popover__body fd-popover__body--no-arrow" id="msgPopoverWrap" aria-label="Messages" role="dialog">
|
|
683
|
+
<header class="fd-popover__body-header">
|
|
684
|
+
<div class="fd-bar fd-bar--header fd-bar--growing">
|
|
685
|
+
<div class="fd-bar__left">
|
|
686
|
+
<div class="fd-bar__element">
|
|
687
|
+
<div class="fd-segmented-button" role="group" aria-label="Filter messages">
|
|
688
|
+
<button class="fd-button fd-button--toggled" aria-pressed="true"><span class="fd-button__text">All</span></button>
|
|
689
|
+
<button class="fd-button" aria-pressed="false">
|
|
690
|
+
<span class="fd-object-status fd-object-status--negative"><i class="fd-button__icon fd-object-status__icon sap-icon--message-error" aria-label="Negative"></i></span>
|
|
691
|
+
<span class="fd-button__text">1</span>
|
|
692
|
+
</button>
|
|
693
|
+
<button class="fd-button" aria-pressed="false">
|
|
694
|
+
<span class="fd-object-status fd-object-status--critical"><i class="fd-button__icon fd-object-status__icon sap-icon--message-warning" aria-label="Warning"></i></span>
|
|
695
|
+
<span class="fd-button__text">1</span>
|
|
696
|
+
</button>
|
|
697
|
+
</div>
|
|
698
|
+
</div>
|
|
699
|
+
</div>
|
|
700
|
+
<div class="fd-bar__right">
|
|
701
|
+
<button aria-label="Close" class="fd-button fd-button--transparent"><i class="sap-icon--decline" role="presentation" aria-hidden="true"></i></button>
|
|
702
|
+
</div>
|
|
703
|
+
</div>
|
|
704
|
+
</header>
|
|
705
|
+
<div>
|
|
706
|
+
<div class="fd-message-view fd-scrollbar">
|
|
707
|
+
<section class="fd-message-view__list">
|
|
708
|
+
<ul class="fd-list fd-list--navigation-indication fd-list--navigation fd-list--message-view fd-list--wrap" role="list">
|
|
709
|
+
<li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
|
|
710
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
|
|
711
|
+
<span class="fd-object-status fd-object-status--negative fd-list__icon" role="img" aria-label="Error">
|
|
712
|
+
<i class="fd-object-status__icon sap-icon--message-error" role="presentation"></i>
|
|
713
|
+
</span>
|
|
714
|
+
<span class="fd-list__content">
|
|
715
|
+
<span class="fd-list__title">The file could not be uploaded because it does not meet the security requirements for this system.</span>
|
|
716
|
+
<span class="fd-list__subtitle">Please review the file type, size, and content before attempting to upload it again to the document management system.</span>
|
|
717
|
+
</span>
|
|
718
|
+
</a>
|
|
719
|
+
</li>
|
|
720
|
+
<li role="listitem" tabindex="0" class="fd-list__item fd-list__item--byline fd-list__item--link">
|
|
721
|
+
<a tabindex="0" class="fd-list__link fd-list__link--navigation-indicator">
|
|
722
|
+
<span class="fd-object-status fd-object-status--critical fd-list__icon" role="img" aria-label="Warning">
|
|
723
|
+
<i class="fd-object-status__icon sap-icon--message-warning" role="presentation"></i>
|
|
724
|
+
</span>
|
|
725
|
+
<span class="fd-list__content">
|
|
726
|
+
<span class="fd-list__title">Missing configuration for the purchase order approval workflow in the procurement module.</span>
|
|
727
|
+
<span class="fd-list__subtitle">Contact your system administrator to configure the required approval thresholds and delegations.</span>
|
|
728
|
+
</span>
|
|
729
|
+
</a>
|
|
730
|
+
</li>
|
|
731
|
+
</ul>
|
|
732
|
+
</section>
|
|
733
|
+
</div>
|
|
734
|
+
</div>
|
|
735
|
+
</section>
|
|
736
|
+
</div>
|
|
737
|
+
</div>
|
|
738
|
+
```
|
|
739
|
+
|
|
671
740
|
## Accessibility
|
|
672
741
|
|
|
673
742
|
- Use semantic HTML elements where appropriate
|