Skip to content

Commit

Permalink
Document RAC Dialog close button slot (#7405)
Browse files Browse the repository at this point in the history
  • Loading branch information
@devongovett
devongovett authored Nov 20, 2024
1 parent 16153ed commit 62718d4
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 43 deletions.
44 changes: 27 additions & 17 deletions packages/react-aria-components/docs/Dialog.mdx
View file
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
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

1 comment on commit 62718d4

@rspbot
Copy link

@rspbot rspbot commented on 62718d4 Nov 20, 2024

Choose a reason for hiding this comment

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

Verdaccio builds:
CRA Test App
NextJS Test App
RAC Tailwind Example
RAC Spectrum + Tailwind Example
S2 Parcel Example
S2 Webpack Example
CRA Test App Size
NextJS App Size
Publish stats
Size diff since last release
Docs
Storybook
S2 Storybook

Please sign in to comment.