☂️ 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"})
  fix(TypeScript): include data-* attributes in CommonProps interface #3855
• Remove dangerouslySetInnerHTML from CommonProps
• 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.
• 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.
• 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
• 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. Also improve its behavior to also include "native" detail (e.g. when using the click event)
• Remove ui5wc enums from @ui5/webcomponents-react
• remove spacing utils and outline how to achieve the same behavior with common-css. (Up for discussion)
• remove react-jss
  chore: remove react-jss #5907
• all enums should use the singular term:
  • MessageBoxActions --> MessageBoxAction
  • MessageBoxTypes --> MessageBoxType

TypeScript

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

Components

• ActionSheet
  PR: 🛠️

  • replace showCancelButton with hideCancelButton and remove defaultProp

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

  Remove deprecated component.

• AnalyticalTable
  PR: 🛠️

  • remove deprecated TableScaleWidthMode, TableSelectionBehavior, TableSelectionMode, TableVisibleRowCountMode enums
  • remove deprecated canReorder column option
  • Don't wrap all custom header components inside Text component. (see here)
  • 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.
  • Remove deprecated alwaysShowSubComponent prop
  • Implement loading behavior defined by UX guidelines and remove Loader
  • sortable should not have a value per default (currently: true)
  • remove deprecated canReorder column option

• DynamicPage
  PR: 🛠️

  • Replace with UI5 Web Component

• FilterBar
  PR: 🛠️

  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: 🛠️

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

• Form
  PR: 🛠️

  Replace with UI5 Web Component

• Grid
  PR: 🛠️

  • remove position as the functionality can be achieved with simple CSS

• MessageBox
  PR: 🛠️

  • make onClose a pure custom event (no target, etc.) and allow onAfterClose for consumption

• Loader
  PR: 🛠️

  • remove component in favor of BusyIndicator

• ObjectPage
  PR: 🛠️

  • image should be rendered in title and content section (different sizes see here) and then be removed
  • replace headerContentPinnable with hidePinHeaderButton and remove defaultProp
  • TypeScript: (feat: support React 19 #5860)
    • headerTitle: ReactElement --> ReactElement<DynamicPageTitlePropTypes>
    • headerContent: ReactElement --> ReactElement<DynamicPageHeaderPropTypes>
    • image: string | ReactElement --> string | ReactElement<AvatarPropTypes>

• ObjectPageSection
  PR: 🛠️

  • replace titleTextUppercase with titleTextLowerCase and remove defaultProp
  • 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: 🛠️

  • set id internally - see note of ObjectPageSection

• ObjectStatus
  PR: 🛠️

  • onClick: remove HTMLDivElement from type

• Text
  PR: 🛠️

  • Replace with UI5 Web Component

Charts

• ChartContainer
  PR: 🛠️

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

• MicroBarChart
  PR: 🛠️

  • Replace with BarChart? - check feasibility

[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!

[MarcusNotheis]

Thanks for your suggestion @ej612.
You're totally right, we should always use singulars for our enums, so this will affect MessageBoxActions as well and we've added it to our list 👍

Regarding the ValueState: In general the ValueState None is valid, so we would like to keep it like that for now. We've also double checked the SAPUI5 implementation and they are handling it in the same way