Merge branch 'main' into radiogroup-tokens

.changeset/unlucky-crabs-brake.md

@@ -0,0 +1,5 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+Add missing prop descriptions

docs/src/components/Example.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { Card, Flex, useTheme } from '@aws-amplify/ui-react';
+import { Card, Flex } from '@aws-amplify/ui-react';
 import { CopyButton } from './CopyButton';
 
 interface ExampleProps {
@@ -9,12 +9,12 @@ interface ExampleProps {
 }
 
 export function Example({ children, className = '' }: ExampleProps) {
-  const { tokens } = useTheme();
   return (
     <Card
       variation="outlined"
       className={`example ${className}`}
-      style={{ marginBottom: `${tokens.space.large}` }}
+      backgroundColor="inherit"
+      marginBottom="space.large"
     >
       <Flex direction="column">{children}</Flex>
     </Card>

docs/src/components/InstallScripts.tsx

@@ -0,0 +1,46 @@
+import { CopyButton } from '@/components/CopyButton';
+import { Tabs, TabItem } from '@aws-amplify/ui-react';
+
+type WebFramework = 'react' | 'vue' | 'angular';
+
+interface TerminalCommandProps {
+  framework: WebFramework;
+  packageManager: 'npm' | 'yarn';
+}
+
+const TerminalCommand = ({
+  framework,
+  packageManager,
+}: TerminalCommandProps) => {
+  const frameworkInstallScript = `${
+    packageManager === 'npm' ? 'npm i' : 'yarn add'
+  } @aws-amplify/ui-${framework} aws-amplify`;
+
+  return (
+    <code className="install-code__container">
+      <p className="install-code__content">{frameworkInstallScript}</p>
+      <CopyButton
+        className="install-code__button"
+        copyText={frameworkInstallScript}
+        variation="link"
+      />
+    </code>
+  );
+};
+
+interface InstallScriptsProps {
+  framework: WebFramework;
+}
+
+export const InstallScripts = ({ framework }: InstallScriptsProps) => {
+  return (
+    <Tabs maxWidth="42rem">
+      <TabItem title="npm">
+        <TerminalCommand framework={framework} packageManager="npm" />
+      </TabItem>
+      <TabItem title="yarn">
+        <TerminalCommand framework={framework} packageManager="yarn" />
+      </TabItem>
+    </Tabs>
+  );
+};

docs/src/components/Layout/Sidebar.tsx

@@ -50,7 +50,13 @@ const NavLinks = ({
   </Collection>
 );
 
-const NavLink = ({ href, children, onClick, tertiary, platforms = [] }) => {
+const NavLink = ({
+  href,
+  children,
+  onClick,
+  tertiary = false,
+  platforms = [],
+}) => {
   const {
     query: { platform = 'react' },
     pathname,
@@ -129,7 +135,7 @@ const ExpanderTitle = ({ Icon, text }) => {
 // TODO: clean up this logic
 const SecondaryNav = (props) => {
   const { pathname } = useCustomRouter();
-
+  const { platform } = props;
   // Extract section from URL (/section/... => section)
   let section = pathname.split('/')[2];
   // NOTE: Remove this logic when we update the URLs for these sections.
@@ -169,21 +175,27 @@ const SecondaryNav = (props) => {
           </NavLink>
         ))}
       </ExpanderItem>
-      <ExpanderItem
-        title={
-          <ExpanderTitle Icon={MdOutlineWidgets} text="Primitive components" />
-        }
-        value="components"
-      >
-        {primitiveComponents.map(({ heading, components }) => (
-          <NavLinkComponentsSection
-            {...props}
-            key={heading}
-            heading={heading}
-            components={components}
-          />
-        ))}
-      </ExpanderItem>
+      {platform === 'react' ? (
+        <ExpanderItem
+          title={
+            <ExpanderTitle
+              Icon={MdOutlineWidgets}
+              text="Primitive components"
+            />
+          }
+          value="components"
+        >
+          {primitiveComponents.map(({ heading, components }) => (
+            <NavLinkComponentsSection
+              {...props}
+              key={heading}
+              heading={heading}
+              components={components}
+            />
+          ))}
+        </ExpanderItem>
+      ) : null}
+
       <ExpanderItem
         title={<ExpanderTitle Icon={MdWebAssetOff} text="Legacy components" />}
         value="legacy-components"
@@ -240,7 +252,7 @@ export const Sidebar = ({ expanded, setExpanded, platform }) => {
 
           <FrameworkChooser onClick={onClick} />
 
-          <SecondaryNav onClick={onClick} />
+          <SecondaryNav onClick={onClick} platform={platform} />
 
           <Divider size="small" />
 

docs/src/components/ThemeExample.mdx

@@ -0,0 +1,25 @@
+import { Link, Flex, View } from '@aws-amplify/ui-react';
+import { Fragment } from '@/components/Fragment';
+import { ThemeAlert } from '@/components/ThemeAlert';
+import { GITHUB_REPO_FILE } from '@/data/links';
+import { DesignTokenIcon } from '@/components/Icons';
+
+### Theme
+
+<ThemeAlert />
+
+You can customize the appearance of all {props.component} components in your application with a [Theme](/theming).
+
+<Link
+  className="docs-component-link"
+  href={`${GITHUB_REPO_FILE}packages/ui/src/theme/tokens/components/${
+    props.link ||
+    props.component.charAt(0).toLowerCase() + props.component.slice(1)
+  }.ts`}
+  isExternal
+>
+  <DesignTokenIcon ariaLabel="theme-source" marginInlineEnd="0.5rem" />
+  {props.component} Theme Source
+</Link>
+
+<View backgroundColor="white">{props.children}</View>

docs/src/data/links.ts

@@ -424,6 +424,11 @@ export const theming = [
     label: 'CSS variables',
     platforms: ['react', 'vue', 'angular'],
   },
+  {
+    href: '/theming/style-props',
+    label: 'Style Props',
+    platforms: ['react'],
+  },
 ];
 
 export const DISCORD = 'https://discord.gg/amplify';

docs/src/pages/[platform]/components/alert/examples/AlertThemeExample.tsx

@@ -0,0 +1,47 @@
+import { Alert, Flex, ThemeProvider, Theme } from '@aws-amplify/ui-react';
+
+const theme: Theme = {
+  name: 'alert-theme',
+  tokens: {
+    components: {
+      alert: {
+        // Default styles
+        backgroundColor: { value: '{colors.teal.20}' },
+
+        icon: {
+          size: { value: '{fontSizes.xxxl}' },
+        },
+
+        heading: {
+          fontSize: { value: '{fontSizes.large}' },
+          fontWeight: { value: '{fontWeights.normal}' },
+        },
+
+        // Variations
+        info: {
+          color: { value: 'white' },
+          backgroundColor: { value: '{colors.blue.80}' },
+        },
+
+        success: {
+          color: { value: 'black' },
+          backgroundColor: { value: '{colors.yellow.40}' },
+        },
+      },
+    },
+  },
+};
+
+export const AlertThemeExample = () => (
+  <ThemeProvider theme={theme} colorMode="light">
+    <Flex direction="column">
+      <Alert heading="Default alert title">Hello</Alert>
+      <Alert variation="info" heading="Info">
+        Here is some info
+      </Alert>
+      <Alert variation="success" heading="Success">
+        Hooray!
+      </Alert>
+    </Flex>
+  </ThemeProvider>
+);

docs/src/pages/[platform]/components/alert/examples/index.tsx

@@ -5,3 +5,4 @@ export { AlertIconExample } from './AlertIconExample';
 export { DismissibleAlertExample } from './DismissibleAlertExample';
 export { OnDismissAlertExample } from './OnDismissAlertExample';
 export { AlertStylePropsExample } from './AlertStylePropsExample';
+export { AlertThemeExample } from './AlertThemeExample';

docs/src/pages/[platform]/components/alert/react.mdx

@@ -1,7 +1,7 @@
 import { Alert, Flex, View } from '@aws-amplify/ui-react';
 import { Example, ExampleCode } from '@/components/Example';
 import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
-
+import ThemeExample from '@/components/ThemeExample.mdx';
 import { AlertDemo } from './demo';
 import {
   DefaultAlertExample,
@@ -11,6 +11,7 @@ import {
   DismissibleAlertExample,
   OnDismissAlertExample,
   AlertStylePropsExample,
+  AlertThemeExample,
 } from './examples';
 
 ## Demo
@@ -127,6 +128,20 @@ Use the `onDismiss` prop to pass a function that will run when the Alert is dism
 
 ## CSS Styling
 
+<ThemeExample component="Alert">
+  <Example>
+    <AlertThemeExample />
+
+    <ExampleCode>
+
+    ```tsx file=./examples/AlertThemeExample.tsx
+
+    ```
+
+    </ExampleCode>
+  </Example>
+</ThemeExample>
+
 ### Target classes
 
 <ComponentStyleDisplay componentName="Alert" />

docs/src/pages/[platform]/components/authenticator/customization/customization.headers-and-footers.web.mdx

@@ -126,5 +126,4 @@ The following example customizes these slots with:
       },
 
   }}/>
-  />
 </Example>

docs/src/pages/[platform]/components/badge/examples/BadgeThemeExample.tsx

@@ -0,0 +1,40 @@
+import { Badge, ThemeProvider, Theme, Flex } from '@aws-amplify/ui-react';
+
+const theme: Theme = {
+  name: 'badge-theme',
+  tokens: {
+    components: {
+      badge: {
+        // Default styles
+        color: { value: '{colors.white}' },
+        fontWeight: { value: '{fontWeights.normal}' },
+        fontSize: { value: '{fontSizes.medium}' },
+        backgroundColor: { value: '{colors.blue.80}' },
+        paddingVertical: { value: '{space.small}' },
+        paddingHorizontal: { value: '{space.medium}' },
+        borderRadius: { value: '{radii.small}' },
+
+        // Variations
+        success: {
+          color: { value: '{colors.black}' },
+          backgroundColor: { value: '{colors.green.60}' },
+        },
+
+        // Sizes
+        large: {
+          fontSize: { value: '{fontSizes.xxl}' },
+        },
+      },
+    },
+  },
+};
+
+export const BadgeThemeExample = () => (
+  <ThemeProvider theme={theme} colorMode="light">
+    <Flex alignItems="flex-end">
+      <Badge>Default</Badge>
+      <Badge variation="success">Success</Badge>
+      <Badge size="large">Large</Badge>
+    </Flex>
+  </ThemeProvider>
+);

docs/src/pages/[platform]/components/badge/examples/index.ts

@@ -2,3 +2,4 @@ export { DefaultBadgeExample } from './DefaultBadgeExample';
 export { BadgeVariationExample } from './BadgeVariationExample';
 export { BadgeSizeExample } from './BadgeSizeExample';
 export { BadgeStyleProps } from './BadgeStyleProps';
+export { BadgeThemeExample } from './BadgeThemeExample';

docs/src/pages/[platform]/components/badge/react.mdx

@@ -2,11 +2,13 @@ import { Badge, View } from '@aws-amplify/ui-react';
 import { BadgeDemo } from './demo';
 import { Example, ExampleCode } from '@/components/Example';
 import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
+import ThemeExample from '@/components/ThemeExample.mdx';
 import {
   DefaultBadgeExample,
   BadgeVariationExample,
   BadgeSizeExample,
   BadgeStyleProps,
+  BadgeThemeExample,
 } from './examples';
 
 ## Demo
@@ -67,7 +69,22 @@ Use the `size` prop to change the Badge size. Available options are `small`, `la
   </ExampleCode>
 </Example>
 
-## Styling
+## CSS Styling
+
+<ThemeExample component="Badge">
+  <Example>
+    <BadgeThemeExample />
+
+    <ExampleCode>
+
+    ```tsx file=./examples/BadgeThemeExample.tsx
+
+    ```
+
+    </ExampleCode>
+  </Example>
+</ThemeExample>
+
 
 ### Target classes