Visitar URL original
feat: introduce Text web component by ilhan007 · Pull Request #8299 · UI5/webcomponents · GitHub
Skip to content

feat: introduce Text web component - #8299

Merged
ilhan007 merged 46 commits into
mainfrom
feat-text-component
Apr 10, 2024
Merged

ilhan007 merged 46 commits into
mainfrom
feat-text-component

Conversation

@ilhan007

@ilhan007 ilhan007 commented Feb 19, 2024 •

Copy link
Copy Markdown
Contributor

Introduce new web component.

Fixes: #6788

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

@MarcusNotheis

MarcusNotheis commented Feb 27, 2024 •

Copy link
Copy Markdown
Member

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:

@petyabegovska

Copy link
Copy Markdown
Contributor

Related to: #6788

@ilhan007 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
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
@ilhan007
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
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
@kskondov
kskondov requested a review from BorisDafov March 28, 2024 08:11
Comment thread packages/main/src/Text.ts Outdated
* <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).

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suggest:

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

Comment thread packages/main/src/Text.ts Outdated
*
* <h3>Overview</h3>
*
* The Text component displays text that can be used in any content area of an application.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Comment thread packages/main/src/Text.ts Outdated
*
* <h3>Usage</h3>
*
* - Use the `Text` if uou want to display text inside a form, table, or any other content area.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • Use the ui5-text if you ...

Comment thread packages/main/src/Text.ts Outdated
*
* <h3>Responsive behavior</h3>
*
* The Text component is fully adaptive to all screen sizes.

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ui5-text

Comment thread packages/main/test/pages/Text.html Outdated
<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>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<title>Text</title>

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

Copy link
Copy Markdown

I approve the PR from UA perspective.

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

@dimovpetar dimovpetar left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍
I will add test in another PR.

@ilhan007

Copy link
Copy Markdown
Contributor Author

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:

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature Request]: text component

8 participants