refactor: internal - changed Modal to LegacyModal (exported still as …

…Modal) 7360977361

packages/core/src/components/Modal/Modal.tsx → packages/core/src/components/LegacyModal/LegacyModal.tsx

@@ -2,8 +2,8 @@ import React, { cloneElement, FC, ReactElement, useCallback, useMemo } from "rea
 import ReactDOM from "react-dom";
 import cx from "classnames";
 import { useA11yDialog } from "./a11yDialog";
-import ModalContent from "./ModalContent/ModalContent";
-import ModalHeader from "./ModalHeader/ModalHeader";
+import ModalContent from "./LegacyModalContent/LegacyModalContent";
+import ModalHeader from "./LegacyModalHeader/LegacyModalHeader";
 import useBodyScrollLock from "./useBodyScrollLock";
 import useShowHideModal from "./useShowHideModal";
 import {
@@ -17,12 +17,12 @@ import { NOOP } from "../../utils/function-utils";
 import { withStaticProps } from "../../types";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
-import styles from "./Modal.module.scss";
-import { ModalWidth } from "./Modal.types";
+import styles from "./LegacyModal.module.scss";
+import { ModalWidth } from "./LegacyModal.types";
 import LayerProvider from "../LayerProvider/LayerProvider";
 import { isClient } from "../../utils/ssr-utils";
 
-export interface ModalProps {
+export interface LegacyModalProps {
   /**
    * Id of the modal, used internally and for accessibility
    */
@@ -87,7 +87,7 @@ export interface ModalProps {
   unmountOnClose?: boolean;
 }
 
-const Modal: FC<ModalProps> & { width?: typeof ModalWidthEnum } = ({
+const Modal: FC<LegacyModalProps> & { width?: typeof ModalWidthEnum } = ({
   classNames = { container: "", overlay: "", modal: "" },
   id,
   show,
@@ -103,7 +103,7 @@ const Modal: FC<ModalProps> & { width?: typeof ModalWidthEnum } = ({
   zIndex = 10000,
   unmountOnClose = true,
   "data-testid": dataTestId
-}: ModalProps) => {
+}: LegacyModalProps) => {
   const childrenArray: ReactElement[] = useMemo(
     () => (children ? (React.Children.toArray(children) as ReactElement[]) : []),
     [children]

packages/core/src/components/Modal/ModalContent/ModalContent.tsx → packages/core/src/components/LegacyModal/LegacyModalContent/LegacyModalContent.tsx

@@ -4,13 +4,13 @@ import Text from "../../Text/Text";
 import VibeComponentProps from "../../../types/VibeComponentProps";
 import { getTestId } from "../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../tests/constants";
-import styles from "./ModalContent.module.scss";
+import styles from "./LegacyModalContent.module.scss";
 
-export interface ModalContentProps extends VibeComponentProps {
+export interface LegacyModalContentProps extends VibeComponentProps {
   children: ReactElement | ReactElement[] | string;
 }
 
-const ModalContent: FC<ModalContentProps> = ({ className, id, "data-testid": dataTestId, children }) => {
+const LegacyModalContent: FC<LegacyModalContentProps> = ({ className, id, "data-testid": dataTestId, children }) => {
   return (
     <Text
       type="text1"
@@ -24,8 +24,8 @@ const ModalContent: FC<ModalContentProps> = ({ className, id, "data-testid": dat
   );
 };
 
-Object.assign(ModalContent, {
+Object.assign(LegacyModalContent, {
   displayName: "ModalContent"
 });
 
-export default ModalContent;
+export default LegacyModalContent;

packages/core/src/components/Modal/ModalContent/__tests__/ModalContent.snapshot.test.tsx → packages/core/src/components/LegacyModal/LegacyModalContent/__tests__/LegacyModalContent.snapshot.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import ModalContent from "../ModalContent";
+import ModalContent from "../LegacyModalContent";
 
 describe("ModalContent renders correctly", () => {
   it("with empty props", () => {

packages/core/src/components/Modal/ModalFooter/ModalFooter.tsx → packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooter.tsx

@@ -1,18 +1,18 @@
 import React, { FC, ReactElement } from "react";
 import cx from "classnames";
 import VibeComponentProps from "../../../types/VibeComponentProps";
-import styles from "./ModalFooter.module.scss";
+import styles from "./LegacyModalFooter.module.scss";
 
-export interface ModalFooterProps extends VibeComponentProps {
+export interface LegacyModalFooterProps extends VibeComponentProps {
   children: ReactElement | ReactElement[] | string;
 }
 
-const ModalFooter: FC<ModalFooterProps> = ({ className, children }) => {
+const LegacyModalFooter: FC<LegacyModalFooterProps> = ({ className, children }) => {
   return <div className={cx(styles.container, className)}>{children}</div>;
 };
 
-Object.assign(ModalFooter, {
+Object.assign(LegacyModalFooter, {
   displayName: "ModalFooter"
 });
 
-export default ModalFooter;
+export default LegacyModalFooter;

packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/ModalFooterButtons.tsx → packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons.tsx

@@ -5,17 +5,17 @@ import { getTestId } from "../../../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../../../tests/constants";
 import Flex from "../../../Flex/Flex";
 import Button from "../../../Button/Button";
-import ModalFooter from "../ModalFooter";
+import LegacyModalFooter from "../LegacyModalFooter";
 
-export interface ModalFooterButtonsProps extends VibeComponentProps {
+export interface LegacyModalFooterButtonsProps extends VibeComponentProps {
   primaryButtonText: string;
   secondaryButtonText?: string;
   disablePrimaryButton?: boolean;
   onPrimaryButtonClick?: () => void;
   onSecondaryButtonClick?: () => void;
 }
 
-const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
+const LegacyModalFooterButtons: VibeComponent<LegacyModalFooterButtonsProps> = forwardRef(
   (
     {
       primaryButtonText,
@@ -26,13 +26,13 @@ const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
       className,
       id,
       "data-testid": dataTestId
-    }: ModalFooterButtonsProps,
+    }: LegacyModalFooterButtonsProps,
     // As ModalFooter does not currently forward refs
     // eslint-disable-next-line
     ref
   ) => {
     return (
-      <ModalFooter
+      <LegacyModalFooter
         id={id}
         className={className}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_FOOTER_BUTTONS, id)}
@@ -47,9 +47,13 @@ const ModalFooterButtons: VibeComponent<ModalFooterButtonsProps> = forwardRef(
             {primaryButtonText}
           </Button>
         </Flex>
-      </ModalFooter>
+      </LegacyModalFooter>
     );
   }
 );
 
-export default ModalFooterButtons;
+Object.assign(LegacyModalFooterButtons, {
+  displayName: "ModalFooterButtons"
+});
+
+export default LegacyModalFooterButtons;

packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.snapshot.test.tsx → packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.snapshot.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
-import ModalFooterButtons from "../ModalFooterButtons";
+import ModalFooterButtons from "../LegacyModalFooterButtons";
 
 describe("ModalFooterButtons", () => {
   it("should render correctly", () => {

packages/core/src/components/Modal/ModalFooter/ModalFooterButtons/__tests__/ModalFooterButtons.test.tsx → packages/core/src/components/LegacyModal/LegacyModalFooter/LegacyModalFooterButtons/__tests__/LegacyModalFooterButtons.test.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { fireEvent, render, cleanup } from "@testing-library/react";
-import ModalFooterButtons, { ModalFooterButtonsProps } from "../ModalFooterButtons";
+import ModalFooterButtons, {
+  LegacyModalFooterButtonsProps as ModalFooterButtonsProps
+} from "../LegacyModalFooterButtons";
 
 const PRIMARY_BUTTON_TEXT = "Confirm";
 const SECONDARY_BUTTON_TEXT = "Cancel";

packages/core/src/components/Modal/ModalFooter/__tests__/ModalFooter.snapshot.test.js → packages/core/src/components/LegacyModal/LegacyModalFooter/__tests__/LegacyModalFooter.snapshot.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import ModalFooter from "../ModalFooter";
+import ModalFooter from "../LegacyModalFooter";
 import { cleanup, render } from "@testing-library/react";
 import { snapshotDiff } from "../../../../utils/jest-utils";
 

packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx → packages/core/src/components/LegacyModal/LegacyModalHeader/LegacyModalHeader.tsx

@@ -11,10 +11,10 @@ import { ComponentDefaultTestId } from "../../../tests/constants";
 import Text from "../../Text/Text";
 import Heading from "../../Heading/Heading";
 import Flex from "../../Flex/Flex";
-import styles from "./ModalHeader.module.scss";
+import styles from "./LegacyModalHeader.module.scss";
 import { SubIcon } from "../../../types/SubIcon";
 
-interface BaseModalHeaderProps extends VibeComponentProps {
+interface BaseLegacyModalHeaderProps extends VibeComponentProps {
   /**
    * Description of the modal - pure string description is a recommended standard, use JSX ability only if there is a need to add links
    */
@@ -58,19 +58,19 @@ interface BaseModalHeaderProps extends VibeComponentProps {
   closeButtonAriaLabel?: string;
 }
 
-interface ModalHeaderWithOnlyTitle extends BaseModalHeaderProps {
+interface LegacyModalHeaderWithOnlyTitle extends BaseLegacyModalHeaderProps {
   title: ElementContent;
   children?: never;
 }
 
-interface ModalHeaderWithOnlyChildren extends BaseModalHeaderProps {
+interface LegacyModalHeaderWithOnlyChildren extends BaseLegacyModalHeaderProps {
   title?: never;
   children: ElementContent;
 }
 
-export type ModalHeaderProps = ModalHeaderWithOnlyTitle | ModalHeaderWithOnlyChildren;
+export type LegacyModalHeaderProps = LegacyModalHeaderWithOnlyTitle | LegacyModalHeaderWithOnlyChildren;
 
-const ModalHeader: FC<ModalHeaderProps> = ({
+const LegacyModalHeader: FC<LegacyModalHeaderProps> = ({
   className,
   title,
   children,
@@ -128,8 +128,8 @@ const ModalHeader: FC<ModalHeaderProps> = ({
   );
 };
 
-Object.assign(ModalHeader, {
+Object.assign(LegacyModalHeader, {
   displayName: "ModalHeader"
 });
 
-export default ModalHeader;
+export default LegacyModalHeader;

packages/core/src/components/Modal/ModalHeader/__tests__/ModalHeader.snapshot.test.js → packages/core/src/components/LegacyModal/LegacyModalHeader/__tests__/LegacyModalHeader.snapshot.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import ModalHeader from "../ModalHeader";
+import ModalHeader from "../LegacyModalHeader";
 import { Settings } from "@vibe/icons";
 import { cleanup, render } from "@testing-library/react";
 import { snapshotDiff } from "../../../../utils/jest-utils";

packages/core/src/components/Modal/ModalHelper.ts → packages/core/src/components/LegacyModal/ModalHelper.ts

@@ -1,8 +1,8 @@
 import { ReactElement } from "react";
-import ModalHeader from "./ModalHeader/ModalHeader";
-import ModalContent from "./ModalContent/ModalContent";
-import ModalFooter from "./ModalFooter/ModalFooter";
-import ModalFooterButtons from "./ModalFooter/ModalFooterButtons/ModalFooterButtons";
+import ModalHeader from "./LegacyModalHeader/LegacyModalHeader";
+import ModalContent from "./LegacyModalContent/LegacyModalContent";
+import ModalFooter from "./LegacyModalFooter/LegacyModalFooter";
+import ModalFooterButtons from "./LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
 
 /**
  * @deprecated

packages/core/src/components/Modal/__stories__/Modal.mdx → packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx

@@ -1,20 +1,24 @@
-import { ComponentRules, UsageGuidelines } from "vibe-storybook-components";
-import { Story, Canvas, Meta } from "@storybook/blocks";
+import { ComponentRules/*, DeprecatedWarning*/, UsageGuidelines } from "vibe-storybook-components";
+import { Canvas, Meta } from "@storybook/blocks";
 import { DIALOG, TIPSEEN, TOOLTIP } from "../../../storybook/components/related-components/component-description-map";
 import {
   DialogAsModalBadExample,
   ModalExampleWrapper,
   TipAlertDialog,
   TipDevDropdownInsideModal,
   TipDialog
-} from "./Modal.stories.helpers";
-import * as ModalStories from "./Modal.stories";
+} from "./LegacyModal.stories.helpers";
+import * as ModalStories from "./LegacyModal.stories";
 
 <Meta of={ModalStories} />
 
 # Modal
 
+[//]: # (// TODO should be added once new Modal is exported)
+[//]: # (<DeprecatedWarning alternativeName="Modal" alternativeLink="/?path=/docs/components-modal-new" />)
+
 - [Overview](#overview)
+- [Import](#import)
 - [Props](#props)
 - [Usage](#usage)
 - [Variants](#variants)

packages/core/src/components/Modal/__stories__/Modal.stories.helpers.tsx → packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.helpers.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useRef, useState } from "react";
 import Button from "../../Button/Button";
-import Modal from "../Modal";
+import Modal from "../LegacyModal";
 import { Dialog, DialogContentContainer, Heading } from "../../../components";
 import Flex from "../../Flex/Flex";
-import ModalFooterButtons from "../ModalFooter/ModalFooterButtons/ModalFooterButtons";
-import styles from "./Modal.stories.module.scss";
+import ModalFooterButtons from "../LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
+import styles from "./LegacyModal.stories.module.scss";
 import cx from "classnames";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 

packages/core/src/components/Modal/__stories__/Modal.stories.tsx → packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx

@@ -1,12 +1,12 @@
 import React, { useCallback, useRef, useState } from "react";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
-import ModalContent from "../ModalContent/ModalContent";
-import ModalFooter from "../ModalFooter/ModalFooter";
-import ModalHeader from "../ModalHeader/ModalHeader";
-import Modal, { ModalProps } from "../Modal";
-import { useHelperOpenModalButton } from "./Modal.stories.helpers";
+import ModalContent from "../LegacyModalContent/LegacyModalContent";
+import ModalFooter from "../LegacyModalFooter/LegacyModalFooter";
+import ModalHeader from "../LegacyModalHeader/LegacyModalHeader";
+import Modal, { LegacyModalProps as ModalProps } from "../LegacyModal";
+import { useHelperOpenModalButton } from "./LegacyModal.stories.helpers";
 import EditableHeading from "../../../components/EditableHeading/EditableHeading";
-import ModalFooterButtons from "../ModalFooter/ModalFooterButtons/ModalFooterButtons";
+import ModalFooterButtons from "../LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
 import { Upgrade } from "@vibe/icons";
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Modal,

packages/core/src/components/Modal/__tests__/Modal.snapshot.test.js → packages/core/src/components/LegacyModal/__tests__/LegacyModal.snapshot.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import Modal from "../Modal";
+import Modal from "../LegacyModal";
 import { ModalContent, ModalFooter, ModalHeader } from "../../../components";
 import { cleanup, render } from "@testing-library/react";
 import { snapshotDiff } from "../../../utils/jest-utils";

packages/core/src/components/Modal/__tests__/Modal.test.js → packages/core/src/components/LegacyModal/__tests__/LegacyModal.test.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { render, cleanup, fireEvent } from "@testing-library/react";
 import { ModalHeader } from "../../../components";
-import { ModalExampleWrapper } from "../__stories__/Modal.stories.helpers";
+import { ModalExampleWrapper } from "../__stories__/LegacyModal.stories.helpers";
 import { ComponentDefaultTestId } from "../../../tests/test-ids-utils";
 
 const MODAL_TITLE_TEXT = "Modal title";

packages/core/src/components/LegacyModal/index.ts

@@ -0,0 +1,19 @@
+export { default as Modal, LegacyModalProps as ModalProps } from "./LegacyModal";
+export {
+  default as ModalHeader,
+  LegacyModalHeaderProps as ModalHeaderProps
+} from "./LegacyModalHeader/LegacyModalHeader";
+export {
+  default as ModalContent,
+  LegacyModalContentProps as ModalContentProps
+} from "./LegacyModalContent/LegacyModalContent";
+export {
+  default as ModalFooter,
+  LegacyModalFooterProps as ModalFooterProps
+} from "./LegacyModalFooter/LegacyModalFooter";
+export {
+  default as ModalFooterButtons,
+  LegacyModalFooterButtonsProps as ModalFooterButtonsProps
+} from "./LegacyModalFooter/LegacyModalFooterButtons/LegacyModalFooterButtons";
+
+export * from "./LegacyModal.types";

packages/core/src/components/index.ts

@@ -40,7 +40,7 @@ export * from "./ListTitle";
 export * from "./Loader";
 export * from "./Menu";
 export * from "./MenuButton";
-export * from "./Modal";
+export * from "./LegacyModal";
 export * from "./MultiStepIndicator";
 export * from "./ProgressBars";
 export * from "./RadioButton";