Цель заброшена
Автор не отписывался в цели 4 года 14 дней
Разработать набор UI-компонентов для системы
Привет всем!
По профессии я frontend-разработчик, уже полгода работаю удаленно. Текущих рабочих задач немного, сами они несложные, и я начинаю чувствовать, что профессионально деградирую. Чтобы поддерживать навыки на должном уровне и развиваться, я решил переписать компоненты интерфейса, которые мы используем в проектах, и постепенно заменить ими старые, которые я разработал почти полтора года назад. Часть новых компонентов уже готова, я делал их несколько месяцев назад, однако нужно внимательно изучить их код, соблюсти его единство, стройность логики. Вот список компонентов, который должен получиться на выходе:
- Кнопка
- Иконка
- Поповер
- Модальное окно
- Поле ввода и текстовое поле
- Группа чекбоксов
- Радиокнопки
- Мультиселект
- Поле выбора даты
Чтобы не затягивать выполнение задачи, упростить существующий код и поскорее интегрировать компоненты в систему, я решил отказаться от поддержки скрин-ридеров, которую уже реализовал для части компонентов. Остальные аспекты взаимодействия пользователя с компонентом будут учитываться, в соответствии с рекомендациями Консорциума.
Критерий завершения
Все компоненты разработаны
-
Модальное окно
Технически правильнее будет начать с самых базовых компонентов: кнопки и иконки, но, так как я еще не обсудил стили фокуса с дизайнером, я решил начать работу с компонента модального окна. Я не буду описывать базовый функционал модального окна, а остановлюсь на неочевидных моментах, которые, на мой взгляд, должны присутствовать в грамотно разработанном модальном окне:
- Вне зависимости от того, где используется модальное окно, оно должно всегда прикрепляться к body
- Если у body присутствует полоса прокрутки, она должна скрываться. При этом дополнительная ширина, которая образуется при сокрытии полосы прокрутки не должна приводить к движению страницы в стороны при открытии/закрытии модального окна
- При открытии модального окна должна сохраняться информация о текущем активном элементе, текущем уровне прокрутки по осям x, y. Эти данные должны возвращаться в исходное состояние, когда модальное окно закрывается
- Когда модальное окно открыто, фокус должен быть "зациклен" внутри него. Другими словами, мы не можем перейти на активные элементы вне модального окна при навигации через Tab (реализовал через элементы-ловушки)
- При открытии модального окна должна сохраняться информация о текущем активном элементе, текущем уровне прокрутки по осям х, у. Эти данные должны возвращаться в исходное состояние, когда модальное окно закрывается
- Всё это должно корректно работать в сценариях, когда на странице присутствуют несколько модальных окон (например тогда, когда одно модальное окно вызывает другое)
-
Поле ввода
Поле ввода уже готово. Нужно проанализировать код и добавить несколько улучшений:
- удалить aria-атрибуты, которые я пока решил не поддерживать.
- поискать плагин маски, который будет достаточно функциональным, будет иметь настройки маски-даты и времени и не будет конфликтовать с валидатором.
- в инпуте используется спиннер, его также надо будет переписать, попробовать заменить css стили с анимацией на анимированную свг-иконку.
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением
