Added custom footer buttons text and colors

Author: Georgi2704

frontend/.changeset/puny-cloths-doubt.md

@@ -0,0 +1,5 @@
+---
+'pydantic-forms': patch
+---
+
+Add custom button text and colors

frontend/packages/pydantic-forms/src/components/form/Footer.tsx

@@ -14,16 +14,20 @@ const Footer = ({
     onPrevious,
     hasNext,
     hasPrevious,
+    buttons,
 }: PydanticFormFooterProps) => {
     const t = useTranslations('footer');
     const submitButtonLabel = hasNext ? t('send') : t('submit');
     const PreviousButton = () => (
         <button
             type="button"
             onClick={() => onPrevious?.()}
-            style={{ padding: '12px' }}
+            style={{
+                padding: '12px',
+                backgroundColor: buttons?.previous?.color,
+            }}
         >
-            {t('previous')}
+            {buttons.next.text ?? t('previous')}
         </button>
     );
 
@@ -40,8 +44,11 @@ const Footer = ({
     };
 
     const SubmitButton = () => (
-        <button type="submit" style={{ padding: '12px' }}>
-            {submitButtonLabel}
+        <button
+            type="submit"
+            style={{ padding: '12px', backgroundColor: buttons?.next?.color }}
+        >
+            {buttons.next.text ?? submitButtonLabel}
         </button>
     );
 

frontend/packages/pydantic-forms/src/core/ReactHookForm.tsx

@@ -110,6 +110,8 @@ export const ReactHookForm = ({
         handleSubmit(_.cloneDeep(data));
     };
 
+    const buttons = defaultValues?.buttons ?? {};
+
     return (
         <FormProvider {...reactHookForm}>
             <form onSubmit={reactHookForm.handleSubmit(onSubmit)}>
@@ -123,6 +125,7 @@ export const ReactHookForm = ({
                     hasNext={hasNext}
                     hasPrevious={hasPrevious}
                     onPrevious={onPrevious}
+                    buttons={buttons}
                 />
             </form>
         </FormProvider>

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 {