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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.75em;
|
||||
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
|
||||
// the gap the forms in dialogs and panels share. The fields keep their own
|
||||
// width (`align="start"`) or fill the form (`align="stretch"`).
|
||||
// <FormStack> — a `<form>` whose fields and buttons stack in one column, each
|
||||
// keeping its own width, with the gap the forms in dialogs and panels share.
|
||||
import type { ComponentChildren } from "preact";
|
||||
import "./FormStack.css";
|
||||
|
||||
export function FormStack({
|
||||
onSubmit,
|
||||
align = "start",
|
||||
class: extraClass,
|
||||
children,
|
||||
}: {
|
||||
onSubmit: (e: Event) => void;
|
||||
align?: "start" | "stretch";
|
||||
class?: string;
|
||||
children: ComponentChildren;
|
||||
}) {
|
||||
const classes = ["ui-form-stack", `ui-form-stack-${align}`, extraClass]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
return (
|
||||
<form class={classes} onSubmit={onSubmit}>
|
||||
<form class="ui-form-stack" onSubmit={onSubmit}>
|
||||
{children}
|
||||
</form>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue