Skip to content

docs: general docs adjustments #6258

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 4 commits into from
Aug 23, 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
4 changes: 4 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,10 @@ To consume `ui5-webcomponents-react`, you need to install the npm modules and re
npm install @ui5/webcomponents-react @ui5/webcomponents @ui5/webcomponents-fiori
```

## Ongoing Support for Version 1.x

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.

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

## Getting Started
Expand Down
17 changes: 12 additions & 5 deletions docs/MigrationGuide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,13 @@ or the [changelog](?path=/docs/change-log--page)._

<TableOfContent headingSelector="h2, h3" />

## UI5 Web Components Migration Guide

The breaking changes listed here only affect our codebase. Changes related solely to the underlying web component are **not** tracked here.
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/).

_**Note:** Our `codemod` covers changes from ui5-webcomponents as well._

## Codemod

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

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

### ThemeProvider

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`

### ThemeProvider

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.

### VariantManagement

The `portalContainer` prop has been removed as it is no longer needed.
Expand Down
4 changes: 4 additions & 0 deletions docs/Welcome.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ In addition to that, UI5 Web Components for React is providing complex component
- [Node.js](https://nodejs.org/) (**LTS version**)
- If you're using [TypeScript](https://www.typescriptlang.org/) we recommend version **4.7** or later.

## Ongoing Support for Version 1.x

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.

## Getting Started

### Tutorial
Expand Down
19 changes: 16 additions & 3 deletions docs/knowledge-base/Public-Utils.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,22 @@ The `Device` allows you to detect information about the environment where your a

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

By using our `ThemingParameters`, you can define the look and feel of your application without the need to hard-code any
colors. You can e.g. set `ThemingParameters.sapBackgroundColor` as a `background-color` and you'll always get the correct
background color for your current theme.
By using the global `--sap...` CSS variables, you can define the look and feel of your application without the need to hard-code any
colors. The `ThemingParameters` is an JS object containing all available CSS variables mapped to their name.

Example:

```jsx
<div style={{ background: ThemingParameters.sapBackgroundColor }} />
```

Is equivalent to:

```jsx
<div style={{ background: 'var(--sapBackgroundColor)' }} />
```

**Note:** We don't recommend excessive use of inline-style!

<ThemeableCSSVars />

Expand Down
Loading