Watch
0
0
Fork
You've already forked hyperhive
0

fixup! swarm-ui: forms share one submit flow, result line and field column

This commit is contained in:
iris 2026-11-06 18:54:34 +01:00 • committed by mara
commit 4bd81d5b0f
2 changed files with 4 additions and 17 deletions

View file

@ -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;
}

View file

@ -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>
); );