From cb8381af7bace80141a99edca688aa94689fbf60 Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Fri, 10 Jun 2022 13:14:46 -0700 Subject: [PATCH] Update docs for 0.18 release --- .../docs/src/pages/docs/apis/style-sheet.md | 5 ++-- .../src/pages/docs/appendix/unstable-apis.md | 26 ++++++++----------- .../src/pages/docs/concepts/localization.md | 1 + .../getting-started/browser-compatibility.md | 3 +-- .../react-native-compatibility.md | 2 +- .../pages/docs/hooks/use-locale-context.md | 3 ++- 6 files changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/docs/src/pages/docs/apis/style-sheet.md b/packages/docs/src/pages/docs/apis/style-sheet.md index 468a8683..f2ef383f 100644 --- a/packages/docs/src/pages/docs/apis/style-sheet.md +++ b/packages/docs/src/pages/docs/apis/style-sheet.md @@ -5,6 +5,7 @@ permalink: /docs/style-sheet/index.html eleventyNavigation: key: StyleSheet parent: APIs + label: "Change" --- {% import "fragments/macros.html" as macro with context %} @@ -48,9 +49,9 @@ Combines two styles such that the last style overrides properties of the first s {% endcall %} {% call macro.prop('create', '({ [key]: ruleset }) => ({ [key]: number })') %} -Define style objects. Each key of the object passed to `create` must define a style object. These values are opaque and should not be introspected. +Define style objects. Each key of the object passed to `create` must define a style object. These values should not be introspected at runtime. {% endcall %} {% call macro.prop('flatten', '(styles: Style) => Object') %} -Lookup a style object by ID or flatten an array of styles into a single style object. +Flatten an array of styles into a single style object. **This is not recommended as it is not compatible with static extraction of styles to CSS.** {% endcall %} diff --git a/packages/docs/src/pages/docs/appendix/unstable-apis.md b/packages/docs/src/pages/docs/appendix/unstable-apis.md index 9fc29c4b..f8cc6d1a 100644 --- a/packages/docs/src/pages/docs/appendix/unstable-apis.md +++ b/packages/docs/src/pages/docs/appendix/unstable-apis.md @@ -2,11 +2,12 @@ title: Unstable APIs date: Last Modified permalink: /docs/unstable-apis/index.html -description: +description: eleventyNavigation: key: Unstable APIs parent: Appendix order: 1 + label: "Change" --- :::lead @@ -28,13 +29,16 @@ This also works with composite components defined in your existing component gal ```js import RaisedButton from 'material-ui/RaisedButton'; -import { unstable_createElement } from 'react-native-web'; -import { StyleSheet } from 'react-native'; +import { unstable_createElement, useLocaleContext } from 'react-native-web'; +import { StyleSheet, } from 'react-native'; -const CustomButton = (props) => unstable_createElement(RaisedButton, { - ...props, - style: [ styles.button, props.style ] -}); +const CustomButton = (props) => { + const { direction } = useLocaleContext(); + return unstable_createElement(RaisedButton, { + ...props, + style: [ styles.button, props.style ] + }); +}, { writingDirection: direction }); const styles = StyleSheet.create({ button: { @@ -43,14 +47,6 @@ const styles = StyleSheet.create({ }); ``` -And `unstable_createElement` can be used as drop-in replacement for `React.createElement`: - -```jsx -/* @jsx unstable_createElement */ -import { unstable_createElement } from 'react-native-web'; -const Video = (props) =>