UI5 Web Components - Theme Base
DEPRECATED as of version 1.0.0-rc.16
This package was renamed from theme-base to theming to better reflect its purpose.
Use @ui5/webcomponents-theming instead.
Provides common theming assets, used by other UI5 Web Components packages, such as main and fiori.
This package is intended for UI5 Web Component development and currently provides no app development related public APIs.
Provided assets
The assets, provided by this package, are additional themes:
import "@ui5/webcomponents-theme-base/dist/Assets.js";
Note: These assets are already imported by the UI5 Web Components packages that need them.
Resources
Support
We 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.
Contribute
Please check our Contribution Guidelines.
License
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.
1.0.0-rc.16 (2021-11-09)
New Component
- ui5-color-palette-popover: initial implementation (#3746) (894628f)
New Theme
- theming: introduce
preview version of SAP Horizon theme (#3991) (b1afaf0), closes #3988
New Icons
- icons: introduce
SAP-icons5.0 font based icons (#4244) (c0a226e)
Features
- framework: allow using a custom i18n library (#4119) (56f366f)
- framework: implement better custom theme support (#4121) (31e30f8)
- framework: handle PAGE UP and PAGE DOWN in ItemNavigation (#3727) (91a974f)
- framework: load new "72Black" font face (#4139) (2be7869)
- framework: enable
getDomRef for abstract web components (#4210) (d1ebea3) - tools: create NPM init script (#4090) (5608e04)
- ui5-button: implement SAP Horizon theme (#4126) (90483e2)
- ui5-step-input: implement SAP Horizon theme (#4247) (4180fe7)
- inputs: implement SAP Horizon theme (#4222) (66d17f7)
- ui5-avatar: implement SAP Horizon theme (#4225) (52311c4)
- ui5-busy-indicator: implement SAP Horizon theme (#4179) (6dc366a)
- ui5-calendar: implement SAP Horizon theme (#4233) (f7d9113)
- ui5-card: implement SAP Horizon theme (#4189) (e0e488f)
- ui5-carousel: implement SAP Horizon theme (1ed725f)
- ui5-color-picker: implement SAP Horizon theme (#4177) (1a201d6)
- ui5-dialog, ui5-popup: implement SAP Horizon theme (#4175) (fa2ed03)
- ui5-file-uploader: implement SAP Horizon theme (#4243) (b25ce73)
- ui5-input, ui5-combobox, ui5-multicombobox: implement SAP Horizon theme (#4182) (1f1db07)
- ui5-link: implement SAP Horizon theme (#4180) (410a8fb)
- ui5-messageStrip: implement SAP Horizon theme (#4167) (7026564)
- ui5-panel: implement SAP Horizon theme (#4170) (1865ffa)
- ui5-progress-indicator: implement SAP Horizon theme (#4226) (fdde4d0)
- ui5-radio-button: implement SAP Horizon theme (#4181) (2309c30)
- ui5-rating-indicator: implement SAP Horizon theme (#4173) (daba3f0)
- ui5-segmented-button: implement SAP Horizon theme (#4197) (33d0f60)
- ui5-select: implement SAP Horizon theme in dropdown (#4229) (4ac73c3)
- ui5-shellbar: implement SAP Horizon theme (#4251) (7500a08)
- ui5-slider, ui5-range-slider: implement SAP Horizon theme (#4168) (a19159b)
- ui5-switch: implement SAP Horizon theme (#4156) (e3f82a8)
- ui5-textarea: implement SAP Horizon theme (#4237) (37e87c8)
- ui5-time-picker: implement SAP Horizon theme (16f83d7)
- ui5-tab-container: implement SAP Horizon theme (#4207) (8c80e57)
- ui5-table: implement SAP Horizon theme (#4165) (fcfb180)
- ui5-timeline: implement SAP Horizon theme (13a168e)
- ui5-toast: implement SAP Horizon theme (#4174) (3618617)
- ui5-wizard: implement SAP Horizon theme (#4172) (67eea9b)
- ui5-badge: implement SAP Horizon theme (#4019) (7deccd1), closes #4043
- ui5-calendar: support secondary calendar type (#3634) (fca7508)
- ui5-card: introduce
accessibleName property (#4021) (54fdb3a) - ui5-card-header: implement
ariaLevel property (#3878) (b2b2ccd) - ui5-carousel: implement F7 keyboard functionality (#3559) (df0ace8), closes #3092
- ui5-checkbox: implement SAP Horizon theme (#4031) (33ee202), closes #404
- ui5-date-picker: introduce preventable change and input events (#3609) (05e0769), closes #3516 #3516
- ui5-illustrated-message: add TNT illustration set (#3857) (0ade371)
- ui5-illustrated-message: introduce
subtitle slot (#3633) (96ccf93), closes #3557 #3557 - ui5-input, ui5-date-picker: implement SAP Horizon theme (#4006) (e137de3), closes #4040 #4046
- ui5-panel:
noAnimation property introduced (#3694) (fc7972b), closes #3505 - ui5-popover, ui5-responsive-popover: implement SAP Horizon theme (#4020) (441776e)
- ui5-product-switch: add
selected state to an item (#3872) (9e7928b) - ui5-progress-indicator: implement
displayValue property (#3879) (50008d0), closes #3573 #3573 - ui5-radio-button: implement SAP Horizon theme (#4008) (6cb3eb0), closes #4042
- ui5-responsive-popover: add
preventInitialFocus parameter to showAt method (#3595) (62d1079), closes #3473 - ui5-side-navigation: add tooltip to all items (#3921) (5849a38), closes #3549 #3549
- ui5-switch: implement SAP Horizon theme (#4007) (6e51776), closes #4039
- ui5-tabcontainer: implement SAP Horizon theme (#4079) (89d945a), closes #4045
- ui5-tree: introduce
item-mouseover/item-mouseout events (#3990) (e8b6145) - ui5-upload-collection: add
accessibleName property (#3917) (ea79fb3), closes #3768 #3768 - ui5-view-settings-dialog: introduce
filter section (#3616) (52987c2)
BREAKING CHANGES
- framework: The async
fetchI18nBundle function is now removed. Use async getI18nBundle instead #4128 - icons: The icons SVG imports are changed. If you previously had
import "@ui5/webcomponents-icons/dist/accept.svg";
you have to import the SVGs from the v4/ (SAP-icons4.0) or the v5/ (SAP-icons5.0) directory:
import "@ui5/webcomponents-icons/dist/v4/accept.svg"; // for SAPIcons4.0
import "@ui5/webcomponents-icons/dist/v5/accept.svg"; // for SAPIcons5.0
- theming:
theme-base package deprecated in favour of theming package. #4133 - ui5-breadcrumbs-item: BreadcrumbsItem's
stableDomRef property has been removed - use getDomRef to get the matching actual DOM ref. #4284 - ui5-message-strip: The MessageStrip component's tag name has been renamed from
ui5-messagestrip to ui5-message-strip. #4268 - ui5-input: The
suggestion-scroll event has been removed as no UX specified. #4141 - ui5-option, ui5-combobox-item, ui5-multi-combobox-item, ui5-tab: The
stableDomRef property has been removed - use getDomRef to get the matching actual DOM ref. #4210. - ui5-shellbar-item: ShellBarItem's event
item-click has been renamed to click. #4282 - ui5-wizard: The
accessible-name property has been removed. #4262
Bug Fixes
- ui5-*: add global styles for
tap-highlight-color (18dab92) - ui5-avatar: correct background when
image slot is used (#4117) (81d7815) - ui5-button: fix hover state for combi device(#4100) (6ab905c)
- ui5-card: fix
accessibleNameRef value (#4118) (07e8d44), closes #3681 - ui5-combobox: fix autocomplete on Safari (#3999) (2ee4feb)
- ui5-date-picker: fox hover state on
readonly is now fixed (#4272) (535d0e5) - ui5-datetime-picker: fix the focus border (#4250) (9404c73)
- ui5-datetime-picker: fix JS error not thrown on Firefox browser (#4164) (7d773d5), closes #4136
- ui5-dialog: fix resize handler console warning ([#4138](https://github.com/SAP/ui5-webcompon
- ui5-input: escape HTML before highlighting suggestions (XSS) (2a4919e), closes #4245
- ui5-input: prevent suggestion popover open on focusin (#3997) (0b3e12f)
- ui5-avatar: fix font-size and color-scheme (#3799) (ea8ef59)
- ui5-bar: fix center alignment
middleContent slot (#3719) (d5a0a3a), closes #3456 #3456 - ui5-calendar: fix year picker's button text (#3665) (5857496), closes #3658
- ui5-checkbox: fix component square's border-radius (#4073) (c70942b)
- ui5-color-picker:
change event is now fired on opacity change (#3645) (9ee329a) - ui5-combobox: fix arrow navigation functionality (#3928) (fea941a)
- ui5-dialog: fix scroll blocking (#4092) (e66ab79)
- ui5-file-uploader: activate on ENTER and SPACE when screen reader virtual cursor is on (#3944) (159687e), closes #3767 #3767
- ui5-flexible-column-layout: fix speech output on layout arrows (#4034) (272e600), closes #3699
- ui5-icon: set
aria-hidden=true to decorative icons (#3983) (9101130), closes #3954 - ui5-input: fix behaviour on mobile device (#4025) (bab54f6)
- ui5-li-notification: fix icon padding in RTL (#3876) (6ebfecb)
- ui5-link: add underlining in the regular state in HCB/HCW themes (#3960) (903a480)
- ui5-list: change role mappings so no interactive elements are nested (#3952) (6d98d0c), closes #3927
- ui5-list: preven SPACE keydown (#4088) (e9c5287), closes #4049
- ui5-list, ui5-table, ui5-notification, ui5-busy-indicator:
getFocusDomRef returns the correct element when the state is busy (#3951) (ec81c15), closes #3922 - ui5-multi-combobox: fix value reset on ESC (#3958) (ed128db)
- ui5-multi-combobox: prefilter selected items on
n-more click (#3931) (2ebc6a7) - ui5-multi-combobox: revert selection after CLOSE button is pressed (#3938) (104ec37), closes #3764
- ui5-multi-combobox: select an item when value matches and ENTER is pressed (#3942) (ec4ecc8), closes #3809
- ui5-rating-indicator: apply correct color for
readonly unselected icon (#3992) (5854e0f) - ui5-select: fix screen reader speech out when popover is open (#3705) (06c193a), closes #3617
- ui5-table:
select all column is now sticky (#3950) (9530a5b) - ui5-timeline: elements with role
option have a parent element with role listbox (#4053) (2b27754), closes #3459 - ui5-view-settings-dialog: import all dependencies (#4074) (11d529e)
- ui5 card: exploratory testing issues (#3894) (f6bce94)
- ui5-avatar: documentation improvements (#3909) (833040d)
- ui5-avatar, ui5-icon: attach onclick handler based on interactive property (#3742) (cbdae54)
- ui5-badge: update accent colors (#3926) (7c45ff7), closes #3923 #3923
- ui5-badge: update parameters for color-scheme="8" (#3814) (9f4a93e)
- ui5-calendar: ACC improvements (#3789) (9f40233)
- ui5-calendar: keyboard handling now compliant with the specification (#3649) (768d1e7)
- ui5-card: correctly set aria-labelledby (#3692) (1e57b00), closes #3643
- ui5-card: exploratory testing issues (#3881) (75023c1)
- ui5-color-palette-popover: fix event params (#3873) (1066030)
- ui5-combo-box: Link in value state message is now accessible (#3901) (5fd1643), closes #3855 #3855
- ui5-combobox: Fix value reset on ESC #3886 (ae74add), closes #3784 #3784
- ui5-input: adjust value state paddings according to specifications (#3833) (4c8ff0c), closes #3611 #3611
- ui5-input: fix value reset on ESC (#3886) (3f1c267), closes #3784 #3784
- ui5-input: remove data-sap-no-tab-ref attribute from the inner input (3e49773), closes #3603
- ui5-li: add "Selected" text to item's accessible name (#3853) (2924010)
- ui5-multi-combobox: prevent setting max-width of dialog header on mobile (#3943) (97d0382), closes #3763
- ui5-product-switch-item: no-wrap title behavior added when subtitle is not present (#3800) (3f007fd)
- (ui5-li): add accessible name to single select radio button (#3842) (c77d9c9)
- ComboBox arrow now correctly toggles the picker (#3937) (19e77da)
- ui5-card-header: no longer fires click event twice (#3823) (d4f4e91)
- ui5-color-palette: align space between swatches (#3912) (8ad1fdd)
- ui5-color-palette: focus outline is properly visualized (#3648) (2e708d4)
- ui5-color-picker: opacity slider doesn't affect the hue slider (#3664) (3afe78a)
- ui5-combobox: fix double announcement on key navigation (#3495) (0ff3325)
- ui5-date-picker: calendar horizontal center align (#3905) (75aef88)
- ui5-date-picker: fix
dateValue getter to return most recent value (#3629) (bee34da), closes #3516 - ui5-date-picker: keyboard handling now compliant with the specification (#3636) (24467f8), closes #3091
- ui5-daypicker: fix js error (#3677) (b6d643a)
- ui5-dialog: correctly restore body scrolling on ESC (#3696) (1c8e656), closes #3690
- ui5-dialog: fix console warning from exploratory testing (#3893) (c648714), closes #3620
- ui5-illustrated-message: add missing dependencies (#3822) (75e6a8c)
- ui5-illustrated-message: remove style attribute of svg (#3605) (41f72e3)
- ui5-input: prevent exception in console when input is clicked on mobile (#3729) (8d05606)
- ui5-label: adjust colon margins (#3897) (ccca671)
- ui5-label: wrapping now works when used in CustomListItem (#3852) (8333f5e)
- ui5-li-groupheader: change role option (#3869) (90e718b)
- ui5-li-groupheader: fix row height (#3610) (79d259e), closes #3606
- ui5-link: the anchor element inherits its text-decoration (#3911) (bb8629c), closes #3837 #3837
- ui5-popover: fix arrow placement when reaching a border (#3821) (9913632), closes #3391
- ui5-popover: fix initial flickering (#3910) (6afad2a)
- ui5-popover: restrict growing width on small screens (#3820) (bd0b33a)
- ui5-list: remove unnecessary scrollbar in RTL for Multiselect mode (#4085) (04c09da), closes #3947
- ui5-radio-button: exploratory testing issues (#3740) (23ce10f)
- ui5-segmented-button: correct focus on first click (#3906) (6820dd7)
- ui5-segmented-button: keyboard handling now compliant with the specification (#3709) (d34afc1)
- ui5-select: align value state to visual specification (#3655) (cce6505), closes #3611
- ui5-select: fix selection change with keyboard (#3704) (68da439)
- ui5-side-navigation: fix RTL behaviour (#3774) (cb39444)
- ui5-slider: keyboard handling now works correctly in RTL (#3949) (f6dee74)
- ui5-slider: show tooltips when component has focus (#3899) (952445d)
- ui5-panel: add border bottom when fixed (#4234) (a19e401)
- ui5-shellbar: fix public readonly getters (#4283) (d90daf5)
- ui5-shellbar: fix JS error on custom action press (#4281) (c73294b)
- ui5-shellbar: remove unnecessary
aria-label from buttons (#3981) (d60120d), closes #3953 - ui5-shellbar: remove empty secondary title wrapper (#3737) (28d9a1a), closes #3698 #3698
- ui5-tabcontainer: fix CSS selector rule (#4261) (#4273) (24ff145)
- ui5-tabcontainer: paddings are changed according to the spec (#4166) (0bb0b92)
- ui5-table: add missing dependency to Checkbox (#4199) (0f6e224), closes #4094
- ui5-table: hide row columns on minWidth (#4193) (bf2495b)
- ui5-tabcontainer: change paddings to full-fill the specs (#4196) (3fd8b48)
- ui5-textarea: value state message link is now accessible (#3916) (015e3ef)
- ui5-timeline: align indicator in compact mode (#3902) (0c31502)
- ui5-timeline: keyboard handling is now compliant with the specification (#3722) (2ad208e)
- ui5-timepicker: correct navigation to the am/pm slider (#3920) (ba38d4c)
- ui5-toast: announce content when ui5-toast is shown (#3939) (66901ad)
- ui5-toggle-button: SHIFT+SPACE cancels the action (#3713) (48adbbe)
- ui5-tokenizer: fix invisble texts styling (#3394) (bc62eaa)
- ui5-tree, ui5-table, ui5-side-navigation: fix unnecessary scrollbar in RTL is removed (#3948) (61fe0fe)
- ui5-upload-collection: fix
no files heading HTML tag (#3930) (e020249) - ui5-wizard: grouped steps could be activated (#3961) (be36219)
- ui5-wizard: step titles are now visible on phone (#3895) (9a183b4)
- ui5-wizard: remove unneeded aria properties (#4262) (7fa969b)
- framework: removing the base theme works with adopted stylesheets (#4158) (aa1f594)
- framework: detach events correctly to prevent memory leaks (#3941) (6c877ee)
- framework: fix init package script bugs (#4069) (2e68d32)
- framework: apply RTL for components with popovers (#3657) (28e868b)
Code Refactoring
- ui5-breadcrumbs-item: remove
stableDomRef public property (#4284) (ecec275) - ui5-input: remove
suggestion-scroll event (#4141) (3a0abee) - ui5-message-strip: rename tag name (#4268) (ec30ec2)
- ui5-shellbar-item: rename
item-click to click (#4282) (4cd86b1)
