feat(Dialog)!: update layout

src/components/Dialog/ButtonClose/ButtonClose.scss

@@ -1,14 +1,8 @@
-@use '../../variables';
+@use '../variables';
 
-$block: '.#{variables.$ns}dialog-btn-close';
-
-#{$block} {
+#{variables.$closeBtnBlock} {
     position: absolute;
-    // Offset from icon to the edges should be 20px (36px is Button's size, 8px is half of Button's padding)
-    // Icon size = 20px
-    // Button size = 36px
-    // Offset = 20 - ((36 - 20) / 2) = 14
-    inset-block-start: 14px;
-    inset-inline-end: 14px;
+    inset-block-start: 12px;
+    inset-inline-end: 16px;
     z-index: 1;
 }

src/components/Dialog/Dialog.scss

@@ -1,15 +1,16 @@
-@use '../variables';
+@use './variables';
 
-$block: '.#{variables.$ns}dialog';
-
-#{$block} {
+#{variables.$block} {
     --_--side-padding: 32px;
+    --_--block-start-padding: 20px;
+    --_--block-end-padding: 24px;
     --_--close-button-space: 0px;
 
     position: relative;
     display: flex;
     flex-direction: column;
     width: var(--g-dialog-width, var(--_--width));
+    padding-block: var(--_--block-start-padding) var(--_--block-end-padding);
 
     &_has-scroll {
         overflow-y: auto;
@@ -32,7 +33,15 @@ $block: '.#{variables.$ns}dialog';
         }
     }
 
-    &_has-close {
-        --_--close-button-space: 24px;
+    &:has(#{variables.$closeBtnBlock}) {
+        --_--close-button-space: 26px;
+    }
+
+    &:has(#{variables.$headerBlock}) {
+        padding-block-start: 0;
+    }
+
+    &:has(#{variables.$footerBlock}) {
+        padding-block-end: 0;
     }
 }

src/components/Dialog/Dialog.tsx

@@ -138,16 +138,7 @@ export function Dialog({
             qa={qa}
             disableHeightTransition
         >
-            <div
-                className={b(
-                    {
-                        size,
-                        'has-close': hasCloseButton,
-                        'has-scroll': contentOverflow === 'auto',
-                    },
-                    className,
-                )}
-            >
+            <div className={b({size, 'has-scroll': contentOverflow === 'auto'}, className)}>
                 <DialogPrivateContext.Provider value={privateContextProps}>
                     {children}
                 </DialogPrivateContext.Provider>

src/components/Dialog/DialogBody/DialogBody.scss

@@ -1,9 +1,8 @@
-@use '../../variables';
+@use '../variables';
 
-$block: '.#{variables.$ns}dialog-body';
-
-#{$block} {
-    padding: 10px var(--_--side-padding);
+#{variables.$bodyBlock} {
+    min-height: 24px;
+    padding: 4px var(--_--side-padding);
     flex: 1 1 auto;
     overflow: auto;
     transition: height 0.35s ease-in-out;

src/components/Dialog/DialogDivider/DialogDivider.scss

@@ -1,8 +1,6 @@
-@use '../../variables';
+@use '../variables';
 
-$block: '.#{variables.$ns}dialog-divider';
-
-#{$block} {
+#{variables.$dividerBlock} {
     border-block-start: 1px solid var(--g-color-line-generic);
     margin: 0 calc(-1 * var(--_--side-padding));
 }

src/components/Dialog/DialogFooter/DialogFooter.scss

@@ -1,15 +1,13 @@
-@use '../../variables';
+@use '../variables';
 
-$block: '.#{variables.$ns}dialog-footer';
-
-#{$block} {
-    padding: 28px var(--_--side-padding);
+#{variables.$footerBlock} {
+    padding: 24px var(--_--side-padding) 28px;
     display: flex;
     align-items: center;
 
     &__bts-wrapper {
         display: flex;
-        gap: 10px;
+        gap: var(--g-spacing-2);
     }
 
     &__children {

src/components/Dialog/DialogHeader/DialogHeader.scss

@@ -1,15 +1,11 @@
-@use '../../variables';
+@use '../variables';
 @use '../../../../styles/mixins';
 
-$block: '.#{variables.$ns}dialog-header';
-
-#{$block} {
-    padding-block: 20px 10px;
+#{variables.$headerBlock} {
+    min-height: 36px;
+    padding-block: 12px 8px;
     padding-inline: var(--_--side-padding)
-        calc(
-            var(--_--side-padding) + var(--_--close-button-space) * var(--g-flow-is-ltr) +
-                var(--_--close-button-space) * var(--g-flow-is-rtl)
-        );
+        calc(var(--_--side-padding) + var(--_--close-button-space));
     line-height: 24px;
     display: flex;
     align-items: center;

src/components/Dialog/__stories__/Dialog.stories.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 import {faker} from '@faker-js/faker/locale/en';
-import type {Meta, StoryFn} from '@storybook/react-webpack5';
+import type {Meta, StoryObj} from '@storybook/react-webpack5';
 
 import {useUniqId} from '../../../hooks';
 import {Button} from '../../Button';
@@ -10,6 +10,7 @@ import {Dialog} from '../Dialog';
 import type {DialogProps} from '../Dialog';
 
 import {DialogShowcase} from './DialogShowcase';
+import {DynamicHeightStory} from './DynamicHeightStory';
 
 export default {
     title: 'Components/Overlays/Dialog',
@@ -22,17 +23,31 @@ export default {
             type: 'boolean',
         },
     },
-} as Meta<DialogProps>;
+} as Meta;
+
+type Story = StoryObj<typeof Dialog>;
 
 const largeTextLines = Array.from({length: 30}, () => faker.lorem.sentences());
 
