Documentation to move from old to new theme provider (#911)

* Add missing pages to index

* Documentation for theme provider converstion

* Update some paths

* Address feedback
This commit is contained in:
Ruriko Araki 2021-08-19 11:12:10 -07:00 коммит произвёл GitHub
Родитель 5849d234f1
Коммит e22376782a
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: 4AEE18F83AFDEB23
5 изменённых файлов: 94 добавлений и 4 удалений

Просмотреть файл

@ -53,7 +53,7 @@ For more information about customizing themes, take a look at [Custom Themes](./
You can use the `useTheme()` hook to get the current theme inside a component.
```tsx
import { useTheme } from '@fluentui-react-native/theme-types';
import { useTheme } from '@fluentui-react-native/framework';
export const Component = () => {
const theme = useTheme();

Просмотреть файл

@ -21,7 +21,7 @@ You can create a theme using information from Office by calling `createOfficeThe
```tsx
import { ThemeProvider } from '@fluentui-react-native/theme';
import { createOfficeTheme } from '@fluentui-react-native/win32-theme';
import { useTheme } from '@fluentui-react-native/theme-types';
import { useTheme } from '@fluentui-react-native/framework';
import { Text } from 'react-native';
const AppWithOfficeTheme = () => {

Просмотреть файл

@ -9,7 +9,7 @@ Defining a themed `StyleSheet` is similar to creating a RN `StyleSheet`, but it
```ts
// Component.styles.ts
import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
import { Theme } from '@fluentui-react-native/theme-types';
import { Theme } from '@fluentui-react-native/framework';
export const getThemedStyles = themedStyleSheet((theme: Theme) => {
return {
@ -28,7 +28,7 @@ You can use a themed `StyleSheet` as you would an RN `StyleSheet` that's generat
```ts
// Component.ts
import { getThemedStyles } from './Component.styles.ts';
import { useTheme } from '@fluentui-react-native/theme-types';
import { useTheme } from '@fluentui-react-native/framework';
export const Component = () => {
const styles = getThemedStyles(useTheme());

Просмотреть файл

@ -0,0 +1,84 @@
# Moving from old to new `ThemeProvider`
We have a deprecated ThemeProvider which takes in a `ThemeRegistry`. The new ThemeProvider takes in the `ThemeReference`. This page provides guidance on how to move from the deprecated to the newer system.
## `ThemeRegistry` to `ThemeReference`
The new `ThemeProvider` takes in a different object as its value, a `ThemeReference`, so you'll need to convert your `ThemeRegistry` into a `ThemeReference` in order to use the new `ThemeProvider`.
If you were using `createPlatformThemeRegistry(<paletteName>)` to create your `ThemeRegistry`, you can get an equivalent `ThemeReference` by calling `createOfficeTheme({ paletteName: <paletteName> })` instead. Details on `createOfficeTheme` can be found [here](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/DefaultThemes.md#integration-with-office).
The gist is that what used to be the `ProcessTheme` function passed into the `ThemeRegistry`'s `setTheme` can now be turned into a `ThemeRecipe` passed into the `ThemeReference`. So where a `ThemeRegistry` might have had:
```ts
import { createThemeRegistry, Theme, PartialTheme, resolvePartialTheme } from '@uifabricshared/theming-react-native';
const registry = createThemeRegistry(baseTheme, resolvePartialTheme);
registry.setTheme((parentTheme: Theme) => {
return { colors: { background: theme.colors.themeDarker } };
});
```
the `ThemeReference` would have:
```ts
import { ThemeReference } from '@fluentui-react-native/theme';
import { Theme, PartialTheme } from '@fluentui-react-native/framework';
const themeRef = new ThemeReference(
baseTheme,
(parentTheme: Theme): PartialTheme => {
return { colors: { background: theme.colors.themeDarker } };
}, // no resolver needed, automatically deeply merged into baseTheme
);
```
`ThemeReferences` can also take advantage of our [default themes](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/DefaultThemes.md). Learn how to create custom themes [here](https://github.com/microsoft/fluentui-react-native/blob/master/docs/pages/Theming/CustomTheme.md).
## Importing `ThemeProvider` from the new package
The new `ThemeProvider` resides in a different package and takes in the `ThemeReference` instead. You'll want to change which package you import the `ThemeProvider` from, and then take the theme you converted and pass it into the new `ThemeProvider`:
```ts
import { ThemeProvider } from @uifabricshared/theming-react-native;
const App = () => {
const themeRegistry = getThemeRegistry();
return (
<ThemeProvider registry={themeRegistry}>
<AppContent />
</ThemeProvider>
)
}
```
to
```ts
import { ThemeProvider } from @fluentui-react-native/theme;
const App = () => {
const themeRef = getThemeReference();
return (
<ThemeProvider theme={themeRef}>
<AppContent />
</ThemeProvider>
)
}
```
## Accessing the theme in components
The new ThemeProvider uses the same context as the old one, so accessing the theme still uses the same `useTheme()` hook - no functional change is needed to access the theme with the new `ThemeProvider`. The only change you'll want to make is to import `useTheme()` from the newer package:
```ts
import { useTheme } from @uifabricshared/theming-react-native;
```
to
```ts
import { useTheme } from @fluentui-react-native/framework;
```

Просмотреть файл

@ -19,6 +19,8 @@
- [Basics](./Theming/Basics.md)
- [Platform Default and Office Themes](./Theming/DefaultThemes.md)
- [Customizing themes](./Theming/CustomTheme.md)
- [Using Themed Stylesheets](./Theming/ThemedStylesheet.md)
## Utilities
@ -26,6 +28,10 @@
- [FocusZone](./Utilities/FocusZone.mdx)
- [Stack](./Utilities/Stack.mdx)
## Upgrade Guides
- [Moving to newer `ThemeProvder`](./UpgradeGuides/ThemeProvder.md)
## Contributing Docs Template
> ```