feat(form dialog): update prop name

commercetools · Aug 8, 2024 · e5dce4a · e5dce4a
1 parent 46f7427
commit e5dce4a
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 43 deletions.
diff --git a/.changeset/nasty-dragons-grin.md b/.changeset/nasty-dragons-grin.md
@@ -2,4 +2,4 @@
 '@commercetools-frontend/application-components': minor
 ---
 
-Add a new property `leftAlignedFooterContent`to the form dialog. This provides an additional content positioned to the left area of the form dialog footer.
+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
@@ -58,7 +58,7 @@ describe('rendering', () => {
     validateComponent({
       title: 'Lorem ipsus',
       extraProps: {
-        leftAlignedFooterContent: <a href="/#">Left aligned content</a>,
+        footerContent: <a href="/#">Left aligned content</a>,
       },
       extraChecks: () => {
         screen.getByText('Left aligned content');

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,7 +31,7 @@ export type TFormDialogProps = {
   dataAttributesPrimaryButton?: { [key: string]: string };
   getParentSelector?: () => HTMLElement;
   iconLeftSecondaryButton?: ReactElement;
-  leftAlignedFooterContent?: ReactNode;
+  footerContent?: ReactNode;
 };
 const defaultProps: Pick<TFormDialogProps, 'labelSecondary' | 'labelPrimary'> =
   {
@@ -60,7 +60,7 @@ const FormDialog = (props: TFormDialogProps) => (
       dataAttributesSecondaryButton={props.dataAttributesSecondaryButton}
       dataAttributesPrimaryButton={props.dataAttributesPrimaryButton}
       iconLeftSecondaryButton={props.iconLeftSecondaryButton}
-      leftAlignedFooterContent={props.leftAlignedFooterContent}
+      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
@@ -26,7 +26,7 @@ type Props = {
   dataAttributesSecondaryButton: { [key: string]: string };
   children?: never;
   iconLeftSecondaryButton?: ReactElement;
-  leftAlignedFooterContent?: ReactNode;
+  footerContent?: ReactNode;
 };
 const defaultProps: Pick<
   Props,
@@ -51,39 +51,31 @@ const DialogFooter = (props: Props) => {
       `}
     >
       <Spacings.Inline alignItems="center" justifyContent="space-between">
-        {props.leftAlignedFooterContent && (
-          <Spacings.Inline
-            scale="m"
-            alignItems="center"
-            justifyContent="flex-start"
-          >
-            {props.leftAlignedFooterContent}
-          </Spacings.Inline>
-        )}
-        <div
-          css={css`
-            margin-left: auto;
-          `}
+        <Spacings.Inline
+          scale="m"
+          alignItems="center"
+          justifyContent="flex-start"
         >
-          <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>
-        </div>
+          <div>{props.footerContent}</div>
+        </Spacings.Inline>
+        <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,7 +30,7 @@ const FormDialogExample = (props: ContainerProps) => (
             document.querySelector(`#${props.portalId}`) as HTMLElement
           }
           zIndex={10001}
-          leftAlignedFooterContent={props.leftAlignedFooterContent}
+          footerContent={props.footerContent}
         >
           <Spacings.Stack scale="m">
             <TextField
@@ -111,14 +111,14 @@ export const Component = () => (
       />
     </Spec>
     <Spec
-      label="FormDialog - leftAlignedFooterContent provided"
+      label="FormDialog - footerContent provided"
       size="l"
       contentAlignment="center"
     >
       <FormDialogExample
         size="l"
         portalId="dialog-left-aligned-footer-content"
-        leftAlignedFooterContent={<a href="/#">lorem ipsum</a>}
+        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,9 +64,7 @@ const FormDialogExample = () => (
                       event as FormEvent<HTMLFormElement>
                     )
                   }
-                  leftAlignedFooterContent={
-                    <a href="/#">Left aligned content</a>
-                  }
+                  footerContent={<a href="/#">Left aligned content</a>}
                 >
                   <Spacings.Stack scale="m">
                     <TextField