From 792bbf6be3b3331a7067be4228678920326a351f Mon Sep 17 00:00:00 2001
From: vladoseeg <vladoseeg@yandex-team.ru>
Date: Thu, 18 Apr 2024 18:47:36 +0300
Subject: [PATCH] feat(Overlay): adjust storybook examples

---
 .../Overlay/__stories__/Overlay.scss          |  7 ++++++
 .../Overlay/__stories__/Overlay.stories.tsx   | 25 ++++++++++++-------
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/src/components/Overlay/__stories__/Overlay.scss b/src/components/Overlay/__stories__/Overlay.scss
index 1298b33a34..046f42cecd 100644
--- a/src/components/Overlay/__stories__/Overlay.scss
+++ b/src/components/Overlay/__stories__/Overlay.scss
@@ -10,6 +10,13 @@ $block: '.#{variables.$ns}overlay-showcase';
         padding: var(--g-spacing-1);
     }
 
+    &__dialog-content {
+        position: relative;
+
+        width: 480px;
+        height: 212px;
+    }
+
     &__table table {
         min-width: 763px;
     }
diff --git a/src/components/Overlay/__stories__/Overlay.stories.tsx b/src/components/Overlay/__stories__/Overlay.stories.tsx
index 33c47c9d84..f843eee87a 100644
--- a/src/components/Overlay/__stories__/Overlay.stories.tsx
+++ b/src/components/Overlay/__stories__/Overlay.stories.tsx
@@ -8,6 +8,7 @@ import {Dialog as DialogComponent} from '../../Dialog';
 import {Icon} from '../../Icon';
 import {Loader} from '../../Loader';
 import {Table as TableComponent} from '../../Table';
+import {Box, Flex} from '../../layout';
 import {block} from '../../utils/cn';
 import {Overlay} from '../Overlay';
 import type {OverlayProps} from '../Overlay';
@@ -31,7 +32,7 @@ const DefaultTemplate: StoryFn<OverlayProps> = (args) => {
                 <div>Example of overlay</div>
                 <div>with loader</div>
                 <Overlay {...args}>
-                    <Loader />
+                    <Loader size="m" />
                 </Overlay>
             </div>
             <div className={b('content')}>
@@ -95,17 +96,23 @@ const DialogTemplate: StoryFn<OverlayProps> = (args) => {
             }}
             aria-labelledby={dialogTitleId}
         >
-            <div className={b('content')}>
-                <DialogComponent.Header caption="Caption" id={dialogTitleId} />
-                <DialogComponent.Body>Dialog.Body</DialogComponent.Body>
-                <DialogComponent.Footer
-                    onClickButtonApply={() => alert('onApply')}
-                    textButtonApply="Apply"
-                />
+            <DialogComponent.Header caption="Caption" id={dialogTitleId} />
+            <div className={b('dialog-content')}>
+                <DialogComponent.Body>Some text to show in dialog body</DialogComponent.Body>
                 <Overlay {...args}>
-                    <Loader size="m" />
+                    <Flex direction="column" centerContent>
+                        <Loader size="m" />
+                        <Box style={{textAlign: 'center'}} spacing={{mt: 3}}>
+                            Loading text about process with long description to show
+                            <br /> max content-width
+                        </Box>
+                    </Flex>
                 </Overlay>
             </div>
+            <DialogComponent.Footer
+                onClickButtonApply={() => alert('onApply')}
+                textButtonApply="Apply"
+            />
         </DialogComponent>
     );
 };