diff --git a/frontend/.changeset/puny-cloths-doubt.md b/frontend/.changeset/puny-cloths-doubt.md new file mode 100644 index 00000000..195d354b --- /dev/null +++ b/frontend/.changeset/puny-cloths-doubt.md @@ -0,0 +1,5 @@ +--- +'pydantic-forms': patch +--- + +Add custom button text and colors diff --git a/frontend/packages/pydantic-forms/src/components/form/Footer.tsx b/frontend/packages/pydantic-forms/src/components/form/Footer.tsx index f5482849..37f3bf9f 100644 --- a/frontend/packages/pydantic-forms/src/components/form/Footer.tsx +++ b/frontend/packages/pydantic-forms/src/components/form/Footer.tsx @@ -14,16 +14,22 @@ const Footer = ({ onPrevious, hasNext, hasPrevious, + buttons, }: PydanticFormFooterProps) => { const t = useTranslations('footer'); const submitButtonLabel = hasNext ? t('send') : t('submit'); + const { next, previous } = buttons || {}; + const PreviousButton = () => ( ); @@ -40,8 +46,11 @@ const Footer = ({ }; const SubmitButton = () => ( - ); diff --git a/frontend/packages/pydantic-forms/src/core/ReactHookForm.tsx b/frontend/packages/pydantic-forms/src/core/ReactHookForm.tsx index 0fb10499..da86acbb 100644 --- a/frontend/packages/pydantic-forms/src/core/ReactHookForm.tsx +++ b/frontend/packages/pydantic-forms/src/core/ReactHookForm.tsx @@ -110,6 +110,8 @@ export const ReactHookForm = ({ handleSubmit(_.cloneDeep(data)); }; + const buttons = defaultValues?.buttons ?? {}; + return (
@@ -123,6 +125,7 @@ export const ReactHookForm = ({ hasNext={hasNext} hasPrevious={hasPrevious} onPrevious={onPrevious} + buttons={buttons} />
diff --git a/frontend/packages/pydantic-forms/src/types.ts b/frontend/packages/pydantic-forms/src/types.ts index 3c6bae29..3c409dc9 100644 --- a/frontend/packages/pydantic-forms/src/types.ts +++ b/frontend/packages/pydantic-forms/src/types.ts @@ -448,11 +448,22 @@ export enum Locale { nlNL = 'nl-NL', } +export type PydanticFormButtonProps = { + text?: string; + color?: string; +}; + +export type PydanticFormButtons = { + next: PydanticFormButtonProps; + previous: PydanticFormButtonProps; +}; + export interface PydanticFormFooterProps { hasNext: boolean; hasPrevious: boolean; onCancel?: (e?: React.BaseSyntheticEvent) => void; onPrevious?: () => void; + buttons: PydanticFormButtons; } export interface PydanticFormHeaderProps {