2.0 Planned Changes

[ilhan007]

Features

Integration of popover API in all pop-up based components

• done

Form Support with Form-Associated Custom Elements standard

• done

Timezone support

• done

New Components

• Dynamic Page - high prio
• Form - high prio and will be experimental
• Text
• Tool Layout (after initial 2.0 release)
• Tokenizer - high prio and will be experimental
• AI Prompt Input
• AI Button

Components Features

• List Drag and Drop - high prio (change)
• Tree Drag and Drop
• TabContainer Drag and Drop
• Link with Icon
• New Notifications Experience - high prio
• physical Select Option (leveraging popover API) - high prio
• physical Menu Item (leveraging popover api) - high prio
• physical Input suggestion (leveraging popover api) - high prio
• Color Palette: Item Selection
• Menu Item: endContent slot

Reusable component styles for creating patterns/layouts

• Input Icon - high prio

New Site for Documentation, Samples and API reference - Done

• Live editor, Playground, Dark mode, Icons view

Breaking Changes

@ui5/webcomponents & @ui5/webcomponents-fiori

• Rename after-open to open and after-close to close

Replace all public methods for opening popover, such as openPicker, togglePicker with open property to promote declarative APIs:

• DatePicker#openPicker to be replaced by open property. change
• DateTimePicker#openPicker to be replaced by open property. change
• Input#openPicker to be replaced by open property. change
• Toast#show to be replaced by open property. change)
• Dialog.show method to be replaced with Dialog#open property
• ViewSettingsDialog#show to be replaced by open property. change

@ui5/webcomponents

Wrapping by default (wrappingType="Normal" by default, wrappingType="None" optionally)

• RadioButton
• CheckBox
• Label
• NotificationListItem
• Tag
• Link
• Тext
• Title

List, StandardListItem

• Remove property image in favour of slot image - !should be discussed once more! (depends on suggestion item refactoring)
• Rename slot imageContent to image

StandardListItem

• Rename CustomListItem to ListItemStandard (change)

CustomListItem

• Rename class CustomListItem to ListItemCustom (change)

Badge (ui5-badge rename to ui5-tag)

• Rename component and tag name. Badge (ui5-badge) to to become Tag (ui5-tag) -as Tag term is established on SAP Design specs, and to avoid confusion with the Badging concept. - high prio (change)
• Change default values of design property - from Set3 to Neutral (change)
• Remove design "Set3"

Breadcrumbs (ui5-breadcrumbs)

