Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/react-core/src/components/Alert/examples/Alert.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this link is not working as well

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did some investigating - I believe the link itself is correct, it's just not autoscrolling to the linked example, even though it's updating the URL. I'm not sure why.


Expand Down Expand Up @@ -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"
```
Expand All @@ -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

Expand Down Expand Up @@ -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.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This link is still broken

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This link is correct - but the accessibility doc is not available in the react workspace. it's only available when react workspace is consumed in org and built along with the accessibility docs.


```ts file="./AlertGroupAsync.tsx"
```
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<Dropdown>` uses a [menu toggle](/components/menu-toggle), which is passed to the `toggle` property, as well as a `<DropdownList>` with multiple `<DropdownItem>` components. To allow a dropdown to change the open state of the menu, pass the `isOpen` property into the `onOpenChange` callback.
A `<Dropdown>` uses a [menu toggle](/components/menus/menu-toggle), which is passed to the `toggle` property, as well as a `<DropdownList>` with multiple `<DropdownItem>` 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:

Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/demos/DateTimePicker.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
28 changes: 9 additions & 19 deletions packages/react-core/src/helpers/OUIA/OUIA.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)