feat(ui5-li): add text wrapping support

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

@@ -20,7 +20,7 @@ describe("List Tests", () => {
 
 		cy.get<List>("@list")
 			.then(list => {
-				list.get(0).addEventListener("ui5-load-more", cy.stub().as("loadMore"));
+				list.get(0)?.addEventListener("ui5-load-more", cy.stub().as("loadMore"));
 			})
 			.shadow()
 			.find(".ui5-list-scroll-container")
@@ -177,3 +177,82 @@ describe("List - Accessibility", () => {
 		});
 	});
 });
+
+describe("List - Wrapping Behavior", () => {
+	it("renders list items with wrapping functionality", () => {
+		const longText = "This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components; This is a very long text that should demonstrate the wrapping functionality of ListItemStandard components";
+		const longDescription = "This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well; This is an even longer description text to verify that wrapping works correctly for the description part of the list item as well";
+
+		cy.mount(
+			<List>
+				<ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText} description={longDescription}></ListItemStandard>
+			</List>
+		);
+
+		// Check wrapping attributes are set correctly
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping-type", "Normal");
+
+		// Check that ExpandableText components are present in the wrapping item
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.should("exist")
+			.and("have.length", 2);
+	});
+
+	it("uses maxCharacters of 300 on desktop viewport for wrapping list items", () => {
+		const longText = "This is a very long text that exceeds 100 characters but is less than 300 characters. This sentence is just to add more text to ensure we pass the 100 character threshold. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly.";
+
+		cy.mount(
+			<List>
+				<ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
+			</List>
+		);
+
+		// Check that ExpandableText is created with maxCharacters prop of 300
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.first()
+			.invoke('prop', 'maxCharacters')
+			.should('eq', 300);
+	});
+
+	it("should render different nodes based on wrappingType prop", () => {
+		const longText = "This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. This is a very long text that should be wrapped when the wrapping prop is enabled, and truncated when it's disabled. And now we're adding even more text to be extra certain that we have enough content to demonstrate the behavior properly.";
+
+		// First render with wrapping enabled
+		cy.mount(
+			<List>
+				<ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
+			</List>
+		);
+
+		// Check that wrapping-type attribute is set to Normal
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping-type", "Normal");
+
+		// Should have expandable text component when wrapping is enabled
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.should("exist");
+
+		// Set wrappingType to None
+		cy.get("#wrapping-item")
+			.then($el => {
+				$el[0].setAttribute("wrapping-type", "None");
+			});
+
+		// Check that wrapping-type attribute is set to None
+		cy.get("#wrapping-item")
+			.should("have.attr", "wrapping-type", "None");
+
+		// Should not have expandable text component when wrapping is disabled
+		cy.get("#wrapping-item")
+			.shadow()
+			.find("ui5-expandable-text")
+			.should("not.exist");
+	});
+});

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

@@ -0,0 +1,31 @@
+import List from "../../src/List.js";
+import ListItemStandard from "../../src/ListItemStandard.js";
+
+describe("List Mobile Tests", () => {
+    before(() => {
+        cy.ui5SimulateDevice("phone");
+    });
+
+    it("adjusts maxCharacters based on viewport size for wrapping list items", () => {
+        const longText = "This is a very long text that exceeds 100 characters but is less than 300 characters. This sentence is just to add more text to ensure we pass the 100 character threshold. And now we're adding even more text to be extra certain.";
+
+        cy.mount(
+            <List>
+                <ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
+            </List>
+        );
+
+        // Get the list item and check its media range
+        cy.get("#wrapping-item")
+            .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);
+    });
+});

packages/main/src/List.ts

@@ -55,6 +55,7 @@ import type {
 	SelectionRequestEventDetail,
 } from "./ListItem.js";
 import ListSeparator from "./types/ListSeparator.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 
 // Template
 import ListTemplate from "./ListTemplate.js";
