Skip to content

A form dialog: kit.ui.dialog() - #73

Merged
WillTDA merged 2 commits into
masterfrom
form-dialog
Oct 25, 2026
Merged

WillTDA merged 2 commits into
masterfrom
form-dialog

Conversation

@WillTDA

@WillTDA WillTDA commented Oct 25, 2026

Copy link
Copy Markdown
Contributor

Closes #65.

kit.ui.dialog({ title, icon, body, actions }) → { element, action(value), close(value), closed }: a small form in the prompts' modal, for an app's own options (Advanced Options, Add Server).

  • A native modal <dialog class="kit-dialog"> named by its title, with its glyph, the app's own elements as its body, and its actions left to right ({ label, value, variant }; one may be primary, one cancel: true). It's drawn by the prompt's own CSS and opened and closed by the same code as confirm(), now shared, so the two can't drift.
  • Enter in a one-line field presses the primary button unless it's disabled. Escape and the close button give the cancel action's value (false with none). A click on the backdrop does nothing, so what was typed isn't thrown away.
  • The focus starts on the first field it can take (or the primary button, or the last enabled one) and goes back on close.
  • action(value) is that button, for the app to turn on and off. An action with close: false leaves the form open, so the app can close it with close(value) once its work is done (Dropgate's Add Server checks the address before adding it).
  • It waits its turn with confirm(), either way round. One closed by the app before its turn never shows. Every option is checked, as are action() and close().

kit.css gains the form's body (rows 0.75rem apart) and .form-text.reserved, the house's help line that keeps its height. docs/page-components.md gains Form Dialogs, with the house's form row.

The demo: the Queue's upload cards (Advanced Options) and Bulk Edit open a real Advanced Options form (file lifetime and max downloads, Apply off while a value is more than the server allows) in place of a placeholder toast. Nothing on the Controls page changes, so no existing image changes.

Tests: e2e/dialog.spec.js (anatomy and names, focus in and back, every way out and its value, no backdrop close, Enter, close: false, the queue with confirm() both ways round, refusals, the demo's form). Axe on the form in both themes and every accent, its fields' and buttons' rings at 3:1 in every accent, and the visual spec's new form-dialog state (8 images from the hand-run job; 86 in all, the 78 unchanged). npm test 305.

kit.ui.dialog({ title, icon, body, actions }) returns { element, action(value),
close(value), closed }: a native modal <dialog class="kit-dialog"> named by its
title, with its glyph, the app's own elements as its body, and its actions left
to right ({ label, value, variant }, one of them primary, one cancel: true). It
is drawn and animated by the prompt's own rules, and opened and closed by the
same code as confirm(), now shared, so the two can't drift.

Enter in a one-line field presses the primary button unless it's disabled;
Escape and the close button give the cancel action's value (false with none);
a click on the backdrop does nothing, so what was typed isn't thrown away. The
focus starts on the first field it can take (or the primary button, or the
last enabled one) and goes back on close. action(value) is that button, for the
app to turn on and off; an action with close: false leaves the form open, for
the app to close with close(value) once its work is done (a server checked
before it's added). It waits its turn with confirm()'s prompts, either way
round; one closed by the app before its turn never shows. Every option is
checked, as are action() and close().

kit.css gains the form's body (its rows 0.75rem apart) and .form-text.reserved,
the house's help line that keeps its height. docs/page-components.md gains
Form Dialogs, with the house's form row. The demo's upload cards and Bulk Edit
open a real Advanced Options form (file lifetime and max downloads, Apply off
while a value is more than the server allows). e2e/dialog.spec.js covers it;
axe and the focus rings check it in every accent and both themes, and the
visual spec gains its state (the images come from the hand-run job).
Eight images from the hand-run job: the demo's Advanced Options over the
Queue, its first field focused, in the demo's accent and each app's, in both
themes. The fifteen existing images the runner redrew are left as they were;
each still matches.
@WillTDA
WillTDA merged commit 0a87d84 into master Oct 25, 2026
9 checks passed
@WillTDA
WillTDA deleted the form-dialog branch October 25, 2026 16:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

A form dialog for an app's own options (kit.ui.dialog())

1 participant