diff --git a/.changeset/perfect-terms-accept.md b/.changeset/perfect-terms-accept.md new file mode 100644 index 00000000000..2f47765adb7 --- /dev/null +++ b/.changeset/perfect-terms-accept.md @@ -0,0 +1,5 @@ +--- +"@aws-amplify/ui-react": patch +--- + +Add exported class names object which is a JS object containing the classname, primitive name, and description of class diff --git a/docs/src/components/ComponentClassTable.tsx b/docs/src/components/ComponentClassTable.tsx new file mode 100644 index 00000000000..8a6c5c95977 --- /dev/null +++ b/docs/src/components/ComponentClassTable.tsx @@ -0,0 +1,41 @@ +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) => ( + + + {value.className} + + {value.description} + + )); + }, [componentName]); + + return ( + + + + Class + Description + + {targetClasses} +
+ + ); +}; diff --git a/docs/src/pages/components/alert/react.mdx b/docs/src/pages/components/alert/react.mdx index e02dc94de0c..7bd5cb44eb7 100644 --- a/docs/src/pages/components/alert/react.mdx +++ b/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 + + + ### Global styling To override styling on all Alerts, you can set the Amplify CSS variables or use the built-in `.amplify-alert` class. diff --git a/docs/src/pages/components/badge/react.mdx b/docs/src/pages/components/badge/react.mdx index ea05b278076..73b5da3e624 100644 --- a/docs/src/pages/components/badge/react.mdx +++ b/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 + + + ### Global styling To override styling on all Badges, you can set the Amplify CSS variables or use the built-in `.amplify-badge` class. diff --git a/docs/src/pages/components/button/react.mdx b/docs/src/pages/components/button/react.mdx index 1b4e88194f4..d36bd79d9d6 100644 --- a/docs/src/pages/components/button/react.mdx +++ b/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 + + + ### Theme You can customize the appearance of all Buttons in your application with a [Theme](/theming). diff --git a/docs/src/pages/components/card/react.mdx b/docs/src/pages/components/card/react.mdx index b489503edc0..8d2708cf93d 100644 --- a/docs/src/pages/components/card/react.mdx +++ b/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 + + + ### Theme diff --git a/docs/src/pages/components/checkboxfield/react.mdx b/docs/src/pages/components/checkboxfield/react.mdx index 80452cb7c60..1f3b6d19899 100644 --- a/docs/src/pages/components/checkboxfield/react.mdx +++ b/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 + + + ### 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. diff --git a/docs/src/pages/components/collection/react.mdx b/docs/src/pages/components/collection/react.mdx index 21277cebe58..4eabb67896e 100644 --- a/docs/src/pages/components/collection/react.mdx +++ b/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) )} + +## CSS Styling + +### Target classes + + diff --git a/docs/src/pages/components/divider/react.mdx b/docs/src/pages/components/divider/react.mdx index d9140dc3a85..74845d7f864 100644 --- a/docs/src/pages/components/divider/react.mdx +++ b/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, @@ -135,6 +136,10 @@ To replace _all_ the Divider styling, unset it: } ``` +### Target classes + + + ### 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. diff --git a/docs/src/pages/components/expander/react.mdx b/docs/src/pages/components/expander/react.mdx index 7d0db442520..af9e216b419 100644 --- a/docs/src/pages/components/expander/react.mdx +++ b/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 | + ### Global styling diff --git a/docs/src/pages/components/flex/react.mdx b/docs/src/pages/components/flex/react.mdx index 87e8f339314..635f0023902 100644 --- a/docs/src/pages/components/flex/react.mdx +++ b/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 + + diff --git a/docs/src/pages/components/grid/react.mdx b/docs/src/pages/components/grid/react.mdx index 00bac6a6b69..82074516710 100644 --- a/docs/src/pages/components/grid/react.mdx +++ b/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. + +## CSS Styling + +### Target classes + + diff --git a/docs/src/pages/components/heading/react.mdx b/docs/src/pages/components/heading/react.mdx index 8b66573c703..9c4c583c299 100644 --- a/docs/src/pages/components/heading/react.mdx +++ b/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 + + + ### Global styling To override styling on all Headings, you can set the Amplify CSS variables or use the built-in `.amplify-heading` class. diff --git a/docs/src/pages/components/icon/react.mdx b/docs/src/pages/components/icon/react.mdx index 0bd85792a2f..65b99557a2e 100644 --- a/docs/src/pages/components/icon/react.mdx +++ b/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 + + + ### Sizes Icon size matches the font-size of the container. Adjust the font-size to set a specific height. diff --git a/docs/src/pages/components/image/react.mdx b/docs/src/pages/components/image/react.mdx index bbef67157ef..0ad33eb4715 100644 --- a/docs/src/pages/components/image/react.mdx +++ b/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 + +## CSS Styling + +### Target classes + + diff --git a/docs/src/pages/components/link/react.mdx b/docs/src/pages/components/link/react.mdx index d5ef0bcb49f..4d37eb83d1c 100644 --- a/docs/src/pages/components/link/react.mdx +++ b/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 + + + ### 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. diff --git a/docs/src/pages/components/loader/react.mdx b/docs/src/pages/components/loader/react.mdx index 9fe656147af..0a473c8ad23 100644 --- a/docs/src/pages/components/loader/react.mdx +++ b/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 + + + ### Global styling To override styling on all Loaders, you can set the Amplify CSS variables with the built-in `.amplify-loader` class. diff --git a/docs/src/pages/components/menu/react.mdx b/docs/src/pages/components/menu/react.mdx index 7ce71b7eacc..b93fa09b8a2 100644 --- a/docs/src/pages/components/menu/react.mdx +++ b/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) | + ### Global styling diff --git a/docs/src/pages/components/pagination/react.mdx b/docs/src/pages/components/pagination/react.mdx index aef815fc309..29fc998a536 100644 --- a/docs/src/pages/components/pagination/react.mdx +++ b/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 + + + ### Global styling To override styling on all Pagination components, you can set the Amplify CSS variables or use the built-in `.amplify-pagination` class. diff --git a/docs/src/pages/components/passwordfield/react.mdx b/docs/src/pages/components/passwordfield/react.mdx index 0acd35b0756..5c453b383e2 100644 --- a/docs/src/pages/components/passwordfield/react.mdx +++ b/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 + + + ### Global styling To override styling on all TextField primitives, you can set the Amplify CSS variables or use the built-in `.amplify-textfield` class. diff --git a/docs/src/pages/components/phonenumberfield/react.mdx b/docs/src/pages/components/phonenumberfield/react.mdx index c36fc31016e..33eca0dcb38 100644 --- a/docs/src/pages/components/phonenumberfield/react.mdx +++ b/docs/src/pages/components/phonenumberfield/react.mdx @@ -15,6 +15,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 `PhoneNumberField` form primitive can be used allow users to input a phone number. @@ -277,6 +278,10 @@ The following is a contrived example demonstrating use of the `ref` and `country ## CSS Styling +### Target classes + + + ### Global styling To override styling on all `PhoneNumberField` primitives, you can set the Amplify CSS variables with the built-in `.amplify-phonenumberfield` diff --git a/docs/src/pages/components/placeholder/react.mdx b/docs/src/pages/components/placeholder/react.mdx index 61b93db7dfc..ff7c7c48b18 100644 --- a/docs/src/pages/components/placeholder/react.mdx +++ b/docs/src/pages/components/placeholder/react.mdx @@ -1,6 +1,7 @@ import { Placeholder, View, Flex } from '@aws-amplify/ui-react'; import { PlaceholderDemo, TwoWays } from './demo'; import { Example } from '@/components/Example'; +import { ComponentClassTable } from '@/components/ComponentClassTable'; The Placeholder component is used to fill out the interface while content is loaded asynchronously. @@ -65,6 +66,10 @@ Use the `size` prop to change the Placeholder size. Available options are `small ## CSS Styling +### Target classes + + + ### Global styling To override styling on all Placeholder components, you can set the Amplify CSS variables or use the built-in `.amplify-placeholder` class. diff --git a/docs/src/pages/components/radiogroupfield/react.mdx b/docs/src/pages/components/radiogroupfield/react.mdx index 03e1532b5bc..13bad37388e 100644 --- a/docs/src/pages/components/radiogroupfield/react.mdx +++ b/docs/src/pages/components/radiogroupfield/react.mdx @@ -3,6 +3,7 @@ import { Flex, Radio, RadioGroupField } from '@aws-amplify/ui-react'; import { ControlledRadioGroupField, Demo } from './demo'; import { Example } from '@/components/Example'; import { Fragment } from '@/components/Fragment'; +import { ComponentClassTable } from '@/components/ComponentClassTable'; A RadioGroupField allows users to select a single option from a list of mutually exclusive options. @@ -335,6 +336,10 @@ import '@aws-amplify/ui-react/styles.css'; ## CSS Styling +### Target classes + + + ### Global styling To override styling on all Radio buttons, you can set the Amplify CSS variables or use the built-in `.amplify-radio__button` class. diff --git a/docs/src/pages/components/rating/react.mdx b/docs/src/pages/components/rating/react.mdx index 2ebb694259d..5f15f8bea17 100644 --- a/docs/src/pages/components/rating/react.mdx +++ b/docs/src/pages/components/rating/react.mdx @@ -16,6 +16,7 @@ import { } from './examples'; import { RatingDemo } from './demo'; import { Example, ExampleCode } from '@/components/Example'; +import { ComponentClassTable } from '@/components/ComponentClassTable'; ## Demo @@ -145,14 +146,7 @@ A custom empty icon can be used in the Rating component using the `emptyIcon` pr ### Target classes -| Class | Description | -| ------------------------------- | ------------------------------------------------------------------------------------------------------- | -| `amplify-rating` | Top level `` component that wraps all rating elements | -| `amplify-rating-icon-container` | Class applied to the `` that wraps each rating icon | -| `amplify-rating-label` | Class applied to the `