Chips

Пакет @cloud-ru/ds-chips предоставляет компактные элементы управления — чипы. Они закрывают три задачи: инициировать действие, переключать бинарное состояние и фильтровать данные через выпадающий список.

• ChipAssist — кликабельный чип-кнопка для inline-действия с иконкой, лейблом и состояниями disabled / loading.
• ChipToggle — чип с состоянием выбран / не выбран (controlled через checked + onChange).
• ChipChoice — семейство чип-фильтров с выпадающим списком. Экспортируется как namespace:
  • ChipChoice.Single — одиночный выбор.
  • ChipChoice.Multiple — множественный выбор.
  • ChipChoice.Date — выбор даты (date / date-time / month / year).
  • ChipChoice.DateRange — выбор периода.
  • ChipChoice.Time — выбор времени.
  • ChipChoice.Custom — произвольный контент выпадающего меню.
• ChipChoiceRow — строка из нескольких ChipChoice-фильтров с кнопками добавить / сбросить и pinned-чипами.

Анатомия

Size (default s)

Все компоненты пакета разделяют один размерный ряд:

• s — для плотных поверхностей: тулбары, строки фильтров, таблицы.
• m — стандартный размер для форм.
• l — для крупных форм и акцентных фильтров.

Установка

pnpm add @cloud-ru/ds-chips

import { ChipAssist, ChipToggle, ChipChoice, ChipChoiceRow } from '@cloud-ru/ds-chips'

ChipChoice — namespace: варианты доступны как ChipChoice.Single, ChipChoice.Multiple, ChipChoice.Date, ChipChoice.DateRange, ChipChoice.Time, ChipChoice.Custom.

Компоненты с выпадающим списком (всё семейство ChipChoice) требуют PortalContextProvider из @cloud-ru/ds-portal-context где-то выше по дереву — иначе выпадающее меню рендерится в null-root.

Figma

Все компоненты следуют одному мастер-файлу Figma «chips — Matrix». Ссылки на конкретные узлы — на страницах компонентов.

Смотри также

• @cloud-ru/ds-button — кнопки для основных действий.
• @cloud-ru/ds-dropdown — выпадающие меню (используются внутри ChipChoice).
• @cloud-ru/ds-calendar — календари для ChipChoice.Date / DateRange / Time.