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

kgogov · 2025-03-14T14:09:43Z

Description

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.

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 both title and description 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 ListItemStandardTemplate to handle wrapped content rendering
Updated CSS selectors to use wrapping-type attribute
Updated HTML test page with examples

Documentation:

Added new section in List.mdx explaining the wrapping behavior
Created a sample in WrappingBehavior folder
Added JSDoc descriptions for the new property
⭐ Added note about deprecated usage of default slot in favor of text property

Tests:

Added desktop test for 300 character limit
Added mobile-specific test for 100 character limit
Added test for toggling wrappingType property

NOTE: This change also promotes the use of the text property (added in v2.9.0) instead of the default slot content for setting list item text. The default slot usage is now deprecated and will be removed in a future version.

Implements: #9745

dobrinyonkov · 2025-03-25T08:22:12Z

packages/main/src/ListItemStandard.ts

-	@property()
-	declare accessibleName?: string;
+	@property({ type: Boolean })
+	wrapping = false;


Could we use the wrappingType here instead, perhaps making it public?

Of course! I actually considered doing it that way, but for some reason, I didn’t. 😆

dobrinyonkov · 2025-03-26T09:37:18Z

packages/main/src/List.ts

@@ -494,6 +502,7 @@ class List extends UI5Element {
 	resizeListenerAttached: boolean;
 	listEndObserved: boolean;
 	_handleResize: ResizeObserverCallback;
+	_handleMediaRangeUpdateBound: ResizeObserverCallback;


Is it possible to re-use the already defined resize handler _handleResize and wrap the current logic and the _handleMediaRangeUpdate call in a method? This way we won't need to register another resize handler.

dobrinyonkov · 2025-03-26T09:45:03Z

packages/main/src/List.ts

+	 * @private
+	 */
+	@property({ type: String })
+	mediaRange!: string;


You don't need to assign type in the decorator, the default one is string. Also, try to provide a default value and move away from the non-null assertion operator (!), perhaps assign a default value "S".

dobrinyonkov · 2025-03-26T09:45:43Z

packages/main/src/ListItem.ts

+	 * @private
+	 */
+	@property({ type: String })
+	mediaRange!: string;


Same as for List.ts

dobrinyonkov · 2025-03-26T10:05:34Z

packages/main/src/ListItemStandard.ts

@@ -89,6 +80,27 @@ class ListItemStandard extends ListItem implements IAccessibleListItem {
 	@property()
 	additionalTextState: `${ValueState}` = "None";

+	/**


Minor: Looks like there’s a lot of "noise" changes in this diff due to property reordering and some JSDoc updates.
The icon and iconEnd properties were moved to a different part of the class, leading to big diff blocks. If possible, could you review that for improvements to keep the class history more clean.

dobrinyonkov · 2025-03-26T10:08:20Z

packages/main/src/ListItemStandard.ts

+	 * @private
+	 */
+	get _maxCharacters(): number {
+		return this.mediaRange === "S" ? 100 : 300;


Extract those values in a consts, e.g, MAX_CHARACTARES_SIZE_S, MAX_CHARACTARES_SIZE_M

dobrinyonkov · 2025-03-26T10:23:55Z

packages/main/src/ListItemStandardTemplate.tsx

+function renderTitle(this: ListItemStandard) {
+	if (this.wrappingType === WrappingType.Normal) {
+		return (
+			<span part="title" class="ui5-li-title">


I guess, this part will no longer work to restyle the text provided in by the expandable component. What should we do is to introduce a part in the expandable text and use exportparts here to provide it through the list item, you can check if that work in a sample and add the onwers for a review. We can also look into it together.

dobrinyonkov · 2025-03-26T10:24:57Z

packages/main/src/ListItemStandardTemplate.tsx

+	if (this.wrappingType === WrappingType.Normal) {
+		return (
+			<div class="ui5-li-description-info-wrapper">
+				<span part="description" class="ui5-li-desc">


Same here, check if exportparts could be used.

The standard list item now supports content wrapping through a new "wrapping" property. When enabled, long text content (title and description) 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 both title and description fields - CSS styling to ensure proper layout in different states Implementation details: - Added "wrapping" boolean property to ListItemStandard component - Conditionally render content using ExpandableText component when wrapping is enabled - Added _maxCharacters getter to determine truncation point based on media range - Updated ListItemStandardTemplate to handle wrapped content rendering - Added CSS styles to support proper wrapping behavior - Updated HTML test page with examples Documentation: - Added new section in List.mdx explaining the wrapping behavior - Created detailed sample in WrappingBehavior folder - Added JSDoc descriptions for the new property - Added note about deprecated usage of default slot in favor of text property Tests: - Added desktop test for 300 character limit - Added mobile-specific test for 100 character limit - Added test for toggling wrapping property NOTE: This change also promotes the use of the "text" property (added in v2.9.0) instead of the default slot content for setting list item text. The default slot usage is now deprecated and will be removed in a future version.

- 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

kgogov force-pushed the feat-list-wrapping branch from bf65704 to 10f7b58 Compare March 17, 2025 15:31

kgogov changed the title ~~feat(ui5-list): add wrapping to list items~~ feat(ui5-li): add text wrapping support with expandable text Mar 17, 2025

kgogov changed the title ~~feat(ui5-li): add text wrapping support with expandable text~~ feat(ui5-li): add text wrapping support Mar 17, 2025

kgogov force-pushed the feat-list-wrapping branch 2 times, most recently from 7060ff3 to 166940b Compare March 18, 2025 12:07

kgogov requested a review from NakataCode March 19, 2025 08:13

dobrinyonkov reviewed Mar 25, 2025

View reviewed changes

kgogov force-pushed the feat-list-wrapping branch from 07401f2 to 9a78e32 Compare March 25, 2025 15:08

kgogov requested a review from dobrinyonkov March 25, 2025 15:10

dobrinyonkov requested changes Mar 26, 2025

View reviewed changes

kgogov force-pushed the feat-list-wrapping branch from ca17734 to 8cbd2a5 Compare March 26, 2025 14:01

kgogov added 8 commits March 28, 2025 14:53

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

a6b740d

- 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

chore(ui5-list): minor improvements to ListItemStandardTemplate

10989ee

fix(ui5-li): reuse the already defined resize handler

7385e3f

fix(ui5-li): correct property definition

8e608f0

chore(ui5-li): remove some unnecessary non-related changes

c4bcfec

fix(ui5-li): improve _maxCharacters getter

dd40abc

fix(ui-li): enable exportparts

744e6f1

kgogov force-pushed the feat-list-wrapping branch from 6ab4f6b to 744e6f1 Compare March 28, 2025 12:53

kgogov added 3 commits March 28, 2025 15:07

fix(ui5-li): correct type declaration

7aa25d7

chore: correct website type definition rendering

a30122e

chore: correct wrapping behavior sample

57a1c86

kgogov requested a review from dobrinyonkov March 28, 2025 13:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kgogov commented Mar 14, 2025 •

edited

Loading

dobrinyonkov Mar 25, 2025

kgogov Mar 25, 2025 •

edited

Loading

dobrinyonkov Mar 26, 2025

kgogov Mar 26, 2025

dobrinyonkov Mar 26, 2025

kgogov Mar 26, 2025

dobrinyonkov Mar 26, 2025

kgogov Mar 26, 2025

dobrinyonkov Mar 26, 2025

kgogov Mar 26, 2025

dobrinyonkov Mar 26, 2025

kgogov Mar 26, 2025

dobrinyonkov Mar 26, 2025

kgogov Mar 28, 2025

dobrinyonkov Mar 26, 2025

kgogov Mar 28, 2025

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

Are you sure you want to change the base?

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

Conversation

kgogov commented Mar 14, 2025 • edited Loading

Description

Key features:

Implementation details:

Documentation:

Tests:

Choose a reason for hiding this comment

kgogov Mar 25, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kgogov commented Mar 14, 2025 •

edited

Loading

kgogov Mar 25, 2025 •

edited

Loading