feat(ModalFooter): basic modal footer

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;
+}

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;

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;
+}

packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx → packages/core/src/components/ModalNew/footers/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}

packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts → packages/core/src/components/ModalNew/footers/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;
 }
 

packages/core/src/tests/constants.ts

@@ -107,6 +107,7 @@ export enum ComponentDefaultTestId {
   MODAL_NEXT_OVERLAY = "modal-overlay",
   MODAL_NEXT_HEADER = "modal-header",
   MODAL_NEXT_CONTENT = "modal-content",
+  MODAL_NEXT_FOOTER = "modal-footer",
   FORMATTED_NUMBER = "formatted-number",
   HIDDEN_TEXT = "hidden-text",
   DIALOG_CONTENT_CONTAINER = "dialog-content-container",