Repository navigation
A form dialog: kit.ui.dialog() - #73
Merged
Merged
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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).<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, onecancel: true). It's drawn by the prompt's own CSS and opened and closed by the same code asconfirm(), now shared, so the two can't drift.falsewith none). A click on the backdrop does nothing, so what was typed isn't thrown away.action(value)is that button, for the app to turn on and off. An action withclose: falseleaves the form open, so the app can close it withclose(value)once its work is done (Dropgate's Add Server checks the address before adding it).confirm(), either way round. One closed by the app before its turn never shows. Every option is checked, as areaction()andclose().kit.cssgains the form's body (rows 0.75rem apart) and.form-text.reserved, the house's help line that keeps its height.docs/page-components.mdgains 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 withconfirm()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 newform-dialogstate (8 images from the hand-run job; 86 in all, the 78 unchanged).npm test305.