ui5-webcomponents icon indicating copy to clipboard operation
ui5-webcomponents copied to clipboard

feat: introduce Text web component

Open ilhan007 opened this issue 1 year ago • 2 comments

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>
Screenshot 2024-02-19 at 8 56 54

ilhan007 avatar Feb 19 '24 07:02 ilhan007

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 the emptyIndicatorMode with the EmptyIndicatorMode enum for that)
  • [ ] renderWhitespace
  • [ ] hyphenated (SAPUI5 uses wrappingType WrappingType for that)

MarcusNotheis avatar Feb 27 '24 09:02 MarcusNotheis

Related to: #6788

petyabegovska avatar Feb 29 '24 09:02 petyabegovska

I approve the PR from UA perspective.

BorisDafov avatar Apr 02 '24 13:04 BorisDafov

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 the emptyIndicatorMode with the EmptyIndicatorMode enum for that)
  • [ ] renderWhitespace
  • [ ] hyphenated (SAPUI5 uses wrappingType WrappingType 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.

ilhan007 avatar Apr 10 '24 06:04 ilhan007