From 48cf4a87cf2d2321c13b539dfe0534cce03b081a Mon Sep 17 00:00:00 2001
From: Andrey Medvedev <andr.medv.spb@gmail.com>
Date: Mon, 18 Dec 2023 11:37:56 +0300
Subject: [PATCH] (ModalCardBase): Remove cascade offset using Spacing
 component (#6230)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Убираем, по возможности, отступы заданные с помощью каскада.

Для случая с `UserStack` и `FormField` стараемся отобразить это в migration guide, упирая на то, что следует использовать `Spacing` для того, чтобы соответствовать дизайн-системе.

Стараемся использовать `Spacing` во всех примерах где используется `ModalCardBase`.
---
 .../components/FormField/FormField.module.css |   9 --
 .../ModalCard/ModalCard.e2e-playground.tsx    |  81 ++++++-----
 .../ModalCardBase/ModalCardBase.module.css    |  14 --
 .../ModalCardBase/ModalCardBase.tsx           |  19 +--
 .../src/components/ModalCardBase/Readme.md    |  83 ++++++++++--
 .../vkui/src/components/ModalRoot/Readme.md   | 128 ++++++++++--------
 .../UsersStack/UsersStack.module.css          |   8 --
 .../src/components/UsersStack/UsersStack.tsx  |   7 +-
 styleguide/pages/migration_v6.md              |  91 +++++++++++++
 9 files changed, 289 insertions(+), 151 deletions(-)

diff --git a/packages/vkui/src/components/FormField/FormField.module.css b/packages/vkui/src/components/FormField/FormField.module.css
index 00291ac2d0..e779ec2b95 100644
--- a/packages/vkui/src/components/FormField/FormField.module.css
+++ b/packages/vkui/src/components/FormField/FormField.module.css
@@ -122,15 +122,6 @@
   z-index: var(--vkui_internal--z_index_form_field_border_hover);
 }
 
