Components › States & feedback › Status › Project label

Project label

canon

Pill that names the project a piece of communication belongs to: the canonical `.acrm-pill sm` with the project’s own icon, coloured by the project’s tone (the icon carries the tone instead of the dot).

Owner-approved prototype proto/komunikace-karta@649b8eca2 (8 Oct 2026, variant A; docs/ZADANI-komunikace-karta.md R8/R13/R14), implemented in the K-4 MR of acrm/acrm. Not a new pill variant and no CSS of its own (AD FA258-re): it is `.acrm-pill sm` + a leading `<Icon>` + the project name, and the general rule `.acrm-pill > .ti { color: var(--pill-dot) }` (see Pill) colours the icon. Icon and colour are set on the project detail with the same picker as a segment (`SegmentIconPicker`, `noun="projektu"`); default when unset = `briefcase` + `grey`. Tone from the palette = tone class on the pill, own colour (`#rrggbb`) goes into `--pill-dot` directly. An AI-suggested project (not yet confirmed by a person) shows a `?` after the name. Always placed in the `tags` slot of Item list. Paths verified against acrm/acrm main after K-4 (acrm !4953): ProjectPill.tsx and the rule in ds.css; no project-pill.css exists. AD 11 Oct 2026: beta until checked on dev with data (company card Komunikace had no data). AD 12 Oct 2026: promoted to canon — verified on crm.dev.atsl.cz with data (e2e round 5, Chromium 1440 + 390): project with `rocket` + `purple` assigned to a manual entry; project detail › Komunikace shows the picker and preview, icon rgb(142, 78, 198); company card › Komunikace shows `.acrm-pill.sm.purple > .ti` before the date, right edge 1341 px in every row, phone 390 on its own line, 0 console errors, 0× 5xx. Report: https://crm.dev.atsl.cz/reports/acrm/komunikace-karta-e2e/kolo-5/. Open: Ladle stories per section (DoD) still empty.

Used in 1 file · 1 area · 1× — components/communication

apps/web <ProjectPill>.acrm-pill .acrm-pill.sm .acrm-pill > .tiSource
ExamplesCodeUsageAccessibilityChangelog

The pill that names the project a piece of communication belongs to (an e-mail thread, a chat, a call, a manual contact record) on a company, person or project card and in every list that shows communication. It is not a new pill variant and it has no CSS of its own: it is the canonical Pill (.acrm-pill sm) with a leading project icon. React ProjectPill (apps/web/src/components/projects/ProjectPill.tsx), styles apps/web/src/ds.css.

Owner-approved 8 Oct 2026 (prototype proto/komunikace-karta, variant A); AD review FA258.

When to use

  • A row of communication that is assigned to a realisation project (Komunikace tab of a company, a person, a project; the mail list).
  • Always in the tags slot of Item list, next to the row’s other labels.

When not to use

  • The project as a record in its own right (a project card, a reference to a project) — that is an entity reference.
  • A state or a category that is not a project — that is a plain Pill with a dot.
  • A row that belongs to no project: draw nothing, no placeholder pill.

Anatomy

  • span.acrm-pill.sm + leading <Icon> + the project name. Nothing else — there is no size option, the label is always .sm (ProjectPill has no size prop since acrm !4964).
  • The colour is carried by the icon, not by a dot. This is the one deliberate exception to "colour = dot" of Pill, and it is a general rule of Pill, not a special style: a pill with a direct leading icon has no dot and .acrm-pill > .ti { color: var(--pill-dot, var(--ic-grey)) } colours the icon with the tone.
  • Tone from the palette = the tone class on the pill (.blue, .green, …); an own colour (#rrggbb) goes into --pill-dot directly.
  • Icon and colour are the project’s own and are set on the project detail with the same picker as a segment (SegmentIconPicker, noun="projektu"), with a live preview of this pill. Default when unset: briefcase + grey.
  • A project that the AI only suggested (not confirmed by a person) has ? after the name and a title that says so; confirming it in the row action removes the mark.
  • Long names truncate with an ellipsis; the full name is in title.

Best practices

Do
  • Put it in the tags slot; never in cols or meta.
  • Show at most one project per row — a piece of communication has one project link.
  • Let the project’s icon and colour be edited in one place, the project detail, so the pill looks the same on every card.
Don’t
  • Add a dot next to the icon, a fill, or a second icon.
  • Style it with a local class (.is-project and similar were rejected by the AD — the general Pill rule is enough).
  • Use an arbitrary colour for emphasis; the colour is the project’s identity.

Content

  • The project name as it is in the Projects module, no prefix such as "Projekt:".
  • Sentence case as typed; do not shorten it by hand (CSS truncation does that).
  • pill — the primitive and the leading-icon rule.
  • item-list — the tags slot where it lives.
  • avatar, entity-reference — other ways to point at a record.

Source: docs/status/project-label.usage.md · GitLab