-
Notifications
You must be signed in to change notification settings - Fork 129
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(MiniModal): add new control #3228
Conversation
10fc88f
to
58938f6
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Предлагаю немножко снизить специфичность 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
, как в большинстве подобных случаев в других компонентах, и сделать их необязательными. Все для той же гибкости.
…niModal # Conflicts: # packages/react-ui/package.json
…niModal # Conflicts: # yarn.lock
Проблема
В Гайдах есть специфичный вид модального окна - Мини-модалка.
Такого внешнего вида можно добиться с помощью текущих пропов компонента
Modal
и небольших доработок со стороны пользователя.Но для удобство было решено сделать отдельный компонент.
Решение
После ревью постарался снизить специфичность АПИ.
Решил добавить прямые обёртки над вспомогательными компонентами Модалки, такими как
<Modal.Header>
,<Modal.Body>
и<Modal.Footer>
.Обёртки принимают все пропы базовых компонентов + добавляют свои, типа
icon
иdirection
.Уникальным вышел только компонент
<MiniModal.Indent>
Ссылки
IF-1087
4.17.0-minimodal.1
Чек-лист перед запросом ревью
Добавлены тесты на все изменения
⬜ unit-тесты для логики
✅ скриншоты для верстки и кросс-браузерности
⬜ нерелевантно
Добавлена (обновлена) документация
✅ styleguidist для пропов и примеров использования компонентов
✅ jsdoc для утилит и хелперов
✅ комментарии для неочевидных мест в коде
⬜ прочие инструкции (
README.md
,contributing.md
и др.)⬜ нерелевантно
Изменения корректно типизированы
✅ без использования
any
(см. PR2856
)⬜ нерелевантно
Прочее
✅ все тесты и линтеры на CI проходят
✅ в коде нет лишних изменений
✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)