@slotted/react 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/docs/dialog.examples.md

@@ -650,6 +650,124 @@ Excerpt — not a complete module
 </DialogContent>;
 ```
 
+### A dialog that is a form
+
+A dialog that edits a record submits with Enter from any field and with the footer’s submit. render makes the panel the form itself, so the header, the body and the footer stay its rows and keep its inset; a form written around them inside DialogContent keeps them too.
+
+Example
+
+```tsx
+import { useState, type SubmitEvent } from 'react';
+
+import { Button } from '@slotted/react/button';
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@slotted/react/dialog';
+import { Field, FieldError, FieldLabel } from '@slotted/react/field';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+import { TextField } from '@slotted/react/text-field';
+import { Text } from '@slotted/react/typography';
+
+function nameError(value: string): string {
+  return value.trim() === '' ? 'Enter the contact’s full name.' : '';
+}
+
+function emailError(value: string): string {
+  if (value.trim() === '') return 'Enter the address the contact reads.';
+  if (!/^\S+@\S+\.\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';
+  return '';
+}
+
+export default function DialogForm() {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const [added, setAdded] = useState<string | null>(null);
+  const errors = submitted ? { name: nameError(name), email: emailError(email) } : null;
+
+  const submit = (event: SubmitEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitted(true);
+    if (nameError(name) !== '' || emailError(email) !== '') return;
+    setAdded(`${name.trim()} was added to Contoso Foods.`);
+    setOpen(false);
+  };
+
+  return (
+    <Inline align="center" gap={3}>
+      <Dialog
+        open={open}
+        onOpenChange={(next) => {
+          if (next) {
+            setName('');
+            setEmail('');
+            setSubmitted(false);
+          }
+          setOpen(next);
+        }}
+      >
+        <DialogTrigger render={(props) => <Button {...props}>Add contact</Button>} />
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>New contact</DialogTitle>
+            <DialogDescription>Contoso Foods, Seattle.</DialogDescription>
+            <DialogClose />
+          </DialogHeader>
+          <DialogBody>
+            <form id="new-contact" noValidate onSubmit={submit}>
+              <Stack gap={4}>
+                <Field required invalid={errors?.name ? true : undefined}>
+                  <FieldLabel>Full name</FieldLabel>
+                  <TextField autoComplete="name" value={name} onValueChange={setName} />
+                  <FieldError live="polite" reserve>
+                    {errors?.name}
+                  </FieldError>
+                </Field>
+                <Field required invalid={errors?.email ? true : undefined}>
+                  <FieldLabel>Email</FieldLabel>
+                  <TextField
+                    autoComplete="email"
+                    type="email"
+                    value={email}
+                    onValueChange={setEmail}
+                  />
+                  <FieldError live="polite" reserve>
+                    {errors?.email}
+                  </FieldError>
+                </Field>
+              </Stack>
+            </form>
+          </DialogBody>
+          <DialogFooter>
+            <Button variant="ghost" tone="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" form="new-contact">
+              Add contact
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {added === null ? null : (
+        <Text role="status" size="sm" tone="muted">
+          {added}
+        </Text>
+      )}
+    </Inline>
+  );
+}
+```
+
 ### Deciding once for the application
 
 Eight decisions an application takes once instead of eight props on every dialog in a product. Angular Material is the only surveyed library with an equivalent, and a dialog that states one itself still wins.
@@ -1650,122 +1768,6 @@ export default function DialogDismiss() {
 }
 ```
 
-### form.tsx
-
-Example
-
-```tsx
-import { useState, type SubmitEvent } from 'react';
-
-import { Button } from '@slotted/react/button';
-import {
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@slotted/react/dialog';
-import { Field, FieldError, FieldLabel } from '@slotted/react/field';
-import { Inline } from '@slotted/react/inline';
-import { Stack } from '@slotted/react/stack';
-import { TextField } from '@slotted/react/text-field';
-import { Text } from '@slotted/react/typography';
-
-function nameError(value: string): string {
-  return value.trim() === '' ? 'Enter the contact’s full name.' : '';
-}
-
-function emailError(value: string): string {
-  if (value.trim() === '') return 'Enter the address the contact reads.';
-  if (!/^\S+@\S+\.\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';
-  return '';
-}
-
-export default function DialogForm() {
-  const [open, setOpen] = useState(false);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [submitted, setSubmitted] = useState(false);
-  const [added, setAdded] = useState<string | null>(null);
-  const errors = submitted ? { name: nameError(name), email: emailError(email) } : null;
-
-  const submit = (event: SubmitEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setSubmitted(true);
-    if (nameError(name) !== '' || emailError(email) !== '') return;
-    setAdded(`${name.trim()} was added to Contoso Foods.`);
-    setOpen(false);
-  };
-
-  return (
-    <Inline align="center" gap={3}>
-      <Dialog
-        open={open}
-        onOpenChange={(next) => {
-          if (next) {
-            setName('');
-            setEmail('');
-            setSubmitted(false);
-          }
-          setOpen(next);
-        }}
-      >
-        <DialogTrigger render={(props) => <Button {...props}>Add contact</Button>} />
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>New contact</DialogTitle>
-            <DialogDescription>Contoso Foods, Seattle.</DialogDescription>
-            <DialogClose />
-          </DialogHeader>
-          <DialogBody>
-            <form id="new-contact" noValidate onSubmit={submit}>
-              <Stack gap={4}>
-                <Field required invalid={errors?.name ? true : undefined}>
-                  <FieldLabel>Full name</FieldLabel>
-                  <TextField autoComplete="name" value={name} onValueChange={setName} />
-                  <FieldError live="polite" reserve>
-                    {errors?.name}
-                  </FieldError>
-                </Field>
-                <Field required invalid={errors?.email ? true : undefined}>
-                  <FieldLabel>Email</FieldLabel>
-                  <TextField
-                    autoComplete="email"
-                    type="email"
-                    value={email}
-                    onValueChange={setEmail}
-                  />
-                  <FieldError live="polite" reserve>
-                    {errors?.email}
-                  </FieldError>
-                </Field>
-              </Stack>
-            </form>
-          </DialogBody>
-          <DialogFooter>
-            <Button variant="ghost" tone="secondary" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="submit" form="new-contact">
-              Add contact
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      {added === null ? null : (
-        <Text role="status" size="sm" tone="muted">
-          {added}
-        </Text>
-      )}
-    </Inline>
-  );
-}
-```
-
 ### full-screen.tsx
 
 Example

package/dist/docs/dialog.json

@@ -930,6 +930,14 @@
       "source": "<DialogContent>\n  <div\n    style={{\n      display: 'grid',\n      gap: 'var(--slotted-space-5)',\n      paddingBlock: 'var(--slotted-dialog-inset-block)',\n      paddingInline: 'var(--slotted-dialog-inset-inline)',\n    }}\n  >\n    <DialogTitle>Rename file</DialogTitle>\n    <TextField aria-label=\"Name\" defaultValue=\"report-q3.pdf\" />\n    <img alt=\"First page of report-q3.pdf\" src={preview} />\n  </div>\n  <DialogFooter>\n    <Button size=\"sm\">Rename</Button>\n  </DialogFooter>\n</DialogContent>;\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "form",
+      "title": "A dialog that is a form",
+      "note": "A dialog that edits a record submits with Enter from any field and with the footer’s submit. render makes the panel the form itself, so the header, the body and the footer stay its rows and keep its inset; a form written around them inside DialogContent keeps them too.",
+      "language": "tsx",
+      "source": "import { useState, type SubmitEvent } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nfunction nameError(value: string): string {\n  return value.trim() === '' ? 'Enter the contact’s full name.' : '';\n}\n\nfunction emailError(value: string): string {\n  if (value.trim() === '') return 'Enter the address the contact reads.';\n  if (!/^\\S+@\\S+\\.\\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';\n  return '';\n}\n\nexport default function DialogForm() {\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [submitted, setSubmitted] = useState(false);\n  const [added, setAdded] = useState<string | null>(null);\n  const errors = submitted ? { name: nameError(name), email: emailError(email) } : null;\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitted(true);\n    if (nameError(name) !== '' || emailError(email) !== '') return;\n    setAdded(`${name.trim()} was added to Contoso Foods.`);\n    setOpen(false);\n  };\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          if (next) {\n            setName('');\n            setEmail('');\n            setSubmitted(false);\n          }\n          setOpen(next);\n        }}\n      >\n        <DialogTrigger render={(props) => <Button {...props}>Add contact</Button>} />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>New contact</DialogTitle>\n            <DialogDescription>Contoso Foods, Seattle.</DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <form id=\"new-contact\" noValidate onSubmit={submit}>\n              <Stack gap={4}>\n                <Field required invalid={errors?.name ? true : undefined}>\n                  <FieldLabel>Full name</FieldLabel>\n                  <TextField autoComplete=\"name\" value={name} onValueChange={setName} />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.name}\n                  </FieldError>\n                </Field>\n                <Field required invalid={errors?.email ? true : undefined}>\n                  <FieldLabel>Email</FieldLabel>\n                  <TextField\n                    autoComplete=\"email\"\n                    type=\"email\"\n                    value={email}\n                    onValueChange={setEmail}\n                  />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.email}\n                  </FieldError>\n                </Field>\n              </Stack>\n            </form>\n          </DialogBody>\n          <DialogFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" form=\"new-contact\">\n              Add contact\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      {added === null ? null : (\n        <Text role=\"status\" size=\"sm\" tone=\"muted\">\n          {added}\n        </Text>\n      )}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
     {
       "id": "defaults",
       "title": "Deciding once for the application",
@@ -1074,14 +1082,6 @@
       "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Text } from '@slotted/react/typography';\n\nexport default function DialogDismiss() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen} escape=\"none\" outsidePress=\"none\">\n      <DialogTrigger render={(props) => <Button {...props}>Import products</Button>} />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Import 1,240 products</DialogTitle>\n          <DialogDescription>\n            From spring-catalogue.csv into the Northwind price list.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogBody>\n          <Text size=\"sm\">\n            38 rows update existing products and 1,202 add new ones. Escape and a press outside the\n            panel leave this dialog open; choose one of the actions.\n          </Text>\n        </DialogBody>\n        <DialogFooter>\n          <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n            Cancel import\n          </Button>\n          <Button onClick={() => setOpen(false)}>Start import</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
       "verdict": "example"
     },
-    {
-      "id": "form",
-      "title": "form.tsx",
-      "note": null,
-      "language": "tsx",
-      "source": "import { useState, type SubmitEvent } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nfunction nameError(value: string): string {\n  return value.trim() === '' ? 'Enter the contact’s full name.' : '';\n}\n\nfunction emailError(value: string): string {\n  if (value.trim() === '') return 'Enter the address the contact reads.';\n  if (!/^\\S+@\\S+\\.\\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';\n  return '';\n}\n\nexport default function DialogForm() {\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [submitted, setSubmitted] = useState(false);\n  const [added, setAdded] = useState<string | null>(null);\n  const errors = submitted ? { name: nameError(name), email: emailError(email) } : null;\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitted(true);\n    if (nameError(name) !== '' || emailError(email) !== '') return;\n    setAdded(`${name.trim()} was added to Contoso Foods.`);\n    setOpen(false);\n  };\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          if (next) {\n            setName('');\n            setEmail('');\n            setSubmitted(false);\n          }\n          setOpen(next);\n        }}\n      >\n        <DialogTrigger render={(props) => <Button {...props}>Add contact</Button>} />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>New contact</DialogTitle>\n            <DialogDescription>Contoso Foods, Seattle.</DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <form id=\"new-contact\" noValidate onSubmit={submit}>\n              <Stack gap={4}>\n                <Field required invalid={errors?.name ? true : undefined}>\n                  <FieldLabel>Full name</FieldLabel>\n                  <TextField autoComplete=\"name\" value={name} onValueChange={setName} />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.name}\n                  </FieldError>\n                </Field>\n                <Field required invalid={errors?.email ? true : undefined}>\n                  <FieldLabel>Email</FieldLabel>\n                  <TextField\n                    autoComplete=\"email\"\n                    type=\"email\"\n                    value={email}\n                    onValueChange={setEmail}\n                  />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.email}\n                  </FieldError>\n                </Field>\n              </Stack>\n            </form>\n          </DialogBody>\n          <DialogFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" form=\"new-contact\">\n              Add contact\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      {added === null ? null : (\n        <Text role=\"status\" size=\"sm\" tone=\"muted\">\n          {added}\n        </Text>\n      )}\n    </Inline>\n  );\n}\n",
-      "verdict": "example"
-    },
     {
       "id": "full-screen",
       "title": "full-screen.tsx",