feat(Modal): export new Modal component to /next

packages/core/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -110,4 +110,16 @@ exports[`exports should export all components 1`] = `
 ]
 `;
 
-exports[`exports should export next all components 1`] = `[]`;
+exports[`exports should export next all components 1`] = `
+[
+  "Modal",
+  "ModalBasicLayout",
+  "ModalContent",
+  "ModalFooter",
+  "ModalFooterWizard",
+  "ModalHeader",
+  "ModalMedia",
+  "ModalMediaLayout",
+  "ModalSideBySideLayout",
+]
+`;

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

@@ -17,7 +17,7 @@ import {
   TOOLTIP
 } from "../../../../storybook/components/related-components/component-description-map";
 
-<Meta title="Internal/Components/Modal [New]" />
+<Meta title="Components/Modal [New]" />
 
 # Modal
 

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

@@ -25,14 +25,14 @@ export const OpenedModalPreview = forwardRef(
     const isAfterFirstRender = useAfterFirstRender();
     return (
       <div
-        className={cx(styles.preview, getStyle(styles, size))}
+        className={cx(styles.preview, { [getStyle(styles, size)]: isDocsView })}
         ref={ref}
         // workaround to prevent modal from autofocusing on page load
         // autofocus would work as expected when modal closes and reopens
         {...(!isAfterFirstRender.current && isDocsView && { "data-no-autofocus": true })}
       >
         <Button onClick={onOpenModalClick}>Open Modal</Button>
-        {isDocsView ? modal : createPortal(modal, document.body)}
+        {modal}
       </div>
     );
   }

packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.module.scss → packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss

@@ -7,7 +7,7 @@
 .preview {
   padding-inline-start: 32px;
   padding-block-start: 40px;
-  height: 360px;
+  height: 100vh;
   width: 100%;
   container-type: inline-size;
 

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

@@ -0,0 +1,2 @@
+export { default as Modal } from "./Modal";
+export { ModalProps } from "./Modal.types";

packages/core/src/components/Modal/ModalContent/index.ts

@@ -0,0 +1,2 @@
+export { default as ModalContent } from "./ModalContent";
+export { ModalContentProps } from "./ModalContent.types";

packages/core/src/components/Modal/ModalHeader/index.ts

@@ -0,0 +1,2 @@
+export { default as ModalHeader } from "./ModalHeader";
+export { ModalHeaderProps } from "./ModalHeader.types";

packages/core/src/components/Modal/ModalMedia/index.ts

@@ -0,0 +1,2 @@
+export { default as ModalMedia } from "./ModalMedia";
+export { ModalMediaProps } from "./ModalMedia.types";

packages/core/src/components/Modal/footers/index.ts

@@ -0,0 +1,5 @@
+export { default as ModalFooter } from "./ModalFooter/ModalFooter";
+export { ModalFooterProps } from "./ModalFooter/ModalFooter.types";
+
+export { default as ModalFooterWizard } from "./ModalFooterWizard/ModalFooterWizard";
+export { ModalFooterWizardProps } from "./ModalFooterWizard/ModalFooterWizard.types";

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

@@ -0,0 +1,6 @@
+export * from "./footers";
+export * from "./layouts";
+export * from "./Modal";
+export * from "./ModalHeader";
+export * from "./ModalContent";
+export * from "./ModalMedia";

packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx → packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx

@@ -25,12 +25,14 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Internal/Components/Modal [New]/Basic modal",
+  title: "Components/Modal [New]/Basic modal",
   component: Modal,
   subcomponents: { ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, TransitionView },
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
-  tags: ["internal"]
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {

packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx → packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx

@@ -4,7 +4,7 @@ import Modal from "../../../Modal/Modal";
 import { createStoryMetaSettingsDecorator } from "../../../../../storybook";
 import ModalHeader from "../../../ModalHeader/ModalHeader";
 import ModalContent from "../../../ModalContent/ModalContent";
-import ModalMedia from "../../ModalMedia";
+import ModalMedia from "../../../ModalMedia/ModalMedia";
 import mediaImage from "./assets/media-image.png";
 import ModalFooter from "../../../footers/ModalFooter/ModalFooter";
 import ModalMediaLayout from "../ModalMediaLayout";
@@ -26,7 +26,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Internal/Components/Modal [New]/Media modal",
+  title: "Components/Modal [New]/Media modal",
   component: Modal,
   subcomponents: {
     ModalMediaLayout,
@@ -39,7 +39,9 @@ export default {
   },
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
-  tags: ["internal"]
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {

packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx → packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx

@@ -6,7 +6,7 @@ import { withOpenedModalPreview } from "../../../Modal/__stories__/Modal.stories
 import ModalHeader from "../../../ModalHeader/ModalHeader";
 import ModalContent from "../../../ModalContent/ModalContent";
 import ModalSideBySideLayout from "../ModalSideBySideLayout";
-import ModalMedia from "../../ModalMedia";
+import ModalMedia from "../../../ModalMedia/ModalMedia";
 import mediaImage from "./assets/media-image.png";
 import useWizard from "../../../../../hooks/useWizard/useWizard";
 import TransitionView from "../../../../TransitionView/TransitionView";
@@ -29,7 +29,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Internal/Components/Modal [New]/Side by side modal",
+  title: "Components/Modal [New]/Side by side modal",
   component: Modal,
   subcomponents: {
     ModalSideBySideLayout,
@@ -42,7 +42,9 @@ export default {
   },
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,
-  tags: ["internal"]
+  parameters: {
+    layout: "fullscreen"
+  }
 } satisfies Meta<typeof Modal>;
 
 export const Overview: Story = {

packages/core/src/components/Modal/layouts/index.ts

@@ -0,0 +1,8 @@
+export { default as ModalBasicLayout } from "./ModalBasicLayout/ModalBasicLayout";
+export { ModalBasicLayoutProps } from "./ModalBasicLayout/ModalBasicLayout.types";
+
+export { default as ModalMediaLayout } from "./ModalMediaLayout/ModalMediaLayout";
+export { ModalMediaLayoutProps } from "./ModalMediaLayout/ModalMediaLayout.types";
+
+export { default as ModalSideBySideLayout } from "./ModalSideBySideLayout/ModalSideBySideLayout";
+export { ModalSideBySideLayoutProps } from "./ModalSideBySideLayout/ModalSideBySideLayout.types";

packages/core/src/components/next.ts

@@ -1 +1 @@
-export {};
+export * from "./Modal";

packages/core/src/storybook/components/related-components/component-description-map.tsx

@@ -59,9 +59,9 @@ import { BoxDescription } from "./descriptions/box-description";
 import { TableDescription } from "./descriptions/table-description";
 import { VirtualizedGridDescription } from "./descriptions/virtualized-grid-description/virtualized-grid-description";
 import { MenuGridItemDescription } from "./descriptions/menu-grid-item-description";
-import { ModalMediaLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent";
-import { ModalSideBySideLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent";
-import { ModalBasicLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent";
+import { ModalMediaLayoutRelatedComponent } from "../../../components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent";
+import { ModalSideBySideLayoutRelatedComponent } from "../../../components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent";
+import { ModalBasicLayoutRelatedComponent } from "../../../components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent";
 
 export const SPLIT_BUTTON = "split-button";
 export const BUTTON_GROUP = "button-group";