@ui5/create-webcomponents-package

UI5 Web Components - Create Package

Provides an npm init script for creating new "UI5 Web Components" packages.

Usage

with npm

• npm init @ui5/webcomponents-package (the user will be asked for name, port, tag);
• npm init @ui5/webcomponents-package <NEW-PACKAGE-NAME> (the user will be asked for port and tag only).

And with yarn

• yarn create @ui5/webcomponents-package
• yarn create @ui5/webcomponents-package <NEW-PACKAGE-NAME>.

The script creates a new directory, and fills it with a package.json file and all necessary source files, and resources for a new components package.

Resources

• UI5 Web Components - README.md
• UI5 Web Components - Home Page
• UI5 Web Components - Playground and API Reference

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.

Changelog

1.10.0 (2023-01-20)

New component

• ui5-tree-item-custom: initial implementation (#5962) (b148c23)

Typescript

• framework: rewrite the framework in Typescript and provide TS types for all framework APIs (#5982) (bd184d8)(#6147) (39dcbfd)(#6159(#6156)
• components: rewrite components in Typescript and provide TS types (#6076) (918b4fb)

• • ui5-avatar: (#6272) (3f3a03f)
• • ui5-bar: (#6194)
• • ui5-badge: (#6287)
• • ui5-breadcrumbs: (#6254) (02a6d64)
• • ui5-button, ui5-date-picker, ui5-calendar: (#6173) (7232ca0), closes #6080
• • ui5-checkbox: (#6292) (49cef2d)
• • ui5-card, ui5-card-header: (#6290)
• • ui5-color-picker: (#6213)
• • ui5-color-palette: (#6244) (ec3bf43)
• • ui5-dialog: (#6276)
• • ui5-daterange-picker: (#6246) (63986f5)
• • ui5-dynamic-side-content: (#6209)
• • ui5-file-uploader: (#6211)
• • ui5-input: (#6235)
• • ui5-illustrated-message: (#6195) (046c779)
• • ui5-link: (#6204)
• • ui5-list, ui5-li, ui5-li-custom: (#6166) (12b3570)
• • ui5-menu: (#6224)
• • ui5-message-strip: (#6248) (0325626)
• • ui5-page: (#6205)
• • ui5-panel: (#6202)
• • ui5-popover: (#6235)
• • ui5-progress-indicator: (#6201)
• • ui5-responsive-popover: (#6288)
• • ui5-slider: (#6251) (b9a082a)
• • ui5-step-input: (#6225)
• • ui5-split-button: (#6208)
• • ui5-switch: (#6210)
• • ui5-table, ui5-table-row, ui5-table-column, ui5-table-*: (#6253)
• • ui5-timepicker: (#6240) (f1035eb)
• • ui5-timeline: (#6206)
• • ui5-viewsettings-dialog: (#6218) (ee3bbe4)
• • ui5-upload-collection: (#6194)
• • ui5-upload-collection-item: (#6296)

Features

• framework: support decorators for defining custom elements metadata (#6072) (fc9ee6e)
• ui5-carousel: allow page indicator to always display numbers (#6245) (36ef5a6), closes #5409
• ui5-icon: add new design property (#6261) (566c46b), closes #6019
• ui5-illustrated-message: illustrations update in the default set (#6013) (329f80c)
• ui5-illustrated-message: updated missing illustration texts (#6075) (78c3227)
• ui5-input: correct disabled state style for horizon (#6046) (42a64e7)
• ui5-li: new imageContent slot is added (#6083) (2dc0d2c), closes #5462
• ui5-li: navigation mode is enabled (#6024) (97afa69)
• ui5-menu: add open/opener functionality and open/close events (#5984) (951f09a)
• ui5-range-slider: expose shadow parts (#6258) (518fe86)
• ui5-shellbar: add new accessibilityAttributes property (#6117) (056ed9f)
• ui5-shellbar: programmatically show search field (#6085) (e0658a6), closes #5818
• ui5-shellbar: use header semantic element (#6146) (9865eb2)
• ui5-table: add inline display property (#6007) (d41445f)
• ui5-textarea: integrate label enablement support (#6027) (e1b0271), closes #5710
• ui5-wizard: adopt responsive paddings (#6061) (402bc28), closes #5597
• ui5-card-header, ui5-radio-button, ui5-tabcontainer, ui5-dialog: display focus outline via keyboard only (#6084) (848997b)

Bug Fixes

• framework: check and report validity of input components (#5987) (22d5f60)
• framework: add mapping for norwegian locale (#6284) (7fef62f), closes #6283
• framework: fix processing of i18n text with formater (#6041) (f155dee)
• framework: set Content-Type header on testsuite (#6108) (fae3f91)
• ui5-multi-input, ui5-multi-combobox: remove value state message spacing (#6233) (fd13f96)
• ui5-avatar: fix icon rendering inside ui5-avatar (#6060) (9899466), closes #6043
• ui5-avatar: fix incorrect img slot border alignment (#6133) (dc410d1), closes #5919
• ui5-avatar: improve documentation of initials property (#6138) (8cc1303), closes #6136
• ui5-button: adjust tooltip display (#5936) (98dd38e), closes #5083
• ui5-calendar: adjust displayed width (#6196) (5eaf13c), closes #5641
• ui5-calendar: set proper roledescription on the pickers (#6197) (ebd3cc0), closes #5858
• ui5-carousel: fix screen readers reading when a page is changed (#6105) (5da4e5f)
• ui5-checkbox: fix focus outline (#6033) (3fa961c), closes #5915
• ui5-date-picker: align styles to input (#6149) (8d3e3f1)
• ui5-dialog, ui5-popover: change header level to H1 (#6293) (a9130e8)
• ui5-dialog: fix block layers when multiple dialogs are open (#6183) (018f521)
• ui5-icon: add cursor "pointer" for interactive icons (#6042) (58fba64)
• ui5-icon: improve showTooltip property documentation (#6165) (10849b7)
• ui5-illustrated-message: fix i18n texts (#6037) (68350bc), closes #5974
• ui5-illustrated-message: fix resizing issues (#6179) (d52c8af)
• ui5-input: correct input value on item re-selection (#6252) (17bedbe), closes #6091
• ui5-input: fix typo in renderer (#6185) (0134ed1)
• ui5-input: make icons responsive when height is changed (#5908) (3d3f047)
• ui5-li: allow support for anchor tags in ListItem (#6126) (db51f59), closes #6121
• ui5-li: bottom border is now visible in evening horizon (#6129) (3dbd53d), closes #6116
• ui5-multi-combobox: delete long tokens when icon is clicked (#6069) (18e0b6e), closes #6048
• ui5-multi-combobox: force tokenizer layouting when selected items are added (#6168) (9760c61), closes #6092
• ui5-multi-combobox: prevent tokenizing of group headers (#6230) (ff920da), closes #6222
• ui5-multi-input: focus input when all tokens are deleted (#6170) (f087209), closes #6073
• ui5-panel: remove aria controls from expand button (#6167) (473e4bb), closes #6157
• ui5-popover: clicking on iframe now closes an open popover (#6145) (f01e872), closes #6087
• ui5-range-slider: fire change event after value swapping (#6057) (4134a7c)
• ui5-segmented-button: align mousedown and mouseup on item behaviour (#6142) (9d687d8), closes #5390
• ui5-select: correct typo in --_ui5_select_label_color (#6217) (117b9f8)
• ui5-shellbar: fixed typo in samples (#6128) (c6799f4), closes #6116
• ui5-shellbar: focus on popover fixed (#6113) (61c9989)
• ui5-side-navigation: fixed accessibility of the Popover (#6045) (e0e13e1), closes #5827
• ui5-side-navigation: fixed accessibility roles and attributes when Side Navigation is collapsed (#5877) (92b9dc9), closes #5827
• ui5-side-navigation: focus handling of tree inside popover (#6155) (cf024bd)
• ui5-split-button: add split-arrow-down icon to dependencies (#6065) (1473859)
• ui5-tabcontainer: added tab expand button tooltip (#6100) (8d81f01)
• ui5-tabcontainer: adding selected tab programatically deselects previously selected tab (#6036) (e73ec21), closes #5932 #5932
• ui5-table: apply correct color to the header row text (#6232) (6ad1c4c)
• ui5-textarea: adjust styles according to the visual specification (#6274) (2075b2c)
• ui5-textarea: fix the minimum width of the component (#6054) (1b5b24a)
• ui5-tokenizer: apply correct color to N-more text (#6267) (7208c2f)
• ui5-tree: change isTreeItem getter visibility (#6200) (9a7c91a)
• ui5-tree: correct forwarding of mode value to items (#6277) (665107b)
• ui5-wizard: allow scrolling when step is bigger than viewport (#6241) (259b61a)
• ui5-wizard: prevent step overlapping in navigator (#6169) (9349e16), closes #6067