feat(Toast, SingleToast): add ability to show close cross #3596
Conversation
There was a problem hiding this comment.
Изменила margin'ы у крестика и link (это кнопка действия) так, чтобы при отрисовке кнопки и крестика визуально ничего не изменилось
There was a problem hiding this comment.
Добавила проп для показа крестика и добавила его в условие по которому показывается крестик
There was a problem hiding this comment.
Проверили, что в SingleInput наследуется, работает и переключается показывание крестика (это последний аргумент в функции SingleToast.push)
| public static push(notification: string, action?: Nullable<Action>, showTime?: number) { | ||
| ToastStatic.push(notification, action, showTime); | ||
| public static push(notification: string, action?: Nullable<Action>, showTime?: number, showCloseCross?: boolean) { | ||
| ToastStatic.push(notification, action, showTime, showCloseCross); | ||
| } |
There was a problem hiding this comment.
Добавили аргумент для показа крестика в статический вызов Toast.push
There was a problem hiding this comment.
Проверяем наличие и отрисовку крестика в случаях статического вызова Toast.push и вызова от экземпляра
There was a problem hiding this comment.
Поочередно проверили случаи статического вызова Toast.push и вызова от экземпляра
There was a problem hiding this comment.
Обрабатываем кейс, когда вызвали статический push
There was a problem hiding this comment.
То, что здесь тост отрендеривается черным -- нормально, так как у нас при статическом вызове тостов не работает кастомизация. Это ограничение указано в документации.
There was a problem hiding this comment.
То, что здесь тост отрендеривается черным -- нормально, так как у нас при статическом вызове тостов не работает кастомизация. Это ограничение указано в документации.
| <Button data-tid="with-cross" onClick={() => SingleToast.push('Static SingleToast', null, 5000, true)}> | ||
| Показать статический тост c крестиком | ||
| </Button> | ||
| <Button data-tid="without-cross" onClick={() => SingleToast.push('Static SingleToast', null, 5000, false)}> |
There was a problem hiding this comment.
Наверное, эти data-tid можно удалить, раз они не используются
| const showStaticToastButton = context.webdriver.findElement({ css: '[data-tid~="show-static-toast"]' }); | ||
| const showInstanceToastButton = context.webdriver.findElement({ css: '[data-tid~="show-instance-toast"]' }); |
There was a problem hiding this comment.
А давай уберём из селектора тильду ~, чтобы упростить и искать целиком?
| @@ -26,6 +26,7 @@ export interface ToastState { | |||
| action: Nullable<Action>; | |||
| id: number; | |||
| showTime: Nullable<number>; | |||
| showCloseCross: boolean | undefined; | |||
There was a problem hiding this comment.
Давай упростим showCloseCross?: boolean
|
В самом конце попробовал посмотреть по сторонам:
И думаю предложить вместо конкретного |
Проблема
Нет возможности отрисовать крестик закрытия отдельно от кнопки действия
Как должно быть с точки зрения дизайна
Решение
Ссылки
IF-1982
Чек-лист перед запросом ревью
Добавлены тесты на все изменения
✅ unit-тесты для логики
✅ скриншоты для верстки и кросс-браузерности
⬜ нерелевантно
Добавлена (обновлена) документация
✅ styleguidist для пропов и примеров использования компонентов
⬜ jsdoc для утилит и хелперов
⬜ комментарии для неочевидных мест в коде
⬜ прочие инструкции (
README.md,contributing.mdи др.)⬜ нерелевантно
Изменения корректно типизированы
✅ без использования
any(см. PR2856)⬜ нерелевантно
Прочее
✅ все тесты и линтеры на CI проходят
✅ в коде нет лишних изменений
✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)