From a4ed0af2a3f42271e17e483dbac063ee8002f304 Mon Sep 17 00:00:00 2001
From: Victoria Zhizhonkova <indarklight@gmail.com>
Date: Wed, 1 Nov 2023 17:16:43 +0700
Subject: [PATCH] feat(ModalCard): add dismissButtonMode

---
 .../ModalCard/ModalCard.e2e-playground.tsx    | 154 ++++++++++--------
 .../src/components/ModalCard/ModalCard.tsx    |   4 +
 ...rd-mobile-android-chromium-dark-1-snap.png |   4 +-
 ...d-mobile-android-chromium-light-1-snap.png |   4 +-
 ...odalcard-mobile-ios-webkit-dark-1-snap.png |   4 +-
 ...dalcard-mobile-ios-webkit-light-1-snap.png |   4 +-
 ...rd-tablet-android-chromium-dark-1-snap.png |   4 +-
 ...d-tablet-android-chromium-light-1-snap.png |   4 +-
 ...odalcard-tablet-ios-webkit-dark-1-snap.png |   4 +-
 ...dalcard-tablet-ios-webkit-light-1-snap.png |   4 +-
 .../modalcard-vkcom-chromium-dark-1-snap.png  |   4 +-
 .../modalcard-vkcom-chromium-light-1-snap.png |   4 +-
 .../modalcard-vkcom-firefox-dark-1-snap.png   |   4 +-
 .../modalcard-vkcom-firefox-light-1-snap.png  |   4 +-
 .../modalcard-vkcom-webkit-dark-1-snap.png    |   4 +-
 .../modalcard-vkcom-webkit-light-1-snap.png   |   4 +-
 .../ModalCardBase/ModalCardBase.module.css    |  50 +++---
 .../ModalCardBase/ModalCardBase.tsx           |  33 ++--
 .../ModalCardBaseCloseButton.tsx              |  46 ++++++
 19 files changed, 207 insertions(+), 136 deletions(-)
 create mode 100644 packages/vkui/src/components/ModalCardBase/ModalCardBaseCloseButton.tsx

diff --git a/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx b/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
index 2bf4da9ee7a..79b989eb254 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
@@ -20,78 +20,92 @@ const AppWrapper = ({ children, ...restProps }: AppWrapperProps) => (
   </AppDefaultWrapper>
 );
 
