Skip to content

Commit d4c624a

Browse files
kgogovkgogov
committed
fix(ui5-li-group): expose title CSS part for styling
The title CSS part was previously hidden inside the nested shadow DOM of ListItemGroupHeader, making it impossible to style from outside using ::part(title). Added exportparts="title" to forward the inner title part, allowing developers to customize the group header appearance with ui5-li-group::part(title). This enables use cases like setting full width for right-aligned header content. Updated API documentation and added a sample demonstrating CSS Shadow Parts usage for styling group headers. Fixes #13054
1 parent 7fdabb0 commit d4c624a

File tree

8 files changed

+112
-7
lines changed

8 files changed

+112
-7
lines changed

‎packages/main/src/ListItemGroup.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ type ListItemGroupMoveEventDetail = {
3939
* ### ES6 Module Import
4040
* `import "@ui5/webcomponents/dist/ListItemGroup.js";`
4141
* @csspart header - Used to style the header item of the group
42+
* @csspart title - Used to style the title of the group header
4243
* @constructor
4344
* @extends UI5Element
4445
* @public

‎packages/main/src/ListItemGroupTemplate.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,14 @@ export default function ListItemGroupTemplate(this: ListItemGroup) {
77
return (
88
<>
99
{this.hasHeader &&
10-
<ListItemGroupHeader wrappingType={this.wrappingType} focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.ListItem}>
11-
{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
10+
<ListItemGroupHeader
11+
wrappingType={this.wrappingType}
12+
focused={this.focused}
13+
part="header"
14+
exportparts="title"
15+
accessibleRole={ListItemAccessibleRole.ListItem}
16+
>
17+
{this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText}
1218
<div
1319
role="list"
1420
slot="subItems"
@@ -26,7 +32,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup) {
2632

2733
<slot></slot>
2834

29-
<DropIndicator orientation="Horizontal" ownerReference={this}/>
35+
<DropIndicator orientation="Horizontal" ownerReference={this} />
3036
</div>
3137
</>
3238

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

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,12 @@
2424
#listWithWrapping ui5-li:nth-child(2)::part(description) {
2525
color: rgb(79, 128, 6);
2626
}
27+
28+
#testGroupParts::part(title) {
29+
color: blue;
30+
width: 100%;
31+
background-color: rgb(221, 255, 253);
32+
}
2733
</style>
2834
</head>
2935

@@ -231,6 +237,17 @@ <h2>ui5-list</h2>
231237

232238
<br/><br/>
233239

240+
<h3>ListItemGroup ::part(title) - CSS Shadow Parts</h3>
241+
<ui5-list>
242+
<ui5-li-group id="testGroupParts" header-text="Test Header - Should be styled via ::part(title)">
243+
<ui5-li>Item 1</ui5-li>
244+
<ui5-li>Item 2</ui5-li>
245+
<ui5-li>Item 3</ui5-li>
246+
</ui5-li-group>
247+
</ui5-list>
248+
249+
<br/><br/>
250+
234251
<ui5-list header-text="API: icon">
235252
<ui5-li icon="navigation-right-arrow">Option 1</ui5-li>
236253
</ui5-list>
@@ -447,9 +464,9 @@ <h3 id="infoLbl">Items 3/3</h3>
447464
</ui5-list>
448465

449466
<h3>Growing Button with Custom ARIA Name and Description</h3>
450-
<ui5-list
451-
id="growingButtonAccessibility"
452-
growing="Button"
467+
<ui5-list
468+
id="growingButtonAccessibility"
469+
growing="Button"
453470
growing-button-text="Load More Items"
454471
header-text="Accessibility Demo">
455472
<ui5-li>Product A</ui5-li>
@@ -714,7 +731,7 @@ <h2>With accessible description</h2>
714731
<ui5-avatar initials="JD" color-scheme="Accent1"></ui5-avatar>
715732
<div class="product-details">
716733
<ui5-title size="H5">Product with Long Description</ui5-title>
717-
<ui5-expandable-text
734+
<ui5-expandable-text
718735
max-characters="200"
719736
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.">
720737
</ui5-expandable-text>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import GrowingOnButtonPress from "../../../_samples/main/List/GrowingOnButtonPre
88
import Modes from "../../../_samples/main/List/Modes/Modes.md";
99
import NoData from "../../../_samples/main/List/NoData/NoData.md";
1010
import GroupHeaders from "../../../_samples/main/List/GroupHeaders/GroupHeaders.md";
11+
import GroupHeaderStyling from "../../../_samples/main/List/GroupHeaderStyling/GroupHeaderStyling.md";
1112
import SeparationTypes from "../../../_samples/main/List/SeparationTypes/SeparationTypes.md";
1213
import DragAndDrop from "../../../_samples/main/List/DragAndDrop/DragAndDrop.md";
1314
import MultipleDrag from "../../../_samples/main/List/MultipleDrag/MultipleDrag.md";
@@ -49,6 +50,11 @@ The <b>The ListItemGroup</b> can be used to start group section and implement gr
4950

5051
<GroupHeaders />
5152

53+
### Styling Group Headers
54+
You can customize the appearance of group headers using CSS Shadow Parts. The <b>title</b> part allows styling the group header text, while the <b>header</b> part styles the entire header container.
55+
56+
<GroupHeaderStyling />
57+
5258
### Separators
5359
The <b>separators</b> options (<b>All</b>, <b>Inner</b>, <b>None</b>) allows the outer lines (Inner) or all the lines (None) to be hidden.
5460

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import html from '!!raw-loader!./sample.html';
2+
import js from '!!raw-loader!./main.js';
3+
import css from '!!raw-loader!./main.css';
4+
5+
<Editor html={html} js={js} css={css} />

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
/* Style the group header title using CSS Shadow Parts */
2+
#styled-group::part(title) {
3+
color: var(--sapButton_Emphasized_TextColor);
4+
background-color: var(--sapButton_Emphasized_Background);
5+
padding: 0.5rem;
6+
border-radius: 0.25rem;
7+
}
8+
9+
/* Style the entire header container */
10+
#styled-group::part(header) {
11+
background-color: var(--sapList_HeaderBackground);
12+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import "@ui5/webcomponents/dist/List.js";
2+
import "@ui5/webcomponents/dist/ListItemGroup.js";
3+
import "@ui5/webcomponents/dist/ListItemStandard.js";
4+
import "@ui5/webcomponents/dist/Avatar.js";
5+
import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";

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

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!-- playground-fold -->
2+
<!DOCTYPE html>
3+
<html lang="en">
4+
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Sample</title>
9+
<link rel="stylesheet" href="./main.css">
10+
</head>
11+
12+
<body style="background-color: var(--sapBackgroundColor)">
13+
<!-- playground-fold-end -->
14+
15+
<ui5-list selection-mode="Multiple">
16+
<ui5-li-group id="styled-group" header-text="Styled Header">
17+
<ui5-li icon-end icon="navigation-right-arrow">Item 1
18+
<ui5-avatar slot="image" shape="Square">
19+
<img src="../assets/images/avatars/woman_avatar_1.png" alt="Woman image">
20+
</ui5-avatar>
21+
</ui5-li>
22+
<ui5-li icon-end icon="navigation-right-arrow">Item 2
23+
<ui5-avatar slot="image" shape="Square">
24+
<img src="../assets/images/avatars/woman_avatar_2.png" alt="Woman image">
25+
</ui5-avatar>
26+
</ui5-li>
27+
<ui5-li icon-end icon="navigation-right-arrow">Item 3
28+
<ui5-avatar slot="image" shape="Square">
29+
<img src="../assets/images/avatars/woman_avatar_3.png" alt="Woman image">
30+
</ui5-avatar>
31+
</ui5-li>
32+
</ui5-li-group>
33+
34+
<ui5-li-group header-text="Normal Header">
35+
<ui5-li icon-end icon="navigation-right-arrow">Item A
36+
<ui5-avatar slot="image" shape="Square">
37+
<img src="../assets/images/avatars/man_avatar_1.png" alt="Man image">
38+
</ui5-avatar>
39+
</ui5-li>
40+
<ui5-li icon-end icon="navigation-right-arrow">Item B
41+
<ui5-avatar slot="image" shape="Square">
42+
<img src="../assets/images/avatars/man_avatar_2.png" alt="Man image">
43+
</ui5-avatar>
44+
</ui5-li>
45+
</ui5-li-group>
46+
</ui5-list>
47+
48+
<!-- playground-fold -->
49+
<script type="module" src="main.js"></script>
50+
</body>
51+
52+
</html>
53+
<!-- playground-fold-end -->

0 commit comments

Comments
 (0)