re export amplify provider as theme provider and update all documenta… (

#1956) * re export amplify provider as theme provider and update all documentation to use theme provider * rename amplify provider type to theme provider type * update exports snapshot with themeprovider * Create flat-dryers-nail.md * add an info alert warning of the AmplifyProvider rename * rename AmplifyProvider folder to ThemeProvider, update tests Co-authored-by: Jacob Logan <lognjc@amazon.com>
aws-amplify · May 26, 2022 · bca2d1c · bca2d1c
1 parent 8427e3f
commit bca2d1c
Show file tree

Hide file tree

Showing 47 changed files with 197 additions and 144 deletions.
diff --git a/.changeset/flat-dryers-nail.md b/.changeset/flat-dryers-nail.md
@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+re export AmplifyProvider as ThemeProvider
diff --git a/docs/src/components/ThemeAlert.tsx b/docs/src/components/ThemeAlert.tsx
@@ -0,0 +1,11 @@
+import { Alert } from '@aws-amplify/ui-react';
+
+export const ThemeAlert = () => {
+  return (
+    <Alert variation="info">
+      AmplifyProvider has been renamed to ThemeProvider. The ThemeProvider
+      export is available since version 2.18.3, previous versions must still use
+      AmplifyProvider.
+    </Alert>
+  );
+};
diff --git a/docs/src/pages/[platform]/components/authenticator/AuthStyle.tsx b/docs/src/pages/[platform]/components/authenticator/AuthStyle.tsx
@@ -1,6 +1,6 @@
 import {
   Authenticator,
-  AmplifyProvider,
+  ThemeProvider,
   Theme,
   useTheme,
 } from '@aws-amplify/ui-react';
@@ -57,8 +57,8 @@ export function AuthStyle() {
   };
 
   return (
-    <AmplifyProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Authenticator></Authenticator>
-    </AmplifyProvider>
+    </ThemeProvider>
   );
 }
diff --git a/docs/src/pages/[platform]/components/authenticator/customization.styling.react.mdx b/docs/src/pages/[platform]/components/authenticator/customization.styling.react.mdx
@@ -1,11 +1,11 @@
 import { AuthStyle } from './AuthStyle';
 import { Example } from '@/components/Example';
 
-#### Amplify Provider Theme
+#### Theme Provider Theme
 
