Document RAC Dialog close button slot (#7405)

Author: devongovett

packages/react-aria-components/docs/Dialog.mdx

@@ -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>
@@ -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';
@@ -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>
@@ -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.

packages/react-aria-components/docs/Modal.mdx

@@ -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>
@@ -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>
@@ -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>