☂️ Road to 2.0

[Lukas742]

This issue is a smorgasbord of topics we would like to include in our 2.0 release. It mainly contains features that require breaking changes.

Prerequisites

• Release of UI5 Web Components 2.0
  2.0 Summary ui5-webcomponents#8608

  All breaking changes of UI5 Web Components will be applied to this repository as well, the list below only tracks changes to our own components.

General

• create codemod for migration to v2
  feat(cli): create codemod for UI5 Web Components React v2 migration #5908
• Extend common props to also include data-* attributes. Currently these attributes are only supported when used as props inside tags (e.g.: <Label data-hello="hi" />), but not when used as type for an object (e.g.: const props: LabelPropTypes = {"data-hello:"hi"}) Rejected, because it's better to define data- props on App side.
  fix(TypeScript): include data-* attributes in CommonProps interface #3855
• Remove dangerouslySetInnerHTML from CommonProps fix(CommonProps - TypeScript): remove dangerouslySetInnerHTML from types #6002
• Remove role="application". We should take the same approach as @ui5/webcomponents, i.e. the role="application" attribute for components should no longer be used, as application developers should be responsible for how the application behaves when using screen readers. - Only the ActionSheet implements role="application" and since this is defined by the specs, we'll keep it)
• feat(ThemeProvider): apply Fiori scrollbar styling to all scroll containers #5978
  sapScrollBar: Opt-out instead of opt-in. --> Make all elements wrapped inside the ThemeProvider use the custom scrollbar styles per default and only use the native scrollbar if the .sapUiNativeScrollbars class is applied. (Maybe check if we still want to support the data-native-scrollbar attribute) In the course of this, remove both scrollbar style classes, as they'll be redundant then.
  Opt Out Possible via .ui5-content-native-scrollbars
• Change React Runtime from classic to automatic in order to use the new JSX runtime. Our peer dependencies currently only support versions where the JSX runtime can already be used.
  fix: use new JSX transform in preparation for React 19 #5837
• Remove jestSetup file
  chore: remove jestSetup #5906
• Replace all keydown selection/click events on SPACE press with keyup event - only needs to be replaced for the AnalyticalTable, all other implementations are fine fix(AnalyticalTable): fire row select & click events on keyup instead of keydown #6013
• Check usage of enrichEventWithDetails function. It should only be used when based on a real event. We should not use it to create artificial events with an actual target. Fix type errors. --> Later
• improveenrichEventWithDetails behavior to also include "native" detail (e.g. when using the click event) refactor(enrichEventWithDetails): pass through detail, improve types #5984
• Remove ui5wc enums from @ui5/webcomponents-react
• remove spacing utils and outline how to achieve the same behavior with common-css. (Up for discussion - accepted)
  refactor: remove all spacing variables #6009
• remove react-jss
  chore: remove react-jss #5907
• all enums should use the singular term:
  refactor(enums): harmonize enum names #5970
  • MessageBoxActions --> MessageBoxAction
  • MessageBoxTypes --> MessageBoxType
  • Themes --> Theme

TypeScript

• Investigate if ReactElement should be replaced by ReactNode for public types. See this PR for more details.

Components

• ActionSheet
  PR: refactor(ActionSheet): api alignment #5956

  • replace showCancelButton with hideCancelButton and remove defaultProp

• AnalyticalCard
  PR: chore: remove deprecated AnalyticalCard component #5887

  Remove deprecated component.

• AnalyticalTable

  refactor(AnalyticalTable): remove deprecated props & enums #6021:

  • remove deprecated TableScaleWidthMode, TableSelectionBehavior, TableSelectionMode, TableVisibleRowCountMode enums
  • remove deprecated canReorder column option
  • Remove deprecated alwaysShowSubComponent prop
  • sortable should not have a value per default (currently: true)

  fix(AnalyticalTable): don't wrap custom header content in Text component #6022

  • Don't wrap all custom header components inside Text component. (see here)

  PR: refactor(AnalyticalTable): remove selectedFlatRows & add rowsById to onRowSelect #6255

  • We should consider changing the detail property of the onRowSelect event, to not return selectedFlatRows as array and use an object (e.g. selectedFlatRowsById) instead, as currently we need to iterate over all rows the table renders, which can impact performance especially for huge datasets.
  • Implement loading behavior defined by UX guidelines and remove Loader

• DynamicPage
  PR: feat(DynamicPage & ObjectPage): use ui5wc DynamicPage & rename ObjectPage components #5939

  • Replace with UI5 Web Component

• FilterBar
  PR: refactor(FilterBar): remove reference copying of filter/input elements #6214

  The FilterBar copies lot of element references which is uncommon in React and is also redundant in many cases if the component is fully controlled. We should reduce or even completely omit copying of DOM references and create examples for complex scenarios.

• FilterGroupItem
  PR: refactor(FilterGroupItem): api alignment #6012

  • replace visible with hidden and remove defaultProp
  • replace visibleInFilterBar with hideInFilterBar (or similar name)

• Form
  PR: feat(Form): replace with UI5 Web Component #5925

  Replace with UI5 Web Component

• MessageBox
  PR: fix(MessageBox - TypeScript): adjust onClose type #5975

  • make onClose a pure custom event (no target, etc.) and allow onAfterClose for consumption
  • Discuss if we should rename the event and expose the onClose event of the dialog

• Loader
  PR: feat: move Loader to compat package & replace with BusyIndicator #6020

  • remove component in favor of BusyIndicator

• ObjectPage

  • image should be rendered in title and content section (different sizes see here) and then be removed
  • align API (refactor(ObjectPage): api alignment #6047)
  • TypeScript: (feat: support React 19 #5860)
    • headerTitle: ReactElement --> ReactElement<DynamicPageTitlePropTypes>
    • headerContent: ReactElement --> ReactElement<DynamicPageHeaderPropTypes>
    • image: string | ReactElement --> string | ReactElement<AvatarPropTypes>

• ObjectPageSection
  PR: refactor: make titleText required for object page sections #6014

  • remove default prop for titleTextUppercase
  • make titleText required --> it makes no sense omitting titleText as then an empty tab would be rendered
  • set id internally - Note: probably not possible without breaking changes some events as we pass the id of the selected section to some, so developers can for example identify which section are selected

• ObjectPageSubSection
  PR: refactor: make titleText required for object page sections #6014

  • set id internally - see note of ObjectPageSection

• ObjectStatus
  PR: fix(ObjectStatus): remove HTMLDivElement from onClick type #6011

  • onClick: remove HTMLDivElement from type

• Text
  PR: feat(Text): replace with UI5 Web Component #5988

  • Replace with UI5 Web Component

Charts

• ChartContainer
  PR: 🛠️

  • Replace height: '400px' with height: '100%'

• MicroBarChart
  PR: chore(charts): remove MicroBarChart #6249

  • Remove component as there are no design specs available

[stephen-schmith]

@Lukas742 @MarcusNotheis I see that this issue was placed on the 2024-Q3 road map - is that when we can expect the beta for compatibility with UI5WC 2.0?

[MarcusNotheis]

Hi @stephen-schmith,
we want to release our stable version 2.0.0 latest by the beginning of Q3, this is also depending on the final release date of UI5 Web Components 2.0.0 and our process of updating to React 19.
You can expect the our beta for the release candidates of UI5 Web Components way earlier, maybe already next week.

[ej612]

Hi @MarcusNotheis & @Lukas742,
Some thoughts I had while looking at the code recently, maybe this is something you'd want to look at in the scope of the 2.0 upgrade:

• Should ValueState.None be removed? According to the docs, it's identical to ValueState.Information
• Should MessageBoxTypes be renamed to MessageBoxType?

I just saw these in passing, no pressure, maybe they've been made this way intentionally. Thanks!