Provide new prop to add content to left area of form dialog (#3587)

* feat(form dialog): provide new prop to add content to left area of form dialog footer * feat(form dialog): fix position issue when additional content is not provided * feat(form dialog): add new prop to docs example * feat(form dialog): update prop name * feat(form dialog): remove unnecessary spacing inline --------- Co-authored-by: Ddouglasz <[email protected]>
commercetools · Aug 9, 2024 · d37e74e · d37e74e
1 parent d976e65
commit d37e74e
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 14 deletions.
diff --git a/.changeset/nasty-dragons-grin.md 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
@@ -53,6 +53,17 @@ describe('rendering', () => {
         screen.getByText('button icon');
       },
     }));
+
+  it('should show additional content in footer', () =>
+    validateComponent({
+      title: 'Lorem ipsus',
+      extraProps: {
+        footerContent: <a href="/#">Left aligned content</a>,
+      },
+      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
@@ -31,6 +31,7 @@ export type TFormDialogProps = {
   dataAttributesPrimaryButton?: { [key: string]: string };
   getParentSelector?: () => HTMLElement;
   iconLeftSecondaryButton?: ReactElement;
+  footerContent?: ReactNode;
 };
 const defaultProps: Pick<TFormDialogProps, 'labelSecondary' | 'labelPrimary'> =
   {
@@ -59,6 +60,7 @@ const FormDialog = (props: TFormDialogProps) => (
       dataAttributesSecondaryButton={props.dataAttributesSecondaryButton}
       dataAttributesPrimaryButton={props.dataAttributesPrimaryButton}
       iconLeftSecondaryButton={props.iconLeftSecondaryButton}
+      footerContent={props.footerContent}
     />
   </DialogContainer>
 );

diff --git 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};
       `}
     >
-      <Spacings.Inline scale="m" alignItems="center" justifyContent="flex-end">
-        <SecondaryButton
-          label={getFormattedLabel(props.labelSecondary, intl)}
-          onClick={props.onCancel}
-          iconLeft={props.iconLeftSecondaryButton}
-          {...filterDataAttributes(props.dataAttributesSecondaryButton)}
-        />
-        <PrimaryButton
-          label={getFormattedLabel(props.labelPrimary, intl)}
-          onClick={props.onConfirm}
-          isDisabled={props.isPrimaryButtonDisabled}
-          {...filterDataAttributes(props.dataAttributesPrimaryButton)}
-        />
+      <Spacings.Inline alignItems="center" justifyContent="space-between">
+        <div>{props.footerContent}</div>
+        <Spacings.Inline
+          scale="m"
+          alignItems="center"
+          justifyContent="flex-end"
+        >
+          <SecondaryButton
+            label={getFormattedLabel(props.labelSecondary, intl)}
+            onClick={props.onCancel}
+            iconLeft={props.iconLeftSecondaryButton}
+            {...filterDataAttributes(props.dataAttributesSecondaryButton)}
+          />
+          <PrimaryButton
+            label={getFormattedLabel(props.labelPrimary, intl)}
+            onClick={props.onConfirm}
+            isDisabled={props.isPrimaryButtonDisabled}
+            {...filterDataAttributes(props.dataAttributesPrimaryButton)}
+          />
+        </Spacings.Inline>
       </Spacings.Inline>
     </div>
   );

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
@@ -30,6 +30,7 @@ const FormDialogExample = (props: ContainerProps) => (
             document.querySelector(`#${props.portalId}`) as HTMLElement
           }
           zIndex={10001}
+          footerContent={props.footerContent}
         >
           <Spacings.Stack scale="m">
             <TextField
@@ -109,5 +110,16 @@ export const Component = () => (
         portalId="dialog-disabled"
       />
     </Spec>
+    <Spec
+      label="FormDialog - footerContent provided"
+      size="l"
+      contentAlignment="center"
+    >
+      <FormDialogExample
+        size="l"
+        portalId="dialog-left-aligned-footer-content"
+        footerContent={<a href="/#">lorem ipsum</a>}
+      />
+    </Spec>
   </Suite>
 );
diff --git 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<HTMLFormElement>
                     )
                   }
+                  footerContent={<a href="/#">Left aligned content</a>}
                 >
                   <Spacings.Stack scale="m">
                     <TextField