Skip to content
This repository has been archived by the owner on Jul 28, 2024. It is now read-only.

Commit

Permalink
update description with pr comments
Browse files Browse the repository at this point in the history
  • Loading branch information
Irinaristova committed Jun 16, 2021
1 parent 47c3853 commit 68c546d
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions src/ui/atoms/chip/chip-spec.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ package: 'woly'
## Структура чипа

Чип может быть как простым компонентов, так и составным.
Простой компонент чип, как правило, состоит из текста и иконка.
Простой компонент чип, как правило, состоит из текста и иконки.
При этом, сам компонент чип может быть как статичным, так и интерактивным (кликабельным).

Статичный простой компонент чип выполняет только 1 действие - визуальное отображение контента.
Expand All @@ -26,15 +26,15 @@ package: 'woly'
Если чип в фокусе, то при нажатии клавиши Enter он нажимается и выполняет указанное действие.
При клике мышью или табом на тачскрине чип получает фокус, но визуально не отображает его.

Составной компонент чип обычно состоит из лейбла чипа - часть, в которой расположен только текст или текст с иконкой, а также экшен блока - часть, в которой отображается кнопка-иконка.
Чаще всего такие чипы используют при работе с мультиселекта. При этом, правая часть чипа в которой расположен экшен блок обычно отвечает за удаление чипа.
Составной компонент чип обычно состоит из двух частей: лейбла чипа - часть, в которой расположен только текст или текст с иконкой, а также экшен блока - часть, в которой отображается кнопка-иконка.
Чаще всего такие чипы используют при отображении выбранных значений в мультиселекте. При этом, правая часть чипа, в которой расположен экшен блок, обычно отвечает за удаление чипа.

В составном чипе может быть кликабельной как только правая часть чипа с экшен блоком, так и одновременно с ней и левая часть, т.е. лейбл.
В составном чипе может быть кликабельной не только правая часть чипа с экшен блоком, но и одновременно с ней весь чип.
Чаще всего такой подход используют при оформлении писем, когда пользователь добавил в поле для отправки письма несколько адресатов и может не только редактировать количество адресатов, т.е. удалять некоторых из них, но и переходить на профиль адресатов, кликнув на лейбл чипа.

Чип, как любой интерактивный компонент, обладает рядом состояний, которые подсказывают пользователю как именно с ним взаимодействовать.
При, это каждое состояние чипа должно иметь особенности, которые отличают его от других состояний и окружающего макета.
Не рекомендуется кардинально изменять вид и создавать дополнительный визуальный шум нежелательно.
При этом, каждое состояние чипа должно иметь особенности, которые отличают его от других состояний и окружающего макета.
При переходе чипа в разные состояния не рекомендуется кардинально изменять его внешний вид, поскольку это может создать нежелательный визуальный шум.

Существует 6 основных состояний чипа:

Expand Down Expand Up @@ -98,5 +98,5 @@ package: 'woly'
Чип может быть дополнен иконкой. В основном, иконка располагается слева от текста чипа, в редких случаях - справа.
В основном, иконка используется рядом с текстом для того, чтобы лучше проинформировать пользователя о роли чипа, о том, какая информация находится внутри чипа или какое действие выполнено над чипом.
Так, к примеру, аватар, расположенный слева от текста чипа подскажет, что внутри лежат данные пользователя, а иконка-галочка справа от текста чипа обозначит, что информация из чипа добавлен пользователем.
Иконка должна соответствовать смыслу текста на чипе или действию, выполненного над чипом, иногда это позволяет пользователю понять назначение компонента до того, как он прочитал его название.
Иконка должна соответствовать смыслу текста на чипе или действию, которое выполняется над чипом, иногда это позволяет пользователю понять назначение компонента до того, как он прочитал его название.
Размеры компонентов — иконки и текста внутри чипа должны быть одинаковыми. Рекомендуется использовать один цвет для стилизации заливки иконки и текста чипа, при этом, это правило соблюдается и при изменении состояния чипа.

0 comments on commit 68c546d

Please sign in to comment.