Опять споры с компонентом, йоу. Расскажу кейс.
В 2b2 продуктах часто (всегда) есть необходимость в отображении тегов сущности, как правило, для людей работающих с ПО теги – это основные ориентиры в визуальном ранжировании контента. По ним юзер ориентируется в сущностях с которыми работает, по ним определяет приоритет, срочность, статус или другое важное состояние для работы. Мы вот в жире (atlassian) сильно обращаем внимание на статусы задачи, для нас это принципиально важно, по этим штукам мы ориентируемся в задачах и приоритетах. А сам компонент они зовут “леденец”
Жира же, рекомендует ограничивать длину символов до 32-х, но это из коробки и при использовании фреймворка ты можешь изменить это значение.
ВНИМАНИЕ ВОПРОС
Как называется этот компонент, почему у него несколько названий?
Полазив по разным UI-Kit-ам получились вот такие определения:
- TAG – то, с чем можно взаимодействовать. Используется для категоризации сущностей или как элемент фильтрации, его можно удалить из input поля или из таблицы
- BAGE – счетчик, каунтер или "to focus on important bits of information". Может быть в связке с icon-buttom и как другой вид уведомления/нотификации. Используется для отметки важного статуса или состояния объекта
- CHIP – то же, что и Tag-. Встречается в компонентах фильтра, input полях и других формах для взаимодействия
- LOZENGE – то же, что и Bage
а по сути своей все это – значок
Вот и делай с этим что хочешь. В целом порывсь и потыкавсь стало понятно, что от продукта к продукту компоненты живут одинаково, с отличием в к-во вариантов и размеров.
Есть примеры когда используют один компонент Bage и для удобства он имеет массу цветов, размеров, слотов для иконок. Есть примеры, где компоненты разносят на три/четыре разных, что мне кажется более разумным в больших продуктах, так у разработчиков меньше шансов ошибиться в конфигурации.
Жизнь нас уже научила, что в вопрос наименовании вариантов компонента остается на откуп команде (см. спор о select- и combobox-).
Причем здесь кнопка то ?
А притом. Так бывает, что компонент кнопки подменяет компонент значка из-за похожего вида и размера. Для UI это может быть не сильно важно (если они действительно одинаковые), но в итоге в интерфейс может уйти кнопка, которая не ведет никуда, тогда никто не порадуется. В чем принципиальная разница:
кнопка - отправляет запрос на бекенд
значок – НЕТ
Шутка в том, что тег или бейджик могут быть использованы внутри кнопки, но не наоборот, у кнопки есть aria-роли, а у значка нет. Значок по своей сути это текстовый контейнер в разном оформлении, вот хороший наглядный пример из bootstrap
Тут видно, что сам компонент значка – это HTML-элемент <span> с разным форматом текста. Так и выходит что бейджик – это просто строковый контейнер для текстового контента, который, может использоваться для отображения данных (в фильтрах, таблицах, инпутах и прочем) и в качестве ссылки на эти данные (как bage-link).
Так че делать то
Количество вариантов и компонентов должно соответствовать продукту, в Uber не парились и сделали один вариант – tag-, Atlassian и Goldman больше и сложнее, от того и потребность в разнесении компонентов, для удобства дизайнеров и разрабов. В общем и целом можно сказать, что компонент значка:
- используется для отображения выбранных данных (в фильтрации, инпут полях, таблицах)
- может отображать статус или состояние (в тех же таблицах или полях меню)
- может быть элементов нотификации (счетчиком сообщений например)
- может иметь несколько вариантов жирности (заливки или толщины линии)
- не может инициировать действие
Ну вот примерный пул функций маленького кирпичика из интерфейса, стилизация, размер и место которого диктуется продуктом.
- Об HTML-элементе <span> – developer.mozilla.org
- Документация и примеры «значков» - маленьких компонентов, отображающих числа и ярлыки на bootstrap
- Репрезентация в разных дизайн системах – component.gallery
