diff --git a/src/ui/atoms/chip/specification.mdx b/src/ui/atoms/chip/specification.mdx new file mode 100644 index 00000000..dd1651d9 --- /dev/null +++ b/src/ui/atoms/chip/specification.mdx @@ -0,0 +1,102 @@ +--- +name: chip +category: atoms +package: 'woly' +--- + +Компонент `chip` используются для представления информации в небольших блоках, например, такой как контактные данные пользователя. + +Чипы позволяют пользователям делать выбор, выполнять действия, вводить информацию и атрибуты, фильтровать контент и выполнять задачи. +Чипы могут использоваться как самостоятельно, так и внутри сложных компонентов. +Наиболее распространенным примером использования чипа внутри сложного компонента является мультиселект. + +## Структура чипа + +Чип может быть как простым компонентом, так и составным. +Простой компонент чип, как правило, состоит из текста и иконки. +При этом сам компонент чип может быть как статичным, так и интерактивным (кликабельным). + +Статичный простой компонент чип выполняет только 1 действие - визуальное отображение контента. + +Работа простого кликабельного чипа очень схожа с действиями, которые выполняет кнопка: + +— реагирует на наведение курсора — становится темнее/светлее. +— при нажатии на чип текст и иконка может опускаться на 1 px или менять цвет с добавлением рамки. Действие происходит после того, как чип отпущен, и только в том случае, если курсор остался над чипом. +— фокус на чипе визуально отображается после клика на нему, после нажатия курсором, но отпускании уже за границами чипа, а также при работе с клавиатурой: если табом перенести фокус на чип появляется рамка или тень (в браузерах по умолчанию используется рамка синего цвета). +Если чип в фокусе, то при нажатии клавиши Enter он нажимается и выполняет указанное действие. +При клике мышью или табом на тачскрине чип получает фокус, но визуально не отображает его. + +Составной компонент чип обычно состоит из двух частей: лейбл чипа - часть, в которой расположен только текст или текст с иконкой, а также экшен блок - часть, в которой отображается кнопка-иконка. +Чаще всего такие чипы используют при отображении выбранных значений в мультиселекте. При этом, правая часть чипа, в которой расположен экшен блок, обычно отвечает за удаление чипа. + +В составном чипе может быть кликабельной не только правая часть чипа с экшен блоком, но и одновременно с ней весь чип. +Чаще всего такой подход используют при оформлении писем, когда пользователь добавил в поле для отправки письма несколько адресатов и может не только редактировать количество адресатов, т.е. удалять некоторых из них, но и переходить на профиль адресатов, кликнув на лейбл чипа. + +Чип, как любой интерактивный компонент, обладает рядом состояний, которые подсказывают пользователю как именно с ним взаимодействовать. +При этом, каждое состояние чипа должно иметь особенности, которые отличают его от других состояний и окружающего макета. +При переходе чипа в разные состояния не рекомендуется кардинально изменять его внешний вид, поскольку это может создать нежелательный визуальный шум. + +Существует 6 основных состояний чипа: + +— нормальное состояние — этот компонент интерфейса интерактивен и готов к использованию. +— в фокусе — «ответ» элемента на действие: пользователь выделил чип с помощью клавиатуры или другого инструмента ввода. Без состояния фокуса навигация через клавиатуру или другие устройства с прямым вводом практически невозможна. +— наведение мыши — состояние интерактивного элемента, когда пользователь наводит на него курсор. +— активное состояние (или нажатый чип) — состояние, когда пользователь нажимает на чип. +— неактивное состояние — этот компонент интерфейса не интерактивен сейчас, но может быть включён в будущем. +Стоит отметить также, что если чип используется как составной компонент, неактивное состояние рекомендуется передавать полностью всему компоненту, не отключая его части по отдельности. +В целом, лучше при возможности избегать неактивных компонентов – пусть они всегда будут активны, поскольку когда компонент отключен, он не может получить фокус с клавиатуры и удаляется из дерева доступности элементов страницы. +Если пользователи не ввели нужную информацию или не совершили нужное действие, просто подсветите пустые строки или покажите предупреждение. + +Также существует ряд нюансов при работе с чипами. +Так, например, неинтерактивные, статические чипы не обладают всеми перечисленными состояниями. Поскольку чип не интерактивен, у него отсутствуют активное, неактивное состояние и состояние наведения мыши, а в состоянии фокуса на чип нельзя перейти с помощью клавиатуры. +Не рекомендуется наделять статичные чипы эти состояниями, поскольку это может ввести пользователя в заблуждение о том, что с чипом можно взаимодействовать и вызвать у пользователя неоправданные ожидания. + +При оформлении чипов в проекте рекомендуется учитывать не стиль макета в целом, но также стиль, приоритет и вес компонента, если чип используется как его часть. +Единство стиля улучшает скорость и точность взаимодействия, помогает избежать ошибок. + +## Tень + +Тень на чипе создает ощущение, будто чип находится за пределами страницы, и это действительно привлекает внимание. +Используйте тень, чтобы придать чипу "объем". При таком оформлении чипы более «кликабельны», поскольку затенение дает понять, что на чип можно нажать. +Такие компоненты пользователи заметят быстрее, нежели плоские. +Тени также могут быть использованы для обозначения различных состояний, например, фокусировке на кнопку. + +В случае, когда чип является составным компонентом, не рекомендуется использовать тень одновременно и на экшен блоке, и на всем чипе, поскольку в таком случае чип может выглядеть перегруженным. + +## Оформление текста + +Стиль надписи зависит от шрифта и от того, насколько легко его читать. + +При оформлении текста в чипах рекомендуется придерживаться определенных правил: + +— при выборе шрифта убедитесь, что он разборчивый. +— не рекомендуется использовать слишком большой или маленький размер шрифта, т.к. такие чипы могут отвлекать пользователя, создавать ненужный шум или вовсе сделать текст трудно читаемым. +— не рекомендуется использовать шрифты с засечками или наклоном. Такие шрифты трудно сочетать с другими. +— не рекомендуется использовать слишком тонкий стиль шрифта, поскольку текст становится трудно читаемым для пользователей. +— название чипов рекомендуется начинать с заглавной буквы, однако, не стоит капитализировать все буквы или использовать только строчные буквы в названии, поскольку при таком оформлении текст становится не удобным для прочтения. +— шрифт должен быть средней плотности. +— если чип используется как часть сложного компонента, например, мультиселекта, рекомендуется учитывать стилистику, в которой оформлен компонент-родитель. + +## Название чипов + +Если чип используется как самостоятельный компонент, то его название должно однозначно говорить о том, что произойдет если на него нажать. +Плохо, если нужно прочитать все содержимое лайтбокса или тултипа, чтобы понять, что делает чип. + +Название чипа не должно занимать несколько строк, увеличивайте ширину чипа либо меняйте название. +Также, нельзя сокращать название чипов или добавлять многоточие, если название не вмещается. + +## Размеры кнопок + +В основном выделяют 2 часто используемых размера для чипа: + +— маленькие — чаще всего используются как составные части сложных компонентов. + +— средние — используются в основном как самостоятельные компоненты, для отображения информации. + +## Иконки + +Чип может быть дополнен иконкой. Иконка располагается слева от текста чипа. +В основном, иконка используется рядом с текстом для того, чтобы лучше проинформировать пользователя о роли чипа, о том, какая информация находится внутри чипа или какое действие выполнено над чипом. +Так, к примеру, аватар, расположенный слева от текста чипа, подскажет, что внутри лежат данные пользователя, а иконка-галочка справа от текста чипа обозначит, что информация из чипа добавлен пользователем. +Иконка должна соответствовать смыслу текста на чипе или действию, которое выполняется над чипом, иногда это позволяет пользователю понять назначение компонента до того, как он прочитал его название. +Размеры компонентов — иконки и текста внутри чипа должны быть одинаковыми. Рекомендуется использовать один цвет для стилизации заливки иконки и текста чипа, при этом, это правило соблюдается и при изменении состояния чипа.