☂️ 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!

[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

[softshipper]

Hi @MarcusNotheis,
I have added the UI5 react components to my project with the following versions:

"@ui5/webcomponents": "^2.0.1",
"@ui5/webcomponents-fiori": "^2.0.1",
"@ui5/webcomponents-react": "^1.29.4",

When I run the app the compiler is complaining:

 You can mark the path "@ui5/webcomponents/dist/types/TableRowType.js" as external to exclude it
  from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ui5/webcomponents/dist/types/PopoverPlacementType.js"

    node_modules/@ui5/webcomponents-react/dist/enums/PopoverPlacementType.js:3:33:
      3 │ import PopoverPlacementType from '@ui5/webcomponents/dist/types/PopoverPlacementType.js';
        ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The module "./dist/types/PopoverPlacementType.js" was not found on the file system:

    node_modules/@ui5/webcomponents/package.json:40:16:
      40 │     "./dist/*": "./dist/*",
         ╵                 ~~~~~~~~~~

  You can mark the path "@ui5/webcomponents/dist/types/PopoverPlacementType.js" as external to
  exclude it from the bundle, which will remove this error and leave the unresolved path in the
  bundle.
  

Best regards

[Lukas742]

Hi @softshipper

v1 of ui5-webcomponents-react is not compatible with v2 of ui5-webcomponents. You should also see a peer dependencies error when installing the modules with the given versions.

We're currently in the process of preparing our 2.0, if you want to checkout the changes already, you can use the pre-release version (2.0.0-rc.X - current latest pre release version: 2.0.0-rc.0).

[lenafi5cher]

Hi @Lukas742 and @MarcusNotheis ,
you mentioned in one of the above comments that the release for version 2.0.0 was planned for the beginning of Q3. Since we are in the middle of Q3 now, I wanted to ask if you have an updated prognosis for the release? Just a rough guesstimate would help us with planning :)

Thanks!

[MarcusNotheis]

Hey @lenafi5cher,

unfortunately things got a bit more complicated than expected, but we're now in the final tasks of completing the update.
We expect that we can provide our 2.0.0 release towards the end of August.
If you're already interested in trying out the update, you can update to our latest 2.0.0 release candidate (currently 2.0.0-rc.2).

[Lukas742]

Version 2 has been released 🎉

Closing this issue.