feat: introduce Text web component #8299

ilhan007 · 2024-02-19T07:12:47Z

Introduce new web component.

API

/**
 * @class
 * @slot {Array<Node>} default - Defines the text of the component.
 * @since 1.23.0
 */
class Text extends UI5Element {
	/**
	 * Defines the number of lines the text should wrap before it truncates.
	 * @default Infinity
	 * @public
	 */
	@property({ validator: Integer, defaultValue: Infinity })
	maxLines!: number;

Usage

<ui5-text>Simple Text</ui5-text>
<ui5-text max-lines="1">Text that will truncate on single line</ui5-text>
<ui5-text max-lines="3">Text wraps to 3 lines and truncates afterwards</ui5-text>

MarcusNotheis · 2024-02-27T09:46:04Z

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)

petyabegovska · 2024-02-29T09:50:46Z

Related to: #6788

Internet Explorer as is no longer supported. With this change, we're removing all Internet Explorer-related checks from the framework. BREAKING CHANGE: "Device#isIE" method has been removed and no longer available Related to #8461

Previously, we used <style> and <link> tags to style web components due to the lack of browser support for adoptedStyleSheets. However, as latest version of all relevant browsers now support "adoptedStyleSheets", we are removing all additional functionality that was implemented to compensate for the missing support and rely entirely on "adoptedStyleSheets". As a result, there is no need of additional handling to full-fill Content Security Policy (CSP) requirements, because adoptedStyleSheets are CSP compliant. BREAKING CHANGE: Removed the `CSP.js` module and the creation of `<style>` and `<link>` tags, as all browsers now support adoptedStyleSheets. The following APIs are not available any more and should not be used: ```ts import { setUseLinks } from "@ui5/webcomponents-base/dist/CSP.js" import { setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js" import { setPreloadLinks } from "@ui5/webcomponents-base/dist/CSP.js" ``` Related to [#8461](#8461)

Removes the `ICardHeader` interface as no other header types are currently supported or requested. BREAKING CHANGE: Removed the `ICardHeader` interface. If you previously used the interface ```ts import type { ICardHeader } from "@ui5/webcomponents-base/dist/Card.js" ``` Use the CardHeader type instead: ```ts import type CardHeader from "@ui5/webcomponents-base/dist/CardHeader.js" ``` Related to [#8461](#8461)

…ce (#8504) Removes the `IUploadCollectionItem` interface as no other item types are currently supported or requested. BREAKING CHANGE: Removed the `IUploadCollectionItem` interface. If you previously used the interface: ```js import type { IUploadCollectionItem} from "@ui5/webcomponents-fiori/dist/UploadCollection.js" ``` Use the `UploadCollectionItem` type instead: ```js import type UploadCollectionItem from "@ui5/webcomponents-fiori/dist/UploadCollectionItem.js" ``` Related to #8461

… and L (#8509) Renames the values of BusyIndicatorSize from "Small", "Medium" and "Large" to "S", "M" and "L". BREAKING CHANGE: The `size` property now accepts different values. If you previously used it like: ```html <ui5-busy-indicator size="Small"></ui5-busy-indicator> ``` Now use the new values instead: ```html <ui5-busy-indicator size="S"></ui5-busy-indicator> ``` Related to #8461

Renames the `status` property to `additionalText` and its shadow part. BREAKING CHANGE: The `status` property and its shadow part have been renamed. If you previously used them: ```html <style> .cardHeader::part(status) { ... } </style> <ui5-card-header status="3 of 10"></ui5-popover> ``` Now use `additionalText` instead: ```html <style> .cardHeader::part(additional-text) { ... } </style> <ui5-card-header class="cardHeader" additional-text="3 of 10"></ui5-card-header> ``` Related to #8461

#8511) Renames the property `pageIndicatorStyle` to `pageIndicatorType` and enumeration `PageIndicatorStyle` to `PageIndicatorType`. BREAKING CHANGE: The `pageIndicatorStyle` no longer exists. If you previously used it like: ```html <ui5-carousel page-indicator-style="Numeric"></ui5-carousel> ``` Now you should use `pageIndicatorType` instead: ```html <ui5-carousel page-indicator-type="Numeric"></ui5-carousel> ``` Related to #8461

Removed the deprecated `UI5Element#render` method of the UI5Element class and replaced it with `UI5Element#renderer`. BREAKING CHANGE: Removed `UI5Element#render` method in favour of `UI5Element#renderer`. If you previously used "render" ```js class MyClass extends UI5Element { static get render() { return litRenderer; } } ``` start using "renderer" ```ts class MyClass extends UI5Element { static get renderer() { return litRenderer; } } ``` Related to [#8461](#8461)

With the release of version 2.0, we strongly encourage component development to be done in TypeScript. Consequently, we are discontinuing the option to generate JavaScript projects and components, as the tooling will no longer support them by default. BREAKING CHANGE: Remove JavaScript template option from @ui5/create-webcomponents-package Previously `npm init @ui5/webcomponents-package` used to create JS-based project, however now it will be TypeScript-based project. If you previously used `npm init @ui5/webcomponents-package --enable-typescript` to create TypeScript-based project, now it's by default, e.g `npm init @ui5/webcomponents-package` and `--enable-typescript` is removed. Related to [#8461](#8461)

…mentType values (#8502) Renames the `Left` and `Right` values of `PopoverHorizontalAlign` and `PopoverPlacementType` to `Start` and `End`. BREAKING CHANGE: The `Left` and `Right` options option have been renamed. If you previously used them to set the placement or the alignment of the popover: ```html <ui5-popover horizontal-align="Left" placement-type="Left"></ui5-popover> ``` Now use `Start` or `End` instead: ```html <ui5-popover horizontal-align="Start" placement-type="Start"></ui5-popover> ``` Related to #8461

The icon `soccor` was introduced with a typo. With this update, we are removing the incorrect icon by replacing it with the icon with the correct name, `soccer`. Before: ```html <ui5-icon name="soccor"></ui5-icon ``` After: ```html <ui5-icon name="soccer"></ui5-icon ``` BREAKING CHANGE: Remove `soccor` icon. Use `soccer` instead. Related to #8461

The icon `add-polygone` was introduced with a typo. With this update, we are removing the incorrect icon by replacing it with the icon with the correct name, `add-polygon`. Before: ```html <ui5-icon name="business-suite/add-polygone"></ui5-icon ``` After: ```html <ui5-icon name="business-suite/add-polygon"></ui5-icon ``` BREAKING CHANGE: Remove `add-polygone` icon. Use `add-polygon` instead. Related to #8461

Previously, the custom JSDoc plugin was replaced with @custom-elements-manifest/analyzer for generating JSON descriptions of component metadata. With this replacement, the plugin has become redundant. BREAKING CHANGE: The JSDoc plugin has been removed, and the generation of api.json has stopped. If you previously relied on the `ui5-package/dist/api.json file`, you can now use `ui5-package/dist/custom-elements.json` Related to: #8461

Remove all Assets-static.js modules in favour of their dynamic counterparts - the Assets.js modules. BREAKING CHANGE: All Assets-static.js modules are removed. If you previously imported any Assets-static.js module from any package: ```ts import "@ui5/webcomponents/dist/Assets-static.js"; import "@ui5/webcomponents-icons/dist/Assets-static.js" ``` use the dynamic equivalent of it: ```ts import "@ui5/webcomponents/dist/Assets.js"; import "@ui5/webcomponents-icons/dist/Assets.js" ``` Related to: #8461

…change` and rename few event details (#8529) Renames the `selected-dates-change ` event name of the Calendar to `selection-change` and the names of two event details - `values` and `dates` to `selectedValues` and `selectedDateValues` respectively. BREAKING CHANGE: The event `selected-dates-change ` is renamed to `selection-change`. In addition the event details `values` and `dates` are renamed to `selectedValues` and `selectedDateValues`. If you previously used the Calendar event as follows: ```ts myCalendar.addEventListener("selected-dates-change", () => { const values = e.detail.values; const dates = e.detail.dates; }) ``` Now you have to use the new event name and details: ```ts myCalendar.addEventListener("selection-change", () => { const values = event.detail.selectedValues; const dates = event.detail.selectedDateValues; }) ``` Related to: #8461

* docs: update keyboard key abbreviation * chore: update * chore: update * chore: update

Renames the `color` property name of the ColorPicker to `value` and the names of two private properties. BREAKING CHANGE: The property `color` is renamed to `value`. If you previously used the change event of the ColorPicker as follows: ```html <ui5-color-picker color="red"></ui5-color-picker> ``` Now you have to use it like this: ```html <ui5-color-picker value="red"></ui5-color-picker> ``` Related to: #8461

With this update, TypeScript is now enabled by default for the 'tools' package, along with cleanup for the configuration options. BREAKING CHANGE: JavaScript projects may not function properly with the tools package. Related to: #8461

BorisDafov · 2024-04-01T10:26:30Z

packages/main/src/Text.ts

+ * <h3>Usage</h3>
+ *
+ * - Use the `Text` if uou want to display text inside a form, table, or any other content area.
+ * - Do not use the `Text` if you need to reference input type of components (use ui5-label).


I suggest:

Do not use the ui5-text if you need to reference the input of other components (use ui5-label instead).

BorisDafov · 2024-04-01T10:32:01Z

packages/main/src/Text.ts

+ *
+ * <h3>Overview</h3>
+ *
+ * The Text component displays text that can be used in any content area of an application.


I suggest this formatting when referencing the component:
ui5-text

BorisDafov · 2024-04-01T10:32:50Z

packages/main/src/Text.ts

+ *
+ * <h3>Usage</h3>
+ *
+ * - Use the `Text` if uou want to display text inside a form, table, or any other content area.


Use the ui5-text if you ...

BorisDafov · 2024-04-01T10:34:06Z

packages/main/src/Text.ts

+ *
+ * <h3>Responsive behavior</h3>
+ *
+ * The Text component is fully adaptive to all screen sizes.


BorisDafov · 2024-04-01T10:42:05Z

packages/main/test/pages/Text.html

+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta charset="utf-8">
+	<title>Text Web Component</title>


BorisDafov · 2024-04-02T13:46:43Z

I approve the PR from UA perspective.

dimovpetar

Looks good 👍
I will add test in another PR.

ilhan007 · 2024-04-10T06:29:00Z

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.

feat: introduce Text web component

1065510

ilhan007 added for review for discussion New Component labels Feb 19, 2024

ilhan007 changed the title ~~[WIP][Discussion] feat: introduce Text web component~~ feat: introduce Text web component Mar 7, 2024

Nayden Naydenov and others added 23 commits March 21, 2024 11:39

Merge remote-tracking branch 'origin/main' into release-2.0

4390a18

Merge branch 'main' into rel-2.0

96dca3c

chore: remove unused command (#8506)

0789c34

Merge branch 'main' into release-2.0

1d726ea

docs: deploy v2 preview

a59844f

Merge branch 'main' into release-2.0

fc963c7

docs: update keyboard keys abbreviations (#8528)

6b7237e

* docs: update keyboard key abbreviation * chore: update * chore: update * chore: update

Merge branch 'main' into release-2.0

76946c8

ilhan007 added 2 commits March 27, 2024 11:42

chore: remove wrapping-type

f1aaa5c

chore: remove wrapping-type

21e6103

ilhan007 changed the base branch from main to release-2.0 March 27, 2024 09:52

ilhan007 and others added 4 commits March 27, 2024 11:54

Merge branch 'main' into release-2.0

5f12fd9

Merge branch 'main' into feat-text-component

1cbbd3e

ilhan007 removed for review for discussion labels Mar 27, 2024

Merge branch 'release-2.0' into feat-text-component

69a905d

ilhan007 added the 2.0 label Mar 27, 2024

ilhan007 requested review from alexandar-mitsev, TeodorTaushanov and dimovpetar March 27, 2024 11:52

ilhan007 added 2 commits March 27, 2024 14:40

Merge branch 'release-2.0' into feat-text-component

cb13581

chore: add new component badge

4cac2ba

kskondov requested a review from BorisDafov March 28, 2024 08:11

BorisDafov suggested changes Apr 1, 2024

View reviewed changes

ilhan007 added 2 commits April 1, 2024 18:40

fix: edit docs

b3bb9cc

Merge branch 'main' into feat-text-component

247881d

ilhan007 requested a review from BorisDafov April 1, 2024 16:32

ilhan007 changed the base branch from release-2.0 to main April 4, 2024 21:08

ilhan007 added 2 commits April 5, 2024 18:17

Merge branch 'main' into feat-text-component

def303e

chore: don't change docusaurus config

aa9f461

dimovpetar approved these changes Apr 9, 2024

View reviewed changes

ilhan007 merged commit 91acaf5 into main Apr 10, 2024
9 checks passed

ilhan007 deleted the feat-text-component branch April 10, 2024 06:29

MarcusNotheis mentioned this pull request Jun 19, 2024

[Feature Request]: Text add empty-indicator, render-whitespace and hyphenated attributes #9244

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: introduce Text web component #8299

feat: introduce Text web component #8299

ilhan007 commented Feb 19, 2024 •

edited

Loading

MarcusNotheis commented Feb 27, 2024 •

edited

Loading

petyabegovska commented Feb 29, 2024

BorisDafov Apr 1, 2024

BorisDafov Apr 1, 2024

BorisDafov Apr 1, 2024

BorisDafov Apr 1, 2024

BorisDafov Apr 1, 2024

BorisDafov commented Apr 2, 2024

dimovpetar left a comment

ilhan007 commented Apr 10, 2024

feat: introduce Text web component #8299

feat: introduce Text web component #8299

Conversation

ilhan007 commented Feb 19, 2024 • edited Loading

API

Usage

MarcusNotheis commented Feb 27, 2024 • edited Loading

petyabegovska commented Feb 29, 2024

BorisDafov Apr 1, 2024

Choose a reason for hiding this comment

BorisDafov Apr 1, 2024

Choose a reason for hiding this comment

BorisDafov Apr 1, 2024

Choose a reason for hiding this comment

BorisDafov Apr 1, 2024

Choose a reason for hiding this comment

BorisDafov Apr 1, 2024

Choose a reason for hiding this comment

BorisDafov commented Apr 2, 2024

dimovpetar left a comment

Choose a reason for hiding this comment

ilhan007 commented Apr 10, 2024

ilhan007 commented Feb 19, 2024 •

edited

Loading

MarcusNotheis commented Feb 27, 2024 •

edited

Loading