@ui5/webcomponents-base
Advanced tools
Changelog
2.0.0-rc.4 (2024-05-29)
after-close to close (#8967) (d05839d)open property (#9001) (1c1cea6)Before the ui5-input suggestions popover could be opened by calling openPicker() :
const input = document.getElementById("exampleID");
input.openPicker();
Now the suggestions popover is opened by setting the open property to true:
const input = document.getElementById("exampleID");
input.open = true;
Highlight enum should be imported differently.
Before:import HighlightTypes from "@ui5/webcomponents-base/dist/types/HighlightTypes.js";
Now:
import Highlight from "@ui5/webcomponents-base/dist/types/Highlight.js";
Before:
<ui5-toolbar-button icon="home" icon-end>Button</ui5-toolbar-button>
Now:
<ui5-toolbar-button end-icon="home">Button</ui5-toolbar-button>
or
<ui5-toolbar-button icon="employee" end-icon="home">Button</ui5-toolbar-button>
ui5-list, ui5-notification-list should be used as a container for ui5-li-notification-group and ui5-li-notification components.Previously the application developers were defining notifications in this way:
<ui5-list>
<ui5-li-notification-group title-text="Group Title" >
<ui5-li-notification..
To support accessibility, developers should now use the ui5-notification-list as seen below:
<ui5-notification-list>
<ui5-li-notification-group title-text="Group Title" >
<ui5-li-notification..
showCoPilot property of the ui5-shellbar is removed.If you have previously used the showCoPilot property:
<ui5-shellbar show-co-pilot></ui5-shellbar>
it will no longer work for the component.
CoPilotAnimation feature of the ui5-shellbar is removed.If you have previously used the CoPilotAnimation feature:
import CoPilotAnimation from "@ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js"
it will no longer work for the component.
copilotDomRef getter of the ui5-shellbar is removed.If you have previously used the copilotDomRef public getter:
shellbar.copilotDomRef
it will no longer work for the component.
co-pilot-click event of the ui5-shellbar is removed.
If you have previously used the co-pilot-click public event:shellbar.addEventListener("ui5-co-pilot-click", function(event) {
...
});
it will no longer work for the component.
You can achieve similar functionality with the new slot:
HTML:
<ui5-shellbar>
<ui5-toggle-button id="assistant" icon="sap-icon://da" slot="assistant"></ui5-toggle-button>
</ui5-shellbar>
JavaScript:
assistant.addEventListener("click", function (event) {
const toggleButton = event.target;
toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da";
});
SelectMenu & SelectMenuOption Changed item Old New SelectMenu ui5-select-menu removed SelectMenuOption ui5-select-menu-option ui5-option-custom If you have previously used the ui5-select-menu and ui5-select-menu-option:
<ui5-select menu="selectMenu"></ui5-select>
<ui5-select-menu id="selectMenu"> <ui5-select-menu-option> <div class="optionContent">custom</div> </ui5-select-menu-option> </ui5-select-menu> Now use just ui5-select and ui5-option-custom instead: <ui5-select> <ui5-option-custom> <div class="optionContent">custom</div> </ui5-option-custom> </ui5-select> Select Changed item Old New property menu removed The menu property of the ui5-select is removed. * **ui5-button:** iconEnd property is changed from boolean to string type and now can accept name for second/end icon.Before:
<ui5-button icon="home" icon-end>Button</ui5-button>
Now:
<ui5-button end-icon="home">Button</ui5-button>
or
<ui5-button icon="employee" end-icon="home">Button</ui5-button>
after-close event has been renamed to close. If you previously used it like:toast.addEventListener("after-close", (event) => {
});
Now you have to use it like:
toast.addEventListener("close", (event) => {
});
Related to: https://github.com/SAP/ui5-webcomponents/issues/8461
features/InputElementsFormSupport.js feature has been deleted and now, form elements works natively in form elements.Previously date ranges were declared as follows:
<ui5-calendar selection-mode="Range"> <ui5-date value="Jan 20, 2021"></ui5-date> <ui5-date value="Jan 30, 2021"></ui5-date> </ui5-calendar>Now they are declared using a ui5-date-range:
<ui5-calendar selection-mode="Range"> <ui5-date-range start-value="Jan 20, 2021" end-value="Jan 30, 2021"></ui5-date-range> </ui5-calendar> * **ui5-popup:** Event names `after-close` and `after-open` are now named `close` and `open`. Previously the application developers could subscribe to the events as follows: ```ts popup.addEventListener("after-open", function() { //... }); popup.addEventListener("after-close", function() { //... }); ```Now the application developers should include the ui5-bar as follows:
popup.addEventListener("open", function() {
//...
});
popup.addEventListener("close", function() {
//...
});
hideBackdrop is removed.Previously the application developers could define a modal popover without visible backdrop as follows:
<ui5-popover modal hide-backdrop>
Now the application developers can use the standard ::backdrop CSS selector
<style>
.transparentBackdrop::backdrop {
background: transparent;
}
</style>
...
<ui5-popover modal class="transparentBackdrop">
Readme
Contains the base files for all Web Components, most notably @ui5/webcomponents-base/dist/UI5Element.js.
| Affects | Import | Description |
|---|---|---|
| Configuration | @ui5/webcomponents-base/dist/config/Theme.js | Sets Theme Configuration |
| Configuration | @ui5/webcomponents-base/dist/config/Language.js | Sets Language Configuration |
| Configuration | @ui5/webcomponents-base/dist/config/AnimationMode.js | Sets Animation Mode Configuration |
| Configuration | @ui5/webcomponents-base/dist/config/NoConflict.js | Sets "NoConflict" Mode Configuration - if enabled all custom events are fired with the ui5- prefix |
| Framework | @ui5/webcomponents-base/dist/features/OpenUI5Support.js | Adds integration with the OpenUI5 framework for resources re-use |
| Components | @ui5/webcomponents-base/dist/features/F6Navigation.js | Adds support for F6 fast group navigation |
| Components | import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.js" | Applies direction ("ltr"/"rtl") - re-renders all RTL-aware components |
| Components | import { setCustomElementsScopingSuffix } from "@ui5/webcomponents-base/dist/CustomElementsScope.js" | Adds suffix to the tag names of all components |
| Components | @ui5/webcomponents-base/dist/util/InvisibleMessage.js | Provides a way to expose dynamic content changes that can be announced by screen readers |
applyDirection.jsapplyDirectionBoot.jsattachBootCustomElementsScope.jssetCustomElementsScopingSuffixgetCustomElementsScopingSuffixsetCustomElementsScopingRulesgetCustomElementsScopingRulesIgnoreCustomElements.jsignoreCustomElementsi18nBundle.jsregisterI18nLoadergetI18nBundlePropertiesFileFormat.jsparsePropertiesRender.jsrenderFinishedWe welcome all comments, suggestions, questions, and bug reports. Please follow our Support Guidelines on how to report an issue, or chat with us in the #webcomponents channel of the OpenUI5 Community Slack.
Please check our Contribution Guidelines.
Copyright (c) 2019 SAP SE or an SAP affiliate company. All rights reserved. This file is licensed under the Apache Software License, Version 2.0 except as noted otherwise in the LICENSE file.
FAQs
UI5 Web Components: webcomponents.base
The npm package @ui5/webcomponents-base receives a total of 23,050 weekly downloads. As such, @ui5/webcomponents-base popularity was classified as popular.
We found that @ui5/webcomponents-base demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.