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 <[email protected]>

Author: jacoblogan

.changeset/flat-dryers-nail.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+re export AmplifyProvider as ThemeProvider

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>
+  );
+};

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>
   );
 }

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.
 

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';

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>
 );

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>

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>
   );
 };

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 />
 

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>
 );