diff --git a/packages/react-core/src/components/Alert/examples/Alert.md b/packages/react-core/src/components/Alert/examples/Alert.md index 21c49c34607..66db8ac8ca6 100644 --- a/packages/react-core/src/components/Alert/examples/Alert.md +++ b/packages/react-core/src/components/Alert/examples/Alert.md @@ -137,7 +137,7 @@ const AlertTimeout: React.FunctionComponent = () => { An alert can contain additional, hidden information that is made visible when users click a caret icon. This information can be expanded and collapsed each time the icon is clicked. -It is not recommended to use an expandable alert with a `timeout` in a toast [alert group](/components/alert-group) because the alert could timeout before users have time to interact with and view the entire alert. +It is not recommended to use an expandable alert with a `timeout` in a [toast alert group](/components/alert#toast-alert-group) because the alert could timeout before users have time to interact with and view the entire alert. See the [toast alert considerations](/components/alert/accessibility#toast-alerts) section of the alert accessibility documentation to understand the accessibility risks associated with using toast alerts. @@ -354,7 +354,7 @@ import { Alert, AlertActionCloseButton } from '@patternfly/react-core'; ### Dynamic live region alerts -Alerts that are asynchronously appended into dynamic [alert groups](/components/alert-group) via the `isLiveRegion` property will be announced to assistive technology the moment the change happens, following the strategy used for `aria-atomic`, which defaults to false. This means only changes of type "addition" will be announced. +Alerts that are asynchronously appended into dynamic [alert groups](/components/alert/#alert-group-examples) via the `isLiveRegion` property will be announced to assistive technology the moment the change happens, following the strategy used for `aria-atomic`, which defaults to false. This means only changes of type "addition" will be announced. ```ts file="AlertDynamicLiveRegion.tsx" ``` @@ -379,7 +379,7 @@ Alert groups can be one of the following variants: | Toast | Toast alert groups contain alerts that typically appear in response to an asynchronous event or user action. These groups are positioned on top of other content at the top right of the page.| | Dynamic | Dynamic alert groups contain alerts that typically appear in response to a user action, and are seen within the normal page content flow.| -Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic `AlertGroup`, both of which must use the `isLiveRegion` property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the [aria-atomic and aria-relevant](/components/alert-group/accessibility#aria-atomic-and-aria-relevant) section of the alert group accessibility documentation. +Dynamic alerts that are generated after the page initially loads must be appended to either a toast or dynamic `AlertGroup`, both of which must use the `isLiveRegion` property. New alerts appended to a toast or dynamic group will be announced by assistive technologies the moment the change happens. For information about customizing this announcement, read the [aria-atomic and aria-relevant](/components/alert/accessibility#aria-atomic-and-aria-relevant) section of the alert accessibility documentation. ### Static inline alert group @@ -414,7 +414,7 @@ Users navigating via keyboard or another assistive technology will need a way to The following example shows how alerts can be triggered by an asynchronous event in the application. You can customize how an alert will be announced to assistive technology by adjusting the value of the `aria-live` property. Click the "start async" alert button below and then click the buttons in the above toast examples to demonstrate how asynchronous events add alerts to a group. Click the "stop async alerts" button to halt this behavior. -See the [alert group accessibility tab](/components/alert-group/accessibility) for more information on customizing this behavior. +See the [alert accessibility tab](/components/alert/accessibility) for more information on customizing this behavior. ```ts file="./AlertGroupAsync.tsx" ``` diff --git a/packages/react-core/src/components/Dropdown/examples/Dropdown.md b/packages/react-core/src/components/Dropdown/examples/Dropdown.md index a30813987aa..e826d27ee64 100644 --- a/packages/react-core/src/components/Dropdown/examples/Dropdown.md +++ b/packages/react-core/src/components/Dropdown/examples/Dropdown.md @@ -25,7 +25,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico Basic dropdowns present users with a menu of items upon clicking a dropdown toggle. -A `` uses a [menu toggle](/components/menu-toggle), which is passed to the `toggle` property, as well as a `` with multiple `` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback. +A `` uses a [menu toggle](/components/menus/menu-toggle), which is passed to the `toggle` property, as well as a `` with multiple `` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback. The following example shows a few different states of dropdown items. As shown in this example, dropdown items may: diff --git a/packages/react-core/src/demos/DateTimePicker.md b/packages/react-core/src/demos/DateTimePicker.md index f37ac682575..028ff10193f 100644 --- a/packages/react-core/src/demos/DateTimePicker.md +++ b/packages/react-core/src/demos/DateTimePicker.md @@ -10,7 +10,7 @@ import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-c ## Demos -In this demo, learn how to use a [CalendarMonth](/components/calendar-month) component and a [Dropdown](/components/dropdown) component to compose a simple DateTimePicker. The input is read only, meaning that the following example does not cover pasting a copied date and time. Also, you can pick the time only from the predefined options and cannot change it in the input. +In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calendar-month) component and a [Dropdown](/components/menus/dropdown) component to compose a simple DateTimePicker. The input is read only, meaning that the following example does not cover pasting a copied date and time. Also, you can pick the time only from the predefined options and cannot change it in the input. ### Date and time picker diff --git a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md index f21d8ef2b02..00792444de8 100644 --- a/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md +++ b/packages/react-core/src/deprecated/components/ApplicationLauncher/examples/ApplicationLauncher.md @@ -13,8 +13,8 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import { Link } from '@reach/router'; import pfLogoSm from './pf-logo-small.svg'; -Note: Application launcher is built on Dropdown, for extended API go to [Dropdown](/documentation/react/components/dropdown) documentation. -To add a tooltip, use the `tooltip` prop and optionally add more tooltip props by using `tooltipProps`. For more tooltip information go to [Tooltip](/documentation/react/components/tooltip). +Note: Application launcher is built on dropdown, for extended API go to [dropdown](/components/menus/dropdown) documentation. +To add a tooltip, use the `tooltip` prop and optionally add more tooltip props by using `tooltipProps`. For more tooltip information go to [tooltip](/components/tooltip). ## Examples diff --git a/packages/react-core/src/helpers/OUIA/OUIA.md b/packages/react-core/src/helpers/OUIA/OUIA.md index b92cf5944eb..efe54219295 100644 --- a/packages/react-core/src/helpers/OUIA/OUIA.md +++ b/packages/react-core/src/helpers/OUIA/OUIA.md @@ -59,38 +59,28 @@ import { Button } from '@patternfly/react-core'; * [Breadcrumb](/components/breadcrumb) * [Button](/components/button) * [Card](/components/card) -* [Checkbox](/components/checkbox) +* [Checkbox](/components/forms/checkbox) * [Chip](/components/chip) -* [ChipGroup](/components/chipg-roup) -* [ContextSelector](/components/context-selector) -* [Dropdown](/components/dropdown) -* [DropdownItem](/components/dropdown) -* [DropdownSeparator](/components/dropdown) -* [DropdownToggle](/components/dropdown) -* [DropdownToggleCheckbox](/components/dropdown) -* [FormSelect](/components/form-select) -* [Menu](/components/menu) +* [Dropdown](/components/menus/dropdown) +* [DropdownItem](/components/menus/dropdown) +* [FormSelect](/components/forms/form-select) +* [Menu](/components/menus/menu) * [Modal](/components/modal) -* [ModalBoxCloseButton](/components/modal) -* [ModalContent](/components/modal) -* [Nav](/components/navigation) +* [Navigation](/components/navigation) * [NavExpandable](/components/navigation) * [NavItem](/components/navigation) -* [OptionsMenu](/components/options-menu) * [Pagination](/components/pagination) -* [Radio](/components/radio) -* [Select](/components/select) +* [Radio](/components/forms/radio) +* [Select](/components/menus/select) * [Switch](/components/switch) * [TabContent](/components/tabs) * [Tabs](/components/tabs) * [Text](/components/text) -* [TextInput](/components/text-input) +* [TextInput](/components/forms/text-input) * [Title](/components/title) * [Toolbar](/components/toolbar) ### react-table package -* [RowWrapper](/components/table) * [Table](/components/table) -* [TableComposable](/components/table) * [Tr](/components/table)