feat(ui5-li-group): introduced wrappingType prop (#12022)

### Description
The list item group `ui5-li-group` now supports content wrapping through a publicly available `wrappingType` property. When set to "Normal", long text content (header text) will wrap to multiple lines instead of truncating with an ellipsis.

#### Key features:
- Responsive behavior based on screen size:
  - On mobile (size S): Text truncates after 100 characters
  - On tablets/desktop (size M/L): Text truncates after 300 characters
- "Show More/Less" functionality for very long content using `ui5-expandable-text`
- Works for header text fields
- CSS styling to ensure proper layout in different states

#### Implementation details:
- Made `wrappingType` property public available with options "None" (default) and "Normal"
- Conditionally render content using `ui5-expandable-text` component when `wrappingType` is "Normal"
- Added `_maxCharacters` getter to determine truncation point based on media range
- Updated ListItemGroupHeaderTemplate to handle wrapped content rendering
- Updated CSS selectors to use `wrapping-type` attribute
- Updated HTML test page with examples

#### Documentation:
- Updated section in List.mdx explaining the wrapping behavior
- Updated sample in WrappingBehavior folder
- Added JSDoc descriptions for the new property

#### Tests:
- Added desktop test for 300 character limit
- Added mobile-specific test for 100 character limit

Fixes: #11655

Author: plamenivanov91

packages/main/cypress/specs/List.cy.tsx

@@ -1,6 +1,7 @@
 import type UI5Element from "@ui5/webcomponents-base";
 import List from "../../src/List.js";
 import ListItemStandard from "../../src/ListItemStandard.js";
+import ListItemGroup from "../../src/ListItemGroup.js";
 
 describe("List Tests", () => {
 	it("tests 'loadMore' event fired upon infinite scroll", () => {
@@ -216,6 +217,9 @@ describe("List - Wrapping Behavior", () => {
 		cy.mount(
 			<List>
 				<ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText} description={longDescription}></ListItemStandard>
+				<ListItemGroup id="lig" wrapping-type="Normal" header-text={longText}>
+					<ListItemStandard>1. Bulgaria</ListItemStandard>
+				</ListItemGroup>
 			</List>
 		);
 
@@ -229,6 +233,17 @@ describe("List - Wrapping Behavior", () => {
 			.find("ui5-expandable-text")
 			.should("exist")
 			.and("have.length", 2);
+
+		cy.get("#lig")
+			.should("have.attr", "wrapping-type", "Normal")
+			.shadow()
+			.find("ui5-li-group-header")
+			.should("have.attr", "wrapping-type", "Normal")
+			.shadow()
+			.find("ui5-expandable-text")
+			.should("exist")
+			.and("have.length", 1);
+
 	});
 
 	it("uses maxCharacters of 300 on desktop viewport for wrapping list items", () => {
@@ -237,6 +252,9 @@ describe("List - Wrapping Behavior", () => {
 		cy.mount(
 			<List>
 				<ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
+				<ListItemGroup id="lig" wrapping-type="Normal" header-text={longText}>
+					<ListItemStandard>1. Bulgaria</ListItemStandard>
+				</ListItemGroup>
 			</List>
 		);
 
@@ -247,6 +265,14 @@ describe("List - Wrapping Behavior", () => {
 			.first()
 			.invoke('prop', 'maxCharacters')
 			.should('eq', 300);
+
+		cy.get("#lig")
+			.shadow()
+			.find("ui5-li-group-header")
+			.shadow()
+			.find("ui5-expandable-text")
+			.invoke('prop', 'maxCharacters')
+			.should('eq', 300);
 	});
 
 	it("should render different nodes based on wrappingType prop", () => {

packages/main/cypress/specs/List.mobile.cy.tsx

@@ -1,4 +1,5 @@
 import List from "../../src/List.js";
+import ListItemGroup from "../../src/ListItemGroup.js";
 import ListItemStandard from "../../src/ListItemStandard.js";
 
 describe("List Mobile Tests", () => {
@@ -12,6 +13,9 @@ describe("List Mobile Tests", () => {
         cy.mount(
             <List>
                 <ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
+                <ListItemGroup id="lig" wrapping-type="Normal" header-text={longText}>
+                    <ListItemStandard>1. Bulgaria</ListItemStandard>
+                </ListItemGroup>
             </List>
         );
 
@@ -20,12 +24,27 @@ describe("List Mobile Tests", () => {
             .invoke('prop', 'mediaRange')
             .should('eq', 'S');
 
+        cy.get("#lig")
+            .shadow()
+            .find("ui5-li-group-header")
+            .invoke('prop', 'mediaRange')
+            .should('eq', 'S');
+
         // Check that ExpandableText is created with maxCharacters prop of 100
         cy.get("#wrapping-item")
             .shadow()
             .find("ui5-expandable-text")
             .first()
             .invoke('prop', 'maxCharacters')
             .should('eq', 100);
+
+        cy.get("#lig")
+            .shadow()
+            .find("ui5-li-group-header")
+            .shadow()
+            .find("ui5-expandable-text")
+            .should("exist")
+            .invoke('prop', 'maxCharacters')
+            .should('eq', 100);
     });
 });

packages/main/src/ListItemGroup.ts

@@ -17,6 +17,7 @@ import ListItemGroupTemplate from "./ListItemGroupTemplate.js";
 // Styles
 import ListItemGroupCss from "./generated/themes/ListItemGroup.css.js";
 import type ListItemGroupHeader from "./ListItemGroupHeader.js";
+import type WrappingType from "./types/WrappingType.js";
 
 type ListItemGroupMoveEventDetail = {
 	source: {
@@ -111,6 +112,26 @@ class ListItemGroup extends UI5Element {
 	})
 	items!: Array<ListItemBase>;
 
+	/**
+	 * Defines if the text of the component should wrap when it's too long.
+	 * When set to "Normal", the content (title, description) will be wrapped
+	 * using the `ui5-expandable-text` component.<br/>
+	 *
+	 * The text can wrap up to 100 characters on small screens (size S) and
+	 * up to 300 characters on larger screens (size M and above). When text exceeds
+	 * these limits, it truncates with an ellipsis followed by a text expansion trigger.
+	 *
+	 * Available options are:
+	 * - `None` (default) - The text will truncate with an ellipsis.
+	 * - `Normal` - The text will wrap (without truncation).
+	 *
+	 * @default "None"
+	 * @public
+	 * @since 2.15.0
+	 */
+	@property()
+	wrappingType: `${WrappingType}` = "None";
+
 	/**
 	 * Indicates whether the header is focused
 	 * @private

packages/main/src/ListItemGroupHeader.ts

@@ -4,6 +4,7 @@ import type I18nBundle from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import type { AriaRole } from "@ui5/webcomponents-base/dist/types.js";
 import toLowercaseEnumValue from "@ui5/webcomponents-base/dist/util/toLowercaseEnumValue.js";
 import ListItemBase from "./ListItemBase.js";
+import type { ExpandableTextTemplateParams } from "./types/ExpandableTextTemplateParams.js";
 
 import { GROUP_HEADER_TEXT } from "./generated/i18n/i18n-defaults.js";
 
@@ -13,6 +14,22 @@ import ListItemGroupHeaderTemplate from "./ListItemGroupHeaderTemplate.js";
 // Styles
 import ListItemGroupHeaderCss from "./generated/themes/ListItemGroupHeader.css.js";
 import ListItemAccessibleRole from "./types/ListItemAccessibleRole.js";
+import type WrappingType from "./types/WrappingType.js";
+
+/**
+ * Maximum number of characters to display for small screens (Size S)
+ * @private
+ */
+const MAX_CHARACTERS_SIZE_S = 100;
+
+/**
+ * Maximum number of characters to display for medium and larger screens (Size M and above)
+ * @private
+ */
+const MAX_CHARACTERS_SIZE_M = 300;
+
+// Specific template type for expandable text
+type ExpandableTextTemplate = (this: ListItemGroupHeader, params: ExpandableTextTemplateParams) => JSX.Element;
 
 /**
  * @class
@@ -45,6 +62,41 @@ class ListItemGroupHeader extends ListItemBase {
 	@property()
 	accessibleRole: `${ListItemAccessibleRole}` = ListItemAccessibleRole.ListItem;
 
+	/**
+	 * Defines if the text of the component should wrap when it's too long.
+	 * When set to "Normal", the content (title, description) will be wrapped
+	 * using the `ui5-expandable-text` component.<br/>
+	 *
+	 * The text can wrap up to 100 characters on small screens (size S) and
+	 * up to 300 characters on larger screens (size M and above). When text exceeds
+	 * these limits, it truncates with an ellipsis followed by a text expansion trigger.
+	 *
+	 * Available options are:
+	 * - `None` (default) - The text will truncate with an ellipsis.
+	 * - `Normal` - The text will wrap (without truncation).
+	 *
+	 * @default "None"
+	 * @public
+	 * @since 2.15.0
+	 */
+	@property()
+	wrappingType: `${WrappingType}` = "None";
+
+	/**
+	 * Defines the current media query size.
+	 * @default "S"
+	 * @private
+	 */
+	@property()
+	mediaRange = "S";
+
+	/**
+	 * The expandableText template.
+	 * @private
+	 */
+	@property({ noAttribute: true })
+	expandableTextTemplate?: ExpandableTextTemplate;
+
 	@slot()
 	subItems!: Array<HTMLElement>;
 
@@ -67,13 +119,54 @@ class ListItemGroupHeader extends ListItemBase {
 		return ListItemGroupHeader.i18nBundle.getText(GROUP_HEADER_TEXT);
 	}
 
+	get defaultSlotText(): string {
+		return this.textContent!;
+	}
+
 	get ariaLabelText() {
 		return [this.textContent, this.accessibleName].filter(Boolean).join(" ");
 	}
 
 	get hasSubItems() {
 		return this.subItems.length > 0;
 	}
+
+	onBeforeRendering() {
+		super.onBeforeRendering();
+
+		// Only load ExpandableText if "Normal" wrapping is used
+		if (this.wrappingType === "Normal") {
+			// If feature is already loaded (preloaded by the user via importing ListItemGroupHeaderExpandableText.js), the template is already available
+			if (ListItemGroupHeader.ExpandableTextTemplate) {
+				this.expandableTextTemplate = ListItemGroupHeader.ExpandableTextTemplate;
+				// If feature is not preloaded, load the template dynamically
+			} else {
+				import("./features/ListItemStandardExpandableTextTemplate.js").then(module => {
+					this.expandableTextTemplate = module.default;
+				});
+			}
+		}
+	}
+
+	/**
+	 * Determines the maximum characters to display based on the current media range.
+	 * - Size S: 100 characters
+	 * - Size M and larger: 300 characters
+	 * @private
+	 */
+	get _maxCharacters(): number {
+		return this.mediaRange === "S" ? MAX_CHARACTERS_SIZE_S : MAX_CHARACTERS_SIZE_M;
+	}
+
+	/**
+	 * Returns the content text, either from text property or from the default slot
+	 * @private
+	 */
+	get _textContent(): string {
+		return this.defaultSlotText || this.groupHeaderText || "";
+	}
+
+	static ExpandableTextTemplate?: ExpandableTextTemplate;
 }
 
 ListItemGroupHeader.define();

packages/main/src/ListItemGroupHeaderTemplate.tsx

@@ -1,4 +1,5 @@
 import type ListItemGroupHeader from "./ListItemGroupHeader.js";
+import WrappingType from "./types/WrappingType.js";
 
 export default function ListItemGroupHeaderTemplate(this: ListItemGroupHeader) {
 	return (
@@ -16,10 +17,27 @@ export default function ListItemGroupHeaderTemplate(this: ListItemGroupHeader) {
 			onKeyDown={this._onkeydown}
 		>
 			<div id={`${this._id}-content`} class="ui5-li-content">
-				<span class="ui5-ghli-title"><slot></slot></span>
+				{renderTitle.call(this)}
 			</div>
 
 			{this.hasSubItems && <slot name="subItems"></slot>}
 		</div>
 	);
 }
+
+function renderTitle(this: ListItemGroupHeader) {
+	if (this.wrappingType === WrappingType.Normal) {
+		return this.expandableTextTemplate?.call(this, {
+			className: "ui5-ghli-title",
+			text: this._textContent,
+			maxCharacters: this._maxCharacters,
+			part: "title",
+		});
+	}
+
+	return (
+		<span part="title" class="ui5-ghli-title">
+			<slot></slot>
+		</span>
+	);
+}

packages/main/src/ListItemGroupTemplate.tsx

@@ -7,7 +7,7 @@ export default function ListItemGroupTemplate(this: ListItemGroup) {
 	return (
 		<>
 			{this.hasHeader &&
-				<ListItemGroupHeader focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.ListItem}>
+				<ListItemGroupHeader wrappingType={this.wrappingType} focused={this.focused} part="header" accessibleRole={ListItemAccessibleRole.ListItem}>
 					{ this.hasFormattedHeader ? <slot name="header"></slot> : this.headerText }
 					<div
 						role="list"

packages/main/src/features/ListItemStandardExpandableText.ts

@@ -1,5 +1,7 @@
 import ListItemStandard from "../ListItemStandard.js";
+import ListItemGroupHeader from "../ListItemGroupHeader.js";
 import ListItemStandardExpandableTextTemplate from "./ListItemStandardExpandableTextTemplate.js";
 
 // Assigns the template to the component to be used when the feature is preloaded
 ListItemStandard.ExpandableTextTemplate = ListItemStandardExpandableTextTemplate;
+ListItemGroupHeader.ExpandableTextTemplate = ListItemStandardExpandableTextTemplate;

packages/main/src/features/ListItemStandardExpandableTextTemplate.tsx

@@ -1,5 +1,5 @@
 import ExpandableText from "../ExpandableText.js";
-import type ListItemStandard from "../ListItemStandard.js";
+import type ListItemBase from "../ListItemBase.js";
 import type { ExpandableTextTemplateParams } from "../types/ExpandableTextTemplateParams.js";
 
 /**
@@ -10,7 +10,7 @@ import type { ExpandableTextTemplateParams } from "../types/ExpandableTextTempla
  * @returns {JSX.Element} The rendered ExpandableText component
  */
 export default function ListItemStandardExpandableTextTemplate(
-	this: ListItemStandard,
+	this: ListItemBase,
 	injectedProps: ExpandableTextTemplateParams
 ): JSX.Element {
 	const {

packages/main/src/themes/ListItemGroupHeader.css

@@ -6,6 +6,10 @@
 	color: var(--sapList_TableGroupHeaderTextColor);
 }
 
+:host([wrapping-type="Normal"]) {
+	height: auto;
+}
+
 :host([has-border]) {
 	border-bottom: var(--sapList_BorderWidth) solid var(--sapList_GroupHeaderBorderColor);
 }

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

@@ -64,7 +64,7 @@ You can select and drag multiple items at once when using <b>selection-mode="Mul
 <MultipleDrag />
 
 ### Wrapping Behavior
-The standard list item `<ui5-li>` supports text wrapping through the <b>wrappingType</b> property. When set to "Normal", long text content (title and description) will wrap to multiple lines instead of truncating with an ellipsis. For very long content, the text is displayed with a "Show More/Show Less" mechanism.
+The standard list item `<ui5-li>` and the list item group `<ui5-li-group>` supports text wrapping through the <b>wrappingType</b> property. When set to "Normal", long text content (title and description) will wrap to multiple lines instead of truncating with an ellipsis. For very long content, the text is displayed with a "Show More/Show Less" mechanism.
 
 The wrapping behavior is responsive:
 - On mobile devices (size S), text is truncated after 100 characters