-/**
- * CMP:
- * ModalCardBase
- */
-:global(.vkuiInternalModalCardBase__header) + .FormField,
-:global(.vkuiInternalModalCardBase__subheader) + .FormField {
-  margin-block-start: 16px;
-}
-
 /**
  * CMP:
  * NativeSelect
diff --git a/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx b/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
index 63da3743fe..50a40cff19 100644
--- a/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
+++ b/packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx
@@ -10,6 +10,7 @@ import { Button } from '../Button/Button';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
 import { Image } from '../Image/Image';
 import { ModalRoot } from '../ModalRoot/ModalRootAdaptive';
+import { Spacing } from '../Spacing/Spacing';
 import { Textarea } from '../Textarea/Textarea';
 import { UsersStack } from '../UsersStack/UsersStack';
 import { ModalCard, type ModalCardProps } from './ModalCard';
@@ -31,9 +32,12 @@ export const ModalCardPlayground = (props: ComponentPlaygroundProps) => {
           header: ['Отправляйте деньги друзьям, используя банковскую карту'],
           subheader: ['Номер карты получателя не нужен — он сам решит, куда зачислить средства.'],
           actions: [
-            <Button size="l" mode="primary" stretched key="button">
-              Попробовать
-            </Button>,
+            <React.Fragment key="actions">
+              <Spacing size={16} />
+              <Button size="l" mode="primary" stretched>
+                Попробовать
+              </Button>
+            </React.Fragment>,
           ],
         },
         {
@@ -44,26 +48,26 @@ export const ModalCardPlayground = (props: ComponentPlaygroundProps) => {
             'Игра появится под списком разделов на экране меню и будет всегда под рукой.',
           ],
           actions: [
-            <ButtonGroup mode="vertical" gap="m" stretched key="buttons">
-              <Button size="l" mode="primary" stretched>
-                Присоединиться
-              </Button>
-              <Button size="l" mode="secondary" stretched>
-                Скопировать приглашение
-              </Button>
-            </ButtonGroup>,
+            <React.Fragment key="actions">
+              <Spacing size={8} />
+              <ButtonGroup mode="vertical" gap="m" stretched>
+                <Button size="l" mode="primary" stretched>
+                  Присоединиться
+                </Button>
+                <Button size="l" mode="secondary" stretched>
+                  Скопировать приглашение
+                </Button>
+              </ButtonGroup>
+            </React.Fragment>,
           ],
           children: [
-            <UsersStack
-              photos={['', '', '', '']}
-              size="l"
-              visibleCount={3}
-              key="usersstack"
-              direction="column"
-            >
-              Алексей, Илья, Михаил
-              <br />и ещё 3 человека
-            </UsersStack>,
+            <React.Fragment key="userstack">
+              <Spacing size={20} />
+              <UsersStack photos={['', '', '', '']} size="l" visibleCount={3} direction="column">
+                Алексей, Илья, Михаил
+                <br />и ещё 3 человека
+              </UsersStack>
+            </React.Fragment>,
           ],
         },
         {
@@ -74,7 +78,12 @@ export const ModalCardPlayground = (props: ComponentPlaygroundProps) => {
               Сохранить
             </Button>,
           ],
-          children: [<Textarea key="textarea" defaultValue="В Грузии" />],
+          children: [
+            <React.Fragment key="textarea">
+              <Spacing size={16} />
+              <Textarea defaultValue="В Грузии" />
+            </React.Fragment>,
+          ],
         },
         {
           nav: ['4'],
@@ -83,23 +92,29 @@ export const ModalCardPlayground = (props: ComponentPlaygroundProps) => {
             'Гиппопотомомонстросесквиппедалиофобия — боязнь длинных слов, таких как метоксихлордиэтиламинометилбутиламиноакридин',
           ],
           actions: [
-            <ButtonGroup mode="horizontal" gap="s" stretched key="buttons">
-              <Button size="l" mode="primary" stretched>
-                Гиппопотомомонстросесквиппедалиофобия
-              </Button>
-              <Button size="l" mode="primary" stretched>
-                Метоксихлордиэтиламинометилбутиламиноакридин
-              </Button>
-            </ButtonGroup>,
+            <React.Fragment key="actions">
+              <Spacing size={16} />
+              <ButtonGroup mode="horizontal" gap="s" stretched>
+                <Button size="l" mode="primary" stretched>
+                  Гиппопотомомонстросесквиппедалиофобия
+                </Button>
+                <Button size="l" mode="primary" stretched>
+                  Метоксихлордиэтиламинометилбутиламиноакридин
+                </Button>
+              </ButtonGroup>
+            </React.Fragment>,
           ],
         },
         {
           nav: ['4'],
           header: ['Расскажите о себе'],
           actions: [
-            <Button size="l" mode="primary" stretched key="button">
-              Сохранить
-            </Button>,
+            <React.Fragment key="actions">
+              <Spacing size={16} />
+              <Button size="l" mode="primary" stretched>
+                Сохранить
+              </Button>
+            </React.Fragment>,
           ],
           dismissButtonMode: ['inside', 'outside'],
         },
diff --git a/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css b/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css
index c222aa12e6..049c3eee99 100644
--- a/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css
+++ b/packages/vkui/src/components/ModalCardBase/ModalCardBase.module.css
@@ -46,10 +46,6 @@
   color: var(--vkui--color_text_subhead);
 }
 
-.ModalCardBase__header + .ModalCardBase__subheader {
-  margin-block-start: 8px;
-}
-
 .ModalCardBase__icon {
   margin-block: 8px 16px;
   margin-inline: auto;
@@ -57,19 +53,9 @@
 }
 
 .ModalCardBase__actions {
-  display: flex;
   margin-block-start: 16px;
 }
 
-:global(.vkuiInternalUsersStack) + .ModalCardBase__actions {
-  margin-block-start: 24px;
-}
-
-.ModalCardBase__header + .ModalCardBase__actions,
-.ModalCardBase__subheader + .ModalCardBase__actions {
-  margin-block-start: 32px;
-}
-
 .ModalCardBase__dismiss {
   position: absolute;
   inset-block-start: 0;
diff --git a/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx b/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
index e678b1993f..0e3189dd3d 100644
--- a/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
+++ b/packages/vkui/src/components/ModalCardBase/ModalCardBase.tsx
@@ -6,6 +6,7 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';
 import { RootComponent } from '../RootComponent/RootComponent';
+import { Spacing } from '../Spacing/Spacing';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { Title } from '../Typography/Title/Title';
 import { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';
@@ -97,6 +98,8 @@ export const ModalCardBase = ({
   const withSafeZone =
     !icon && (dismissButtonMode === 'inside' || (platform === 'ios' && !isDesktop));
 
+  const hasHeader = hasReactNode(header);
+  const hasSubheader = hasReactNode(subheader);
   return (
     <RootComponent
       {...restProps}
@@ -122,24 +125,16 @@ export const ModalCardBase = ({
           <Title
             level="2"
             weight="2"
-            className={classNames(
-              styles['ModalCardBase__header'],
-              'vkuiInternalModalCardBase__header',
-            )}
+            className={styles['ModalCardBase__header']}
             Component={headerComponent}
           >
             {header}
           </Title>
         )}
-        {hasReactNode(subheader) && (
+        {hasHeader && hasSubheader && <Spacing size={8} />}
+        {hasSubheader && (
           <AdaptivityContext.Provider value={{ sizeY: 'regular' }}>
-            <Subhead
-              className={classNames(
-                styles['ModalCardBase__subheader'],
-                'vkuiInternalModalCardBase__subheader',
-              )}
-              Component={subheaderComponent}
-            >
+            <Subhead className={styles['ModalCardBase__subheader']} Component={subheaderComponent}>
               {subheader}
             </Subhead>
           </AdaptivityContext.Provider>
diff --git a/packages/vkui/src/components/ModalCardBase/Readme.md b/packages/vkui/src/components/ModalCardBase/Readme.md
index 7d3bd44a84..71317b0d3e 100644
--- a/packages/vkui/src/components/ModalCardBase/Readme.md
+++ b/packages/vkui/src/components/ModalCardBase/Readme.md
@@ -9,14 +9,18 @@
       header="Отправляйте деньги друзьям, используя банковскую карту"
       subheader="Номер карты получателя не нужен — он сам решит, куда зачислить средства."
       actions={
-        <Button size="l" mode="primary" stretched>
-          Попробовать
-        </Button>
+        <React.Fragment>
+          <Spacing size={16} />
+          <Button size="l" mode="primary" stretched>
+            Попробовать
+          </Button>
+        </React.Fragment>
       }
       icon={<Icon56MoneyTransferOutline />}
     />
   </AdaptivityProvider>
-  <Text style={{ marginBottom: 10 }}>Мобильная версия</Text>
+  <Text>Мобильная версия</Text>
+  <Spacing size={10} />
   <AdaptivityProvider viewWidth={ViewWidth.MOBILE}>
     <ModalCardBase
       style={{ width: 320 }}
@@ -24,17 +28,49 @@
       header="Добавить игру «Загадки детства» в меню?"
       subheader="Игра появится под списком разделов на экране меню и будет всегда под рукой."
       actions={
-        <ButtonGroup mode="horizontal" gap="s" stretched>
-          <Button size="l" mode="primary" stretched>
-            Да
-          </Button>
-          <Button size="l" mode="secondary" stretched>
-            Позже
-          </Button>
-        </ButtonGroup>
+        <React.Fragment>
+          <Spacing size={16} />
+          <ButtonGroup mode="horizontal" gap="s" stretched>
+            <Button size="l" mode="primary" stretched>
+              Да
+            </Button>
+            <Button size="l" mode="secondary" stretched>
+              Позже
+            </Button>
+          </ButtonGroup>
+        </React.Fragment>
       }
     />
   </AdaptivityProvider>
+  <Spacing size={30} />
+  <Text>С UserStack в качестве children (имеет особенный отступ c actions)</Text>
+  <Spacing size={10} />
+  <AdaptivityProvider viewWidth={ViewWidth.MOBILE}>
+    <ModalCardBase
+      style={{ width: 320 }}
+      icon={<Image borderRadius="l" src={getAvatarUrl('app_zagadki', 200)} size={72} />}
+      header="Добавить игру «Загадки детства» в меню?"
+      subheader="Игра появится под списком разделов на экране меню и будет всегда под рукой."
+      actions={
+        <React.Fragment>
+          <Spacing size={8} />
+          <ButtonGroup mode="horizontal" gap="s" stretched>
+            <Button size="l" mode="primary" stretched>
+              Да
+            </Button>
+            <Button size="l" mode="secondary" stretched>
+              Позже
+            </Button>
+          </ButtonGroup>
+        </React.Fragment>
+      }
+    >
+      <Spacing size={20} />
+      <UsersStack photos={[getAvatarUrl('user_lihachyov')]}>
+        Понравилось Муртолу Левзачеву
+      </UsersStack>
+    </ModalCardBase>
+  </AdaptivityProvider>
 </div>
 ```
 
@@ -44,6 +80,29 @@
 Согласно нашим дизайн-гайдам, `dismissButtonMode=outside` отображается только для `compact`-режима (десктопная и планшетные версии).
 Для `iOS` всегда будет применяться `dismissButtonMode=inside` в `regular`-режиме (мобильная версия).
 
+## Отступы между контентом и кнопками действий (`actions`)
+
+По умолчанию верхний отступ от кнопок действий `actions` равняется `16px`. Согласно дизайн-системе отступ может быть больше в зависимости от того какие данные отображаются внутри `ModalCardBase`.
+Если необходимо увеличить отступ, то передавайте в `actions` компонент [Spacing](#/Spacing).
+
+```jsx static
+<ModalCardBase
+  dismissButtonMode="inside"
+  dismissLabel="Закрыть"
+  style={{ width: 450, marginBottom: 20 }}
+  header="Десктопная и планшетная версии с крестиком внутри"
+  subheader="Сверху будет безопасный отступ до иконки"
+  actions={
+    <React.Fragment>
+      <Spacing size={16} />
+      <Button size="l" mode="primary" stretched>
+        Некая кнопка
+      </Button>
+    </React.Fragment>
+  }
+/>
+```
+
 ## Цифровая доступность (a11y)
 
 Чтобы кнопка для закрытия была доступной для ассистивных технологий, мы передаем в нее скрытый визуально текст, который сможет прочитать скринридер. Чтобы заменить текст, передайте его в `dismissLabel`.
diff --git a/packages/vkui/src/components/ModalRoot/Readme.md b/packages/vkui/src/components/ModalRoot/Readme.md
index 7d08642af6..32a264014e 100644
--- a/packages/vkui/src/components/ModalRoot/Readme.md
+++ b/packages/vkui/src/components/ModalRoot/Readme.md
@@ -379,16 +379,19 @@ const App = () => {
         header="Отправляйте деньги друзьям, используя банковскую карту"
         subheader="Номер карты получателя не нужен — он сам решит, куда зачислить средства."
         actions={
-          <Button
-            size="l"
-            mode="primary"
-            stretched
-            onClick={() => changeActiveModal(MODAL_CARD_APP_TO_MENU)}
-          >
-            Попробовать
-          </Button>
+          <React.Fragment>
+            <Spacing size={16} />
+            <Button
+              size="l"
+              mode="primary"
+              stretched
+              onClick={() => changeActiveModal(MODAL_CARD_APP_TO_MENU)}
+            >
+              Попробовать
+            </Button>
+          </React.Fragment>
         }
-      ></ModalCard>
+      />
 
       <ModalCard
         id={MODAL_CARD_APP_TO_MENU}
@@ -397,14 +400,17 @@ const App = () => {
         header="Добавить игру «Загадки детства» в меню?"
         subheader="Игра появится под списком разделов на экране меню и будет всегда под рукой."
         actions={
-          <Button
-            size="l"
-            mode="primary"
-            stretched
-            onClick={() => changeActiveModal(MODAL_CARD_ABOUT)}
-          >
-            Добавить в меню
-          </Button>
+          <React.Fragment>
+            <Spacing size={16} />
+            <Button
+              size="l"
+              mode="primary"
+              stretched
+              onClick={() => changeActiveModal(MODAL_CARD_ABOUT)}
+            >
+              Добавить в меню
+            </Button>
+          </React.Fragment>
         }
       />
 
@@ -423,6 +429,7 @@ const App = () => {
           </Button>
         }
       >
+        <Spacing size={16} />
         <Textarea defaultValue="В Грузии" />
       </ModalCard>
 
@@ -432,26 +439,29 @@ const App = () => {
         icon={<Icon56NotificationOutline />}
         header="Приложение запрашивает разрешение на отправку Вам уведомлений"
         actions={
-          <ButtonGroup size="s" stretched>
-            <Button
-              key="deny"
-              size="l"
-              mode="secondary"
-              stretched
-              onClick={() => changeActiveModal(MODAL_CARD_CHAT_INVITE)}
-            >
-              Запретить
-            </Button>
-            <Button
-              key="allow"
-              size="l"
-              mode="primary"
-              stretched
-              onClick={() => changeActiveModal(MODAL_CARD_CHAT_INVITE)}
-            >
-              Разрешить
-            </Button>
-          </ButtonGroup>
+          <React.Fragment>
+            <Spacing size={16} />
+            <ButtonGroup size="s" stretched>
+              <Button
+                key="deny"
+                size="l"
+                mode="secondary"
+                stretched
+                onClick={() => changeActiveModal(MODAL_CARD_CHAT_INVITE)}
+              >
+                Запретить
+              </Button>
+              <Button
+                key="allow"
+                size="l"
+                mode="primary"
+                stretched
+                onClick={() => changeActiveModal(MODAL_CARD_CHAT_INVITE)}
+              >
+                Разрешить
+              </Button>
+            </ButtonGroup>
+          </React.Fragment>
         }
       />
 
@@ -462,28 +472,32 @@ const App = () => {
         header="Баскетбол на выходных"
         subheader="Приглашение в беседу"
         actions={
-          <ButtonGroup size="l" mode="vertical" stretched>
-            <Button
-              key="join"
-              size="l"
-              mode="primary"
-              stretched
-              onClick={() => changeActiveModal(null)}
-            >
-              Присоединиться
-            </Button>
-            <Button
-              key="copy"
-              size="l"
-              mode="secondary"
-              stretched
-              onClick={() => changeActiveModal(null)}
-            >
-              Скопировать приглашение
-            </Button>
-          </ButtonGroup>
+          <React.Fragment>
+            <Spacing size={8} />
+            <ButtonGroup size="l" mode="vertical" stretched>
+              <Button
+                key="join"
+                size="l"
+                mode="primary"
+                stretched
+                onClick={() => changeActiveModal(null)}
+              >
+                Присоединиться
+              </Button>
+              <Button
+                key="copy"
+                size="l"
+                mode="secondary"
+                stretched
+                onClick={() => changeActiveModal(null)}
+              >
+                Скопировать приглашение
+              </Button>
+            </ButtonGroup>
+          </React.Fragment>
         }
       >
+        <Spacing size={20} />
         <UsersStack
           photos={[
             getAvatarUrl('user_mm'),
diff --git a/packages/vkui/src/components/UsersStack/UsersStack.module.css b/packages/vkui/src/components/UsersStack/UsersStack.module.css
index d0bb0fe122..4825d8005d 100644
--- a/packages/vkui/src/components/UsersStack/UsersStack.module.css
+++ b/packages/vkui/src/components/UsersStack/UsersStack.module.css
@@ -66,11 +66,3 @@
 .UsersStack--direction-row-reverse .UsersStack__text {
   margin-inline-end: 8px;
 }
-
-/**
- * CMP:
- * ModalCardBase
- */
-:global(.vkuiInternalModalCardBase) .UsersStack {
-  margin-block-start: 20px;
-}
diff --git a/packages/vkui/src/components/UsersStack/UsersStack.tsx b/packages/vkui/src/components/UsersStack/UsersStack.tsx
index 9bb2fc4f4b..5ffd0ef430 100644
--- a/packages/vkui/src/components/UsersStack/UsersStack.tsx
+++ b/packages/vkui/src/components/UsersStack/UsersStack.tsx
@@ -175,12 +175,7 @@ export const UsersStack = ({
   return (
     <RootComponent
       {...restProps}
-      baseClassName={classNames(
-        'vkuiInternalUsersStack',
-        styles['UsersStack'],
-        stylesSize[size],
-        stylesDirection[direction],
-      )}
+      baseClassName={classNames(styles['UsersStack'], stylesSize[size], stylesDirection[direction])}
     >
       {(photosElements.length > 0 || othersElement) && (
         <div className={styles['UsersStack__photos']} aria-hidden>
diff --git a/styleguide/pages/migration_v6.md b/styleguide/pages/migration_v6.md
index 156fc633a4..21ce20fae9 100644
--- a/styleguide/pages/migration_v6.md
+++ b/styleguide/pages/migration_v6.md
@@ -571,6 +571,97 @@ npx @vkontakte/vkui-codemods --help
 />
 ```
 
+<br />
+
+Отступ перед кнопками действий (`actions`) больше автоматически не меняется в зависимости от контента.
+Отступ теперь всегда равен `16px`.
+Также автоматически больше не проставляются отступы, если внутрь переданы следующие компоненты: [UserStack](#/UserStack), [FormField](#/FormField).
+Согласно дизайн-системе отступ может быть и больше в зависимости от свойств и контента компонента.
+Для того, чтобы увеличить отступ используйте компонент [Spacing](#/Spacing).
+Ниже приведёны ситуации в которых точно нужно использовать [Spacing](#/Spacing), чтобы продолжать следовать дизайн-системе.
+
+- `ModalCard` или `ModalCardBase` содержит `actions` и `header` или `subheader`, но не содержит `children`. Отступ в сумме с тем что идёт по умолчанию должен быть `32px`.
+
+```diff
+    <ModalCard header="Добавить игру «Загадки детства» в меню?"
+      actions={
+-       <ButtonGroup mode="horizontal" gap="s" stretched>
+-         <Button size="l" mode="primary" stretched>
+-           Да
+-         </Button>
+-         <Button size="l" mode="secondary" stretched>
+-           Позже
+-         </Button>
+-       </ButtonGroup>
++       <React.Fragment>
++         <Spacing size={16} />
++         <ButtonGroup mode="horizontal" gap="s" stretched>
++           <Button size="l" mode="primary" stretched>
++             Да
++           </Button>
++           <Button size="l" mode="secondary" stretched>
++             Позже
++           </Button>
++         </ButtonGroup>
++       </React.Fragment>
+    />
+```
+
+- `ModalCard` или `ModalCardBase` содержит `actions`, а внутрь `children` передан [UsersStack](#/UsersStack). Перед `UserStack` должен быть отступ в `20px`, а между `UserStack` и `actions` отступ должен быть в сумме `24px` (включая отступ по умолчанию `16px`).
+
+```diff
+    <ModalCard header="Добавить игру «Загадки детства» в меню?"
+      actions={
+-       <ButtonGroup mode="horizontal" gap="s" stretched>
+-         <Button size="l" mode="primary" stretched>
+-           Да
+-         </Button>
+-         <Button size="l" mode="secondary" stretched>
+-           Позже
+-         </Button>
+-       </ButtonGroup>
++       <React.Fragment>
++         <Spacing size={8} />
++         <ButtonGroup mode="horizontal" gap="s" stretched>
++           <Button size="l" mode="primary" stretched>
++             Да
++           </Button>
++           <Button size="l" mode="secondary" stretched>
++             Позже
++           </Button>
++         </ButtonGroup>
++       </React.Fragment>
+      }
+    >
++     <Spacing size={20} />
+      <UsersStack photos={[getAvatarUrl('user_lihachyov')]}>
+        Понравилось Муртолу Левзачеву
+      </UsersStack>
+    </ModalCard>
+```
+
+- `ModalCard` или `ModalCardBase` содержит `header` или `subheader`, а внутрь `children` передан [FormField](#/FormField). Отступ между `header` или `subheader` и `FormField` должен быть `16px`.
+
+```diff
+    <ModalCard header="Добавить игру «Загадки детства» в меню?"
+      actions={
+        <ButtonGroup mode="horizontal" gap="s" stretched>
+          <Button size="l" mode="primary" stretched>
+            Да
+          </Button>
+          <Button size="l" mode="secondary" stretched>
+            Позже
+          </Button>
+        </ButtonGroup>
+      }
+    >
++    <Spacing size={16} />
+      <FormField>
+        <CustomInput />
+      </FormField>
+    </ModalCar>
+```
+
 <br/>
 
 ### [`ModalPageHeader`](#/ModalPageHeader)