feat: introduce Text web component #8299
Merged
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
|
From UI5 Web Components for React Side we would love to see a
|
|
Related to: #6788 |
ilhan007
changed the title
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
ilhan007
requested review from
alexandar-mitsev,
TeodorTaushanov and
dimovpetar
BorisDafov
suggested changes
Apr 1, 2024
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). |
There was a problem hiding this comment.
I suggest:
- Do not use the
ui5-textif you need to reference the input of other components (useui5-labelinstead).
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. |
There was a problem hiding this comment.
I suggest this formatting when referencing the component:
ui5-text
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. |
packages/main/src/Text.ts
Outdated
| * | ||
| * <h3>Responsive behavior</h3> | ||
| * | ||
| * The Text component is fully adaptive to all screen sizes. |
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> |
|
I approve the PR from UA perspective. |
dimovpetar
approved these changes
Apr 9, 2024
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
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.
Introduce new web component.
Fixes: #6788
API
Usage