fixup! swarm-ui: forms share one submit flow, result line and field column
This commit is contained in:
parent
811b23cd6b
commit
4bd81d5b0f
2 changed files with 4 additions and 17 deletions
|
|
@ -1,12 +1,7 @@
|
||||||
.ui-form-stack {
|
.ui-form-stack {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
gap: 0.75em;
|
gap: 0.75em;
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
.ui-form-stack-start {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
.ui-form-stack-stretch {
|
|
||||||
align-items: stretch;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,17 @@
|
||||||
// <FormStack> — a `<form>` whose fields and buttons stack in one column, with
|
// <FormStack> — a `<form>` whose fields and buttons stack in one column, each
|
||||||
// the gap the forms in dialogs and panels share. The fields keep their own
|
// keeping its own width, with the gap the forms in dialogs and panels share.
|
||||||
// width (`align="start"`) or fill the form (`align="stretch"`).
|
|
||||||
import type { ComponentChildren } from "preact";
|
import type { ComponentChildren } from "preact";
|
||||||
import "./FormStack.css";
|
import "./FormStack.css";
|
||||||
|
|
||||||
export function FormStack({
|
export function FormStack({
|
||||||
onSubmit,
|
onSubmit,
|
||||||
align = "start",
|
|
||||||
class: extraClass,
|
|
||||||
children,
|
children,
|
||||||
}: {
|
}: {
|
||||||
onSubmit: (e: Event) => void;
|
onSubmit: (e: Event) => void;
|
||||||
align?: "start" | "stretch";
|
|
||||||
class?: string;
|
|
||||||
children: ComponentChildren;
|
children: ComponentChildren;
|
||||||
}) {
|
}) {
|
||||||
const classes = ["ui-form-stack", `ui-form-stack-${align}`, extraClass]
|
|
||||||
.filter(Boolean)
|
|
||||||
.join(" ");
|
|
||||||
return (
|
return (
|
||||||
<form class={classes} onSubmit={onSubmit}>
|
<form class="ui-form-stack" onSubmit={onSubmit}>
|
||||||
{children}
|
{children}
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue