feat(ui5-li): change wrappingType property to public

- Updated the ListItemStandard class and ListItemStandardTemplate
- Updated CSS selectors to work with wrapping-type="Normal" attribute
- Updated the available test cases
- Updated the documentation
- Updated the samples

Author: kgogov

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

@@ -185,14 +185,11 @@ describe("List - Wrapping Behavior", () => {
 
 		cy.mount(
 			<List>
-				<ListItemStandard id="wrapping-item" wrapping text={longText} description={longDescription}></ListItemStandard>
+				<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");
-
 		cy.get("#wrapping-item")
 			.should("have.attr", "wrapping-type", "Normal");
 
@@ -209,7 +206,7 @@ describe("List - Wrapping Behavior", () => {
 
 		cy.mount(
 			<List>
-				<ListItemStandard id="wrapping-item" wrapping text={longText}></ListItemStandard>
+				<ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
 			</List>
 		);
 
@@ -222,20 +219,16 @@ describe("List - Wrapping Behavior", () => {
 			.should('eq', 300);
 	});
 
-	it("should switch wrapping type when wrapping prop is toggled", () => {
+	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" wrapping text={longText}></ListItemStandard>
+				<ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
 			</List>
 		);
 
-		// Check that wrapping attribute is set
-		cy.get("#wrapping-item")
-			.should("have.attr", "wrapping");
-
 		// Check that wrapping-type attribute is set to Normal
 		cy.get("#wrapping-item")
 			.should("have.attr", "wrapping-type", "Normal");
@@ -246,17 +239,13 @@ describe("List - Wrapping Behavior", () => {
 			.find("ui5-expandable-text")
 			.should("exist");
 
-		// Remove the wrapping attribute from the existing component
+		// Set wrappingType to None
 		cy.get("#wrapping-item")
 			.then($el => {
-				$el[0].removeAttribute("wrapping");
+				$el[0].setAttribute("wrapping-type", "None");
 			});
 
-		// Check that wrapping attribute is removed
-		cy.get("#wrapping-item")
-			.should("not.have.attr", "wrapping");
-
-		// Now check the wrapping-type attribute in a separate command
+		// Check that wrapping-type attribute is set to None
 		cy.get("#wrapping-item")
 			.should("have.attr", "wrapping-type", "None");
 

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

@@ -11,7 +11,7 @@ describe("List Mobile Tests", () => {
 
         cy.mount(
             <List>
-                <ListItemStandard id="wrapping-item" wrapping text={longText}></ListItemStandard>
+                <ListItemStandard id="wrapping-item" wrappingType="Normal" text={longText}></ListItemStandard>
             </List>
         );
 

packages/main/src/ListItemStandard.ts

@@ -111,34 +111,27 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 	movable = false;
 
 	/**
-	 * Defines whether the content of the list item should wrap when it's too long.
-	 * When set to true, the content (title, description) will be wrapped
+	 * 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.
 	 *
-	 * @default false
-	 * @public
-	 * @since 2.9.0
-	 */
-	@property({ type: Boolean })
-	wrapping = false;
-
-	/**
-	 * Defines if the text of the component should wrap, they truncate by default.
+	 * 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";
 
 	/**
-	 * Defines the text alternative of the component.
+	 * Defines the text alternative of the component.<br/>
 	 * **Note:** If not provided a default text alternative will be set, if present.
 	 * @default undefined
 	 * @public
@@ -173,7 +166,6 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 		super.onBeforeRendering();
 		this.hasTitle = !!(this.text || this.textContent);
 		this._hasImage = this.hasImage;
-		this.wrappingType = this.wrapping ? "Normal" : "None";
 	}
 
 	/**

packages/main/src/ListItemStandardTemplate.tsx

@@ -31,7 +31,7 @@ function listItemContent(this: ListItemStandard) {
 }
 
 function renderTitle(this: ListItemStandard) {
-	if (this.wrapping) {
+	if (this.wrappingType === "Normal") {
 		return (
 			<span part="title" class="ui5-li-title">
 				<ExpandableText
@@ -57,7 +57,7 @@ function renderDescription(this: ListItemStandard) {
 		return null;
 	}
 
-	if (this.wrapping) {
+	if (this.wrappingType === "Normal") {
 		return (
 			<div class="ui5-li-description-info-wrapper">
 				<span part="description" class="ui5-li-desc">

packages/main/src/themes/ListItem.css

@@ -67,7 +67,7 @@
 	object-fit: contain
 }
 
-:host(:not([wrapping])[description]) .ui5-li-root {
+:host([wrapping-type="None"][description]) .ui5-li-root {
 	padding: 1rem;
 }
 
@@ -204,70 +204,70 @@
 }
 
 /* wrapping */
-:host([wrapping][description]),
-:host([wrapping][has-title][description]),
-:host([wrapping][has-title][image]) {
+:host([wrapping-type="Normal"][description]),
+:host([wrapping-type="Normal"][has-title][description]),
+:host([wrapping-type="Normal"][has-title][image]) {
 	height: auto;
 	min-height: 5rem;
 }
 
-:host([wrapping][description]) .ui5-li-content,
-:host([wrapping][image]) .ui5-li-content {
+:host([wrapping-type="Normal"][description]) .ui5-li-content,
+:host([wrapping-type="Normal"][image]) .ui5-li-content {
 	height: auto;
 	min-height: 3rem;
 }
 
-:host([wrapping][has-title][description]) .ui5-li-title {
+:host([wrapping-type="Normal"][has-title][description]) .ui5-li-title {
 	padding-bottom: .75rem;
 }
 
-:host([wrapping][additional-text]) .ui5-li-additional-text {
+:host([wrapping-type="Normal"][additional-text]) .ui5-li-additional-text {
 	padding-inline-start: .75rem;
 }
 
-:host([wrapping]) .ui5-li-description-info-wrapper {
+:host([wrapping-type="Normal"]) .ui5-li-description-info-wrapper {
 	flex-direction: column;
 }
 
-:host([wrapping]) .ui5-li-description-info-wrapper .ui5-li-additional-text {
+:host([wrapping-type="Normal"]) .ui5-li-description-info-wrapper .ui5-li-additional-text {
 	white-space: normal;
 }
 
-:host([wrapping]) .ui5-li-title .ui5-li-title-exp-text {
+:host([wrapping-type="Normal"]) .ui5-li-title .ui5-li-title-exp-text {
 	font-size: var(--_ui5_list_item_title_size);
 }
 
-:host([wrapping]) .ui5-li-desc .ui5-li-desc-exp-text {
+:host([wrapping-type="Normal"]) .ui5-li-desc .ui5-li-desc-exp-text {
 	color: var(--sapContent_LabelColor);
 }
 
-:host([wrapping]) .ui5-li-multisel-cb,
-:host([wrapping]) .ui5-li-singlesel-radiobtn {
+:host([wrapping-type="Normal"]) .ui5-li-multisel-cb,
+:host([wrapping-type="Normal"]) .ui5-li-singlesel-radiobtn {
 	display: flex;
 	align-self: flex-start;
 }
 
-:host([wrapping][description]) .ui5-li-multisel-cb,
-:host([wrapping][description]) .ui5-li-singlesel-radiobtn {
+:host([wrapping-type="Normal"][description]) .ui5-li-multisel-cb,
+:host([wrapping-type="Normal"][description]) .ui5-li-singlesel-radiobtn {
 	margin-top: 0;
 }
 
-:host([wrapping]) .ui5-li-icon,
-:host([wrapping]) .ui5-li-image {
+:host([wrapping-type="Normal"]) .ui5-li-icon,
+:host([wrapping-type="Normal"]) .ui5-li-image {
 	display: flex;
 	align-self: flex-start;
 }
 
-:host([wrapping][icon-end]) .ui5-li-icon {
+:host([wrapping-type="Normal"][icon-end]) .ui5-li-icon {
 	margin-top: var(--_ui5_list_item_content_vertical_offset);
 }
 
-:host([wrapping]) .ui5-li-image {
+:host([wrapping-type="Normal"]) .ui5-li-image {
 	margin-top: 0;
 	margin-bottom: 0;
 }
 
-:host([wrapping]) .ui5-li-detailbtn,
-:host([wrapping]) .ui5-li-deletebtn {
+:host([wrapping-type="Normal"]) .ui5-li-detailbtn,
+:host([wrapping-type="Normal"]) .ui5-li-deletebtn {
 	margin-inline-start: .875rem;
 }