Add css classnames

docs/src/components/ComponentClassTable.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import {
+  Table,
+  ComponentClassObject,
+  View,
+  TableRow,
+  TableCell,
+} from '@aws-amplify/ui-react';
+
+export const ComponentClassTable = ({ componentName }) => {
+  const targetClasses = React.useMemo(() => {
+    return Object.values(ComponentClassObject)
+      .filter((value: any) => {
+        return (
+          value &&
+          Array.isArray(value.components) &&
+          value.components.includes(componentName)
+        );
+      })
+      .map((value: any) => (
+        <TableRow key={value.className}>
+          <TableCell>{value.className}</TableCell>
+          <TableCell>{value.description}</TableCell>
+        </TableRow>
+      ));
+  }, [componentName]);
+
+  return (
+    <View className="docs-css-classes">
+      <Table variation="bordered">
+        <TableRow>
+          <TableCell as="th">Class</TableCell>
+          <TableCell as="th">Description</TableCell>
+        </TableRow>
+        {targetClasses}
+      </Table>
+    </View>
+  );
+};

docs/src/pages/components/alert/react.mdx

@@ -1,5 +1,6 @@
 import { Alert, Flex, View } from '@aws-amplify/ui-react';
 import { Example, ExampleCode } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 import { AlertDemo } from './demo';
 import {
@@ -126,6 +127,10 @@ Use the `onDismiss` prop to pass a function that will run when the Alert is dism
 
 ## CSS Styling
 
+### Target classes
+
+<ComponentClassTable componentName="Alert" />
+
 ### Global styling
 
 To override styling on all Alerts, you can set the Amplify CSS variables or use the built-in `.amplify-alert` class.

docs/src/pages/components/badge/react.mdx

@@ -1,6 +1,7 @@
 import { Badge, View } from '@aws-amplify/ui-react';
 import { BadgeDemo } from './demo';
 import { Example, ExampleCode } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 import {
   DefaultBadgeExample,
   BadgeVariationExample,
@@ -68,6 +69,10 @@ Use the `size` prop to change the Badge size. Available options are `small`, `la
 
 ## Styling
 
+### Target classes
+
+<ComponentClassTable componentName="Badge" />
+
 ### Global styling
 
 To override styling on all Badges, you can set the Amplify CSS variables or use the built-in `.amplify-badge` class.

docs/src/pages/components/button/react.mdx

@@ -1,7 +1,8 @@
 import { Button, ButtonGroup, Flex, View } from '@aws-amplify/ui-react';
+import { Example, ExampleCode } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 import { ButtonDemo } from './demo';
-import { Example, ExampleCode } from '@/components/Example';
 import { IconButtonExample, ButtonThemeExample } from './examples';
 
 ## Demo
@@ -245,6 +246,10 @@ import '@aws-amplify/ui-react/styles.css';
 
 ## Customization
 
+### Target classes
+
+<ComponentClassTable componentName="Button" />
+
 ### Theme
 
 You can customize the appearance of all Buttons in your application with a [Theme](/theming).

docs/src/pages/components/card/react.mdx

@@ -6,9 +6,10 @@ import {
   Expander,
   ExpanderItem,
 } from '@aws-amplify/ui-react';
-import { CardDemo } from './demo.tsx';
 import { Example, ExampleCode } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
+import { CardDemo } from './demo.tsx';
 import {
   DefaultCardExample,
   CardThemeExample,
@@ -70,6 +71,10 @@ The Card component renders as a `div` by default. You can change the HTML elemen
 
 ## Customization
 
+### Target classes
+
+<ComponentClassTable componentName="Card" />
+
 ### Theme
 
 <Example>

docs/src/pages/components/checkboxfield/react.mdx

@@ -5,6 +5,7 @@ import { ValueExample } from './examples/valueExample';
 import { CheckboxDemo } from './demo';
 import { Example } from '@/components/Example';
 import { Fragment } from '@/components/Fragment';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 CheckboxField is used to mark an individual item as selected, or to select multiple items from a list of individual items.
 
@@ -140,6 +141,10 @@ import { CheckboxField } from '@aws-amplify/ui-react';
 
 ## CSS Styling
 
+### Target classes
+
+<ComponentClassTable componentName="CheckboxField" />
+
 ### Global styling
 
 To override styling on all Checkbox icons, you can set the Amplify CSS variables or use the built-in `.amplify-checkbox__icon` class.

docs/src/pages/components/collection/react.mdx

@@ -10,6 +10,7 @@ import {
 import { countries } from 'countries-list';
 import { CollectionDemo, ListCollectionExample } from './demo';
 import { Example } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 A Collection wraps Flex and Grid components, and provides a way to display items in a collection from a data source.
 
@@ -217,3 +218,9 @@ const startsWith = (regions, keyword) => regions.name.startsWith(keyword)
     )}
   </Collection>
 </Example>
+
+## CSS Styling
+
+### Target classes
+
+<ComponentClassTable componentName="Collection" />

docs/src/pages/components/divider/react.mdx

@@ -1,6 +1,7 @@
 import { Divider, View, Flex, Text } from '@aws-amplify/ui-react';
 import { DividerDemo } from './demo';
 import { Example, ExampleCode } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 import {
   DefaultDividerExample,
   HorizontalDividerExample,
@@ -121,6 +122,10 @@ To replace _all_ the Divider styling, unset it:
 }
 ```
 
+### Target classes
+
+<ComponentClassTable componentName="Divider" />
+
 ### Local styling
 
 To override styling on a specific Divider, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

docs/src/pages/components/expander/react.mdx

@@ -12,6 +12,7 @@ import {
 } from './examples';
 import { ExpanderDemo } from './demo';
 import { Example, ExampleCode } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 ## Demo
 
@@ -129,15 +130,7 @@ To use the Expander as controlled component, specify the `value` of the item(s)
 
 ### Target classes
 
-| Class                             | Description                                                |
-| --------------------------------- | ---------------------------------------------------------- |
-| `amplify-expander`                | Expander root element                                      |
-| `amplify-expander__item`          | Expander item(containier for header, trigger, and content) |
-| `amplify-expander__header`        | Expander item header                                       |
-| `amplify-expander__trigger`       | Expander item trigger(button)                              |
-| `amplify-expander__icon`          | Icon to indicate whether an item is expanded or collapsed  |
-| `amplify-expander__content`       | Expander content container                                 |
-| `amplify-expander__content__text` | Expander content text                                      |
+<ComponentClassTable componentName="Expander" />
 
 ### Global styling
 

docs/src/pages/components/flex/react.mdx

@@ -1,6 +1,7 @@
 import { Flex, Text, Button, View } from '@aws-amplify/ui-react';
 import { FlexDemo } from './demo';
 import { Example, ExampleCode } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 import { DefaultFlexExample } from './examples';
 
 The Flex primitive provides a Flexbox container with style `display: flex`. To learn how to use Flexbox CSS properties, see the following documentation:
@@ -49,3 +50,9 @@ Import the Flex primitive.
 - `alignContent="normal"`
 - `wrap="nowrap"`
 - `gap="1rem"`
+
+## CSS Styling
+
+### Target classes
+
+<ComponentClassTable componentName="Flex" />

docs/src/pages/components/grid/react.mdx

@@ -2,6 +2,7 @@ import { Grid, View } from '@aws-amplify/ui-react';
 
 import { GridDemo } from './demo';
 import { Example } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 Grid primitive provides a grid container with style `display: grid`. Any of our other primitives can be used grid item children. To learn how to use Grid CSS properties, see the following documentation:
 
@@ -155,3 +156,9 @@ See [responsive design](/ui/theme/responsive) for more details.
     <View backgroundColor="var(--amplify-colors-pink-60)"></View>
   </Grid>
 </Example>
+
+## CSS Styling
+
+### Target classes
+
+<ComponentClassTable componentName="Grid" />

docs/src/pages/components/heading/react.mdx

@@ -7,6 +7,7 @@ import {
 } from './examples';
 import { HeadingDemo } from './demo';
 import { Example, ExampleCode } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 ## Demo
 
@@ -42,6 +43,10 @@ Use the `level` prop to change the heading level (e.g., `h1 - h6`). Available op
 
 ## CSS Styling
 
+### Target classes
+
+<ComponentClassTable componentName="Heading" />
+
 ### Global styling
 
 To override styling on all Headings, you can set the Amplify CSS variables or use the built-in `.amplify-heading` class.

docs/src/pages/components/icon/react.mdx

@@ -2,6 +2,7 @@ import { Button, Icon, Flex, Text } from '@aws-amplify/ui-react';
 import { IconDemo } from './demo';
 import { AllIcons } from './AllIcons';
 import { Example, ExampleCode } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 import {
   AccessibilityIconExample,
@@ -136,6 +137,10 @@ To use an icon library like [React Icons](https://react-icons.github.io/react-ic
 
 ## Styling
 
+### Target classes
+
+<ComponentClassTable componentName="Icon" />
+
 ### Sizes
 
 Icon size matches the font-size of the container. Adjust the font-size to set a specific height.

docs/src/pages/components/image/react.mdx

@@ -1,6 +1,7 @@
 import { Image, View } from '@aws-amplify/ui-react';
 
 import { Example, ExampleCode } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 import { ImageDemo } from './demo';
 import {
   DefaultImageExample,
@@ -53,3 +54,9 @@ To control how an Image fits its container, use the `objectFit` and `objectPosit
 
   </ExampleCode>
 </Example>
+
+## CSS Styling
+
+### Target classes
+
+<ComponentClassTable componentName="Image" />

docs/src/pages/components/link/react.mdx

@@ -1,5 +1,6 @@
 import { Link as AmplifyLink } from '@aws-amplify/ui-react';
 import { Example } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 import { LinkDemo } from './demo';
 
 Links are customizable and themable elements used for Navigation. By default Links render an anchor tag but can be configured to be used with routing libraries.
@@ -69,6 +70,10 @@ import { Link as ReachLink } from '@reach/router';
 
 ## CSS Styling
 
+### Target classes
+
+<ComponentClassTable componentName="Link" />
+
 ### CSS Pseudo Classes
 
 The Link component primarily uses four css pseudo classes. These are `:active`, `:focus`, `:hover`, and `:visited`. Styling the Link component while in one of these states can also be accomplished using the following techniques in conjunction with the appropriate pseudo class selector.

docs/src/pages/components/loader/react.mdx

@@ -2,6 +2,7 @@ import { Flex, Loader } from '@aws-amplify/ui-react';
 
 import { LoaderDemo } from './demo';
 import { Example } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 Loaders provide a visual cue that an action is either processing or awaiting a result. They are used to help the customer understand the system is working to fulfill a request.
 
@@ -110,6 +111,10 @@ import '@aws-amplify/ui-react/styles.css';
 
 ## CSS Styling
 
+### Target classes
+
+<ComponentClassTable componentName="Loader" />
+
 ### Global styling
 
 To override styling on all Loaders, you can set the Amplify CSS variables with the built-in `.amplify-loader` class.

docs/src/pages/components/menu/react.mdx

@@ -10,6 +10,7 @@ import {
 } from './examples/';
 
 import { Example } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 Menu provides an accessible, interactive menu for selecting actions within an application. Dropdown menu is collision-aware and will automatically change location based on available space.
 
@@ -82,11 +83,7 @@ Create a controlled `Menu` using the `isOpen` and `onOpenChange` props.
 
 ### Target classes
 
-| Class                        | Description                                                                     |
-| ---------------------------- | ------------------------------------------------------------------------------- |
-| `amplify-menu-content`       | Menu content container (`Flex`)                                                 |
-| `amplify-menu-content__item` | Menu item button (`MenuButton`, wrapped in `amplify-menu-content` class)        |
-| `amplify-menu-trigger`       | Menu trigger button (`MenuButton`, not wrapped in `amplify-menu-content` class) |
+<ComponentClassTable componentName="Menu" />
 
 ### Global styling
 

docs/src/pages/components/pagination/react.mdx

@@ -1,6 +1,7 @@
 import { Flex } from '@aws-amplify/ui-react';
 import { PaginationDemo } from './demo.tsx';
 import { Example } from '@/components/Example';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 
 Pagination provides navigation to allow customers to move between large sets of content that are distributed across multiple pages.
 
@@ -30,6 +31,10 @@ import '@aws-amplify/ui-react/styles.css';
 
 ## CSS styling
 
+### Target classes
+
+<ComponentClassTable componentName="Pagination" />
+
 ### Global styling
 
 To override styling on all Pagination components, you can set the Amplify CSS variables or use the built-in `.amplify-pagination` class.

docs/src/pages/components/passwordfield/react.mdx

@@ -16,6 +16,7 @@ import {
 } from './examples';
 import { Example, ExampleCode } from '@/components/Example';
 import { Fragment } from '@/components/Fragment';
+import { ComponentClassTable } from '@/components/ComponentClassTable';
 import { RefExample } from './examples/refs';
 
 The PasswordField primitive allows users to input passwords. It also features full password manager support and an optional show/hide password button for user convenience.
@@ -291,6 +292,10 @@ The following is an example demonstrating use of the `ref` and `showPasswordButt
 
 ## CSS Styling
 
+### Target classes
+
+<ComponentClassTable componentName="PasswordField" />
+
 ### Global styling
 
 To override styling on all TextField primitives, you can set the Amplify CSS variables or use the built-in `.amplify-textfield` class.