feat(Form dialog): add icon left to primary button (#3730)

commercetools · Feb 26, 2025 · b05672c · b05672c
1 parent 1ab4a04
commit b05672c
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 0 deletions.
diff --git a/.changeset/lovely-donuts-mate.md b/.changeset/lovely-donuts-mate.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-components': minor
+---
+
+Pass a new prop `iconLeftPrimaryButton`, to provide an icon to the left in the primary button of the form dialog.
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
@@ -54,6 +54,17 @@ describe('rendering', () => {
       },
     }));
 
+  it('should show primaryButton Icon', () =>
+    validateComponent({
+      title: 'Lorem ipsus',
+      extraProps: {
+        iconLeftPrimaryButton: <div>button icon</div>,
+      },
+      extraChecks: () => {
+        screen.getByText('button icon');
+      },
+    }));
+
   it('should show additional content in footer', () =>
     validateComponent({
       title: 'Lorem ipsus',

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;
+  iconLeftPrimaryButton?: ReactElement;
   footerContent?: ReactNode;
 };
 
@@ -59,6 +60,7 @@ const FormDialog = ({
       dataAttributesSecondaryButton={props.dataAttributesSecondaryButton}
       dataAttributesPrimaryButton={props.dataAttributesPrimaryButton}
       iconLeftSecondaryButton={props.iconLeftSecondaryButton}
+      iconLeftPrimaryButton={props.iconLeftPrimaryButton}
       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,6 +26,7 @@ type Props = {
   dataAttributesSecondaryButton?: { [key: string]: string };
   children?: never;
   iconLeftSecondaryButton?: ReactElement;
+  iconLeftPrimaryButton?: ReactElement;
   footerContent?: ReactNode;
 };
 
@@ -60,6 +61,7 @@ const DialogFooter = ({
           />
           <PrimaryButton
             label={getFormattedLabel(props.labelPrimary, intl)}
+            iconLeft={props.iconLeftPrimaryButton}
             onClick={props.onConfirm}
             isDisabled={isPrimaryButtonDisabled}
             {...filterDataAttributes(dataAttributesPrimaryButton)}