-You can update the style of the Authenticator by using the [AmplifyProvider](/theming/react) [theme object](/theming/react#theme-object). To do this, you must surround the `Authenticator` in the `AmplifyProvider`.
+You can update the style of the Authenticator by using the [ThemeProvider](/theming/react) [theme object](/theming/react#theme-object). To do this, you must surround the `Authenticator` in the `ThemeProvider`.
 
-Then create a [theme object](/theming/react#theme-object), with all your font and color updates. Feel free to use [design tokens](/theming/react#design-tokens), as a way of desiging your theme further.
+Then create a [theme object](/theming/react#theme-object), with all your font and color updates. Feel free to use [design tokens](/theming/react#design-tokens), as a way of designing your theme further.
 
 Below is an example of changing the default colors to a dark theme.
 

diff --git a/docs/src/pages/[platform]/components/authenticator/customization.styling.web.mdx b/docs/src/pages/[platform]/components/authenticator/customization.styling.web.mdx
@@ -1,4 +1,4 @@
-import { Authenticator, AmplifyProvider } from '@aws-amplify/ui-react';
+import { Authenticator, ThemeProvider } from '@aws-amplify/ui-react';
 import { AuthStyle } from './AuthStyle';
 
 import { Example } from '@/components/Example';

diff --git a/docs/src/pages/[platform]/components/button/examples/ButtonThemeExample.tsx b/docs/src/pages/[platform]/components/button/examples/ButtonThemeExample.tsx
@@ -1,4 +1,4 @@
-import { Flex, Button, AmplifyProvider } from '@aws-amplify/ui-react';
+import { Flex, Button, ThemeProvider } from '@aws-amplify/ui-react';
 
 const theme = {
   name: 'button-theme',
@@ -26,11 +26,11 @@ const theme = {
 };
 
 export const ButtonThemeExample = () => (
-  <AmplifyProvider theme={theme}>
+  <ThemeProvider theme={theme}>
     <Flex direction="row">
       <Button>Default</Button>
       <Button variation="primary">Primary</Button>
       <Button variation="link">Link</Button>
     </Flex>
-  </AmplifyProvider>
+  </ThemeProvider>
 );
diff --git a/docs/src/pages/[platform]/components/button/react.mdx b/docs/src/pages/[platform]/components/button/react.mdx
@@ -3,6 +3,7 @@ import { Example, ExampleCode } from '@/components/Example';
 import { ComponentClassTable } from '@/components/ComponentClassTable';
 import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
 import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
+import { ThemeAlert } from '@/components/ThemeAlert';
 
 import { ButtonDemo } from './demo';
 import { IconButtonExample, ButtonThemeExample } from './examples';
@@ -269,6 +270,8 @@ import '@aws-amplify/ui-react/styles.css';
 
 ### Theme
 
+<ThemeAlert />
+
 You can customize the appearance of all Buttons in your application with a [Theme](/theming).
 
 <Example>

diff --git a/docs/src/pages/[platform]/components/card/examples/CardThemeExample.tsx b/docs/src/pages/[platform]/components/card/examples/CardThemeExample.tsx
@@ -1,4 +1,4 @@
-import { AmplifyProvider, Card, Text, Flex } from '@aws-amplify/ui-react';
+import { ThemeProvider, Card, Text, Flex } from '@aws-amplify/ui-react';
 
 const cardTheme = {
   name: 'card-theme',
@@ -21,7 +21,7 @@ const cardTheme = {
 
 export const CardThemeExample = () => {
   return (
-    <AmplifyProvider theme={cardTheme}>
+    <ThemeProvider theme={cardTheme}>
       <Flex direction="row">
         <Card>
           <Text>Hello</Text>
@@ -33,6 +33,6 @@ export const CardThemeExample = () => {
           <Text>Hello</Text>
         </Card>
       </Flex>
-    </AmplifyProvider>
+    </ThemeProvider>
   );
 };
diff --git a/docs/src/pages/[platform]/components/card/react.mdx b/docs/src/pages/[platform]/components/card/react.mdx
@@ -8,6 +8,7 @@ import {
 } from '@aws-amplify/ui-react';
 import { Example, ExampleCode } from '@/components/Example';
 import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
+import { ThemeAlert } from '@/components/ThemeAlert';
 
 import { CardDemo } from './demo.tsx';
 import {
@@ -77,6 +78,8 @@ The Card component renders as a `div` by default. You can change the HTML elemen
 
 ### Theme
 
+<ThemeAlert />
+
 <Example>
   <CardThemeExample />
 

diff --git a/docs/src/pages/[platform]/components/divider/examples/DividerThemeExample.tsx b/docs/src/pages/[platform]/components/divider/examples/DividerThemeExample.tsx
@@ -1,4 +1,4 @@
-import { Flex, Text, Divider, AmplifyProvider } from '@aws-amplify/ui-react';
+import { Flex, Text, Divider, ThemeProvider } from '@aws-amplify/ui-react';
 
 const theme = {
   name: 'divider-theme',
@@ -18,12 +18,12 @@ const theme = {
 };
 
 export const DividerThemeExample = () => (
-  <AmplifyProvider theme={theme}>
+  <ThemeProvider theme={theme}>
     <Flex direction="column">
       <Text>Before</Text>
       <Divider />
       <Text>After</Text>
       <Divider size="large" />
     </Flex>
-  </AmplifyProvider>
+  </ThemeProvider>
 );
diff --git a/docs/src/pages/[platform]/components/divider/react.mdx b/docs/src/pages/[platform]/components/divider/react.mdx
@@ -2,6 +2,7 @@ import { Divider, View, Flex, Text } from '@aws-amplify/ui-react';
 import { DividerDemo } from './demo';
 import { Example, ExampleCode } from '@/components/Example';
 import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
+import { ThemeAlert } from '@/components/ThemeAlert';
 import {
   DefaultDividerExample,
   HorizontalDividerExample,
@@ -92,6 +93,8 @@ Available options are `small`, `large`, and none (default).
 
 ### Theme
 
+<ThemeAlert />
+
 You can customize the appearance of all Dividers in your application with a [Theme](/theming).
 
 <Example>

diff --git a/docs/src/pages/[platform]/components/link/examples/LinkThemeExample.tsx b/docs/src/pages/[platform]/components/link/examples/LinkThemeExample.tsx
@@ -1,4 +1,4 @@
-import { Link, Theme, AmplifyProvider } from '@aws-amplify/ui-react';
+import { Link, Theme, ThemeProvider } from '@aws-amplify/ui-react';
 
 const theme: Theme = {
   name: 'link-theme',
@@ -13,8 +13,8 @@ const theme: Theme = {
 };
 export const LinkThemeExample = () => {
   return (
-    <AmplifyProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Link>My custom Link</Link>
-    </AmplifyProvider>
+    </ThemeProvider>
   );
 };
diff --git a/docs/src/pages/[platform]/components/link/react.mdx b/docs/src/pages/[platform]/components/link/react.mdx
@@ -2,6 +2,7 @@ import { Link as AmplifyLink } from '@aws-amplify/ui-react';
 
 import { Example, ExampleCode } from '@/components/Example';
 import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
+import { ThemeAlert } from '@/components/ThemeAlert';
 import { LinkDemo } from './demo';
 import {
   DefaultLinkExample,
@@ -86,6 +87,8 @@ The Link component can be used with react routing libraries by passing in routin
 
 ### Theme
 
+<ThemeAlert />
+
 You can customize the appearance of all Links in your application with a [Theme](/theming).
 
 <Example>

diff --git a/docs/src/pages/[platform]/components/menu/examples/themeExample.tsx b/docs/src/pages/[platform]/components/menu/examples/themeExample.tsx
@@ -1,4 +1,4 @@
-import { AmplifyProvider, Menu, MenuItem, Theme } from '@aws-amplify/ui-react';
+import { ThemeProvider, Menu, MenuItem, Theme } from '@aws-amplify/ui-react';
 
 const theme: Theme = {
   name: 'menu-example-theme',
@@ -17,12 +17,12 @@ const theme: Theme = {
 
 export const ThemeExample = () => {
   return (
-    <AmplifyProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Menu>
         <MenuItem>Download</MenuItem>
         <MenuItem>Create a Copy</MenuItem>
         <MenuItem>Mark as Draft</MenuItem>
       </Menu>
-    </AmplifyProvider>
+    </ThemeProvider>
   );
 };
diff --git a/docs/src/pages/[platform]/components/menu/react.mdx b/docs/src/pages/[platform]/components/menu/react.mdx
@@ -14,34 +14,36 @@ import {
 
 import { Example, ExampleCode } from '@/components/Example';
 import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
+import { ThemeAlert } from '@/components/ThemeAlert';
 
 ## Demo
 
 <MenuDemo />
 
 ## Usage
 
-Import the `Menu` and `MenuItem` components. Note that the Menu component is rendered in a React Portal, so you can set the Menu button's width from its outer container. 
+Import the `Menu` and `MenuItem` components. Note that the Menu component is rendered in a React Portal, so you can set the Menu button's width from its outer container.
 
 <Example>
   <BasicExample />
   <ExampleCode>
 ```tsx file=./examples/basicExample.tsx
 
-```
+````
   </ExampleCode>
 </Example>
 
 ### Menu items
 
-Use the `MenuItem` component to configure Menu options. The example below demonstrates how to add interactivity to the `MenuItem`'s via the `onClick` handler, as well as how to use the `Divider` component and `isDisabled` prop. 
+Use the `MenuItem` component to configure Menu options. The example below demonstrates how to add interactivity to the `MenuItem`'s via the `onClick` handler, as well as how to use the `Divider` component and `isDisabled` prop.
 
 <Example>
   <MenuItemsExample />
   <ExampleCode>
 ```tsx file=./examples/menuItemsExample.tsx
 
-```
+````
+
   </ExampleCode>
 </Example>
 
@@ -54,7 +56,7 @@ The default Menu button can be customized by importing the `MenuButton` componen
   <ExampleCode>
 ```tsx file=./examples/menuExample.tsx
 
-```
+````
 
   </ExampleCode>
 </Example>
@@ -68,7 +70,7 @@ To control the alignment of the Menu with the Menu button, use the `menuAlign` p
   <ExampleCode>
 ```tsx file=./examples/menuAlignExample.tsx
 
-```
+````
 
   </ExampleCode>
 </Example>
@@ -82,7 +84,7 @@ Control the size of the Menu button and items using the `size` prop. Available o
   <ExampleCode>
 ```tsx file=./examples/sizeExample.tsx
 
-```
+````
 
   </ExampleCode>
 </Example>
@@ -96,7 +98,7 @@ Create a controlled `Menu` using the `isOpen` and `onOpenChange` props.
   <ExampleCode>
 ```tsx file=./examples/controlledExample.tsx
 
-```
+````
 
   </ExampleCode>
 </Example>
@@ -109,6 +111,8 @@ Create a controlled `Menu` using the `isOpen` and `onOpenChange` props.
 
 ### Theme
 
+<ThemeAlert />
+
 You can customize the appearance of all Menus in your application with a [Theme](/theming).
 
 <Example>
@@ -124,7 +128,7 @@ You can customize the appearance of all Menus in your application with a [Theme]
 <ExampleCode>
 ```tsx file=./examples/themeExample.tsx
 
-```
+````
 </ExampleCode>
 
 ### Global styling
@@ -142,7 +146,7 @@ To override styling on all Menus, you can set the Amplify CSS variables with the
   );
   --amplify-components-button-color: var(--amplify-colors-brand-secondary-90);
 }
-```
+````
 
 ```jsx
 import { Menu, MenuItem } from '@aws-amplify/ui-react';
@@ -263,3 +267,4 @@ _Using style props:_
 ```
   </ExampleCode>
 </Example>
+```
diff --git a/docs/src/pages/[platform]/components/pagination/examples/PaginationThemeExample.tsx b/docs/src/pages/[platform]/components/pagination/examples/PaginationThemeExample.tsx
@@ -1,5 +1,5 @@
 import {
-  AmplifyProvider,
+  ThemeProvider,
   Pagination,
   usePagination,
 } from '@aws-amplify/ui-react';
@@ -27,8 +27,8 @@ export const PaginationThemeExample = () => {
   const paginationProps = usePagination({ totalPages: 6 });
 
   return (
-    <AmplifyProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Pagination {...paginationProps} />
-    </AmplifyProvider>
+    </ThemeProvider>
   );
 };