Skip to content

Commit e5fa241

Browse files
dobrinyonkovdobrinyonkov
authored
docs(ui5-list): add ListItemCustom with ExpandableText to List wrapping sample (#12011)
Added a new example showcasing ui5-li-custom with ui5-expandable-text for displaying long descriptions. Related to: #11655
1 parent 1956ddd commit e5fa241

File tree

7 files changed

+126
-3
lines changed

7 files changed

+126
-3
lines changed

‎packages/main/test/pages/List.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -650,6 +650,32 @@ <h2>With accessible description</h2>
650650
</ui5-li>
651651
</ui5-list>
652652

653+
<br/><br/>
654+
655+
<ui5-title size="H2">ListItemCustom with ExpandableText for Wrapping</ui5-title>
656+
657+
<br/>
658+
659+
<ui5-list header-text="Custom wrapping with ExpandableText component">
660+
<ui5-li-custom>
661+
<div class="product-item">
662+
<ui5-avatar initials="JD" color-scheme="Accent1"></ui5-avatar>
663+
<div class="product-details">
664+
<ui5-title size="H5">Product with Long Description</ui5-title>
665+
<ui5-expandable-text
666+
max-characters="200"
667+
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.">
668+
</ui5-expandable-text>
669+
<ui5-label>Product ID: #12345</ui5-label>
670+
</div>
671+
<div class="product-price">
672+
<ui5-label>€1,299.00</ui5-label>
673+
<ui5-label>In Stock</ui5-label>
674+
</div>
675+
</div>
676+
</ui5-li-custom>
677+
</ui5-list>
678+
653679
<script>
654680
'use strict';
655681

‎packages/main/test/pages/styles/List.css

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,25 @@
2525

2626
.largeTopMargin {
2727
margin-top: 2rem;
28-
}
28+
}
29+
30+
.product-item {
31+
display: flex;
32+
align-items: flex-start;
33+
gap: 1rem;
34+
padding: 0.5rem;
35+
}
36+
37+
.product-details {
38+
flex: 1;
39+
display: flex;
40+
flex-direction: column;
41+
gap: 0.25rem;
42+
}
43+
44+
.product-price {
45+
display: flex;
46+
flex-direction: column;
47+
align-items: flex-end;
48+
gap: 0.25rem;
49+
}

‎packages/website/docs/_components_pages/main/List/List.mdx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,4 +72,6 @@ The wrapping behavior is responsive:
7272

7373
This feature improves readability when displaying lengthy content in lists.
7474

75+
The `<ui5-li-custom>` is intentionally designed as a generic container to provide maximum flexibility. It can be used alongside `ui5-expandable-text` for long text content.
76+
7577
<WrappingBehavior />

‎packages/website/docs/_samples/main/List/WrappingBehavior/WrappingBehavior.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import html from '!!raw-loader!./sample.html';
22
import js from '!!raw-loader!./main.js';
3+
import css from '!!raw-loader!./main.css';
34

4-
<Editor html={html} js={js} />
5+
<Editor html={html} js={js} css={css} />

‎packages/website/docs/_samples/main/List/WrappingBehavior/main.css

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
.custom-list-item {
2+
display: flex;
3+
align-items: flex-start;
4+
gap: 1rem;
5+
padding: 0.5rem;
6+
}
7+
8+
.custom-list-item__avatar {
9+
flex-shrink: 0;
10+
}
11+
12+
.custom-list-item__content {
13+
flex: 1;
14+
display: flex;
15+
flex-direction: column;
16+
gap: 0.25rem;
17+
}
18+
19+
.custom-list-item__title {
20+
margin: 0;
21+
}
22+
23+
.custom-list-item__description {
24+
color: var(--sapNeutralTextColor);
25+
}
26+
27+
.custom-list-item__additional {
28+
font-size: 0.875rem;
29+
color: var(--sapNeutralTextColor);
30+
}

‎packages/website/docs/_samples/main/List/WrappingBehavior/main.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import "@ui5/webcomponents/dist/List.js";
22
import "@ui5/webcomponents/dist/ListItemStandard.js";
3+
import "@ui5/webcomponents/dist/ListItemCustom.js";
34

4-
import "@ui5/webcomponents/dist/Avatar.js";
5+
import "@ui5/webcomponents/dist/Avatar.js";
6+
import "@ui5/webcomponents/dist/ExpandableText.js";
7+
import "@ui5/webcomponents/dist/Title.js";
8+
import "@ui5/webcomponents/dist/Label.js";

‎packages/website/docs/_samples/main/List/WrappingBehavior/sample.html

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
<meta charset="UTF-8">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>Sample</title>
9+
<link rel="stylesheet" href="./main.css">
910
</head>
1011

1112
<body style="background-color: var(--sapBackgroundColor)">
@@ -31,6 +32,44 @@
3132
</ui5-avatar>
3233
</ui5-li>
3334
</ui5-list>
35+
36+
<br>
37+
<br>
38+
39+
<ui5-list header-text="Custom List Item with Wrapping">
40+
<!-- Custom Behavior with ExpandableText -->
41+
<ui5-li-custom>
42+
<div class="custom-list-item">
43+
<ui5-avatar class="custom-list-item__avatar">
44+
<img src="../assets/images/avatars/woman_avatar_1.png" alt="Woman image">
45+
</ui5-avatar>
46+
<div class="custom-list-item__content">
47+
<ui5-title size="H6" class="custom-list-item__title">Product with Expandable Description</ui5-title>
48+
<ui5-expandable-text
49+
class="custom-list-item__description"
50+
max-characters="120"
51+
text="This custom list item uses ExpandableText to provide controlled expansion of lengthy content. Users can choose to read more when they need detailed information, keeping the list compact by default. This approach gives developers full control over the content layout and interaction while maintaining accessibility and user experience standards.">
52+
</ui5-expandable-text>
53+
<ui5-label class="custom-list-item__additional">Expandable</ui5-label>
54+
</div>
55+
</div>
56+
</ui5-li-custom>
57+
<ui5-li-custom>
58+
<div class="custom-list-item">
59+
<ui5-avatar class="custom-list-item__avatar">
60+
<img src="../assets/images/avatars/woman_avatar_2.png" alt="Woman image">
61+
</ui5-avatar>
62+
<div class="custom-list-item__content">
63+
<ui5-title size="H6" class="custom-list-item__title">Product with Expandable Description</ui5-title>
64+
<ui5-expandable-text
65+
class="custom-list-item__description"
66+
max-characters="120"
67+
text="This custom list item uses ExpandableText to provide controlled expansion of lengthy content. Users can choose to read more when they need detailed information, keeping the list compact by default. This approach gives developers full control over the content layout and interaction while maintaining accessibility and user experience standards.">
68+
</ui5-expandable-text>
69+
<ui5-label class="custom-list-item__additional">Expandable</ui5-label>
70+
</div>
71+
</div>
72+
</ui5-li-custom>
3473
<!-- playground-fold -->
3574
<script type="module" src="main.js"></script>
3675
</body>

0 commit comments

Comments
 (0)