feat: introduce Text web component
Note: This is work in progress. The PR shows how Text as web component would look like and will serve as base for further discussions.
API
/**
* @class
* @slot {Array<Node>} default - Defines the text of the component.
* @since 1.23.0
*/
class Text extends UI5Element {
/**
* Defines how the text of a component will be displayed,
* when there is not enough space for the entire text.
*
* <ul>
* <li>"None" - the text will truncate (default).</li>
* <li>"Normal" - the text will wrap.</li>
* </ul>
*
* @default "None"
* @public
*/
@property({ type: WrappingType, defaultValue: WrappingType.None })
wrappingType!: `${WrappingType}`;
/**
* Defines the number of lines the text should wrap before it truncates.
* <br><b>Note:</b> The property takes effect when <code>wrapping-type</code> is set to <code>Normal</code>.
*
* @default Infinity
* @public
*/
@property({ validator: Integer, defaultValue: Infinity })
maxLines!: number;
Usage
<ui5-text>Simple Text</ui5-text>
<ui5-text wrapping-type="None">Text that will truncate</ui5-text>
<ui5-text wrapping-type="Normal">Text that will wrap</ui5-text>
<ui5-text wrapping-type="Normal" max-lines="3">Text wraps to 3 lines and truncate afterwards</ui5-text>
From UI5 Web Components for React Side we would love to see a Text web component.
It would be great if you could support the following props as well because then we would be to remove our custom Text implementation in the React wrapper:
- [ ]
emptyIndicator(SAPUI5 uses theemptyIndicatorModewith the EmptyIndicatorMode enum for that) - [ ]
renderWhitespace - [ ]
hyphenated(SAPUI5 useswrappingTypeWrappingType for that)
Related to: #6788
I approve the PR from UA perspective.
From UI5 Web Components for React Side we would love to see a
Textweb component. It would be great if you could support the following props as well because then we would be to remove our customTextimplementation in the React wrapper:
- [ ]
emptyIndicator(SAPUI5 uses theemptyIndicatorModewith the EmptyIndicatorMode enum for that)- [ ]
renderWhitespace- [ ]
hyphenated(SAPUI5 useswrappingTypeWrappingType for that)
Hi Marcus we had sync with design owners and all the features will be part of newest Text component design. Once the spec is finalised, we will implement them on top of the initial scope that we will merge now.