fix(ui5-dialog): state icon no longer shrinks when title is too long #8850
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
* refactor(framework): remove internet explorer related checks (#8494) 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 * refactor(framework): remove the CSP module (#8496) 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) * refactor(ui5-card): remove ICardHeader interface (#8497) 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) * refactor(ui5-upload-collection): remove IUploadCollectionItem interface (#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 * refactor(ui5-busy-indicator): rename BusyIndicatorSize values to S, M 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 * refactor(ui5-card-header): rename status to additionalText (#8507) 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 * refactor(ui5-carousel): rename pageIndicatorStyle to pageIndicatorType (#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 * refactor(framework): remove render method (#8501) 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) * refactor(tools): remove js option from generation templates (#8503) 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) * chore: remove unused command (#8506) * refactor(ui5-popover): rename PopoverHorizontalAlign and PopoverPlacementType 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 * docs: deploy v2 preview * refactor(icons): remove soccor icon (#8524) 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 * refactor(icons-business-suite): remove add-polygone icon (#8525) 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 * refactor(tools): remove jsdoc plugin (#8518) 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 * refactor: remove all Assets-static.js modules (#8526) 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 * refactor(ui5-calendar): rename `selected-dates-change` to `selection-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 keys abbreviations (#8528) * docs: update keyboard key abbreviation * chore: update * chore: update * chore: update * Update docusaurus.config.ts * docs: add reset button in playground (#8531) * Update index.js * chore: update chromedriver (#8532) * chore: update LocaleData.ts UI5 version 1.103.0 is out of support. Update to latest stable version 1.120.5. * feat(framework): support sr, mk, cnr locales (#8534) The following languages mk_MK, cnr_ME and sr_Cyrl_RS locales and languages are now available and supported by the framework and displayed by the relevant components. To do so, the PR updates the internal openui5 core dependency from 1.120.3 to 1.120.5 Fixes: #8163 * docs(ui5-segmented-button-item): add notes to inherited properties (#8527) Marking properties in documentation that have no effect over the control. * chore: update yarn.lock * refactor(ui5-color-picker): rename `color` to `value` (#8538) 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 * refactor(tools): enable TypeScript as default (#8521) 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 * refactor(ui5-color-palette): remove deprecated APIs (#8542) Removes the `openPopover` and `showAt` methods from the `ui5-color-palette-popover`. BREAKING CHANGE: The `openPopover` and `showAt` methods are removed in favor of `open` and `opener` properties. If you previously used the imperative API: ```js button.addEventListener("click", function(event) { colorPalettePopover.showAt(this); }); ``` Now the declarative API should be used instead: ```html <ui5-button id="opener">Open</ui5-button> <ui5-color-palette-popover opener="opener"> ``` ```js button.addEventListener("click", function(event) { colorPalettePopover.open = !colorPalettePopover.open; }); ``` Related to: #8461 * refactor(ui5-bar): move to `main` (#8548) Change the library of the `ui5-bar `component from `fiori` to `main`. BREAKING CHANGE: The `ui5-bar` component is now in `main` library. If you previously imported the `ui5-bar` from `fiori`: ```ts import "@ui5/webcomponents-fiori/dist/Bar.js; ``` Now, import the `ui5-bar` from `main`: ```ts import "@ui5/webcomponents/dist/Bar.js"; ``` Related to: #8461 * chore(ui5-bar): fix import in samples (#8555) * refactor(ui5-tab): rename `subTabs` slot to `items` (#8559) Renames 'subTabs' slot of ui5-tab to 'items'. BREAKING CHANGE: If you have previously used: ```html <ui5-tab id="nestedTab" slot="subTabs"></ui5-tab> ``` Now use: ```html <ui5-tab id="nestedTab" slot="items"></ui5-tab> ``` Relates to #8461 * refactor(ui5-tabcontainer): rename `tabs-overflow-mode` to `overflow-mode` (#8565) Renames tabs-overflow-mode to overflow-mode BREAKING CHANGE: If you have previously used: ```html <ui5-tabcontainer tabs-overflow-mode="StartAndEnd"></ui5-tabcontainer> ``` Now use: ```html <ui5-tabcontainer overflow-mode="StartAndEnd"></ui5-tabcontainer> ``` Relates to #8461 * refactor(ui5-tabcontainer): remove TabContainerBackgroundDesign enume… (#8570) Removes `TabContainerBackgroundDesign` enum in favour of `BackgroundDesign` enum. BREAKING CHANGE: If you previously imported `TabContainerBackgroundDesign`, use `BackgroundDesign` instead. Relates to #8461 * chore: enable tree tests (#8558) Co-authored-by: Nayden Naydenov <[email protected]> * chore(release): publish v1.24.0-rc.3 [ci skip] * refactor(ui5-tabcontainer): remove deprecated showOverflow property (#8568) Removes the deprecated showOverflow property. BREAKING CHANGE: The showOverflow property is removed. If previously you have used: ```html <ui5-tabcontainer show-overflow></ui5-tabcontainer> ``` now use the overflowButton slot: ```html <ui5-tabcontainer> <ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button> <ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button> </ui5-tabcontainer> ``` Relates to #8461 * refactor(ui5-popover): rename property placementType to placement (#8596) Renames the `placementType` property of `ui5-popover`. Also renames the `PopoverPlacementType` enum to `PopoverPlacement`. BREAKING CHANGE: The `placementType` property and the `PopoverPlacementType` enum have been renamed. If you have previously used the `placementType` property and the `PopoverPlacementType` ```html <ui5-popover placement-type="Bottom"></ui5-popover> ``` ```js import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacementType.js"; ``` Now use `placement` instead: ```html <ui5-placement="Bottom"></ui5-popover> ``` ```js import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacement.js"; ``` Related to #8461 * framework: enable popover API (#8192) * chore: integrate the popover API with OpenUI5 (#8606) * refactor(ui5-illustrated-message): rename `size` property to `design` (#8605) Renames the `size` property of the `ui5-illustrated-message` to `design`. The semantic values `Auto`, `Base`, `Spot`, `Dialog`, `Scene` and size aspect of this property is not directly clear. BREAKING CHANGE: The `size` property of the `ui5--illustrated-message` is renamed to `design`. If you have previously used the `size` property: ```html <ui5-illustrated-message size="Dialog"> ``` Now use `design` instead: ```html <ui5-illustrated-message design="Dialog"> ``` Related to #8461, #7887 * refactor(ui5-breadcrumbs): rename property `separator-style` to `separators` (#8600) Renames the `separator-style` property of `ui5-breadcrumbs` to `separators`. Also the `BreadcrumbsSeparatorStyle` enum is renamed to `BreadcrumbsSeparator`. BREAKING CHANGE: The `separator-style` property is renamed to `separators` and the `BreadcrumbsSeparatorStyle` enum is renamed to `BreadcrumbsSeparator`. If you have previously used the `separator-style` property: ```html <ui5-breadcrumbs separator-style="Slash"> ``` Now use `separators` instead: ```html <ui5-breadcrumbs separators="Slash"> ``` Related to #8461, #7887 * refactor(ui5-option): remove disabled property (#8602) Removes the `disabled` property of the `ui5-option`, since UX and ACC standards suggest to not include any disabled items in the dropdown. BREAKING CHANGE: The `disabled` property of the `ui5-option` is removed. If you have previously used the `disabled` property: ```html <ui5-option disabled>Option</ui5-option> ``` it will no longer work for the component. Related to #8461, #7887 * refactor(ui5-tabcontainer): delete ITab interface (#8593) - Removes `ITab` interface. TabContainer already works only with Tab and TabSeparator, therefore `ITab` only adds extra complexity. - Replaces `isInline`, `forcedMixedMode`, `forcedPosinset`, `forcedSetsize`, `isTopLevelTab`, `getElementInStrip` with 2 new methods: `receiveStripInfo(info)` and `receiveOverflowInfo(info)`. This way it is clear that those properties are not expected to be set by the Tab or TabSeparator, but are provided by the TabContainer in specific point in time - Makes `getTabInStripDomRef` return type match `UI5Element#getDomRef` BREAKING CHANGE: You can no longer import and implement the `ITab` interface. TabContainer is designed to work only with Tab and TabSeparator classes, so the interface was obsolete.
Documentation review.
Documentation review.
* fix(ui5-multi-input): fix failing popover test temporary comment the test until #8655 fix is revised
Documentation review.
Documentation review.
Documentation review.
…etDomRefInStrip (#8653) Renames Tab#getTabInsStripDomRef and TabSeparator#getTabInsStripDomRef to getDomRefInStrip. BREAKING CHANGE: If previously you have used: ```js someTab.getTabInsStripDomRef(); someTabSeparator.getTabInsStripDomRef(); ``` Now use: ```js someTab.getDomRefInStrip(); someTabSeparator.getDomRefInStrip(); ``` Related to: #8461
chore: remove legacy jekyll playground samples
…p overlay color (#8616) * fix(ui5-upload-collection): correct drag and drop text and icon color Updates the ui5-upload-collection drag and drop text and icon color according to the latest specification * fix(ui5-upload-collection): update parameters for horizon theme Updates ui5-upload-collection style parameters according to the latest design specification * fix(ui5-upload-collection): update horizon high contrast themes Address review comments * fix(ui5-upload-collection): correct drag and drop text and icon color Updates high contrast themes border * fix(ui5-upload-collection): correct drag and drop text and icon color Review comments
* feat(focus): new focus handling * feat(focus): new focus handling * chore: fix card header focuse in ff
…electionMode (#8657) Renames the `mode` property of `ui5-list`, `ui5-tree` and `ui5-upload-collection` to `selectionMode`. Also renames the `ListMode` enum to `ListSelectionMode` and its values as it follows: `SingleSelect` is renamed to `Single` `MultiSelect` is renamed to `Multiple` `SingleSelectBegin` is renamed to `SingleStart` `SingleSelectEnd` is renamed to `SingleEnd` `SingleSelectAuto` is renamed to `SingleAuto` BREAKING CHANGE: The `mode` property and the `ListMode` enum have been renamed. If you have previously used the `mode` property and the `ListMode` values: ```html <ui5-list class="list" mode="SingleSelect"> <ui5-list class="list" mode="MultiSelect"> <ui5-upload-collection mode="SingleSelectBegin"> <ui5-upload-collection mode="SingleSelectEnd"> <ui5-tree mode="SingleSelectAuto" > <ui5-tree mode="None" > ``` Now use `selectionMode` and `Single`, `Multiple` instead: ```html <ui5-list class="list" selection-mode="Single"> <ui5-list class="list" selection-mode="Multiple"> <ui5-upload-collection selection-mode="SingleStart"> <ui5-upload-collection selection-mode="SingleEnd"> <ui5-tree selection-mode="SingleAuto"> <ui5-tree selection-mode="None"> ``` Related to #8461, #7887
Documentation review.
Documentation review.
Removes the "Delete" option of `selectionMode` of `ui5-upload-collection`. So far this property didn't have any effect. BREAKING CHANGE: The `selectionMode` property no longer accepts "Delete" as value. If you have previously used it: ```html <ui5-upload-collection selection-mode="Delete"></ui5-upload-collection> ``` Now omit it completely and use `hide-delete-button` onto the ui5-upload-collection: ```html <ui5-upload-collection> <ui5-upload-collection-item hide-delete-button> </ui5-upload-collection-item> </ui5-upload-collection> ``` Related to #8461
Property "fixed" is removed. The Tab Container has been previously expandable/collapsible like a Panel and it was controlled by the "fixed" property, however this was not backed by specs and UX/VD specs. BREAKING CHANGE: Property "fixed" is removed and there is no alternative provided. The TabContainer is no longer expandable/collapsible via use interaction. You can still show the TabContainer collapsed via the "collapsed" property. Related to: #8461
Removes the `disabled` property of the `ui5-progress-indicator`. The Progress Indicator isn't an interactive element, therefore the disabled property make no sense. Also aria-disabled is deprecated on the `progressbar` role since ARIA 1.2 . BREAKING CHANGE: The `disabled` property of the `ui5-progress-indicator` is removed. If you have previously used the `disabled` property, it won't take effect: ```html <ui5-progress-indicator disabled value="60"></ui5-progress-indicator> ``` Related to #8461, #7887
…8686) Renames the `busy`, `busyDelay` property of the `ui5-list` to `loading` and `loadingDelay`. BREAKING CHANGE: The `busy` property of the `ui5-list` is renamed. If you have previously used the `busy`, `busyDelay` properties: ```html <ui5-list busy busy-delay="500"></ui5-list> ``` now you must use `loading` and `loadingDelay` properties: ```html <ui5-list loading loading-delay="500"></ui5-list> ``` Related: #8461 #7887
Adjusted ui5-checkbox focus display rules. On desktop, focus outline is always visible. For mobile, focus outline only appears with an external keyboard, it remains hidden for touch focus. Related to: #8320
…tems-per-page-l properties (#8635) * refactor(framework): remove internet explorer related checks (#8494) 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 * refactor(framework): remove the CSP module (#8496) 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) * refactor(ui5-card): remove ICardHeader interface (#8497) 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) * refactor(ui5-upload-collection): remove IUploadCollectionItem interface (#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 * refactor(ui5-busy-indicator): rename BusyIndicatorSize values to S, M 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 * refactor(ui5-card-header): rename status to additionalText (#8507) 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 * refactor(ui5-carousel): rename pageIndicatorStyle to pageIndicatorType (#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 * refactor(framework): remove render method (#8501) 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) * refactor(tools): remove js option from generation templates (#8503) 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) * chore: remove unused command (#8506) * refactor(ui5-popover): rename PopoverHorizontalAlign and PopoverPlacementType 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 * docs: deploy v2 preview * refactor(icons): remove soccor icon (#8524) 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 * refactor(icons-business-suite): remove add-polygone icon (#8525) 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 * refactor(tools): remove jsdoc plugin (#8518) 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 * refactor: remove all Assets-static.js modules (#8526) 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 * refactor(ui5-calendar): rename `selected-dates-change` to `selection-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 keys abbreviations (#8528) * docs: update keyboard key abbreviation * chore: update * chore: update * chore: update * Update docusaurus.config.ts * docs: add reset button in playground (#8531) * Update index.js * chore: update chromedriver (#8532) * chore: update LocaleData.ts UI5 version 1.103.0 is out of support. Update to latest stable version 1.120.5. * feat(framework): support sr, mk, cnr locales (#8534) The following languages mk_MK, cnr_ME and sr_Cyrl_RS locales and languages are now available and supported by the framework and displayed by the relevant components. To do so, the PR updates the internal openui5 core dependency from 1.120.3 to 1.120.5 Fixes: #8163 * docs(ui5-segmented-button-item): add notes to inherited properties (#8527) Marking properties in documentation that have no effect over the control. * chore: update yarn.lock * refactor(ui5-color-picker): rename `color` to `value` (#8538) 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 * refactor(tools): enable TypeScript as default (#8521) 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 * refactor(ui5-color-palette): remove deprecated APIs (#8542) Removes the `openPopover` and `showAt` methods from the `ui5-color-palette-popover`. BREAKING CHANGE: The `openPopover` and `showAt` methods are removed in favor of `open` and `opener` properties. If you previously used the imperative API: ```js button.addEventListener("click", function(event) { colorPalettePopover.showAt(this); }); ``` Now the declarative API should be used instead: ```html <ui5-button id="opener">Open</ui5-button> <ui5-color-palette-popover opener="opener"> ``` ```js button.addEventListener("click", function(event) { colorPalettePopover.open = !colorPalettePopover.open; }); ``` Related to: #8461 * refactor(ui5-bar): move to `main` (#8548) Change the library of the `ui5-bar `component from `fiori` to `main`. BREAKING CHANGE: The `ui5-bar` component is now in `main` library. If you previously imported the `ui5-bar` from `fiori`: ```ts import "@ui5/webcomponents-fiori/dist/Bar.js; ``` Now, import the `ui5-bar` from `main`: ```ts import "@ui5/webcomponents/dist/Bar.js"; ``` Related to: #8461 * chore(ui5-bar): fix import in samples (#8555) * refactor(ui5-tab): rename `subTabs` slot to `items` (#8559) Renames 'subTabs' slot of ui5-tab to 'items'. BREAKING CHANGE: If you have previously used: ```html <ui5-tab id="nestedTab" slot="subTabs"></ui5-tab> ``` Now use: ```html <ui5-tab id="nestedTab" slot="items"></ui5-tab> ``` Relates to #8461 * refactor(ui5-tabcontainer): rename `tabs-overflow-mode` to `overflow-mode` (#8565) Renames tabs-overflow-mode to overflow-mode BREAKING CHANGE: If you have previously used: ```html <ui5-tabcontainer tabs-overflow-mode="StartAndEnd"></ui5-tabcontainer> ``` Now use: ```html <ui5-tabcontainer overflow-mode="StartAndEnd"></ui5-tabcontainer> ``` Relates to #8461 * refactor(ui5-tabcontainer): remove TabContainerBackgroundDesign enume… (#8570) Removes `TabContainerBackgroundDesign` enum in favour of `BackgroundDesign` enum. BREAKING CHANGE: If you previously imported `TabContainerBackgroundDesign`, use `BackgroundDesign` instead. Relates to #8461 * chore: enable tree tests (#8558) Co-authored-by: Nayden Naydenov <[email protected]> * chore(release): publish v1.24.0-rc.3 [ci skip] * refactor(ui5-tabcontainer): remove deprecated showOverflow property (#8568) Removes the deprecated showOverflow property. BREAKING CHANGE: The showOverflow property is removed. If previously you have used: ```html <ui5-tabcontainer show-overflow></ui5-tabcontainer> ``` now use the overflowButton slot: ```html <ui5-tabcontainer> <ui5-button slot="startOverflowButton" id="startOverflowButton">Start</ui5-button> <ui5-button slot="overflowButton" id="endOverflowButton">End</ui5-button> </ui5-tabcontainer> ``` Relates to #8461 * refactor(ui5-popover): rename property placementType to placement (#8596) Renames the `placementType` property of `ui5-popover`. Also renames the `PopoverPlacementType` enum to `PopoverPlacement`. BREAKING CHANGE: The `placementType` property and the `PopoverPlacementType` enum have been renamed. If you have previously used the `placementType` property and the `PopoverPlacementType` ```html <ui5-popover placement-type="Bottom"></ui5-popover> ``` ```js import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacementType.js"; ``` Now use `placement` instead: ```html <ui5-placement="Bottom"></ui5-popover> ``` ```js import PopoverPlacementType from "@ui5/webcomponents/dist/types/PopoverPlacement.js"; ``` Related to #8461 * framework: enable popover API (#8192) * chore: integrate the popover API with OpenUI5 (#8606) * refactor(ui5-illustrated-message): rename `size` property to `design` (#8605) Renames the `size` property of the `ui5-illustrated-message` to `design`. The semantic values `Auto`, `Base`, `Spot`, `Dialog`, `Scene` and size aspect of this property is not directly clear. BREAKING CHANGE: The `size` property of the `ui5--illustrated-message` is renamed to `design`. If you have previously used the `size` property: ```html <ui5-illustrated-message size="Dialog"> ``` Now use `design` instead: ```html <ui5-illustrated-message design="Dialog"> ``` Related to #8461, #7887 * refactor(ui5-breadcrumbs): rename property `separator-style` to `separators` (#8600) Renames the `separator-style` property of `ui5-breadcrumbs` to `separators`. Also the `BreadcrumbsSeparatorStyle` enum is renamed to `BreadcrumbsSeparator`. BREAKING CHANGE: The `separator-style` property is renamed to `separators` and the `BreadcrumbsSeparatorStyle` enum is renamed to `BreadcrumbsSeparator`. If you have previously used the `separator-style` property: ```html <ui5-breadcrumbs separator-style="Slash"> ``` Now use `separators` instead: ```html <ui5-breadcrumbs separators="Slash"> ``` Related to #8461, #7887 * refactor(ui5-option): remove disabled property (#8602) Removes the `disabled` property of the `ui5-option`, since UX and ACC standards suggest to not include any disabled items in the dropdown. BREAKING CHANGE: The `disabled` property of the `ui5-option` is removed. If you have previously used the `disabled` property: ```html <ui5-option disabled>Option</ui5-option> ``` it will no longer work for the component. Related to #8461, #7887 * refactor(ui5-upload-collection): introduce items-per-page property The items-per-page-s, items-per-page-m, items-per-page-l properties are replaced by a single property items-per-page with value in the following format "S1 M2 L3" * refactor(ui5-carousel): replace items-per-page-s, items-per-page-m, items-per-page-l properties Add XL size and refactor * chore: tests added * fix: xl test * refactor(ui5-carousel): replace items-per-page-s, items-per-page-m, items-per-page-l properties Address code review coments * refactor(ui5-carousel): replace items-per-page-s, items-per-page-m, items-per-page-l properties Address code review comments * refactor(ui5-carousel): replace items-per-page-s, items-per-page-m, items-per-page-l properties Updates documentation --------- Co-authored-by: Nayden Naydenov <[email protected]> Co-authored-by: Nayden Naydenov <[email protected]> Co-authored-by: Petar Dimov <[email protected]> Co-authored-by: ilhan007 <[email protected]> Co-authored-by: ilhan orhan <[email protected]> Co-authored-by: Tsanislav Gatev <[email protected]> Co-authored-by: Peter Skelin <[email protected]> Co-authored-by: petyabegovska <[email protected]> Co-authored-by: Boyan Rakilovski <[email protected]> Co-authored-by: ui5-webcomponents-bot <[email protected]> Co-authored-by: Vladislav Tasev <[email protected]> Co-authored-by: yanaminkova <[email protected]> Co-authored-by: Gergana Georgieva <[email protected]>
Create a new blog post announcing UI5 Web Components Release Candidate 2.0.
Renames the busy and busyDelay properties of the ui5-menu and ui5-menu-item to loading and loadingDelay. BREAKING CHANGE: The busy and busyDelay and properties of the ui5-menu and ui5-menu-item are renamed. If you have previously used the busy, busyDelay properties: <ui5-menu header-text="My ui5-menu" busy busy-delay="100"><ui5-menu> <ui5-menu-item text="Open" icon="open-folder" busy busy-delay="100"><ui5-menu-item> now you should use loading and loadingDelay properties: <ui5-menu header-text="My ui5-menu" loading loading-delay="100"><ui5-menu> <ui5-menu-item text="Open" icon="open-folder" loading loading-delay="100"><ui5-menu-item> Fixes: #8764
* [INTERNAL] Translation delivery: commit by LX Lab Change-Id: I09c1c15627592eb12016de861d18607b19ecc7b1 * [INTERNAL] Translation delivery: commit by LX Lab Change-Id: I8be52892b22658e37bbd497001c139a5263fcf92
…per (#8780) The button was filling the whole space in the container, which wasn't the desired behaviour. Now the ui5-split-button's height is not modified by outside wrappers.
Issue: - A file could be dragged over a very small transparent area representing the inner input type file. That would mean that the same file couldn't be dropped over the most of the visible ui5-file-uploader DOM. Solution: - Dragged files will be dropped over the root component area. Fixes: #8572
Issue: - There was a transparent border displacing the link's text horizontally. It is mostly visible if there is an actual text component underneath. Solution: - The border is replaced by an outline with an offset. Now the ui5-link component doesn't have an invisible border and it is compliant with the visual specification. Fixes: #8512
* feat(ui5-badge): new property added * chore: styles adapted and parameter values changed * chore: add samples * chore: fix naming and small styling adaptation
Adjusted `ui5-media-gallery` focus display rules. On desktop, focus outline is always visible. For mobile, focus outline only appears with an external keyboard, it remains hidden for touch focus. Related to: #8320
Adjusted `ui5-shellbar` focus display rules. On desktop, focus outline is always visible. For mobile, focus outline only appears with an external keyboard, it remains hidden for touch focus. Related to: #8320
Removes `activeIcon` property in the `textButton` part of our `<ui5-split-button>`. BREAKING CHANGE: The `activeIcon` property ha been remove, as the interaction is considered obsolete by the UX design team. if you previously used `active-icon`: ```html <ui5-split-button id="sbTextActiveIcon" active-icon="accept">Active Icon</ui5-split-button> ``` it's wont take effect anymore even if set. Related to: #8461
…ties (#8816) Renames the `disableScrolling` property, remove `floatingFooter` property and add `fixedFooter` property instead to cover the expected default behaviour. If you have previously used the `disableScrolling` property: ```html <ui5-page disable-scrolling> </ui5-page> ``` Now use `noScrolling` instead ```html <ui5-page no-scrolling> </ui5-page> ``` Previously, by default we have had fixed footer that was fixed at the very bottom of the page. According to the specifications, by default it is expected to have floating footer that floats over the content with a slight offset from the bottom and is always visible. As a result `floatingFooter` property is removed and `fixedFooter` property is added. If you have previously used the `floatingFooter` property in order to have footer that floats over the content ```html <ui5-page floating-footer> <ui5-bar id="footer" slot="footer" design="FloatingFooter"> <ui5-button design="Positive" slot="endContent">Agree</ui5-button> <ui5-button design="Negative" slot="endContent">Decline</ui5-button> </ui5-bar> </ui5-page> ``` Now, that is the default behaviour. In order to change it to fixed footer that is place at the very bottom of the page, use `fixedFooter` instead: ```html <ui5-page fixed-footer> <ui5-bar id="footer" slot="footer" design="Footer"> <ui5-button design="Positive" slot="endContent">Agree</ui5-button> <ui5-button design="Negative" slot="endContent">Decline</ui5-button> </ui5-bar> </ui5-page> ``` BREAKING CHANGE: `disableScrolling` has been renamed, `floatingFooter` property has been removed and `fixedFooter` property has been added instead. Related to: #8461
Change the enum name from `SegmentedButtonMode` to `SegmentedButtonSelectionMode`. The options in the enum are changed from `SingleSelect` and `MultiSelect` to `Single` and `Multiple`. The `mode` property of `SegmentedButton` is changed to `selectionMode`. Also deleted deprecated getter - `selectedItem` and deprecated event detail `selectedItem`. BREAKING CHANGE: The mode property is changed to `SelectionMode` and the values it take from `SingleSelect` and `MultiSelect` to `Single` and `Multiple`. Also deleted deprecated getter - `selectedItem` and deprecated event detail `selectedItem` and now can be used with the `selectedItems` getter and `selectedItems` event detail. Previously the application developers could set the selection mode as follows: ```ts <ui5-segmented-button id="segButtonMulti" mode="MultiSelect"> <ui5-segmented-button-item>Item</ui5-segmented-button-item> <ui5-segmented-button-item>Item</ui5-segmented-button-item> <ui5-segmented-button-item>Click</ui5-segmented-button-item> <ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item> </ui5-segmented-button> ``` Now the application developers could set the selection mode as follows: ```ts <ui5-segmented-button id="segButtonMulti" selection-mode="Multiple"> <ui5-segmented-button-item>Item</ui5-segmented-button-item> <ui5-segmented-button-item>Item</ui5-segmented-button-item> <ui5-segmented-button-item>Click</ui5-segmented-button-item> <ui5-segmented-button-item>SegmentedButtonItem</ui5-segmented-button-item> </ui5-segmented-button> ``` Related to: #8461
Removes the `titleLevel` property of the `ui5-illustrated-message`, since users can set the required title level on the title slot.
Also, now the the slotted element has proper styles and responsiveness.
BREAKING CHANGE: The `titleLevel` property of the `ui5-illustrated-message`is removed.
If you have previously used the `titleLevel` property:
```html
<ui5-illustrated-message title-level="H6>
```
it will no longer work for the component.
Instead, you could set the title of the `ui5-illustrated-message` on the `title` slot, as it follows
```html
<ui5-illustrated-message>
<ui5-title slot="title" level="H3">This is a slotted title</ui5-title>
</ui5-illustrated-message>
```
Related to #8461, #7887
…tate_icon_shrinking
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.
No description provided.