feat(ModalContent): content component to be used in modal by consumers (

#2414)

packages/core/src/components/ModalNew/ModalContent/ModalContent.module.scss

@@ -0,0 +1,7 @@
+@import "~monday-ui-style/dist/mixins";
+
+.content {
+  padding-block-end: var(--spacing-xl);
+  overflow: auto;
+  @include scroller;
+}

packages/core/src/components/ModalNew/ModalContent/ModalContent.tsx

@@ -0,0 +1,26 @@
+import React, { forwardRef } from "react";
+import cx from "classnames";
+import { getTestId } from "../../../tests/test-ids-utils";
+import { ComponentDefaultTestId } from "../../../tests/constants";
+import styles from "./ModalContent.module.scss";
+import { ModalContentProps } from "./ModalContent.types";
+
+const ModalContent = forwardRef(
+  (
+    { children, className, id, "data-testid": dataTestId }: ModalContentProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={cx(styles.content, className)}
+        id={id}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_CONTENT, id)}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+export default ModalContent;

packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { VibeComponentProps } from "../../../types";
+
+export interface ModalContentProps extends VibeComponentProps {
+  children?: React.ReactNode;
+}

packages/core/src/components/ModalNew/ModalContent/__tests__/ModalContent.test.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import ModalContent from "../ModalContent";
+
+describe("ModalContent", () => {
+  const childrenContent = <span>My content</span>;
+
+  it("renders the children correctly", () => {
+    const { getByText } = render(<ModalContent>{childrenContent}</ModalContent>);
+    expect(getByText("My content")).toBeInTheDocument();
+  });
+
+  it("renders when no children are provided", () => {
+    const { container } = render(<ModalContent />);
+    expect(container.firstChild).toBeInTheDocument();
+  });
+});

packages/core/src/tests/constants.ts

@@ -104,6 +104,7 @@ export enum ComponentDefaultTestId {
   MODAL_HEADER = "modal-header",
   MODAL_FOOTER_BUTTONS = "modal-footer-buttons",
   MODAL_NEXT_HEADER = "modal-header",
+  MODAL_NEXT_CONTENT = "modal-content",
   FORMATTED_NUMBER = "formatted-number",
   HIDDEN_TEXT = "hidden-text",
   DIALOG_CONTENT_CONTAINER = "dialog-content-container",