feat(ModalFooter): basic modal footer (#2463)

mondaycom · Dec 2, 2024 · b18754a · b18754a
1 parent 97d81fa
commit b18754a
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 6 deletions.
diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss
@@ -0,0 +1,12 @@
+.primary {
+  order: 2;
+
+  &:only-child {
+    margin-left: auto;
+  }
+}
+
+.secondary {
+  order: 1;
+  margin-left: auto;
+}
diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx
@@ -0,0 +1,32 @@
+import React, { forwardRef } from "react";
+import cx from "classnames";
+import ModalFooterBase from "../ModalFooterBase/ModalFooterBase";
+import { getTestId } from "../../../../tests/test-ids-utils";
+import { ComponentDefaultTestId } from "../../../../tests/constants";
+import { ModalFooterProps } from "./ModalFooter.types";
+import styles from "./ModalFooter.module.scss";
+
+const ModalFooter = forwardRef(
+  (
+    { primaryButton, secondaryButton, renderSideAction, "data-testid": dataTestId, className, id }: ModalFooterProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    const primary = { ...primaryButton, className: cx(primaryButton.className, styles.primary) };
+    const secondary = secondaryButton
+      ? { ...secondaryButton, className: cx(secondaryButton.className, styles.secondary) }
+      : undefined;
+    return (
+      <ModalFooterBase
+        ref={ref}
+        className={className}
+        id={id}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_FOOTER, id)}
+        primaryButton={primary}
+        secondaryButton={secondary}
+        renderAction={renderSideAction}
+      />
+    );
+  }
+);
+
+export default ModalFooter;
diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts
@@ -0,0 +1,6 @@
+import React from "react";
+import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types";
+
+export interface ModalFooterProps extends Omit<ModalFooterBaseProps, "renderAction"> {
+  renderSideAction?: React.ReactNode;
+}
diff --git a/...dalFooterBase/ModalFooterBase.module.scss → ...dalFooterBase/ModalFooterBase.module.scss b/...dalFooterBase/ModalFooterBase.module.scss → ...dalFooterBase/ModalFooterBase.module.scss
diff --git a/...ooter/ModalFooterBase/ModalFooterBase.tsx → ...oters/ModalFooterBase/ModalFooterBase.tsx b/...ooter/ModalFooterBase/ModalFooterBase.tsx → ...oters/ModalFooterBase/ModalFooterBase.tsx
@@ -10,6 +10,8 @@ const ModalFooterBase = forwardRef(
     { primaryButton, secondaryButton, renderAction, id, className, "data-testid": dataTestId }: ModalFooterBaseProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
+    const { text: primaryButtonText, ...primaryButtonProps } = primaryButton;
+    const { text: secondaryButtonText, ...secondaryButtonProps } = secondaryButton || {};
     return (
       <Flex
         ref={ref}
@@ -19,12 +21,10 @@ const ModalFooterBase = forwardRef(
         className={cx(styles.footer, className)}
         data-testid={dataTestId}
       >
-        <Button onClick={primaryButton.onClick} className={primaryButton.className}>
-          {primaryButton.text}
-        </Button>
+        <Button {...primaryButtonProps}>{primaryButtonText}</Button>
         {secondaryButton && (
-          <Button kind={Button.kinds.TERTIARY} className={secondaryButton.className} onClick={secondaryButton.onClick}>
-            {secondaryButton.text}
+          <Button {...secondaryButtonProps} kind={Button.kinds.TERTIARY}>
+            {secondaryButtonText}
           </Button>
         )}
         {renderAction}

diff --git a/.../ModalFooterBase/ModalFooterBase.types.ts → .../ModalFooterBase/ModalFooterBase.types.ts b/.../ModalFooterBase/ModalFooterBase.types.ts → .../ModalFooterBase/ModalFooterBase.types.ts
@@ -2,7 +2,7 @@ import { ButtonProps } from "../../../Button";
 import React from "react";
 import { VibeComponentProps } from "../../../../types";
 
-export interface ModalFooterActionProps extends Pick<ButtonProps, "onClick" | "className"> {
+export interface ModalFooterActionProps extends Omit<ButtonProps, "children" | "kind"> {
   text: string;
 }
 

diff --git a/...erBase/__tests__/ModalFooterBase.test.tsx → ...erBase/__tests__/ModalFooterBase.test.tsx b/...erBase/__tests__/ModalFooterBase.test.tsx → ...erBase/__tests__/ModalFooterBase.test.tsx
diff --git a/packages/core/src/tests/constants.ts b/packages/core/src/tests/constants.ts
@@ -108,6 +108,7 @@ export enum ComponentDefaultTestId {
   MODAL_NEXT_OVERLAY = "modal-overlay",
   MODAL_NEXT_HEADER = "modal-header",
   MODAL_NEXT_CONTENT = "modal-content",
+  MODAL_NEXT_FOOTER = "modal-footer",
   MODAL_NEXT_MEDIA = "modal-media",
   MODAL_NEXT_BASIC_LAYOUT = "modal-basic-layout",
   MODAL_NEXT_SIDE_BY_SIDE_LAYOUT = "modal-side-by-side-layout",