fix(modal): header height & paddings (#676)

* fix(modal): header height

* fix(modal): paddings

packages/modal/src/component.screenshots.test.tsx

@@ -107,6 +107,37 @@ describe('Modal | ModalDesktop', () => {
     ['default', 'click'].map(testCase);
 });
 
+describe('Modal | ModalDesktop sizes', () => {
+    const testCase = (theme: string) => {
+        return screenshotTesting({
+            cases: generateTestCases({
+                componentName: 'Modal',
+                subComponentName: 'ModalDesktop',
+                testStory: false,
+                knobs: {
+                    open: true,
+                    header: true,
+                    size: ['s', 'm', 'l'],
+                },
+            }),
+            viewport: {
+                width: 960,
+                height: 700,
+            },
+            screenshotOpts: {
+                fullPage: true,
+            },
+            matchImageSnapshotOptions: {
+                customSnapshotIdentifier: (...args) =>
+                    `${theme}-${customSnapshotIdentifier(...args)}`,
+            },
+            theme,
+        })();
+    };
+
+    ['default', 'click'].map(testCase);
+});
+
 describe('Modal | Footer layout', () => {
     const testCase = (theme: string) => {
         return screenshotTesting({

packages/modal/src/components/content/Component.desktop.tsx

@@ -9,8 +9,22 @@ export type ContentDesktopProps = ContentProps & {
      * Размер
      */
     size?: 's' | 'm' | 'l';
+
+    /**
+     * Флаг, что модальное окно открыто на весь экран
+     */
+    fullscreen?: boolean;
 };
 
-export const ContentDesktop: FC<ContentDesktopProps> = ({ size, className, ...restProps }) => (
-    <Content className={cn(className, size && styles[size])} styles={styles} {...restProps} />
+export const ContentDesktop: FC<ContentDesktopProps> = ({
+    size,
+    className,
+    fullscreen,
+    ...restProps
+}) => (
+    <Content
+        className={cn(className, size && styles[size], fullscreen && styles.fullscreen)}
+        styles={styles}
+        {...restProps}
+    />
 );

packages/modal/src/components/content/desktop.module.css

@@ -16,6 +16,11 @@
     padding: var(--modal-m-content-paddings);
 }
 
-.l {
+.l,
+.fullscreen {
     padding: var(--modal-l-content-paddings);
+
+    &:last-child {
+        padding-bottom: var(--modal-l-content-no-footer-bottom-padding);
+    }
 }

packages/modal/src/components/footer/desktop.module.css

@@ -29,6 +29,7 @@
     padding: var(--modal-m-footer-paddings);
 }
 
-.l {
+.l,
+.fullscreen {
     padding: var(--modal-l-footer-paddings);
 }

packages/modal/src/components/header/desktop.module.css

@@ -16,7 +16,9 @@
     padding: var(--modal-m-header-paddings);
 }
 
-.l {
+.l,
+.fullscreen {
+    min-height: var(--modal-header-l-min-height);
     padding: var(--modal-l-header-paddings);
 }
 

packages/modal/src/vars.css

@@ -11,7 +11,8 @@
     --modal-s-width: 476px;
     --modal-m-width: 600px;
     --modal-l-width: 800px;
-    --modal-header-min-height: 72px;
+    --modal-header-min-height: 48px;
+    --modal-header-l-min-height: 72px;
 
     /* paddings */
     --modal-s-header-paddings: 0 0 0 var(--gap-4xl);
@@ -23,7 +24,8 @@
     --modal-s-footer-paddings: var(--gap-xl) var(--gap-4xl) var(--gap-4xl);
     --modal-m-footer-paddings: var(--gap-xl) var(--gap-4xl) var(--gap-4xl);
     --modal-l-footer-paddings: var(--gap-xl) var(--gap-6xl) var(--gap-6xl);
-    --modal-content-no-footer-bottom-padding: var(--gap-3xl);
+    --modal-content-no-footer-bottom-padding: var(--gap-4xl);
+    --modal-l-content-no-footer-bottom-padding: var(--gap-6xl);
     --modal-content-no-header-top-padding: var(--gap-2xl);
 
     /* closer */

packages/themes/src/mixins/modal/click.css

@@ -14,6 +14,7 @@
     /* sizes */
     --modal-s-width: 500px;
     --modal-header-min-height: 84px;
+    --modal-header-l-min-height: 84px;
     --modal-backdrop-visible-background: color-mod(var(--color-light-graphic-primary) alpha(50%));
     --modal-vertical-padding: var(--gap-4xl);
     --modal-footer-default-gap: var(--gap-xl);