feat(ModalFooterButtons): support disable buttons and remove secondary (

#2016)
mondaycom · Mar 13, 2024 · 41d2a99 · 41d2a99
1 parent 6e4bbb4
commit 41d2a99
Show file tree

Hide file tree

Showing 4 changed files with 114 additions and 4 deletions.
diff --git a/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx b/packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx
@@ -9,7 +9,8 @@ import ModalFooter from "../ModalFooter";
 
 export interface ModalFooterButtonsProps extends VibeComponentProps {
   primaryButtonText: string;
-  secondaryButtonText: string;
+  secondaryButtonText?: string;
+  disablePrimaryButton?: boolean;
   onPrimaryButtonClick?: () => void;
   onSecondaryButtonClick?: () => void;
 }
@@ -19,6 +20,7 @@ const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
     {
       primaryButtonText,
       secondaryButtonText,
+      disablePrimaryButton,
       onPrimaryButtonClick,
       onSecondaryButtonClick,
       className,
@@ -36,10 +38,14 @@ const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER_BUTTONS, id)}
       >
         <Flex justify={Flex.justify.END} gap={Flex.gaps.SMALL}>
-          <Button onClick={onSecondaryButtonClick} kind={Button.kinds.TERTIARY}>
-            {secondaryButtonText}
+          {secondaryButtonText && (
+            <Button onClick={onSecondaryButtonClick} kind={Button.kinds.TERTIARY}>
+              {secondaryButtonText}
+            </Button>
+          )}
+          <Button onClick={onPrimaryButtonClick} disabled={disablePrimaryButton}>
+            {primaryButtonText}
           </Button>
-          <Button onClick={onPrimaryButtonClick}>{primaryButtonText}</Button>
         </Flex>
       </ModalFooter>
     );

diff --git a/...odalFooterButtons/__tests__/__snapshots__/modalFooterButtons-snapshot-tests.jest.tsx.snap b/...odalFooterButtons/__tests__/__snapshots__/modalFooterButtons-snapshot-tests.jest.tsx.snap
@@ -43,3 +43,78 @@ exports[`ModalFooterButtons should render correctly 1`] = `
   </div>
 </div>
 `;
+
+exports[`ModalFooterButtons should render correctly with disabled primary 1`] = `
+<div
+  className="container"
+>
+  <div
+    className="container directionRow justifyEnd alignCenter"
+    style={
+      Object {
+        "gap": "8px",
+      }
+    }
+  >
+    <button
+      aria-busy={false}
+      aria-disabled={false}
+      className="button sizeMedium kindTertiary colorPrimary"
+      data-testid="button"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      type="button"
+    >
+      Cancel
+    </button>
+    <button
+      aria-busy={false}
+      aria-disabled={true}
+      className="button sizeMedium kindPrimary colorPrimary disabled"
+      data-testid="button"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      tabIndex={-1}
+      type="button"
+    >
+      Confirm
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ModalFooterButtons should render correctly with no tertiary 1`] = `
+<div
+  className="container"
+>
+  <div
+    className="container directionRow justifyEnd alignCenter"
+    style={
+      Object {
+        "gap": "8px",
+      }
+    }
+  >
+    <button
+      aria-busy={false}
+      aria-disabled={false}
+      className="button sizeMedium kindPrimary colorPrimary"
+      data-testid="button"
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onMouseDown={[Function]}
+      onMouseUp={[Function]}
+      type="button"
+    >
+      Confirm
+    </button>
+  </div>
+</div>
+`;
diff --git a/...Modal/ModalFooter/ModalFooterButtons/__tests__/modalFooterButtons-snapshot-tests.jest.tsx b/...Modal/ModalFooter/ModalFooterButtons/__tests__/modalFooterButtons-snapshot-tests.jest.tsx
@@ -9,4 +9,18 @@ describe("ModalFooterButtons", () => {
       .toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it("should render correctly with no tertiary", () => {
+    const tree = renderer.create(<ModalFooterButtons primaryButtonText="Confirm" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it("should render correctly with disabled primary", () => {
+    const tree = renderer
+      .create(
+        <ModalFooterButtons primaryButtonText="Confirm" secondaryButtonText="Cancel" disablePrimaryButton={true} />
+      )
+      .toJSON();
+    expect(tree).toMatchSnapshot();
+  });
 });
diff --git a/...mponents/Modal/ModalFooter/ModalFooterButtons/__tests__/modalFooterButtons-tests.jest.tsx b/...mponents/Modal/ModalFooter/ModalFooterButtons/__tests__/modalFooterButtons-tests.jest.tsx
@@ -42,5 +42,20 @@ describe("ModalFooterButtons", () => {
       expect(onSecondaryButtonClick).toBeCalledTimes(1);
       expect(onPrimaryButtonClick).not.toBeCalled();
     });
+
+    it("should not call onPrimaryButtonClick after click confirm when primary button is disabled", () => {
+      const onPrimaryButtonClick = jest.fn();
+      const onSecondaryButtonClick = jest.fn();
+      const modalFooterComponent = renderComponent({
+        primaryButtonText: PRIMARY_BUTTON_TEXT,
+        secondaryButtonText: SECONDARY_BUTTON_TEXT,
+        disablePrimaryButton: true,
+        onPrimaryButtonClick,
+        onSecondaryButtonClick
+      });
+      fireEvent.click(modalFooterComponent.getByText(PRIMARY_BUTTON_TEXT));
+      expect(onPrimaryButtonClick).not.toBeCalled();
+      expect(onSecondaryButtonClick).not.toBeCalled();
+    });
   });
 });