Skip to content

Commit 89d7aa1

Browse files
authoredAug 23, 2024··
docs: general docs adjustments (#6258)
Adjustments: - mention ui5wc MigrationGuide - order of breaking changes - ThemingParameters in "Public Utils" - 1.x support
1 parent 796f7c1 commit 89d7aa1

File tree

4 files changed

+36
-8
lines changed

4 files changed

+36
-8
lines changed
 

‎README.md

+4
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ To consume `ui5-webcomponents-react`, you need to install the npm modules and re
7676
npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori
7777
```
7878

79+
## Ongoing Support for Version 1.x
80+
81+
We will continue to support version 1.x until the end of the year, focusing on bug fixes to ensure continuity for our existing users.
82+
7983
<!-- *********************************************************************** -->
8084

8185
## Getting Started

‎docs/MigrationGuide.mdx

+12-5
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,13 @@ or the [changelog](?path=/docs/change-log--page)._
1717
1818
<TableOfContent headingSelector="h2, h3" />
1919

20+
## UI5 Web Components Migration Guide
21+
22+
The breaking changes listed here only affect our codebase. Changes related solely to the underlying web component are **not** tracked here.
23+
For a complete list of breaking changes in UI5 Web Components, please refer to their [Migration Guide](https://sap.github.io/ui5-webcomponents/docs/migration-guides/to-version-2/).
24+
25+
_**Note:** Our `codemod` covers changes from ui5-webcomponents as well._
26+
2027
## Codemod
2128

2229
To make the migration to UI5 Web Components (for React) v2 easier,
@@ -1188,17 +1195,17 @@ The prop `titleText` is now required.
11881195

11891196
For better alignment with the UI5 Web Components the `active` prop has been renamed to `interactive`.
11901197

1191-
### ThemeProvider
1192-
1193-
The prop `withoutModalsProvider` has been removed.
1194-
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.
1195-
11961198
### SelectDialog
11971199

11981200
- `mode` has been renamed to `selectionMode`
11991201
- `onAfterClose` has been renamed to `onClose`
12001202
- `onAfterOpen` has been renamed to `onOpen`
12011203

1204+
### ThemeProvider
1205+
1206+
The prop `withoutModalsProvider` has been removed.
1207+
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.
1208+
12021209
### VariantManagement
12031210

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

‎docs/Welcome.mdx

+4
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,10 @@ In addition to that, UI5 Web Components for React is providing complex component
2929
- [Node.js](https://nodejs.org/) (**LTS version**)
3030
- If you're using [TypeScript](https://www.typescriptlang.org/) we recommend version **4.7** or later.
3131

32+
## Ongoing Support for Version 1.x
33+
34+
We will continue to support version 1.x until the end of the year, focusing on bug fixes to ensure continuity for our existing users.
35+
3236
## Getting Started
3337

3438
### Tutorial

‎docs/knowledge-base/Public-Utils.mdx

+16-3
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,22 @@ The `Device` allows you to detect information about the environment where your a
7575

7676
<Source code={`import { ThemingParameters } from '@ui5/webcomponents-react-base';`} />
7777

78-
By using our `ThemingParameters`, you can define the look and feel of your application without the need to hard-code any
79-
colors. You can e.g. set `ThemingParameters.sapBackgroundColor` as a `background-color` and you'll always get the correct
80-
background color for your current theme.
78+
By using the global `--sap...` CSS variables, you can define the look and feel of your application without the need to hard-code any
79+
colors. The `ThemingParameters` is an JS object containing all available CSS variables mapped to their name.
80+
81+
Example:
82+
83+
```jsx
84+
<div style={{ background: ThemingParameters.sapBackgroundColor }} />
85+
```
86+
87+
Is equivalent to:
88+
89+
```jsx
90+
<div style={{ background: 'var(--sapBackgroundColor)' }} />
91+
```
92+
93+
**Note:** We don't recommend excessive use of inline-style!
8194

8295
<ThemeableCSSVars />
8396

0 commit comments

Comments
 (0)
Please sign in to comment.