Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
Open

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

wants to merge 17 commits into from

Conversation

kgogov
Copy link
Member

@kgogov kgogov commented Mar 14, 2025

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
  • Added ListItemStandardExpandableText.ts to support preloading the expandable text feature

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
  • Updated the features documentation to include information about preloading the expandable text feature

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.10.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

@kgogov kgogov force-pushed the feat-list-wrapping branch from bf65704 to 10f7b58 Compare March 17, 2025 15:31
@kgogov 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 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 kgogov force-pushed the feat-list-wrapping branch 2 times, most recently from 7060ff3 to 166940b Compare March 18, 2025 12:07
@kgogov kgogov requested a review from NakataCode March 19, 2025 08:13
@kgogov kgogov force-pushed the feat-list-wrapping branch from 07401f2 to 9a78e32 Compare March 25, 2025 15:08
@kgogov kgogov requested a review from dobrinyonkov March 25, 2025 15:10
@kgogov kgogov force-pushed the feat-list-wrapping branch 2 times, most recently from 6ab4f6b to 744e6f1 Compare March 28, 2025 12:53
@kgogov kgogov requested a review from dobrinyonkov March 28, 2025 13:17
@kgogov kgogov force-pushed the feat-list-wrapping branch from 57a1c86 to 2d144d4 Compare April 1, 2025 11:10
@kgogov kgogov force-pushed the feat-list-wrapping branch 2 times, most recently from af1dd1c to 2a8cc13 Compare April 2, 2025 14:18
@kgogov kgogov requested a review from dobrinyonkov April 2, 2025 14:22
kgogov added 11 commits April 15, 2025 10:32
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.
- 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 added 4 commits April 15, 2025 10:32
- Add ExpandableTextTemplateParams type to handle text template parameters
- Create ListItemStandardExpandableTextTemplate component for expandable text
- Update ListItemStandard and ListItemStandardTemplate to support text wrapping
- Extract shared interface to types folder to avoid duplication
Implement preloadable expandable text template for ListItemStandard when
using wrappingType="Normal". Create ListItemStandardExpandableText.ts to
allow users to preload the feature instead of using dynamic imports.
Update documentation and component test imports accordingly.
@kgogov kgogov force-pushed the feat-list-wrapping branch from 2a8cc13 to 82d5701 Compare April 15, 2025 07:37
@kgogov kgogov requested a review from dobrinyonkov April 15, 2025 07:41
@kgogov kgogov force-pushed the feat-list-wrapping branch from 38784d9 to 5ec8119 Compare April 15, 2025 07:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants