feat(MiniModal): add new control

[lossir]

Проблема

В Гайдах есть специфичный вид модального окна - Мини-модалка.
Такого внешнего вида можно добиться с помощью текущих пропов компонента Modal и небольших доработок со стороны пользователя.
Но для удобство было решено сделать отдельный компонент.

Решение

После ревью постарался снизить специфичность АПИ.

Решил добавить прямые обёртки над вспомогательными компонентами Модалки, такими как <Modal.Header>, <Modal.Body> и <Modal.Footer>.
Обёртки принимают все пропы базовых компонентов + добавляют свои, типа icon и direction.
Уникальным вышел только компонент <MiniModal.Indent>

<MiniModal>
  <MiniModal.Header icon={<NotificationBellAlarmIcon64Regular/>}>
    Разрешить уведомления?
  </MiniModal.Header>
  <MiniModal.Body>
    Это простое, но достаточное важное уведомление, чтобы его показать в МиниМодалке
  </MiniModal.Body>
  <MiniModal.Footer direction="column">
    <Button use="primary" size="medium">Разрешить все</Button>
    <Button size="medium">Разрешить только основные</Button>
    <MiniModal.Indent/>
    <Button size="medium">Запретить</Button>
  </MiniModal.Footer>
</MiniModal>

Ссылки

• Задача IF-1087
• Версия для тестов 4.17.0-minimodal.1
• Отдельно собранная документация
• Пример в песочнице вместе с новым мобильным видом обычной Модалки

Чек-лист перед запросом ревью

1. Добавлены тесты на все изменения
   ⬜ unit-тесты для логики
   ✅ скриншоты для верстки и кросс-браузерности
   ⬜ нерелевантно

2. Добавлена (обновлена) документация
   ✅ styleguidist для пропов и примеров использования компонентов
   ✅ jsdoc для утилит и хелперов
   ✅ комментарии для неочевидных мест в коде
   ⬜ прочие инструкции (README.md, contributing.md и др.)
   ⬜ нерелевантно

3. Изменения корректно типизированы
   ✅ без использования any (см. PR 2856)
   ⬜ нерелевантно

4. Прочее
   ✅ все тесты и линтеры на CI проходят
   ✅ в коде нет лишних изменений
   ✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)

[zhzz]

Предлагаю немножко снизить специфичность API и добавить гибкости.

Несмотря на четкое видение Гайдов относительно сценариев использования МиниМодалки, в сущности это все та же обычная Модалка с небольшими настройками внешнего вида и поведения. Эти дополнительные настройки не меняют ее сути. В общем случае, она по прежнему служит для показа произвольного диалогового окна.

Это значит, что весь базовый функционал обычной Модалки в ней лучше сохранить. Иначе могут возникнуть сценарии, которые Гайды не предусмотрели, и пользователь сталкнется с ограничениями.

Но я согласен с тем, что сценарии из Гайдов, скорей всего, наиболее вероятны. И что мы можем предусмотреть некоторые готовые решения, чтобы облегчить пользователям жизнь. Однако эти решения не должны ограничивать базовый функционал и усложнять устройство и поддержку всего компонента.

Тут может помочь декомпозиция. Если вынести специфичную логику, не относящуюся напрямую к базовой Модалке, в отдельные компоненты, или передать ее в руки пользователя, то, возможно, получится достичь неплохого компромиса.

Например, пропы btn* логически сильно ограничивают сценарии использования МиниМодалки. Проп direction не относится к базовому функционалу, а hasCancelIndent супер-специфичен.

Вместо них можно внести более общий проп actions, куда пользователь сможет передавать произвольный набор кнопок и там же сам форматировать его. Такой проп уже можно причислить к базовому функционалу диалогового окна.

<MiniModal
  icon={<TrashCanIcon size={64} color={theme.btnDangerBg} />}
  title={`Удалить ${<b>{name}</b>}?`}
  description={`Description ${<Tooltip anchor={<HelpIcon />}/>}`}
  actions={<MiniModal.Actions direction="column">    
    <Button use="danger" size="medium">Удалить</Button>
    <Button use="primary" size="medium">Не удалить</Button>
    <MiniModal.ActionsIndent />
    <Button size="medium">Отменить</Button>
  </MiniModal.Actions>}
/>

Также, для максимальной гибкости, предлагаю дать возможность полностью менять содержимое МиниМодалки через проп children.

<MiniModal>
  <MiniModal.Header>
    <MiniModal.Icon>
      <TrashCanIcon />
    </MiniModal.Icon>
    Удалить <b>{name}</b>?
  </MiniModal.Header>
  <MiniModal.Body>
    Description <Tooltip anchor={<HelpIcon />}/>.
  </MiniModal.Body>
  <MiniModal.Footer>
    <MiniModal.Actions direction="column">    
      <Button use="danger" size="medium">Удалить</Button>
      <Button use="primary" size="medium">Не удалить</Button>
      <MiniModal.ActionsIndent />
      <Button size="medium">Отменить</Button>
    </MiniModal.Actions>
  </MiniModal.Footer>
</MiniModal>

Самое интересное, что эти меры не только добавляют гибкости, но также упрощают устройство и поддержку компонента за счет декомпозиции и разделения ответственности.

Еще я бы предложил для пропов title и description использовать тип ReactNode, как в большинстве подобных случаев в других компонентах, и сделать их необязательными. Все для той же гибкости.