@@ -464,6 +465,14 @@ class List extends UI5Element {
 	@property({ type: Boolean })
 	_loadMoreActive = false;
 
+	/**
+	 * Defines the current media query size.
+	 * @default "S"
+	 * @private
+	 */
+	@property()
+	mediaRange = "S";
+
 	/**
 	 * Defines the items of the component.
 	 *
@@ -491,9 +500,8 @@ class List extends UI5Element {
 	static i18nBundle: I18nBundle;
 	_previouslyFocusedItem: ListItemBase | null;
 	_forwardingFocus: boolean;
-	resizeListenerAttached: boolean;
 	listEndObserved: boolean;
-	_handleResize: ResizeObserverCallback;
+	_handleResizeCallback: ResizeObserverCallback;
 	initialIntersection: boolean;
 	_selectionRequested?: boolean;
 	_groupCount: number;
@@ -516,9 +524,6 @@ class List extends UI5Element {
 		// Indicates that the List is forwarding the focus before or after the internal ul.
 		this._forwardingFocus = false;
 
-		// Indicates that the List has already subscribed for resize.
-		this.resizeListenerAttached = false;
-
 		// Indicates if the IntersectionObserver started observing the List
 		this.listEndObserved = false;
 
@@ -528,9 +533,7 @@ class List extends UI5Element {
 			getItemsCallback: () => this.getEnabledItems(),
 		});
 
-		this._handleResize = this.checkListInViewport.bind(this);
-
-		this._handleResize = this.checkListInViewport.bind(this);
+		this._handleResizeCallback = this._handleResize.bind(this);
 
 		// Indicates the List bottom most part has been detected by the IntersectionObserver
 		// for the first time.
@@ -562,13 +565,13 @@ class List extends UI5Element {
 	onEnterDOM() {
 		registerUI5Element(this, this._updateAssociatedLabelsTexts.bind(this));
 		DragRegistry.subscribe(this);
+		ResizeHandler.register(this.getDomRef()!, this._handleResizeCallback);
 	}
 
 	onExitDOM() {
 		deregisterUI5Element(this);
 		this.unobserveListEnd();
-		this.resizeListenerAttached = false;
-		ResizeHandler.deregister(this.getDomRef()!, this._handleResize);
+		ResizeHandler.deregister(this.getDomRef()!, this._handleResizeCallback);
 		DragRegistry.unsubscribe(this);
 	}
 
@@ -587,7 +590,6 @@ class List extends UI5Element {
 
 		if (this.grows) {
 			this.checkListInViewport();
-			this.attachForResize();
 		}
 	}
 
@@ -613,13 +615,6 @@ class List extends UI5Element {
 		});
 	}
 
-	attachForResize() {
-		if (!this.resizeListenerAttached) {
-			this.resizeListenerAttached = true;
-			ResizeHandler.register(this.getDomRef()!, this._handleResize);
-		}
-	}
-
 	get shouldRenderH1() {
 		return !this.header.length && this.headerText;
 	}
@@ -776,6 +771,8 @@ class List extends UI5Element {
 				(item as ListItem)._selectionMode = this.selectionMode;
 			}
 			item.hasBorder = showBottomBorder;
+
+			(item as ListItem).mediaRange = this.mediaRange;
 		});
 	}
 
@@ -1065,6 +1062,13 @@ class List extends UI5Element {
 		}
 	}
 
+	_handleResize() {
+		this.checkListInViewport();
+
+		const width = this.getBoundingClientRect().width;
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, width);
+	}
+
 	/*
 	* KEYBOARD SUPPORT
 	*/

packages/main/src/ListItem.ts

@@ -191,6 +191,14 @@ abstract class ListItem extends ListItemBase {
 	@property()
 	_selectionMode: `${ListSelectionMode}` = "None";
 
+	/**
+	 * Defines the current media query size.
+	 * @default "S"
+	 * @private
+	 */
+	@property()
+	mediaRange = "S";
+
 	/**
 	 * Defines the delete button, displayed in "Delete" mode.
 	 * **Note:** While the slot allows custom buttons, to match

packages/main/src/ListItemStandard.ts

@@ -7,6 +7,22 @@ import ListItem from "./ListItem.js";
 import type { IAccessibleListItem } from "./ListItem.js";
 import type WrappingType from "./types/WrappingType.js";
 import ListItemStandardTemplate from "./ListItemStandardTemplate.js";
+import type { ExpandableTextTemplateParams } from "./types/ExpandableTextTemplateParams.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: ListItemStandard, params: ExpandableTextTemplateParams) => JSX.Element;
 
 /**
  * @class
@@ -28,7 +44,9 @@ import ListItemStandardTemplate from "./ListItemStandardTemplate.js";
  * @csspart checkbox - Used to style the checkbox rendered when the list item is in multiple selection mode
  * @slot {Node[]} default - Defines the text of the component.
  *
- * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
+ * **Note:** Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design. <br/>
+ * **Note:** Deprecated since version `2.9.0`. Use the `text` property instead. <br/>
+ * Only use the default slot if you need to apply custom text formatting with HTML elements (like `<b>`, `<i>`, etc.).
  * @constructor
  * @extends ListItem
  * @public
@@ -39,6 +57,16 @@ import ListItemStandardTemplate from "./ListItemStandardTemplate.js";
 	template: ListItemStandardTemplate,
 })
 class ListItemStandard extends ListItem implements IAccessibleListItem {
+	/**
+	 * Defines the text of the component.
+	 *
+	 * @default undefined
+	 * @public
+	 * @since 2.9.0
+	 */
+	@property()
+	text?: string;
+
 	/**
 	 * Defines the description displayed right under the item text, if such is present.
 	 * @default undefined
@@ -109,12 +137,21 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 	declare accessibleName?: string;
 
 	/**
-	 * Defines if the text of the component should wrap, they truncate by default.
+	 * 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).
 	 *
-	 * **Note:** this property takes affect only if text node is provided to default slot of the component
 	 * @default "None"
-	 * @private
-	 * @since 1.5.0
+	 * @public
+	 * @since 2.9.0
 	 */
 	@property()
 	wrappingType: `${WrappingType}` = "None";
@@ -129,6 +166,13 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 	@property({ type: Boolean })
 	_hasImage = false;
 
+	/**
+	 * The expandableText template.
+	 * @private
+	 */
+	@property({ noAttribute: true })
+	expandableTextTemplate?: ExpandableTextTemplate;
+
 	/**
 	 * **Note:** While the slot allows option for setting custom avatar, to match the
 	 * design guidelines, please use the `ui5-avatar` with it's default size - S.
@@ -143,8 +187,39 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 
 	onBeforeRendering() {
 		super.onBeforeRendering();
-		this.hasTitle = !!this.textContent;
+		this.hasTitle = !!(this.text || this.textContent);
 		this._hasImage = this.hasImage;
+
+		// Only load ExpandableText if "Normal" wrapping is used
+		if (this.wrappingType === "Normal") {
+			// If feature is already loaded (preloaded by the user), use the existing template
+			if (ListItemStandard.ExpandableTextTemplate) {
+				this.expandableTextTemplate = ListItemStandard.ExpandableTextTemplate;
+			// If feature is not preloaded, load the template dynamically
+			} else {
+				import("./features/ListItemStandardExpandableTextTemplate.js").then(module => {
+					this.expandableTextTemplate = module.default;
+				});
+			}
+		}
+	}
+
+	/**
+	 * Returns the content text, either from text property or from the default slot
+	 * @private
+	 */
+	get _textContent(): string {
+		return this.text || this.textContent || "";
+	}
+
+	/**
+	 * 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;
 	}
 
 	get displayIconBegin(): boolean {
@@ -158,6 +233,8 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 	get hasImage(): boolean {
 		return !!this.image.length;
 	}
+
+	static ExpandableTextTemplate?: ExpandableTextTemplate;
 }
 
 ListItemStandard.define();