[UI5 Web Components 2.0] Changes suggestion list [Topic RL]

[ilhan007]

Issue Description

The goal is to gather a list with breaking changes that you are willing to do to improve/simplify the components API.

• list deprecated APIs within your components that should be removed with 2.0
• list APIs that we would like to improve and change before releasing 2.0

There is already this issue #4460 with changes we already identified, so first take a look of it - it could be that some of your suggestions are already proposed.

[hristop]

Internal BLI is created: BGSOFUIRILA-3769

[ilhan007]

Components

Combo Box

• loading: empty list if the property is set to true
• grouping: items to be nested
• change event should not be fired upon navigation. To be fired on click on an item, focus out and enter key
• input event to remove filterValue docs
• selection-change consider preventDefault() scenario

Changes agreed:

• loading - name and property remains, visually the loading will change but won't be a breaking change
• Grouping - of single level of nesting to be supported, however we would like to be implemented first in the List and be used later by ComboBox, MultiComboBox, Input with Suggestions.
• change - the event won't be fired on arrow up/down any more (only selection-change would be fired)
• introduce before-selection-change to allow prevention as early as possible.

Input

• Numeric Input?
• rename suggestion-item-preview to selection-change
• remove suggestion-item-select?
• remove previewItem getter
• integrated InputSuggestions in Input
• rework suggestion-item-select preventDefault() logic

Changes agreed:

• Keep type=number, but the support is restricted to the native input type="Number"
• Rename suggestion-item-preview to selection-change
• [enhancement] integrated InputSuggestions in Input
• Replace suggestion-item-preview and suggestion-item-select in favour of selection-change

Message Strip

Multi Combo Box

• loading: implement new property (after 2.0?)
• allowCustomValues: rename to noValidation
• selection-change: fire events before updates.

Multi Input

Changes agreed:

• Rename noValidation to allowCustomValues:
• selection-change: better before-selection-change

Panel

• toggle: move event firing before action to improve prevention

Changes agreed:

• preventDefault does not make sense for the Panel

Rating Indicator
Range Slider
Slider
Text Area
Toast

Wizard

• Change naming of changeWithClick property

Changes agreed:

• Rename event detail changeWithClick property to something better scrolled: true|false, withScroll: true | false

Page

• disableScrolling to become noScrolling
• floatingFooter is boolean default true? Change name and implementation (fixedFooter)?
• default slot might be a Node

Changes agreed:

• Rename disableScrollingto noScrolling
• Rename floatingFooter to fixedFooter
• Change default slot to accept Node (not only HTMLElement)

Elements

• ComboBoxItem

• ComboBoxGroupItem

• MultiComboBoxItem

• MultiComboBoxGroupItem

• SuggestionItem

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

Changes agreed:

• remove the mentioned properties

• SuggestionGroupItem

Token

• remove readonly property

Changes agreed:

• Remove the readonly property.

• WizardTab

WizardStep

• [enhancement] revise selected + disabled scenario

General Issues

• align accessibleName and accessibleNameRef default values - to be followed up

• revise FormSupport? Introduce native html elements as slots for all form elements - will be addressed with Form Associated APIs

• compare Positive with Success. Do we need 10 different Design enums?
  => to be followed up with SAP Design and then we will come up with suggestions.

• grouping behaviour in Select, Input, ComboBox, List, etc. Nesting?
  => discussed above

• open-change vs open, close (Select) vs toggle?
  => property open and event toggle.

• preventDefault() should be aligned across all components
  => discussed above

• openPicker discuss for general naming - DatePicker, ComboBox, Input, Select, etc all these methods should be replaced

[ilhan007]

Related to: #4460

[ilhan007]

External Feedback

ui5-combobox (& ui5-multi-combobox):

• filter: the filter mode for ui5-combobox and ui5-multi-combobox is currently not a type but a string. I think this should use a type instead, e.g. ComboboxFilter
• loading: this attribute is only used here. Other components like list and table use busy. Should better be harmonised.

Changes agreed

• Let's use type for the filter.

ui5-panel:

• no-animation: this attribute is double problematic. First, it is the only occurrence of an attribute that starts with “no-“, and second, it leads to a double-negation when you want to make sure the animation is switch on, the attribute not to have animation has to be false. This is very confusing.

=> no action required

ui5-text-area:

• rows: describes the number of lines the ui5-text-area has. For the growing behavior, the growing-max-lines is used. Naming therefore is not consistent and should be either rows or lines.

Changes agreed
Rename growing-max-lines to growing-max-rows

ui5-table

Changes agreed
=> rename property Table busy to loading (We have agreed to change it for the List)
=> rename property mode to selectionMode
=> Rename values of TableMode : SingleSelect -> Single, MultiSelect -> Multiple
=> Rename enum TableMode to TableSelectionMode

cross components

• targetRef is mostly used for event detail referring to the DOM element subject to a given event, but also ref is used in some cases - pick one of them and unify the usages.

Changes agreed

• Stick to targetRef.

cross components

• design vs. value-state: it is very difficult to keep apart the value-state attribute from the design attribute if design attributes are used to set semantic colors as well. The type IconDesign, MessageStripDesign and others are basically duplicating the value state and adding additional values, for the ui5-tab the design is directly using SemanticColor and compared to the ValueState it becomes really hard to memorize where to apply what:

• IconDesign: Default / Negative / Warning / Positive / Information / Contrast / Neutral

• ButtonDesign Default / Negative / Attention/ Positive/ Transparent/ Emphasized

• MessageStripDesign: Negative / Warning / Positive / Information

• SemanticColor: Default / Negative / Warning / Positive / Neutral

• ValueState: None / Error / Warning / Success / Information