Разработка компонентов для Дизайн-системы
Текущий флоу работы с компонентами в компании
В Фортисе еще нет отдельной команды Дизайн-системы. Это порождает главную проблему — костыли в коде.
Существующие баги компонентов заносятся в бэклог дизайн-системы и как правило правятся в рамках фичи, которая их затрагивает. Также каждый проектировщик отдела привлекает тестировщиков к изучению компонентов и Сторибука, чтобы отлавливать те баги, которые мы еще не нашли, и чтобы не допускать выпуска новых багов на прод.
Для эффективного решения данной проблемы я предлагаю выделить как минимум одного фронтэнд разработчика для работы с Дизайн-системой и контроля чистоты кода.
Мультиселект
Описание из спецификации
Базовое описание
Представляет из себя инпут с тегами и дропдаун с возможностью выбора более одного элемента.
Когда используем
Используем когда необходим выбор нескольких элементов.
Желательно придерживаться общего правила для дропдаунов и использовать мультиселект когда элементов более 5.
Поведение
Если значений в списке до 5, лучше использовать группу чекбоксов. Если значений больше 25 — дополните функцией Autocomplete.
Функция очищения поля опциональна.

Теги:
Максимальная длина тега по умолчания — 88 пикселей. Если слово не помещается целиком — транскейтим многоточием.
Для скрытых значений, которые не влезли в инпут — тег без иконки с текстом «еще N», где N — количество значений. Для мультиселекта с категориями количество значений должно всегда считаться по подкатегориям.
Тег, обозначающий все выбранные элементы, не ограничен по длине. Удаление данного тега из инпута очищает поле от всех выбранных значений.
Удаление тега с помощью иконки-креста настраивается. По умолчанию теги с возможностью удаления. Если предполагается частое использование элемента (кейс работа с фильтрами), то рекомендуется оставлять иконку удаления, если разовая работа (кейс создание) — рекомендуется убирать иконку удаления.

Опциональные возможности списка:
1. Элемент «Выбрать все»
2. Элемент количество выбранных элементов в категории.

Принцип действия элементов «Выбрать все» и Категорий:
— если не выбрано ничего или выбрано не все — нажатие приводит к выбору всех элементов/элементов внутри категории;
— если выбрано все — нажатие приводит к очищению всех элементов/элементов внутри категории.
Базовые элементы
Десктоп
Мобайл
Мультисаджест
Описание из спецификации
Базовое описание
Дополнение к компоненту Multiselect, расширяющее его функцией autocomplete.
Рекомендуется использовать, когда значений (Items) в выпадающем списке более 7. Пользователю предлагаются на выбор варианты автоматического заполнения текстовых полей по мере ввода символов, где конечный выбор для этого компонента строго из списка вариантов.
Когда используем
Используем при необходимости дополнить выпадающий список с большим количеством элементов возможностью быстро отобрать необходимые с помощью ввода их с клавиатуры.
Рекомендуемое количество элементов списка для мультисаджеста — 25 и более.
Поведение
Функция очищения поля опциональна.

При наведении на тег выводится тултип с полным значением (лучше использовать только для тегов, в которые не влезли значения целиком).

Если более 50% (но минимум 160px) инпута занято тегами, то при фокусе поля курсором все теги сворачиваются в один с надписью «Выбрано: N », где N - количество выбранных элементов из списка. Данный тег не ограничен по длине, текст в нем отображается полностью, без транкейта. При наведении на такой тег выводится тултип с перечислением значений. Максимальное количество строк в тултипе - 4; значения, которые не влезли в тултип, транкейтятся <...>. Если менее 50% инпута занято тегами, то при фокусе теги не сворачиваются.

Опцию удаления данного тега (и соот-но очищение всех выбранных значений) оставить настраиваемым параметром.

В случае, если вносимое значение не совпадает со значениями из списка, уведомляем об этом пользователя текстом «Ничего не найдено».

Порядок вывода значений оставить настраиваемым параметром. Значения при первом клике могут выводиться в таких вариациях как:
— В алфавитном порядке. (города, имена и тд.)
— По популярности выбора пользователя (ранее выбираемые параметры)
— По статусу выбираемого пункта ( активный/не активный, допущен/не проверен и проч.)

Для категорий с вложенными элементами: категория ведет себя как обычный элемент, но имеет приоритет в выдаче:
1: буква в названии категории + буква в названиях элемента/-тов
2: буква в названии только категории
3: буква в названии только элемента/-тов

Очередность — приоритет от первой к последней букве.

Данный компонент наследует поведение всех уже существующих компонентов, входящих в его состав.
Базовые элементы
Десктоп
Мобайл
Made on
Tilda