Skip to content

docs: update MigrationGuide & READMEs #6237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Aug 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 23 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,6 @@
<img src="https://raw.githubusercontent.com/SAP/ui5-webcomponents-react/main/assets/Logo-Sticker.png" alt="UI5 Web Components for React Logo" />
</p>
<p align="center">
<a href="https://github.com/SAP/ui5-webcomponents-react/actions?query=workflow:%22build%22" target="_blank">
<img alt="Build Status" src="https://github.com/SAP/ui5-webcomponents-react/workflows/build/badge.svg">
</a>
<a href='https://coveralls.io/github/SAP/ui5-webcomponents-react'>
<img src='https://coveralls.io/repos/github/SAP/ui5-webcomponents-react/badge.svg' alt='Coverage Status' />
</a>
Expand All @@ -16,12 +13,6 @@
<a href="https://openui5.slack.com/archives/CSQEJ2J04" target="_blank">
<img alt="Slack Badge" src="https://badgen.net/badge/slack/webcomponents-react/orange?icon=slack">
</a>
<a href="https://github.com/prettier/prettier" target="_blank">
<img alt="code style: prettier" src="https://badgen.net/badge/code%20style/prettier?color=pink">
</a>
<a href="https://lerna.js.org" target="_blank">
<img alt="lerna" src="https://badgen.net/badge/maintained%20with/lerna?color=purple">
</a>
<a href="https://api.reuse.software/info/github.com/SAP/ui5-webcomponents-react" target="_blank">
<img alt="REUSE Status" src="https://api.reuse.software/badge/github.com/SAP/ui5-webcomponents-react"/>
</a>
Expand All @@ -35,20 +26,33 @@ You can find our documentation under the following links:

