From 1dcc15e675177bfbeb4d2d8e556818da3e5c5787 Mon Sep 17 00:00:00 2001
From: Vladimir Potekhin <46284632+vladimirpotekhin@users.noreply.github.com>
Date: Tue, 28 May 2024 17:22:40 +0300
Subject: [PATCH] fix(core): `Dialog` remove paddings in page mode on mobile
 (#7563)

---
 .../core/components/dialog/dialog.style.less  | 31 +++++++++++--------
 .../tests/core/dialogs/dialogs.spec.ts        | 12 +++++++
 projects/styles/basic/keyframes.less          |  4 +--
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less
index 74826bff6e41..d53009e8bdb8 100644
--- a/projects/core/components/dialog/dialog.style.less
+++ b/projects/core/components/dialog/dialog.style.less
@@ -74,12 +74,6 @@
         }
     }
 
-    &[data-size='page'] {
-        .t-content {
-            padding: 0;
-        }
-    }
-
     &._centered {
         text-align: center;
     }
@@ -103,6 +97,13 @@
             }
         }
     }
+
+    &[data-size='page'],
+    :host-context(tui-root._mobile) &[data-size='page'] {
+        .t-content {
+            padding: 0;
+        }
+    }
 }
 
 .t-heading {
@@ -157,7 +158,6 @@
     top: 1.5rem;
     right: 1.5rem;
     display: none;
-    color: var(--tui-base-01);
 
     :host-context(.t-dialog:last-of-type) & {
         display: inline-flex;
@@ -166,6 +166,7 @@
     :host:not([data-size='fullscreen']):not([data-size='page']) & {
         animation: tuiFadeIn var(--tui-duration);
         background: rgba(104, 104, 104, 0.96);
+        color: var(--tui-base-01);
 
         &:hover {
             background: rgba(159, 159, 159, 0.86);
@@ -177,12 +178,16 @@
     }
 
     :host-context(tui-root._mobile) & {
-        position: absolute;
-        top: 0;
-        right: 0;
-        background: transparent !important;
-        color: var(--tui-text-01);
-        opacity: 0.5;
+        &[data-size] {
+            --tui-fade-end: 0.5;
+
+            position: absolute;
+            top: 0;
+            right: 0;
+            background: transparent !important;
+            color: var(--tui-text-01);
+            opacity: 0.5;
+        }
     }
 }
 
diff --git a/projects/demo-playwright/tests/core/dialogs/dialogs.spec.ts b/projects/demo-playwright/tests/core/dialogs/dialogs.spec.ts
index d3312274ceca..7953403c6aee 100644
--- a/projects/demo-playwright/tests/core/dialogs/dialogs.spec.ts
+++ b/projects/demo-playwright/tests/core/dialogs/dialogs.spec.ts
@@ -182,5 +182,17 @@ test.describe('Dialogs', () => {
 
             await expect(page).toHaveScreenshot('09-dialog.png');
         });
+
+        test('dismissible = true, fullscreen, desktop', async ({page}) => {
+            await page.setViewportSize({width: 1024, height: 900});
+            await tuiGoto(page, 'components/dialog/API?size=fullscreen&dismissible=true');
+
+            await page.locator('tui-doc-page button[data-appearance="primary"]').click();
+            await page.mouse.click(100, 100);
+
+            await expect(page.locator('tui-dialog')).toHaveCount(1);
+
+            await expect(page).toHaveScreenshot('10-dialog.png');
+        });
     });
 });
diff --git a/projects/styles/basic/keyframes.less b/projects/styles/basic/keyframes.less
index a2da10fcbd9c..08aacc1025e8 100644
--- a/projects/styles/basic/keyframes.less
+++ b/projects/styles/basic/keyframes.less
@@ -10,10 +10,10 @@
 
 @keyframes tuiFadeIn {
     from {
-        opacity: 0;
+        opacity: var(--tui-fade-start, 0);
     }
 
     to {
-        opacity: 1;
+        opacity: var(--tui-fade-end, 1);
     }
 }