From 4127e65c4f2f5c5a6aca86cf4267b3f2b438bce3 Mon Sep 17 00:00:00 2001 From: lizerk Date: Mon, 13 Apr 2026 15:49:16 +0300 Subject: [PATCH] docs(frontend): prioritize person chip pattern --- docs/guides/frontend/04-PATTERNS.md | 23 +++++++++++++++++++ .../guides/frontend/06-COMPONENT-INVENTORY.md | 8 +++++++ 2 files changed, 31 insertions(+) diff --git a/docs/guides/frontend/04-PATTERNS.md b/docs/guides/frontend/04-PATTERNS.md index b9230d0a..79cc27e9 100644 --- a/docs/guides/frontend/04-PATTERNS.md +++ b/docs/guides/frontend/04-PATTERNS.md @@ -52,6 +52,28 @@ - локальные стрелки, паддинги и раскрытия быстро создают вторую дизайн-систему - filter-toolbar с сортировкой и раскрытием фильтров тоже не должен бесконечно разрастаться внутри page-level JSX +### Person chips + +Если secondary/detail-блок показывает конкретных людей: + +- получателей +- участников +- согласующих +- исполнителей +- авторов + +то приоритет у person-chip паттерна: `avatar + name` внутри capsule, а не у сырого текста или локально собранного badge. + +Причина: + +- человек считывается быстрее по аватару и имени, чем по строке текста +- однотипные participant-блоки не должны выглядеть по-разному в соседних feature-модулях +- это снижает визуальный дрейф между `requests`, `equipment`, `procurement`, `documents`, `calendar` + +Референс по духу: + +- `frontend/src/components/requests/RequestUserBadge.tsx` + ### Compose forms Compose-паттерн должен восприниматься как рабочее пространство, а не как список независимых инпутов. @@ -136,6 +158,7 @@ Target state: | Searchable dropdown trigger | shared `SearchableSelect*` + `rounded-lg` | compose inline-row может быть крупнее по shell | `ok` | | Compose address row | shared select pattern на базе `app-input` | `rounded-2xl` допустим для compose-shell строки | `ok` | | Inline comment composer | shared `CommentControls` + icon-only send action | feed/footer variant может добавлять attachment actions перед input | `ok` | +| Person chip / participant capsule | local feature wrapper вокруг avatar + name capsule | простой текст допустим только если аватар/ссылка не нужны и список не является заметной частью блока | `ok` | | Helper / alert / selected block | `app-selected`, `app-feedback-*`, `app-surface-muted` + `rounded-lg`/`rounded-xl` | зависит от веса блока | `needs refactor` | | Pills / status chips / avatar | `rounded-full` | нет | `ok` | | `rounded-md` у новых карточек и полей | не использовать | только legacy до отдельной переработки | `legacy` | diff --git a/docs/guides/frontend/06-COMPONENT-INVENTORY.md b/docs/guides/frontend/06-COMPONENT-INVENTORY.md index 3d75dbe3..da5823e0 100644 --- a/docs/guides/frontend/06-COMPONENT-INVENTORY.md +++ b/docs/guides/frontend/06-COMPONENT-INVENTORY.md @@ -190,6 +190,14 @@ - разделения page-level orchestration и feature-level compose workspace - screen-specific router/menu/deep-link orchestration без засорения page-level JSX +`requests/RequestUserBadge.tsx` использовать как ориентир, когда нужен person-chip паттерн: + +- `avatar + name` внутри capsule +- опциональная ссылка на профиль +- compact и large варианты внутри одного feature wrapper + +Не копировать компонент дословно во все модули, но сохранять приоритет этого паттерна над сырой строкой получателя или локально собранным badge. + С оговоркой: - `requests` сейчас хороший ориентир по декомпозиции и compose/detail flow, но не должен автоматически становиться visual-template для всех dense lists