+interface DialogComponentProps {
+    buttonText: string;
+    content: React.ReactNode;
+    showError?: boolean;
+    withHeader?: boolean;
+    withFooter?: boolean;
+    withEmptyBody?: boolean;
+}
+
 function DialogComponent({
     buttonText,
     content,
-    showError,
+    showError = false,
+    withHeader = true,
+    withFooter = true,
+    withEmptyBody = false,
     ...args
-}: DialogProps & {buttonText: string; content: React.ReactNode; showError: boolean}) {
-    const titleId = useUniqId();
+}: DialogProps & DialogComponentProps) {
+    const headerId = useUniqId();
     const [open, setOpen] = React.useState(false);
     return (
         <React.Fragment>
@@ -45,55 +60,86 @@ function DialogComponent({
                 onEnterKeyDown={() => {
                     alert('onEnterKeyDown');
                 }}
-                aria-labelledby={titleId}
+                aria-labelledby={withHeader ? headerId : undefined}
             >
-                <Dialog.Header caption="Header" id={titleId} />
+                {withHeader && <Dialog.Header caption="Header" id={headerId} />}
                 <Dialog.Body>
-                    <div
-                        style={{
-                            background: 'var(--g-color-base-generic)',
-                            border: '1px var(--g-color-line-generic) dashed',
-                            borderRadius: 5,
-                            padding: 10,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            minHeight: 60,
-                        }}
-                    >
-                        {content}
-                    </div>
+                    {withEmptyBody ? null : (
+                        <div
+                            style={{
+                                background: 'var(--g-color-base-generic)',
+                                border: '1px var(--g-color-line-generic) dashed',
+                                borderRadius: 5,
+                                padding: 10,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                minWidth: 280,
+                                minHeight: 60,
+                            }}
+                        >
+                            {content}
+                        </div>
+                    )}
                 </Dialog.Body>
-                <Dialog.Footer
-                    onClickButtonCancel={() => setOpen(false)}
-                    onClickButtonApply={() => alert('onApply')}
-                    textButtonApply="Apply"
-                    textButtonCancel="Cancel"
-                    showError={showError}
-                    errorText="Error text"
-                />
+                {withFooter && (
+                    <Dialog.Footer
+                        onClickButtonCancel={() => setOpen(false)}
+                        onClickButtonApply={() => alert('onApply')}
+                        textButtonApply="Apply"
+                        textButtonCancel="Cancel"
+                        showError={showError}
+                        errorText="Error text"
+                    />
+                )}
             </Dialog>
         </React.Fragment>
     );
 }
 
-export const Default: StoryFn<DialogProps & {showError: boolean}> = (args) => {
-    return (
-        <Flex gap={5} direction="column" wrap>
-            <DialogComponent buttonText="Show small dialog" content="Content" {...args} />
-            <DialogComponent
-                buttonText="Show large dialog"
-                content={largeTextLines.map((text, index) => (
-                    <div key={index} style={{padding: 10}}>
-                        {text}
-                    </div>
-                ))}
-                {...args}
-            />
-        </Flex>
-    );
+export const Default: Story = {
+    render: (args) => {
+        return (
+            <Flex gap={5} direction="column" wrap>
+                <DialogComponent buttonText="Normal" content="Content" {...args} />
+                <DialogComponent
+                    buttonText="Large content"
+                    content={largeTextLines.map((text, index) => (
+                        <div key={index} style={{padding: 10}}>
+                            {text}
+                        </div>
+                    ))}
+                    {...args}
+                />
+                <DialogComponent
+                    buttonText="Without Header"
+                    withHeader={false}
+                    content="Content"
+                    hasCloseButton={false}
+                    {...args}
+                />
+                <DialogComponent
+                    buttonText="Without Footer"
+                    withFooter={false}
+                    content="Content"
+                    {...args}
+                />
+                <DialogComponent
+                    buttonText="With Empty Body"
+                    withEmptyBody={true}
+                    content="Content"
+                    {...args}
+                />
+            </Flex>
+        );
+    },
 };
 
-const ShowcaseTemplate: StoryFn = () => <DialogShowcase />;
-export const Showcase = ShowcaseTemplate.bind({});
+export const DynamicHeight: Story = {
+    render: (args) => <DynamicHeightStory {...args} />,
+};
+
+export const Showcase: Story = {
+    render: () => <DialogShowcase />,
+};