Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: Document RAC Dialog close button slot #7405

Merged
merged 1 commit into from
Nov 20, 2024
Merged

docs: Document RAC Dialog close button slot #7405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
44 changes: 27 additions & 17 deletions packages/react-aria-components/docs/Dialog.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,22 +50,20 @@ import {DialogTrigger, Modal, Dialog, Button, Heading, TextField, Label, Input}
<Button>Sign up…</Button>
<Modal>
<Dialog>
{({close}) => (
<form>
<Heading slot="title">Sign up</Heading>
<TextField autoFocus>
<Label>First Name</Label>
<Input />
</TextField>
<TextField>
<Label>Last Name</Label>
<Input />
</TextField>
<Button onPress={close} style={{marginTop: 8}}>
Submit
</Button>
</form>
)}
<form>
<Heading slot="title">Sign up</Heading>
<TextField autoFocus>
<Label>First Name</Label>
<Input />
</TextField>
<TextField>
<Label>Last Name</Label>
<Input />
</TextField>
<Button slot="close" style={{marginTop: 8}}>
Submit
</Button>
</form>
</Dialog>
</Modal>
</DialogTrigger>
Expand Down Expand Up @@ -113,7 +111,7 @@ building fully accessible custom dialogs from scratch is very difficult and erro

<Anatomy />

A dialog consists of a container element and an optional title. It can be placed within a [Modal](Modal.html) or [Popover](Popover.html), to create modal dialogs, popovers, and other types of overlays. A `DialogTrigger` can be used to open a dialog overlay in response to a user action, e.g. clicking a button.
A dialog consists of a container element and an optional title and close button. It can be placed within a [Modal](Modal.html) or [Popover](Popover.html), to create modal dialogs, popovers, and other types of overlays. A `DialogTrigger` can be used to open a dialog overlay in response to a user action, e.g. clicking a button.

```tsx
import {DialogTrigger, Modal, Dialog, Button, Heading} from 'react-aria-components';
Expand All @@ -123,6 +121,7 @@ import {DialogTrigger, Modal, Dialog, Button, Heading} from 'react-aria-componen
<Modal>
<Dialog>
<Heading slot="title" />
<Button slot="close" />
</Dialog>
</Modal>
</DialogTrigger>
Expand Down Expand Up @@ -199,6 +198,17 @@ Alert dialogs are a special type of dialog meant to present a prompt that the us

A `<Heading>` accepts all HTML attributes.

### Button

A `<Button slot="close">` element can be placed inside a `<Dialog>` to close it when pressed.

<details>
<summary style={{fontWeight: 'bold'}}><ChevronRight size="S" /> Show props</summary>

<PropTable component={docs.exports.Button} links={docs.links} />

</details>

## Styling

React Aria components can be styled in many ways, including using CSS classes, inline styles, utility classes (e.g. Tailwind), CSS-in-JS (e.g. Styled Components), etc. By default, all components include a builtin `className` attribute which can be targeted using CSS selectors. These follow the `react-aria-ComponentName` naming convention.
Expand Down
46 changes: 20 additions & 26 deletions packages/react-aria-components/docs/Modal.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,22 +49,20 @@ import {DialogTrigger, Modal, Dialog, Button, Heading, TextField, Label, Input}
<Button>Sign up…</Button>
<Modal>
<Dialog>
{({close}) => (
<form>
<Heading slot="title">Sign up</Heading>
<TextField autoFocus>
<Label>First Name: </Label>
<Input />
</TextField>
<TextField>
<Label>Last Name: </Label>
<Input />
</TextField>
<Button onPress={close}>
Submit
</Button>
</form>
)}
<form>
<Heading slot="title">Sign up</Heading>
<TextField autoFocus>
<Label>First Name: </Label>
<Input />
</TextField>
<TextField>
<Label>Last Name: </Label>
<Input />
</TextField>
<Button slot="close">
Submit
</Button>
</form>
</Dialog>
</Modal>
</DialogTrigger>
Expand Down Expand Up @@ -209,11 +207,9 @@ By default, modals can be closed by pressing the <Keyboard>Escape</Keyboard> key
<Button>Open dialog</Button>
<Modal isKeyboardDismissDisabled>
<Dialog>
{({close}) => <>
<Heading slot="title">Notice</Heading>
<p>You must close this dialog using the button below.</p>
<Button onPress={close}>Close</Button>
</>}
<Heading slot="title">Notice</Heading>
<p>You must close this dialog using the button below.</p>
<Button slot="close">Close</Button>
</Dialog>
</Modal>
</DialogTrigger>
Expand All @@ -231,11 +227,9 @@ import {ModalOverlay} from 'react-aria-components';
<ModalOverlay className="my-overlay">
<Modal className="my-modal">
<Dialog>
{({close}) => <>
<Heading slot="title">Notice</Heading>
<p>This is a modal with a custom modal overlay.</p>
<Button onPress={close}>Close</Button>
</>}
<Heading slot="title">Notice</Heading>
<p>This is a modal with a custom modal overlay.</p>
<Button slot="close">Close</Button>
</Dialog>
</Modal>
</ModalOverlay>
Expand Down