2.0 Summary

[ilhan007]

Release Timelines

• Release 2.0 RC versions in April
  • 2.0.0-rc.0 (2024-04-09)
  • 2.0.0-rc.1 (2024-04-11)
  • 2.0.0-rc.2 (2024-04-18)
  • 2.0.0-rc.3 (2024-05-10)
• Release 2.0 between mid June - mid July

Migration Support

• Migration guide
• Blog post to be provided
• Dev support from UI5 Team if required

Maintenance of 1.x

• Support until the end June 2025 (1 year)
• Downport of bug fixes only

Features

Integration of the popover API in all pop-up based components

Form Support with Form-Associated Custom Elements standard

Timezone support

New Components

• Dynamic Page
• Form
• Text
• Tokenizer

Components Enhancements

• List Drag and Drop (comes with TabContainer)?
• Tree Drag and Drop
• TabContainer Drag and Drop
• New Notifications Experience

Reusable component CSS styles for creating patterns/layouts or other common styling

Use-case: things that are not feasible to be implemented by creating new components or implemented inside the components

• Input Icon - to make a slotted icon interactive (press, hover states) by applying a single CSS class
• Link Icon - to make a slotted icon aligned and styled with the link's text by applying a single CSS class

New Site for Documentation, Samples and API reference

See the preview.

• Live editor
• Playground
• Dark mode
• Icons view

Breaking changes

See the full list here.

• 90% is pure API renaming for better consistency
• several APIs are replaced by alternatives (listed below)
• few APIs are removed without alternatives (listed below)

Framework

Removal of Belize (recommendation: migrate to Horizon)

Theming and Content-Security-Policy(CSP) via adoptedStyleSheets only

Components

Rename of property, event, enumeration values

~35

Replaced API

• Methods openPicker, replaced by open/opener declarative API

• Grouping of Items
  Instead of using ui5-li-groupheader as separator in a flat structure:

<ui5-list>
	<ui5-li-groupheader>group<ui5-li-groupheader/>
	<ui5-li></ui5-li>
	<ui5-li></ui5-li>
	<ui5-li></ui5-li>
</ui5-list>

the API will support true nesting of ListItems inside ListItemGroup:

<ui5-list>
	<ui5-li-group header-text="group">
		<ui5-li></ui5-li>
		<ui5-li></ui5-li>
		<ui5-li></ui5-li>
	<ui5-li-group>
</ui5-list>

to easier bind hierarchical data model to the UI.

• Menu: property starts-section replaced by ui5-menu-separator component.
• List: property image, replaced by slot image
• TabContainer: show-overflow property, replaced by slot overflowButton.
• IllustratedMessage: property titleLevel, replaced by slot title (that you can set the level on).

Removed APIs without alternative

Progress Indicator (ui5-progress-indicator)

Remove disabled property - Progress indicator isn't an interactive element so disabled property make no sense.
Also aria-disabled is deprecated on the progressbar role since ARIA 1.2 .

Selects's Option (ui5-option)

Remove disabled property - SAP UX and ACC standards suggest to not include any disabled items in the dropdown.

Popover (ui5-popover)

Remove the modal and hide-backdrop properties - SAP Design confirmed that these props and behaviour don't belong to the Popover.

Token (ui5-token)

Remove the readonly property - SAP Design Team recommends to not offer the readonly state on Token level, as it only makes sense when multiple Tokens are used inside Tokenizer web component - the readonly state will be handled on Tokenizer level.

TabContainer (ui5-tabcontainer)

Remove fixed property as the behaviour is not backed with specs - that TabContainer is not meant to be expanded/collapsed like a Panel.

[henriquemattos]

Thank you for all the information, transparency, and hard-work of the team. Looking forward to v2 ☺️ .

Would it be possible in the new Documentation project, to have the option of selecting the documentation of older versions, like the https://ui5.sap.com has? At least the last 1-2 releases would be highly appreciated.

[ilhan007]

Hello Henrique @henriquemattos , thank you for the kind words!

Yes, we will definitely add the possibility to browse the 1.x version docs, most likely via dropdown in the navigation bar.

[ilhan007]

Closing the issue as 2.0 has been released - see the blog post what's new!

• Changelog
• Upgrade Guide
• Blog post

Consider the following URLs for UI5 Web Components Documentation
https://sap.github.io/ui5-webcomponents/ - the latest released (2.0.1 as of now)
https://sap.github.io/ui5-webcomponents/nighlty/ - the version under development (that will be released)
https://sap.github.io/ui5-webcomponents/v1/ - the version 1 (1.24.7)

Additionally, you can reach each of the above versions via the dropdown in the documentation website right-most part of the top bar:

FYI @henriquemattos

[henriquemattos]

Great work, @ilhan007 and team. On Friday I was already aware of the docs, and the release of 2.0. Thank you so much! :)