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

• [x] Release of UI5 Web Components 2.0 https://github.com/SAP/ui5-webcomponents/issues/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

• [x] create codemod for migration to v2 #5908
• [x] ~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. #3855
• [x] Remove dangerouslySetInnerHTML from CommonProps #6002
• [x] 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)
• [x] #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
• [x] 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. https://github.com/SAP/ui5-webcomponents-react/pull/5837
• [x] Remove jestSetup file #5906
• [x] 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 #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
• [x] improveenrichEventWithDetails behavior to also include "native" detail (e.g. when using the click event) https://github.com/SAP/ui5-webcomponents-react/pull/5984
• [x] :octocat: Remove ui5wc enums from @ui5/webcomponents-react
• [x] remove spacing utils and outline how to achieve the same behavior with common-css. (~~Up for discussion~~ - accepted) #6009
• [x] remove react-jss #5907
• [x] all enums should use the singular term: #5970
  • [x] MessageBoxActions --> MessageBoxAction
  • [x] MessageBoxTypes --> MessageBoxType
  • [x] Themes --> Theme

TypeScript

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

Components

• [x] ActionSheet PR: #5956

  • replace showCancelButton with hideCancelButton and remove defaultProp

• [x] AnalyticalCard PR: #5887

  Remove deprecated component.

• [ ] AnalyticalTable

  https://github.com/SAP/ui5-webcomponents-react/pull/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)

  #6022

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

  PR: :hammer_and_wrench:

  • [ ] 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.
  • [x] Implement loading behavior defined by UX guidelines and remove Loader

• [x] DynamicPage PR: https://github.com/SAP/ui5-webcomponents-react/pull/5939

  • Replace with UI5 Web Component

• [ ] FilterBar PR: :hammer_and_wrench:

  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.

• [x] FilterGroupItem PR: #6012

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

• [x] Form PR: #5925

  Replace with UI5 Web Component

• [x] MessageBox PR: https://github.com/SAP/ui5-webcomponents-react/pull/5975

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

• [ ] Loader PR: #6020

  • 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
  • [x] TypeScript: (#5860)
    • headerTitle: ~ReactElement~ --> ReactElement<DynamicPageTitlePropTypes>
    • headerContent: ~ReactElement~ --> ReactElement<DynamicPageHeaderPropTypes>
    • image: ~string | ReactElement~ --> string | ReactElement<AvatarPropTypes>

• [x] ObjectPageSection PR: #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~~

• [x] ObjectPageSubSection PR: #6014

  • ~~set id internally - see note of ObjectPageSection~~

• [x] ObjectStatus PR: #6011

  • onClick: remove HTMLDivElement from type

• [x] Text PR: #5988

  • Replace with UI5 Web Component

Charts

• [ ] ChartContainer PR: :hammer_and_wrench:

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

• [ ] MicroBarChart PR: :hammer_and_wrench:

  • 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

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