feat(ModalCard): add dismissButtonMode (#6068)

* feat(ModalCard): add dismissButtonMode

* fix(ModalCard): resolve conflict + fix safe offset + add doc

* CHORE: Update screenshots

* fix(ModalCard): another spacing iteration

* chore: update screenshots

---------

Co-authored-by: GitHub Action <actions@github.com>

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

packages/vkui/src/components/ModalCard/ModalCard.tsx

@@ -36,6 +36,8 @@ export const ModalCard = ({
   size,
   modalDismissButtonTestId,
   getRootRef,
+  dismissButtonMode,
+  dismissLabel,
   ...restProps
 }: ModalCardProps) => {
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
@@ -74,6 +76,8 @@ export const ModalCard = ({
         onClose={onClose || modalContext.onClose}
         size={size}
         modalDismissButtonTestId={modalDismissButtonTestId}
+        dismissButtonMode={dismissButtonMode}
+        dismissLabel={dismissLabel}
       >
         {children}
       </ModalCardBase>

packages/vkui/src/components/ModalCard/Readme.md

@@ -1,6 +1,6 @@
 Модальные карточки.
 
-Карточка может быть закрыта смахиванием вниз, нажатием на полупрозрачную черную область, либо нажатием по иконке крестика (только на iOS). При этом вызовется свойство `onClose`.
+Карточка может быть закрыта смахиванием вниз, нажатием на полупрозрачную черную область, либо нажатием по иконке крестика ([подробнее про кнопку закрытия](#!/ModalCardBase?id=example3)). При этом вызовется свойство `onClose`.
 
 > **Важно**
 >

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: 4px;
+  --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,48 @@
   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: 12px;
+  --vkui_internal--dismiss_icon_safe_offset: 0px;
 }
 
 /**
  * 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;
+
+  --vkui_internal--dismiss_icon_safe_offset: 0px;
+}
+
+.ModalCardBase--desktop.ModalCardBase--ios .ModalCardBase__container {
+  --vkui_internal--dismiss_icon_padding: 10px;
+  --vkui_internal--dismiss_icon_safe_offset: 6px;
+}
+
+.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)
+  );
 }