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