- [Stable Release Documentation](https://sap.github.io/ui5-webcomponents-react/)
- [Nightly Release Documentation](https://sap.github.io/ui5-webcomponents-react/nightly/)
- [V1 Release Documentation](https://sap.github.io/ui5-webcomponents-react/v1/)

## Packages Overview

## Package Overview
- [@ui5/webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/main) - Main Package

- [@ui5/webcomponents-react](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/main) - Fiori 3 Components<br/>
[![](https://badgen.net/npm/v/@ui5/webcomponents-react?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react)
[![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@ui5/webcomponents-react)](https://bundlephobia.com/result?p=@ui5/webcomponents-react)

- [@ui5/webcomponents-react-charts](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/charts) - Fiori Charts<br />
- [@ui5/webcomponents-react-charts](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/charts) - Charts Package

[![](https://badgen.net/npm/v/@ui5/webcomponents-react-charts?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-charts)
[![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@ui5/webcomponents-react-charts)](https://bundlephobia.com/result?p=@ui5/webcomponents-react-charts)

- [@ui5/webcomponents-react-base](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/base) - Utils<br />
- [@ui5/webcomponents-react-base](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/base) - Base Package

[![](https://badgen.net/npm/v/@ui5/webcomponents-react-base?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-base)
[![npm bundle size (scoped)](https://badgen.net/bundlephobia/minzip/@ui5/webcomponents-react-base)](https://bundlephobia.com/result?p=@ui5/webcomponents-react-base)

- [@ui5/webcomponents-react-compat](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/compat) - Legacy Components Package

[![](https://badgen.net/npm/v/@ui5/webcomponents-react-compat?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-compat)

- [@ui5/webcomponents-react-cli](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cli) - Wrapper Generation & Code-Mod Package

[![](https://badgen.net/npm/v/@ui5/webcomponents-react-cli?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-react-cli)

- [@ui5/webcomponents-cypress-commands](https://github.com/SAP/ui5-webcomponents-react/tree/main/packages/cypress-commands) - Custom Cypress Commands & Queries Package

[![](https://badgen.net/npm/v/@ui5/webcomponents-cypress-commands?icon=npm)](https://www.npmjs.com/package/@ui5/webcomponents-cypress-commands)

<!-- *********************************************************************** -->

Expand All @@ -66,7 +70,7 @@ You can find our documentation under the following links:

## Download and Installation

To consume `ui5-webcomponents-react`, you need to install the npm module and required peer dependencies:
To consume `ui5-webcomponents-react`, you need to install the npm modules and required peer dependencies:

```sh
npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori
Expand Down Expand Up @@ -127,22 +131,17 @@ Then, you can use the Button in your app:
<Button onClick={() => alert('Hello World!')}>Hello world!</Button>
```

For Browser Support and the configuration of the UI5 Web Components, please take a look at the
[Browser Support](https://github.com/SAP/ui5-webcomponents#browser-support) and the
[Configure](https://github.com/SAP/ui5-webcomponents#browser-support) sections of the
[UI5 Web Components Readme](https://github.com/SAP/ui5-webcomponents#ui5-web-components).

### Browser Support

UI5 Web Components are supported by all major modern browsers, including their mobile versions.
UI5 Web Components for React supports the same [browsers and respective versions](https://github.com/SAP/ui5-webcomponents#browser-support) as UI5 Web Components.

<!-- *********************************************************************** -->

<a name="issues"></a>

## Known Issues

Please look at our [GitHub Issues](https://github.com/SAP/ui5-webcomponents-react/issues).
Please take a look at our [GitHub Issues](https://github.com/SAP/ui5-webcomponents-react/issues).

<!-- *********************************************************************** -->

Expand Down
40 changes: 40 additions & 0 deletions docs/MigrationGuide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,10 @@ npx @ui5/webcomponents-react-cli@next codemod --transform v2 \

## General changes

## Minimal React Version

The minimum required `react` and `react-dom` version is now `18.0.0`.

### Removed `react-jss`

UI5 Web Components for React is no longer relying on `react-jss` internally, hence the dependency is now removed and the `react-jss` ThemeProvider is no longer rendered as part of our `ThemeProvider`.
Expand All @@ -65,6 +69,10 @@ function MyRootComponent() {
}
```

### Removed `jestSetup` file

We stopped recommending jest as a testing framework over a year ago, thus the `jestSetup` file is removed. We recommend using [Cypress](https://sap.github.io/ui5-webcomponents-react/?path=/docs/testing-with-cypress-setup--docs) instead.

### Changes Exclusive to TypeScript

- Removed `dangerouslySetInnerHTML` from general prop types since it was never intended to be used with our library.
Expand Down Expand Up @@ -171,6 +179,28 @@ The `useResponsiveContentPadding` hook has been removed.
You can now apply responsive content paddings by applying the `sap-content-paddings-container` class from `@sap-ui/common-css` package to your element.
You can find a more detailed documentation [here](?path=/docs/knowledge-base-common-css--docs#content-paddings).

## Removed Components

- `TableGroupRow` has been removed.
- `NotificationAction` has been removed. You can use the `Menu` component instead.
- `SelectMenu` and `SelectMenuOption` have been removed. The `Select` and `Option` now allow custom content.

## Renamed Components

With the release of UI5 Web Components v2, some component names have been renamed. Because we use these web component names (class names) as React component names, the renamings are considered breaking changes in our repository.

**The list below shows only the previous and updated component names. For details on changes concerning attributes, properties, methods, etc., please refer to the [UI5 Web Components Migration Guide](https://sap.github.io/ui5-webcomponents/docs/migration-guides/to-version-2/).**

**Note:** The tag name in the parenthesis is the **old** tag name.

- `StandardListItem` has been renamed to `ListItemStandard` (`ui5-li`).
- `CustomListItem` has been renamed to `ListItemCustom` (`ui5-li-custom`).
- `MultiComboBoxGroupItem` has been renamed to `MultiComboBoxItemGroup` (`ui5-mcb-group-item`).
- `TableColumn` has been renamed to `TableHeaderCell` (`ui5-mcb-group-item`).
- `Badge` has been renamed to `Tag` (`ui5-tag`).
- `ComboBoxGroupItem` has been renamed to `ComboBoxItemGroup` (`ui5-cb-group-item`).
- `GroupHeaderListItem` has been renamed to `ListItemGroup` (`ui5-li-groupheader`).

## Replaced Components

### AnalyticalCard
Expand Down Expand Up @@ -1138,6 +1168,16 @@ For better alignment with the UI5 Web Components the `active` prop has been rena
The prop `withoutModalsProvider` has been removed.
In order to provide a place for the `Modals` helper to mount the popovers, you have to render the new `Modals` component in your application tree.

### SelectDialog

- `mode` has been renamed to `selectionMode`
- `onAfterClose` has been renamed to `onClose`
- `onAfterOpen` has been renamed to `onOpen`

### VariantManagement

The `portalContainer` prop has been removed as it is no longer needed.

## Enum Changes

For better alignment with the UI5 Web Components, the following enums have been renamed:
Expand Down
29 changes: 29 additions & 0 deletions packages/cli/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# @ui5/webcomponents-react-cli

Wrapper generation and code-mod for ui5-webcomponents-react.

## Usage

### Installation

```bash
npm install @ui5/webcomponents-react-cli
```

### Documentation

You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/).

- [Wrapper generation](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/knowledge-base-bring-your-own-web-components--docs)
- [Code-mod](https://sap.github.io/ui5-webcomponents-react/v2/?path=/docs/migration-guide--docs#codemod)

## Contribute

Please check our [Contribution Guidelines](https://github.com/SAP/ui5-webcomponents-react/blob/main/CONTRIBUTING.md).

## License

Please see our [LICENSE](https://github.com/SAP/ui5-webcomponents-react/blob/main/LICENSE) for copyright and license information.
Detailed information including third-party components and their licensing/copyright information is available via the [REUSE tool](https://api.reuse.software/info/github.com/SAP/ui5-webcomponents-react).

<!-- Use the force -->
2 changes: 1 addition & 1 deletion packages/compat/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ npm install @ui5/webcomponents-react-compat

## Documentation

You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/).
You can find an interactive documentation in our [Storybook](https://sap.github.io/ui5-webcomponents-react/) (Legacy Components).

## Contribute

Expand Down
Loading