diff --git a/.changeset/nasty-dragons-grin.md b/.changeset/nasty-dragons-grin.md
new file mode 100644
index 0000000000..ecf977353e
--- /dev/null
+++ b/.changeset/nasty-dragons-grin.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-components': minor
+---
+
+Add a new property `footerContent`to the form dialog. This provides an additional content positioned to the left area of the form dialog footer.
diff --git a/packages/application-components/src/components/dialogs/form-dialog/form-dialog.spec.tsx b/packages/application-components/src/components/dialogs/form-dialog/form-dialog.spec.tsx
index 7e25bf6ff6..aaa5e3b74f 100644
--- a/packages/application-components/src/components/dialogs/form-dialog/form-dialog.spec.tsx
+++ b/packages/application-components/src/components/dialogs/form-dialog/form-dialog.spec.tsx
@@ -53,6 +53,17 @@ describe('rendering', () => {
screen.getByText('button icon');
},
}));
+
+ it('should show additional content in footer', () =>
+ validateComponent({
+ title: 'Lorem ipsus',
+ extraProps: {
+ footerContent: Left aligned content,
+ },
+ extraChecks: () => {
+ screen.getByText('Left aligned content');
+ },
+ }));
});
describe('with custom title', () => {
diff --git a/packages/application-components/src/components/dialogs/form-dialog/form-dialog.tsx b/packages/application-components/src/components/dialogs/form-dialog/form-dialog.tsx
index abb0ab175b..9194b253c4 100644
--- a/packages/application-components/src/components/dialogs/form-dialog/form-dialog.tsx
+++ b/packages/application-components/src/components/dialogs/form-dialog/form-dialog.tsx
@@ -31,6 +31,7 @@ export type TFormDialogProps = {
dataAttributesPrimaryButton?: { [key: string]: string };
getParentSelector?: () => HTMLElement;
iconLeftSecondaryButton?: ReactElement;
+ footerContent?: ReactNode;
};
const defaultProps: Pick =
{
@@ -59,6 +60,7 @@ const FormDialog = (props: TFormDialogProps) => (
dataAttributesSecondaryButton={props.dataAttributesSecondaryButton}
dataAttributesPrimaryButton={props.dataAttributesPrimaryButton}
iconLeftSecondaryButton={props.iconLeftSecondaryButton}
+ footerContent={props.footerContent}
/>
);
diff --git a/packages/application-components/src/components/dialogs/internals/dialog-footer.tsx b/packages/application-components/src/components/dialogs/internals/dialog-footer.tsx
index 135180d1df..87b46bd327 100644
--- a/packages/application-components/src/components/dialogs/internals/dialog-footer.tsx
+++ b/packages/application-components/src/components/dialogs/internals/dialog-footer.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement, SyntheticEvent } from 'react';
+import type { ReactElement, SyntheticEvent, ReactNode } from 'react';
import { css } from '@emotion/react';
import { useIntl, type IntlShape } from 'react-intl';
import { designTokens as uiKitDesignTokens } from '@commercetools-uikit/design-system';
@@ -26,6 +26,7 @@ type Props = {
dataAttributesSecondaryButton: { [key: string]: string };
children?: never;
iconLeftSecondaryButton?: ReactElement;
+ footerContent?: ReactNode;
};
const defaultProps: Pick<
Props,
@@ -49,19 +50,26 @@ const DialogFooter = (props: Props) => {
margin-top: ${uiKitDesignTokens.spacing50};
`}
>
-
-
-
+
+ {props.footerContent}
+
+
+
+
);
diff --git a/visual-testing-app/src/components/form-dialog/form-dialog.visualroute.tsx b/visual-testing-app/src/components/form-dialog/form-dialog.visualroute.tsx
index 55ab89fa9f..7f88e93f3e 100644
--- a/visual-testing-app/src/components/form-dialog/form-dialog.visualroute.tsx
+++ b/visual-testing-app/src/components/form-dialog/form-dialog.visualroute.tsx
@@ -30,6 +30,7 @@ const FormDialogExample = (props: ContainerProps) => (
document.querySelector(`#${props.portalId}`) as HTMLElement
}
zIndex={10001}
+ footerContent={props.footerContent}
>
(
portalId="dialog-disabled"
/>
+
+ lorem ipsum}
+ />
+
);
diff --git a/website-components-playground/src/pages/form-dialog.tsx b/website-components-playground/src/pages/form-dialog.tsx
index b7c2189a74..28209a40fb 100644
--- a/website-components-playground/src/pages/form-dialog.tsx
+++ b/website-components-playground/src/pages/form-dialog.tsx
@@ -64,6 +64,7 @@ const FormDialogExample = () => (
event as FormEvent
)
}
+ footerContent={Left aligned content}
>