From 98e5622e4ecb406a05adca9638b5469eec449fe9 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Thu, 26 Dec 2024 15:12:59 +0200
Subject: [PATCH] docs(Modal): general improvements

---
 .../__stories__/ModalMediaLayout.stories.tsx  | 24 -------------------
 .../__stories__/ModalSideBySideLayout.mdx     | 12 +++++-----
 .../ModalSideBySideLayout.stories.helpers.tsx |  2 +-
 3 files changed, 7 insertions(+), 31 deletions(-)

diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx
index ffe81d0950..a8640eea45 100644
--- a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx
+++ b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx
@@ -101,30 +101,6 @@ export const Wizard: Story = {
           </Text>
         </ModalContent>
       </ModalMediaLayout>,
-      <ModalMediaLayout>
-        <ModalMedia>
-          <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
-        </ModalMedia>
-        <ModalHeader title="Modal with wizard" />
-        <ModalContent>
-          <Text type="text1" align="inherit" element="p">
-            Now the modal can also allow wizard process, when including stepper in the modal footer, it also contain an
-            animation.
-          </Text>
-        </ModalContent>
-      </ModalMediaLayout>,
-      <ModalMediaLayout>
-        <ModalMedia>
-          <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
-        </ModalMedia>
-        <ModalHeader title="Modal with wizard" />
-        <ModalContent>
-          <Text type="text1" align="inherit" element="p">
-            Now the modal can also allow wizard process, when including stepper in the modal footer, it also contain an
-            animation.
-          </Text>
-        </ModalContent>
-      </ModalMediaLayout>,
       <ModalMediaLayout>
         <ModalMedia>
           <img src={mediaImage} alt="media placeholder" style={{ width: "100%", objectFit: "cover" }} />
diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx
index 0ef5b754bb..92ded1b9f9 100644
--- a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx
+++ b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx
@@ -22,7 +22,7 @@ import { SideBySideModalTip } from "./ModalSideBySideLayout.stories.helpers";
 - [Props](#props)
 - [Usage](#usage)
 - [Use cases and examples](#use-cases-and-examples)
-- [Do's and dont's](do's-and-don'ts)
+- [Do's and dont's](#dos-and-donts)
 - [Related components](#related-components)
 - [Feedback](#feedback)
 
@@ -50,22 +50,22 @@ The Side-by-side Modal offers a layout with two distinct sections. The left side
 
 ## Use cases and examples
 
-### Wizard footer
+### Wizard modal
 
-When multi steps modal, use the ModalFooterWizard.
+For modals with multiple steps, use the ModalFooterWizard. You can use it to break down the tasks. Not every step must include an image.
 
 <Canvas of={SideBySideModalStories.Wizard} />
 
-### Header with extra icon button
+### Header with icon button
 
 In case of a need of an icon button in the modal header, you can use our default header "Action slot".
 You can also use it as a <StorybookLink page="Buttons/MenuButton">menu button</StorybookLink> component.
 
-<Canvas of={SideBySideModalStories.HeaderWithExtraIconButton} />
+<Canvas of={SideBySideModalStories.HeaderWithIconButton} />
 
 ### Animation
 
-Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the element trigger animation, which can be replaced with a center pop animation if there's no specific trigger. Transition animation is used exclusively for wizard modals and cannot be changed or removed.
+Each modal includes an animation type based on its entrance point, with wizard modals also featuring transition animations. The default is the center pop animation, which can be replaced with an anchor animation if there is a specific trigger to open the modal. Transition animation is used exclusively for wizard modals and cannot be changed or removed.
 
 <Canvas of={SideBySideModalStories.Animation} />
 
diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx
index 78e1aac6ff..7a49e71a83 100644
--- a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx
+++ b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx
@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const SideBySideModalTip = () => (
   <div style={{ marginTop: 40 }}>
     <Tip>
-      If your content is scrollable consider using{" "}
+      If your content is scrollable, consider using{" "}
       <StorybookLink page="Components/Modal [New]/Basic modal" size={StorybookLink.sizes.SMALL}>
         Basic modal
       </StorybookLink>