Description

Description — составной компонент для пояснения рядом с содержимым: подсказка над формой, предупреждение в модалке, сообщение о последствиях действия.

Description.Root задаёт цвет и размер и занимает всю ширину родителя, части внутри него свободно комбинируются: Description.Icon и Description.Text можно переставлять и использовать по одной.

Сам блок неинтерактивный — это div, а не алерт; кнопки («Понятно», закрытие, ссылка) кладутся в Description.Actions.

Цвет и заливка описываются той же парой variant / appearance, что у Badge и Button, — блок читается как часть одного набора.

Удаление доски необратимо: вместе с ней удалятся все её колонки и задачи.

Проект виден только участникам организации. Открыть доступ по ссылке можно в настройках.

Анатомия

Description.Root

Icon

Text

Actions

Примеры

Вариант

Смысловой вариант — задаёт цвет: default — нейтральное пояснение (базовый выбор для длинного текста), primary — акцентная подсказка, success / warning / danger — последствия и предупреждения, secondary — приглушённая сноска.

default

primary

secondary

success

warning

danger

Внешний вид

Внешний вид: ghost — приглушённая подложка цветом варианта (по умолчанию), outline — обводка без заливки, dashed — та же обводка пунктиром, solid — сплошная заливка. solid — самый громкий: берётся для единственного важного сообщения на экране.

ghost

outline

dashed

solid

ghost

outline

dashed

solid

Размер

Размер задаётся на Description.Root и управляет шрифтом и внутренними отступами; иконка масштабируется вместе с текстом. xs и sm — сноска под полем формы, md — базовый, lg и xl — сообщение на всю ширину страницы.

xs — иконка масштабируется вместе с текстом

sm — иконка масштабируется вместе с текстом

md — иконка масштабируется вместе с текстом

lg — иконка масштабируется вместе с текстом

xl — иконка масштабируется вместе с текстом

Иконка

Description.Icon — иконка рядом с текстом; порядок задаёт разметка, так что иконка может стоять и справа от Description.Text. Иконка не сжимается и центрируется по первой строке — даже когда текст занимает несколько строк.

Иконка выравнивается по первой строке — даже когда текст занимает несколько строк и переносится на всю ширину родителя.

Подсказку можно закрыть иконкой справа.

Действия

Description.Actions — кнопки блока: прижимаются к правому краю и, в отличие от действий Cell и Card, видны всегда (наводить курсор не нужно) — пояснение читают один раз, и скрытая кнопка в нём просто не нашлась бы.

Действия прижаты к правому краю и видны всегда — наводить курсор не нужно.

Приглашение истекает через два дня.

Подсказка в форме

Частый сценарий: короткое пояснение к полю перед ним. Размер sm и вариант primary не перетягивают внимание с самой формы, а иконка отделяет пояснение от подписей полей.

Адрес виден в ссылках на проект. Поменять его можно позже — старые ссылки перестанут работать.

Адрес проекта

API

Prop	Type	Default
`children`*	`ReactNode`	-
`variant` Смысловой вариант — задаёт цвет	`Variant`	`"default"`
`appearance` Внешний вид: сплошная заливка, обводка (сплошная или пунктирная) или приглушённая подложка	`Appearance`	`"solid"`
`size` Размер компонента	`Size`	-

Наследуется от Pick<VisualProps, K>, HTMLAttributes<HTMLDivElement>

Description.Icon

Иконка рядом с текстом — масштабируется вместе с ним, не сжимается и выравнивается по первой строке.

Prop	Type	Default
`children`* Иконка рядом с текстом пояснения	`ReactNode`	-

Description.Text

Текст пояснения; переносится по строкам.

Prop	Type	Default
`children`* Текст пояснения — переносится по строкам	`ReactNode`	-

Description.Actions

Кнопки действий — прижаты к правому краю блока и видны всегда.

Prop	Type	Default
`children`* Кнопки действий — прижаты к правому краю блока и видны всегда, в отличие от действий ячейки и карточки	`ReactNode`	-