feat(ui5-li): add text wrapping support #11108
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
kgogov
force-pushed
the
feat-list-wrapping
branch
from
bf65704 to
10f7b58
Compare
kgogov
changed the title
kgogov
changed the title
kgogov
force-pushed
the
feat-list-wrapping
branch
2 times, most recently
from
7060ff3 to
166940b
Compare
kgogov
force-pushed
the
feat-list-wrapping
branch
from
07401f2 to
9a78e32
Compare
dobrinyonkov
requested changes
Mar 26, 2025
kgogov
force-pushed
the
feat-list-wrapping
branch
2 times, most recently
from
6ab4f6b to
744e6f1
Compare
kgogov
force-pushed
the
feat-list-wrapping
branch
from
57a1c86 to
2d144d4
Compare
dobrinyonkov
reviewed
Apr 1, 2025
kgogov
force-pushed
the
feat-list-wrapping
branch
from
2d144d4 to
af1dd1c
Compare
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
- 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
kgogov
force-pushed
the
feat-list-wrapping
branch
from
af1dd1c to
2a8cc13
Compare
dobrinyonkov
reviewed
Apr 2, 2025
| // 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) { |
There was a problem hiding this comment.
For this to be preloaded the user will have to import it, so we must create a file ListItemStandardExpandableText.ts next to the template. For reference, check the ColorPaletteMoreColors.ts and all the places it is mentioned (docs, component-import.js)
| */ | ||
| export default function ListItemStandardExpandableTextTemplate( | ||
| this: ListItemStandard, | ||
| options: ExpandableTextTemplateParams |
There was a problem hiding this comment.
to be consistent with other templates, lets rename this prop to injectedProps, check ButtonTemplate or ListItemBaseTempalte
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
The standard list item
ui5-linow supports content wrapping through a publicly availablewrappingTypeproperty. When set to "Normal", long text content (title and description) will wrap to multiple lines instead of truncating with an ellipsis.Key features:
ui5-expandable-textImplementation details:
wrappingTypeproperty public available with options "None" (default) and "Normal"ui5-expandable-textcomponent whenwrappingTypeis "Normal"_maxCharactersgetter to determine truncation point based on media rangewrapping-typeattributeDocumentation:
defaultslot in favor oftextpropertyTests:
wrappingTypepropertyNOTE: This change also promotes the use of the
textproperty (added inv2.9.0) instead of thedefaultslot content for setting list item text. Thedefaultslot usage is now deprecated and will be removed in a future version.Implements: #9745