diff --git a/src/components/Overlay/__stories__/Overlay.scss b/src/components/Overlay/__stories__/Overlay.scss index 1298b33a34..abdb6f8687 100644 --- a/src/components/Overlay/__stories__/Overlay.scss +++ b/src/components/Overlay/__stories__/Overlay.scss @@ -6,6 +6,21 @@ $block: '.#{variables.$ns}overlay-showcase'; &__content { position: relative; + width: 480px; + height: 128px; + padding: var(--g-spacing-1); + } + + &__dialog-content { + position: relative; + + width: 480px; + height: 212px; + } + + &__table-content { + position: relative; + width: fit-content; padding: var(--g-spacing-1); } diff --git a/src/components/Overlay/__stories__/Overlay.stories.tsx b/src/components/Overlay/__stories__/Overlay.stories.tsx index 33c47c9d84..6b03d28bf8 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 = (args) => {
Example of overlay
with loader
- +
@@ -95,17 +96,23 @@ const DialogTemplate: StoryFn = (args) => { }} aria-labelledby={dialogTitleId} > -
- - Dialog.Body - alert('onApply')} - textButtonApply="Apply" - /> + +
+ Some text to show in dialog body - + + + + Loading text about process with long description to show +
max content-width +
+
+ alert('onApply')} + textButtonApply="Apply" + /> ); }; @@ -122,7 +129,7 @@ const TableTemplate: StoryFn = (args) => { return (
-
+