Skip to content

feat(public-docsite-v9): add official platform support docs including React Versions #34599

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

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
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
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import { Meta } from '@storybook/addon-docs';

<Meta title="Concepts/Developer/React Version Support" />

# React Version Support

> ℹ️ **Note**: Our migration docs focus solely on FluentUI related changes.

If you're migrating between React major versions, please refer to the official React documentation for comprehensive migration guides.

For migrating your codebase TypeScript types, you can leverage [Types React Codemod](https://github.com/eps1lon/types-react-codemod)

## React 17

Full support starting `@fluentui/react-components` v9.0.0.

## React 18

Full support starting `@fluentui/react-components` v9.65.0.

### Migration

> 💡 Check Following PR for further details https://github.com/microsoft/fluentui/pull/34456

#### Runtime/API changes:

NONE

#### TypeScript types changes:

##### Slot Children as a Function

Because `@types/react@18` Breaking Changes, we needed to loosen `Slot` children property to `any`.

This change will affect users that use `Slot` children as a function in conjunction with TypeScript strict mode.

If that's your case, TypeScript will fail on `noImplicitAny`. To mitigate this you need to add type assertions (`satisfies SlotRenderFunction<T>`)

Before:

```tsx
import * as React from 'React';

<Button
// children was inferred as union of ReactNode and SlotRenderFunction
icon={{ children: (Component, props) => <Component {...props /> }}
>
Label
</Button>
```

After:

```tsx
import * as React from 'React';
import { type SlotRenderFunction } from '@fluentui/react-utilities';

<Button
icon={{
// children is now `any` and needs to be asserted as `SlotRenderFunction`
children: ((Component, props) => <Component {...props} />) satisfies SlotRenderFunction<
React.ComponentProps<'span'>
>,
}}
>
Label
</Button>;
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { Meta } from '@storybook/addon-docs';

<Meta title="Concepts/Developer/Supported Platforms" />

# Supported Platforms

Learn about the platforms that are supported by Fluent UI React.

## Browser

Fluent UI supports the latest, stable releases of all major browsers and platforms.

Please refer to the [Browser Support Matrix](/docs/concepts-developer-browser-support-matrix--docs) for more details.

## React

Fluent UI fully supports React versions 17 and 18.

Please refer to the [React Version Support](/docs/concepts-developer-react-version-support--docs) for more details.

## TypeScript

Fluent UI fully supports TypeScript versions >=3.9.
Loading