• Rename property separator-style to separators (aligned with List#separators property) (change)

BusyIndicator (ui5-busy-indicator)

• Rename BusyIndicatorSize options from "Small", "Medium" and "Large" to "S", "M" and L (change)

Card (ui5-card)

• Remove the ICardHeader interface and replace it with the CardHeader component in the Card#header slot type. refactor(ui5-card): remove ICardHeader interface #8497
• Rename property status to additionalText (change)

CardHeader (ui5-card-header)

• Rename status to additionalText (change)

Carousel (ui5-carousel)

• Replace existing items-per-page-s, items-per-page-m, items-per-page-l properties with single items-per-page="S1 M1 L1"
• Rename property page-indicator-style to page-indicator-type (change)

Calendar (ui5-calendar)

• Rename selected-dates-change event to selection-change
• Rename selected-dates-change event details values and dates to selectedValues and selectedDateValues.
• [enhancement] Add new element CalendarDateRange (with properties startValue and endValue) that could be passed to form a range in declarative manner

ColorPicker (ui5-color-picker)

• Rename property color to value - more consistent with the rest of the pickers.

ColorPalletePopover (ui5-color-palette-popover)

• Remove openPopover and showAt methods in favour of open and opener (change)

Combo Box (ui5-combo-box)

• Grouping - Instead of using ComboBoxGroupItem as separator in a flat structure, the API will expect nesting of ComboBoxItems inside ComboBoxGroupItem however we would like to be implemented first in the List and be used later by ComboBox, MultiComboBox, Input with Suggestions.
• Event change won't be fired on arrow up/down any more (only selection-change would be fired)

Input (ui5-input)

• Replace suggestion-item-preview and suggestion-item-select in favour of selection-change (change)

Label (ui5-label)

• Change default of wrapping-type to Normal, e.g the Label will wrap be default, and will only truncate if explicitly set wrapping-type="None". (change)

List (ui5-list)

• Rename HighlightTypes to HighlightType or Highlight as more consistent (comment)
• Rename mode to selectionMode as more descriptive (change)
• Rename busy to loading (change)
• Rename ListMode enumeration to ListSelectionMode (change)
• Rename selection modes values: SingleSelectBegin to SingleStart, SingleSelect to Single, MultiSelect to Multiple, SingleSelectEnd to SingleEnd, SingleSelectAuto to SingleAuto (change)
• ❗ Replace ListGroupHeaderItem item with ListGroupItem component to implement true Grouping. Instead of a flat structure, the API will support nesting of Items inside ListGroupItem to form a group of items. (change)

Menu (ui5-menu)

• Remove starts-section property - to be replaced by new component ui5-menu-separator (similar to ui5-toolbar-separator and ui5-tab-separator) (change)

Multi Combo Box

• Rename property allowCustomValues to noValidation (change)

Popup

• Remove isOpen method in favour of open property

Dialog (ui5-dialog)

• Remove show and close methods in favour of open property. Parameter preventInitialFocus show method is added as a property.

Popover (ui5-popover)

• Rename enum values of PopoverPlacementType#Left to PopoverPlacementType#Start and PopoverPlacementType#Right to PopoverPlacementType#End (change)
• Rename enum values of PopoverHorizontalAlign#Left to PopoverHorizontalAlign#Start and PopoverHorizontalAlign#Left to `PopoverHorizontalAlign#End. (change)
• Rename property placementType to placement (change)
• Remove #hide-backdrop property as the backdrop can be styled with standard CSS ::backdrop selector.
• Remove #modal property as not relevant to the Popover. SAP Design confirmed that these props don't belong to the Popover. - We'll keep this property.
• Remove showAt methods in favour of open and opener. Parameter preventInitialFocus from showAt method is added as a property.

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 progress bar role since ARIA 1.2 . (change)

SegmentedButton (ui5-segmented-button)

• Rename the mode property to selectionMode
• Remove the selectedItem getter - will be replaced by the selectedItems (as more than one items can be selected
• Remove the selectedItem event parameter - will be replaced by selectedItems event parameter
• Rename selection modes values: SingleSelect to Single and MultiSelect to Multiple
• Rename enumeration SegmentedButtonMode to SegmentedButtonSelectionMode

SegmentedButtonItem

• Rename property pressed to selected - more consistent with the selectedItems getter , the selectedItems event detail and the selection-change event

Select (ui5-select)

• Remove menu property (if SelectMenu, SelectMenuOption are being removed)

Selects's Option (ui5-option)

• Remove disabled property - UX and ACC standards suggest to not include any disabled items in the dropdown (change)

SelectMenu, SelectMenuOption (ui5-select-menu, ui5-select-menu-option) - high prio

• Remove the components - the components have been developed to allow adding custom options, but with the popover API, the standard options will allow custom content and the component becomes obsolete

SuggestionItem (ui5-suggestion-item)

The following properties are not specified in the design guidelines. Still, with the integrating the "popover API" in the framework, drop downs can work with physical items, allowing custom suggestion items.

• Remove property type
• Remove property description
• Remove property icon
• Remove property iconEnd
• Remove property image
• Remove property additionalTextState

Title (ui5-title)

• Change default of wrapping-type to Normal, e.g the Title will wrap be default, and will only truncate if explicitly set wrapping-type="None". (change)

Tab (ui5-tab)

• Rename slot subTabs to Items (change)

TabContainer (ui5-tabcontainer)

• Remove fixed property - it should be always fixed=true by design. No design/accessibility spec available. The ui5-panel has a collapse/expand button, the TabContainer - not. (change)
• Remove TabContainerBackgroundDesign enumeration use BackgroundDesign as type for the backgroundDesign property - only the type changes, available values remain the same (Solid, Transparent and Translucent) (change)
• Remove show-overflow property - there are other means to determine the overflow button presence - using the overflowButton slot. (change)
• Rename tab-overflow-mode to overflow-mode (change)
• Refactor ITab interface as described in the comment. (change)
• Rename public method getTabInStripDomRef (name tbd - getItemInStripDomRef or getElementInStripDomRef ) (change)

Table (ui5-table)

• Move Table to another package @ui5/webcompoments-compat (change)

TextArea (ui5-textarea)

• Rename growing-max-lines to growing-max-rows

Token (ui5-token)

• Remove the readonly property - After discussions with the Central Design Team, it was decided that the best approach, when implementing the public Tokenizer component, is to move the logic for the readonly state handling in the Tokenizer itself.

@ui5/webcomponents-fiori

Bar (ui5-bar)

• Move Bar from @ui5/webcomponents-fiori to @ui5/webcomponents` package - as it is widely used by other components there (mainly popovers, dialogs, etc., as header/sub-header)

BarcodeScannerDialog

• Remove the deprecated show method, in favour of the open property.

IllustratedMessage (ui5-illustrated-message)

• Rename size to design- the semantic values “Auto”, “Base”, “Spot”, “Dialog”, “Scene”, and size aspect of this property is not directly clear. (change)
• Remove titleLevel property - users can set the required title level on the title slot. (change)

NotificationListGroupItem (ui5-notification-action)

• Remove showCounter property (same can be achieved by adding numbers to the title property)
• Remove showClose property (latest designs suggest always having a close button)

Page (ui5-page)

• Rename property disableScrolling to noScrolling
• Remove floatingFooter property and add fixedFooter instead to flip the default behaviour.?
• Change Page#default slot type from HTMLElement to Node

Shellbar (ui5-shellbar)

• Renaming of copilot, copilotDomRef and showCoPilot properties. Or, removing in favour of new slot.

• Remove CoPilot Animation feature and the module

import @ui5/webcomponents-fiori/dist/features/CoPilotAnimation.js`

SplitButton (ui5-split-button)

• Remove active-icon property. The property allows to swap out the icon while pressed. However, this feature is not available on any other button.

UploadCollection (ui5-upload-collection )

• Rename mode to selectionMode (change)
• Remove the IUploadCollectionItem interface and replace it with the UploadCollectionItem class in the UploadCollection#items slot type. (change)
• Remove Delete from the mode options as there is hide-delete-btn property available in the UploadCollectionItem to control the presence of the delete button. (change)

Wizard

• Rename the event detail changeWithClick of the step-change event (name not decided - scrolled: true|false or withScroll: true | false)

A11y Changes

Private title property becomes public tooltip

• check if still needed, if yes - make it public and rename it to tooltip and add documentation when it should be used (for example: icon only button)
• all components with existing tooltip property should add documentation for usage

Components with title property:

• SideNavigationItemBase (Change)
• Option (Change)
• Link (Change)

Components with tooltip property:

• ListItem - check if still needed. Consider making the wrapping public, instead of exposing a tooltip
• Button/ToolbarButton
• RatingIndicator

2. accessibilityAttributes

accessibilityAttributes becomes the unified (and only) way to expose role related aria-* attributes to the consumers. Only attributes which will not be part of accessibilityAttributes are the following: accessibleRole, accessibleName, accessibleNameRef, landmarkInfo and tooltip.

Components:

• ListItem - aria-haspopup should be part of accessibilityAttributes
• Avatar/AvatarGroup - aria-haspopup should be part of accessibilityAttributes
• Link
• Button/ToolbarButton
• ShellBar

(Change)

4. Other changes:

• Icon: remove ariaHidden, interactive and accessibleRole and introduce mode property with the following options IconMode.Image (by default as currently implemented, internally renders role="img"), IconMode.Decorative (internally renders role="presentation" and aria-hidden="true"), IconMode.Interactive (role="button", focus and press handling)
• ListItem - remove role property (Change)
• all components using accessibleRole should change the type to enum, not string. For example check the ui5-panel. Affected components: Link, List, ListItem (Change)
• Tree/List/ListItem - remove aria-roledescription property as it is not used. - (Change)

5. Update Accessibility documentation after all changes are merged. (Before release)

In Discussion

Toolbar, ToolbarItem (ui5-toolbar, ui5-toolbar-item) ❗ - (after 2.0 initial release)

• Toolbar Popover API Redesign - The introduction of the popover API can replace abstract items concept for the Toolbar popover. This will enable a more flexible and dynamic approach to managing toolbar items.
• ToolbarItem Class Structure: We are considering the replacement of the base class for ToolbarItem with an interface. This should be done if the popover API is implemented. Physical items can implement the new interface and fit toolbar API as supported components.

TODO [Team Pirin]. New design is evaluated that can affect the API decision, so deeper research needed - explore the design, follow up with SAP Design if needed to learn more.

Cross components

Renaming the ValueState and HighlightType enums values and refactoring of all components with valueState, highlight and additionalTextState properties.

• Rename ValueState enum values
  Warning -> Critical, Error -> Negative, Success -> Positive
• Rename HighlightType enum values
  Warning -> Critical, Error -> Negative, Success -> Positive
• MessageStrip#design Warning is changed to MessageStrip#design Critical
• Dialog.state supported values are changed
• ListItem.highlight supported values are changed
• TreeItem.additionalTextState supported values are changed
• SuggestionItem.additionalTextState supported values are changed
• StandardListItem.additionalTextState supported values are changed
  (change)

@ui5/webcomponents-base

• Remove CSP Support as adopted stylesheets are now supported everywhere. The following module will be removed (change)

import { setUseLinks, setPackageCSSRoot } from "@ui5/webcomponents-base/dist/CSP.js";

• Remove UI5Element#static get render method replaced by renderer (change)

• [x]Remove UI5Element#getStaticAreaItemDomRef method as obsolete (no more static area)

• Remove the Device#isIE() method (change)

• Remove Static Area and Static Area items - after integrating the Popover API, static area won't be required any more.

• Remove fallback to default value and runtime validation [After ui5con, but for 2.0]

• Remove processChildren

@ui5/webcomponents-tools

• Remove the JSDoc plugin - custom elements (change)
• Upgrade to new major wdio version would breaking for consumers of wdio.config.js - check if needed as there is research to use Cypress in future

@ui5/webcomponents-theming

• Remove Belize theme - theme has been deprecated and wont be supported with 2.0 onward.

@ui5/webcomponents-icons

• Remove soccor, keep soccer. (change)

@ui5/webcomponents-icons-business-suite

• Remove add-polygone, keep add-polygon (change)

All packages

• Remove Assets-static.js module - use the dynamic Assets.js instead. (change)

[ilhan007]

All planned changes are merged and due release shortly.