Drawer

The drawer that shows a record next to the listing it was opened from. The same rail that fills the left column of a record page is rendered here, in the drawer variant, in the right-hand slot of the app shell (.as-drawer), so a row can be read — and acted on — without leaving the list. React: apps/web/src/components/drawer/RecordDrawer.tsx; CSS apps/web/src/ds/record-drawer.css (prefix .pdr).

It is deliberately not a dialog: no scrim, no role="dialog", nothing blocked. The listing behind it stays live, which is the whole point.

Since 14 Sep 2026 this is the only drawer in the canon. Drawer form is deprecated — create and edit forms move to the form-less dialog (AD, OV-2).

When to use

  • Reading a record from a listing, a board or a segment: who is this, what is the state, what is the next step. In the app: Lidé, Firmy, Pipeline, segment detail.
  • Stepping through rows: the head carries previous / next, so the drawer follows the selection.

When not to use

  • Creating or editing a record — that is the form-less dialog, not a drawer.
  • A task that must be finished before the screen continues — that is a Dialog.
  • The full record — the drawer is the rail, not the page; ↗ leads to the one detail the record has.
  • A hover answer to "who is this?" — that is Entity preview.

Anatomy

  • Panel .pdr in the shell drawer slot, width: clamp(404px, 33.333vw, 640px), with [data-theme='dark'] overrides of its own.
  • Head .pdr-top: identity .pdr-top-id (avatar, or the square mark for a company) with the name .pdr-top-name, then the icon controls .pdr-ico — previous, next, the record menu ⋮, open ↗, close.
  • Open ↗ is a real <a href> to the record's detail. A plain click opens the detail in the same tab with the listing context — the previous / next arrows and ✕ back to the list keep working on the record page. Ctrl / ⌘ + click, middle click or Shift opens a new tab like any link. The host passes the in-app open as onOpenDetail (acrm !3515).
  • Body .pdr-body: the record's own rail in the drawer variant — PersonRail / CompanyRail / DealRail with variant="drawer" — so the drawer and the record page never show different fields. For a person: collaboration state, quick actions (e-mail, call, note, task), next activity, a quick note, the Aktivita / Poznámky tabs and Detail záznamu.
  • No footer. Until 14 Sep 2026 the drawer carried a footer button „Otevřít osobu / firmu / obchod / detail" (and, in segments, a dead „Odemknout informace"); ↗ took over its job and the footer is gone (AD, OV-2b).
  • States: loading = one sentence in the middle with the head still closable; failure = icon, sentence and Zkusit znovu.

Measured on dev after !3515 (Lidé → row click, 1618 × 1203): no .pdr-foot; ↗ has no target, title „Otevřít"; the body takes the height the footer used to hold.

Best practices

Do

  • Keep the drawer and the record page rendering the same rail (variant="page" vs variant="drawer") so the two never drift apart.
  • Show only what the record has: an empty field is not drawn.
  • Put row-level acts on the rows and record-level acts in the ⋮ menu of the head.
  • Pass onOpenDetail with the listing context, so ↗ lands on the record with its arrows and its way back.
  • Let the listing stay usable — no scrim, no focus stealing, closing must never reload the list.

Don't

  • Add a scrim or aria-modal; the drawer is a panel, not a modal.
  • Put a form in it — creating and editing is the form-less dialog.
  • Bring back a footer button that repeats ↗.
  • Show the "Výpis procesů" section here — since F216 (23 Aug 2026) the drawer omits it.

Content

  • The head shows the record name as it is; the type is carried by the mark, not by a prefix.
  • ↗ tooltip: „Otevřít".
  • Loading: Načítám náhled…. Failure: Náhled se nenačetl plus one explanatory sentence and Zkusit znovu.
  • record-rail — the content this drawer wraps (variant decides page vs drawer).
  • formless-dialog — where create and edit live now.
  • drawer-form — deprecated.
  • entity-preview — the hover-sized answer to the same question.
  • Stories: components--record-drawer--* — outdated: they still draw the old .pdr-sec body and the two-button footer; to be rebuilt from the real Lidé drawer.

Source: docs/dialog/record-drawer.usage.md · GitLab