feat(ui5-li): add text wrapping support (#11108)

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

Author: kgogov

docs/2-advanced/05-using-features.md

@@ -29,6 +29,7 @@ Currently, only a few components offer additional features:
 | Package        | Affected Components                                | Feature Import                                                       | Description                                                                                             |
 |----------------|---------------------------------------------------|----------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
 | `main`         | `ui5-color-palette`                               | dynamically loaded if `showMoreColors` is set to `true` (to pre-load: `import "@ui5/webcomponents/dist/features/ColorPaletteMoreColors.js"` )        | Adds support for a "more colors" dialog in the color palette component allowing users to choose specific colors not present in the predefined range.                                   |
+| `main`         | `ui5-li`                                          | dynamically loaded if `wrappingType="Normal"` is set (to pre-load: `import "@ui5/webcomponents/dist/features/ListItemStandardExpandableText.js"` )  | Adds support for expandable text in list items when wrapping type is set to "Normal" mode.              |
 | `main`         | `ui5-input`                                       | dynamically loaded if `showSuggestions` is set to `true`(to pre-load: `import "@ui5/webcomponents/dist/features/InputSuggestions.js"` )              | Adds support for input suggestions while typing                                                                  |
 | `main`         | Multiple (e.g., `ui5-input`, `ui5-date-picker`)   | `@ui5/webcomponents/dist/features/InputElementsFormSupport.js`       | Adds support for the use of input components within forms                                                          |
 | `localization` | Multiple (e.g., `ui5-date-picker`)                | `@ui5/webcomponents-localization/dist/features/calendar/Buddhist.js` | Adds support for the Buddhist calendars                                                                   |

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