-const propSets = [
-  {
-    nav: ['1'],
-    icon: [<Icon56MoneyTransferOutline key="icon" />],
-    header: ['Отправляйте деньги друзьям, используя банковскую карту'],
-    subheader: ['Номер карты получателя не нужен — он сам решит, куда зачислить средства.'],
-    actions: [
-      <Button size="l" mode="primary" stretched key="button">
-        Попробовать
-      </Button>,
-    ],
-  },
-  {
-    nav: ['2'],
-    icon: [<Image key="image" size={72} borderRadius="l" />],
-    header: ['Добавить игру «Загадки детства» в меню?'],
-    subheader: ['Игра появится под списком разделов на экране меню и будет всегда под рукой.'],
-    actions: [
-      <ButtonGroup mode="vertical" gap="m" stretched key="buttons">
-        <Button size="l" mode="primary" stretched>
-          Присоединиться
-        </Button>
-        <Button size="l" mode="secondary" stretched>
-          Скопировать приглашение
-        </Button>
-      </ButtonGroup>,
-    ],
-    children: [
-      <UsersStack
-        photos={['', '', '', '']}
-        size="l"
-        visibleCount={3}
-        key="usersstack"
-        layout="vertical"
-      >
-        Алексей, Илья, Михаил
-        <br />и ещё 3 человека
-      </UsersStack>,
-    ],
-  },
-  {
-    nav: ['3'],
-    header: ['Расскажите о себе'],
-    actions: [
-      <Button size="l" mode="primary" stretched key="button">
-        Сохранить
-      </Button>,
-    ],
-    children: [<Textarea key="textarea" defaultValue="В Грузии" />],
-  },
-  {
-    nav: ['4'],
-    header: ['Гиппопотомомонстросесквиппедалиофобия'],
-    subheader: [
-      'Гиппопотомомонстросесквиппедалиофобия — боязнь длинных слов, таких как метоксихлордиэтиламинометилбутиламиноакридин',
-    ],
-    actions: [
-      <ButtonGroup mode="horizontal" gap="s" stretched key="buttons">
-        <Button size="l" mode="primary" stretched>
-          Гиппопотомомонстросесквиппедалиофобия
-        </Button>
-        <Button size="l" mode="primary" stretched>
-          Метоксихлордиэтиламинометилбутиламиноакридин
-        </Button>
-      </ButtonGroup>,
-    ],
-  },
-];
-
 export const ModalCardPlayground = (props: ComponentPlaygroundProps) => {
   return (
-    <ComponentPlayground {...props} propSets={propSets} AppWrapper={AppWrapper}>
+    <ComponentPlayground
+      {...props}
+      propSets={[
+        {
+          nav: ['1'],
+          icon: [<Icon56MoneyTransferOutline key="icon" />],
+          header: ['Отправляйте деньги друзьям, используя банковскую карту'],
+          subheader: ['Номер карты получателя не нужен — он сам решит, куда зачислить средства.'],
+          actions: [
+            <Button size="l" mode="primary" stretched key="button">
+              Попробовать
+            </Button>,
+          ],
+        },
+        {
+          nav: ['2'],
+          icon: [<Image key="image" size={72} borderRadius="l" />],
+          header: ['Добавить игру «Загадки детства» в меню?'],
+          subheader: [
+            'Игра появится под списком разделов на экране меню и будет всегда под рукой.',
+          ],
+          actions: [
+            <ButtonGroup mode="vertical" gap="m" stretched key="buttons">
+              <Button size="l" mode="primary" stretched>
+                Присоединиться
+              </Button>
+              <Button size="l" mode="secondary" stretched>
+                Скопировать приглашение
+              </Button>
+            </ButtonGroup>,
+          ],
+          children: [
+            <UsersStack
+              photos={['', '', '', '']}
+              size="l"
+              visibleCount={3}
+              key="usersstack"
+              layout="vertical"
+            >
+              Алексей, Илья, Михаил
+              <br />и ещё 3 человека
+            </UsersStack>,
+          ],
+        },
+        {
+          nav: ['3'],
+          header: ['Расскажите о себе'],
+          actions: [
+            <Button size="l" mode="primary" stretched key="button">
+              Сохранить
+            </Button>,
+          ],
+          children: [<Textarea key="textarea" defaultValue="В Грузии" />],
+        },
+        {
+          nav: ['4'],
+          header: ['Гиппопотомомонстросесквиппедалиофобия'],
+          subheader: [
+            'Гиппопотомомонстросесквиппедалиофобия — боязнь длинных слов, таких как метоксихлордиэтиламинометилбутиламиноакридин',
+          ],
+          actions: [
+            <ButtonGroup mode="horizontal" gap="s" stretched key="buttons">
+              <Button size="l" mode="primary" stretched>
+                Гиппопотомомонстросесквиппедалиофобия
+              </Button>
+              <Button size="l" mode="primary" stretched>
+                Метоксихлордиэтиламинометилбутиламиноакридин
+              </Button>
+            </ButtonGroup>,
+          ],
+        },
+        {
+          nav: ['4'],
+          header: ['Расскажите о себе'],
+          actions: [
+            <Button size="l" mode="primary" stretched key="button">
+              Сохранить
+            </Button>,
+          ],
+          dismissButtonMode: ['inside', 'outside'],
+        },
+      ]}
+      AppWrapper={AppWrapper}
+    >
       {(props: ModalCardProps) => (
         <div style={{ height: 500, transform: 'translateZ(0)' }}>
           <ModalRoot activeModal={props.nav}>
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.tsx b/packages/vkui/src/components/ModalCard/ModalCard.tsx
index ec385b48cc2..1099926d927 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCard.tsx
@@ -34,6 +34,8 @@ export const ModalCard = ({
   id,
   size,
   modalDismissButtonTestId,
+  dismissButtonMode,
+  dismissLabel,
   ...restProps
 }: ModalCardProps) => {
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
@@ -64,6 +66,8 @@ export const ModalCard = ({
         onClose={onClose || modalContext.onClose}
         size={size}
         modalDismissButtonTestId={modalDismissButtonTestId}
+        dismissButtonMode={dismissButtonMode}
+        dismissLabel={dismissLabel}
       >
         {children}
       </ModalCardBase>
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-dark-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-dark-1-snap.png
index 0cb8958f2b1..4ca889891c4 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0db6b0e70063e0f60f6d832b9684d039c789f1891c7cbf036796d13865775631
-size 112054
+oid sha256:40a6b7405a0a4d51e62cb5093048237cf53eccc85ab177df0674a8220120f57d
+size 141836
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-light-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-light-1-snap.png
index f306b3b2658..67d48d70123 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:558540ec34007ce4cdb67f494d3ad6ecf5c45e3aba348fbbb491327e56dad766
-size 113021
+oid sha256:87ee935f4a7ee369cefe36c63acd6eb6d3fd57837c561f7dee67c7dc56cc1365
+size 143381
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-dark-1-snap.png
index 9a1a019ff01..023e40c31ae 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4a3448930f539de25e4786228641a2b181e0c5b289bb4e4cb0e04b638ce4b118
-size 106112
+oid sha256:3c4771d45bbb3d0215adb104dfdeeaef52a30dfa4f1c6e694ce81ec3aac4cef1
+size 133797
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-light-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-light-1-snap.png
index a4246b2e676..00a523ab986 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-mobile-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d8a8bd7553986c79406b2a04eeba8cb81023f6972b7b218ab88c0b4baace869c
-size 108330
+oid sha256:13d22028fb9ad8656f4a0b317a1c6d4242663e6b652c490254c71fac8b27ba4a
+size 137059
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-android-chromium-dark-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-android-chromium-dark-1-snap.png
index 19c19ba739b..345488a52e1 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-android-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-android-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3929e28ff59c0c141e1aaa01fb1b568d2c0887f9addb29c4e7a27ea62590463d
-size 126948
+oid sha256:1f4df505fa6d55a059198c4b2b801c72fbde6ad0b2b9d1f2114e526899fe3689
+size 157192
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-android-chromium-light-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-android-chromium-light-1-snap.png
index 59e641fa0c3..285bd4efc77 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-android-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-android-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:95603395f7947c57d37a5b8d644752a6ccf7409052913bd62090383407df558e
-size 131302
+oid sha256:f5e2f140b3911cee00e4cfc9eaf1fef4354ab1a84bcbb9d5f4a0222123bfd0a9
+size 163223
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-ios-webkit-dark-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-ios-webkit-dark-1-snap.png
index a9d63575955..7e4a4b99550 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-ios-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-ios-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cc9ce421e72d38c5527640482a038d61c4502666ee8bb9d70f336f4b0d401b23
-size 116488
+oid sha256:b3e753b415b35492c0588cb605bd2f2016c6f3e84e1b03f63fcb8b45af85cf99
+size 144413
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-ios-webkit-light-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-ios-webkit-light-1-snap.png
index 849179bd849..b62cf551f6b 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-ios-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-tablet-ios-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:800bc5d4d5b070fb807ed61f051d80f0acb09b76477e47100e96b997b8435e19
-size 121509
+oid sha256:86574a5f1a8455ee06eec16238b241b611644da3a38c5eb778c818862fab96e0
+size 150855
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-chromium-dark-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-chromium-dark-1-snap.png
index 0d3fb56cb31..2ec3412bbb1 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-chromium-dark-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-chromium-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c2bdc1fdddeb51e17f99ae59597db6bde1d19e59a84bc60015ae4b5afc08e1ef
-size 125593
+oid sha256:6ef61ad125c1071fa2a04833fc4341b81306f40221d4c0bc0239c801de4c68f4
+size 158449
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-chromium-light-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-chromium-light-1-snap.png
index 396b920a881..62408b369d7 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-chromium-light-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-chromium-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a2a154c207e1e3f31d73fa147ddc491d5e7ea241e44dbb6c28a249795551c23f
-size 131604
+oid sha256:9dcccfb50c945cbd9a943fc1b9aeb408265ea88e36a650db92f3fb419f5719f5
+size 166091
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-firefox-dark-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-firefox-dark-1-snap.png
index 176a7bbcbb0..d16fa577ce4 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-firefox-dark-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-firefox-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:705f4048e4d6acb8841a0bc5b6f40d728c8aa5fcf99734a37365b20a5bcf0161
-size 199002
+oid sha256:88276beec2f8f2bbd45677d502801d07e640992a7f75b4c2f0cb24de88c5f52c
+size 257343
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-firefox-light-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-firefox-light-1-snap.png
index 98cf89402d5..6962c589a42 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-firefox-light-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-firefox-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:eef3f1d0ef64c07da09101862434ef1b58918eca3cc6f661f5c3ca9fa2e69309
-size 210933
+oid sha256:a368f5707d8904f6eeb6069a7691f1c7123d23cdc22051718c0eb2c2dc2f5f9a
+size 272019
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-webkit-dark-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-webkit-dark-1-snap.png
index f75035514b0..79f527f25f7 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-webkit-dark-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-webkit-dark-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0b3e480492690309ec0e1cbec39cc6d82b3b65d099bf10ec6d39de219c15b36a
-size 113682
+oid sha256:aa28b393808cd0787749e23d2eddfee328a6c77e00a14993af82a78b3e973c69
+size 142805
diff --git a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-webkit-light-1-snap.png b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-webkit-light-1-snap.png
index 243d7da8df6..9d66924afb7 100644
--- a/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-webkit-light-1-snap.png
+++ b/packages/vkui/src/components/ModalCard/__image_snapshots__/modalcard-vkcom-webkit-light-1-snap.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:42728c4f40ca91a7f1a9c40ec658b4c5b73e69b8d27acf16636d15049d461848
-size 119956
+oid sha256:229b22bc15a7b84fb74b311124bceedc41b5232fe53931f939677b0b0a50636c
+size 150564
diff --git a/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css b/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css
index d84f0020b77..eebe0fa6175 100644
--- a/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css
+++ b/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css
@@ -12,6 +12,17 @@
   box-shadow: var(--vkui--elevation3);
 
   --vkui_internal--background: var(--vkui--color_background_modal);
+  --vkui_internal--dismiss_icon_height: 20px;
+  --vkui_internal--dismiss_icon_padding: 12px;
+  --vkui_internal--dismiss_icon_safe_offset: 8px;
+  --vkui_internal--dismiss_icon_desktop_offset: 4px;
+}
+
+.ModalCardBase--withSafeZone .ModalCardBase__container {
+  padding-top: calc(
+    var(--vkui_internal--dismiss_icon_height) + var(--vkui_internal--dismiss_icon_padding) +
+      var(--vkui_internal--dismiss_icon_safe_offset)
+  );
 }
 
 .ModalCardBase__container--softwareKeyboardOpened {
@@ -57,43 +68,40 @@
   margin-top: 32px;
 }
 
-/**
- * iOS
- */
-
 .ModalCardBase__dismiss {
   position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 48px;
-  height: 48px;
+  top: 0;
+  right: 0;
   color: var(--vkui--color_icon_secondary);
-  justify-content: center;
+  padding: var(--vkui_internal--dismiss_icon_padding);
 }
 
 /**
  * iOS
  */
-/*
- * TODO [>=6]: зачем этот стиль? Удалить?
-*/
-.ModalCardBase--ios .ModalCardBase__header:first-child {
-  padding-left: 36px;
-  padding-right: 36px;
-}
-
-/**
- * Android + vkcom
- */
-
 .ModalCardBase--ios .ModalCardBase__container {
   border-radius: 14px;
+
+  --vkui_internal--dismiss_icon_height: 24px;
+  --vkui_internal--dismiss_icon_padding: 10px;
 }
 
 /**
  * Desktop
  */
+.ModalCardBase--desktop .ModalCardBase__dismiss {
+  top: var(--vkui_internal--dismiss_icon_desktop_offset);
+  right: var(--vkui_internal--dismiss_icon_desktop_offset);
+}
 
 .ModalCardBase--desktop .ModalCardBase__container {
   padding: 24px;
 }
+
+.ModalCardBase--withSafeZone.ModalCardBase--desktop .ModalCardBase__container {
+  padding-top: calc(
+    var(--vkui_internal--dismiss_icon_height) + var(--vkui_internal--dismiss_icon_padding) +
+      var(--vkui_internal--dismiss_icon_safe_offset) +
+      var(--vkui_internal--dismiss_icon_desktop_offset)
+  );
+}
diff --git a/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx b/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
index 2c3dc2930d2..2e8f431763f 100644
--- a/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
+++ b/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Icon24Dismiss } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useKeyboard } from '../../hooks/useKeyboard';
@@ -8,11 +7,10 @@ import { SizeType } from '../../lib/adaptivity';
 import { Platform } from '../../lib/platform';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';
-import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
-import { PanelHeaderButton } from '../PanelHeaderButton/PanelHeaderButton';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { Title } from '../Typography/Title/Title';
+import { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';
 import styles from './ModalCardBase.module.css';
 
 export interface ModalCardBaseProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
@@ -62,6 +60,12 @@ export interface ModalCardBaseProps extends HTMLAttributesWithRootRef<HTMLDivEle
    * `data-testid` для кнопки закрытия
    */
   modalDismissButtonTestId?: string;
+  /**
+   * Расположение кнопки закрытия (внутри и вне `popout'a`)
+   * Доступно только в `compact`-режиме
+   * На `iOS` в `regular`-режиме всегда включен `inside`
+   */
+  dismissButtonMode?: 'inside' | 'outside';
 }
 
 /**
@@ -78,14 +82,13 @@ export const ModalCardBase = ({
   style,
   size: sizeProp,
   modalDismissButtonTestId,
+  dismissButtonMode = 'outside',
   ...restProps
 }: ModalCardBaseProps) => {
   const platform = usePlatform();
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
   const isSoftwareKeyboardOpened = useKeyboard().isOpened;
 
-  const canShowCloseButtonIOS = platform === Platform.IOS && !isDesktop;
-
   const size = isDesktop ? sizeProp : undefined;
 
   return (
@@ -95,6 +98,8 @@ export const ModalCardBase = ({
         'vkuiInternalModalCardBase',
         platform === Platform.IOS && styles['ModalCardBase--ios'],
         isDesktop && styles['ModalCardBase--desktop'],
+        (dismissButtonMode === 'inside' || (platform === Platform.IOS && !isDesktop)) &&
+          styles['ModalCardBase--withSafeZone'],
       )}
       style={{
         ...style,
@@ -137,18 +142,12 @@ export const ModalCardBase = ({
 
         {hasReactNode(actions) && <div className={styles['ModalCardBase__actions']}>{actions}</div>}
 
-        {isDesktop && (
-          <ModalDismissButton data-testid={modalDismissButtonTestId} onClick={onClose} />
-        )}
-        {canShowCloseButtonIOS && (
-          <PanelHeaderButton
-            aria-label={dismissLabel}
-            className={styles['ModalCardBase__dismiss']}
-            onClick={onClose}
-          >
-            <Icon24Dismiss />
-          </PanelHeaderButton>
-        )}
+        <ModalCardBaseCloseButton
+          aria-label={dismissLabel}
+          testId={modalDismissButtonTestId}
+          onClose={onClose}
+          mode={dismissButtonMode}
+        />
       </div>
     </RootComponent>
   );
diff --git a/packages/vkui/src/components/ModalCardBase/ModalCardBaseCloseButton.tsx b/packages/vkui/src/components/ModalCardBase/ModalCardBaseCloseButton.tsx
new file mode 100644
index 00000000000..05a55195fef
--- /dev/null
+++ b/packages/vkui/src/components/ModalCardBase/ModalCardBaseCloseButton.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { usePlatform } from '../../hooks/usePlatform';
+import { Platform } from '../../lib/platform';
+import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
+import { Tappable } from '../Tappable/Tappable';
+import styles from './ModalCardBase.module.css';
+
+interface ModalCardBaseCloseButtonProps {
+  onClose?: VoidFunction;
+  dismissLabel?: string;
+  testId?: string;
+  mode?: 'inside' | 'outside';
+}
+
+export function ModalCardBaseCloseButton({
+  dismissLabel,
+  testId,
+  mode,
+  onClose,
+}: ModalCardBaseCloseButtonProps) {
+  const platform = usePlatform();
+  const { isDesktop } = useAdaptivityWithJSMediaQueries();
+
+  if (isDesktop && mode === 'outside') {
+    return <ModalDismissButton aria-label={dismissLabel} data-testid={testId} onClick={onClose} />;
+  }
+
+  if (mode === 'inside' || (platform === Platform.IOS && !isDesktop)) {
+    return (
+      <Tappable
+        aria-label={dismissLabel}
+        className={styles['ModalCardBase__dismiss']}
+        onClick={onClose}
+        hoverMode="opacity"
+        activeMode="opacity"
+        data-testid={testId}
+      >
+        {platform === Platform.IOS ? <Icon24Dismiss /> : <Icon20Cancel />}
+      </Tappable>
+    );
+  }
+
+  return null;
+}