feat(modals): FormModal gains submitDisabled + subtitle props
submitDisabled greys out the primary (so callers can gate it on validity instead of a clickable-but-inert button); subtitle renders a muted line under the title in the header. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -255,12 +255,23 @@
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.admin-modal-heading {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.admin-modal-title {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.admin-modal-subtitle {
|
||||
margin: 2px 0 0;
|
||||
font-size: 12.5px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.admin-modal-close {
|
||||
flex-shrink: 0;
|
||||
display: inline-flex;
|
||||
|
||||
@@ -15,10 +15,15 @@ export interface FormModalProps {
|
||||
onClose: () => void;
|
||||
onSubmit?: () => void; // called when user clicks primary button (only if provided)
|
||||
title: string;
|
||||
/** Optional muted line shown under the title in the header. */
|
||||
subtitle?: ReactNode;
|
||||
children: ReactNode; // modal body (form fields)
|
||||
submitLabel?: string; // primary button text
|
||||
cancelLabel?: string; // cancel button text
|
||||
loading?: boolean;
|
||||
/** Disable the primary (submit) button — e.g. until the form is valid.
|
||||
* Keeps the button visibly greyed out instead of clickable-but-inert. */
|
||||
submitDisabled?: boolean;
|
||||
hideFooter?: boolean; // for "view-only" modals
|
||||
size?: "sm" | "md" | "lg"; // optional
|
||||
closeOnBackdrop?: boolean; // default true
|
||||
@@ -35,10 +40,12 @@ export default function FormModal({
|
||||
onClose,
|
||||
onSubmit,
|
||||
title,
|
||||
subtitle,
|
||||
children,
|
||||
submitLabel = "Uložit",
|
||||
cancelLabel = "Zrušit",
|
||||
loading = false,
|
||||
submitDisabled = false,
|
||||
hideFooter = false,
|
||||
size = "md",
|
||||
closeOnBackdrop = true,
|
||||
@@ -107,9 +114,12 @@ export default function FormModal({
|
||||
transition={{ duration, ease }}
|
||||
>
|
||||
<div className="admin-modal-header">
|
||||
<h2 id={titleId} className="admin-modal-title">
|
||||
{title}
|
||||
</h2>
|
||||
<div className="admin-modal-heading">
|
||||
<h2 id={titleId} className="admin-modal-title">
|
||||
{title}
|
||||
</h2>
|
||||
{subtitle && <p className="admin-modal-subtitle">{subtitle}</p>}
|
||||
</div>
|
||||
{!hideCloseButton && (
|
||||
<button
|
||||
type="button"
|
||||
@@ -175,7 +185,7 @@ export default function FormModal({
|
||||
type="button"
|
||||
onClick={handlePrimaryClick}
|
||||
className="admin-btn admin-btn-primary"
|
||||
disabled={loading}
|
||||
disabled={loading || submitDisabled}
|
||||
>
|
||||
{loading ? "Zpracování..." : submitLabel}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user