Components › Overlays & dialogs › Dialog › Record drawer

Record drawer

canon

The side panel that opens a record next to its listing without leaving it; the listing behind stays live. The only drawer in the canon.

React implementation lives in the app (apps/web/src/components/drawer/RecordDrawer.tsx); DrawerForm shares only the .pdr shell, not .pdr-sec/.pdr-row. AD 14 September 2026 (OV-2): the only drawer — Drawer form is deprecated. The catalog stories and the overlays proposal still show an OLD body (.pdr-sec/.pdr-row sections) and an old two-button footer („Přidat do segmentu" / „Odemknout informace"). Measured on deployed dev (Lidé → row click): the body is the record rail in drawer variant (PersonRail variant="drawer": stav spolupráce, quick actions, nejbližší aktivita, quick note, Aktivita/Poznámky tabs, Detail záznamu) and the footer holds one primary „Otevřít osobu" — the same card the ↗ in the header opens in a new tab. Stories must be rebuilt from the real call site. Delivered 14 September 2026 (OV-2b, acrm !3515), verified on dev: the footer is gone; ↗ in the head opens the detail in the same tab with the listing context (onOpenDetail), Ctrl/⌘+click opens a new tab; the dead „Odemknout informace" button in segments went with it. Catalog stories still show the old body and footer — to be rebuilt.

Used in 6 files · 6 areas · 7× — components/setkani, pages/FirmyPage, pages/LidePage, pages/PipelinePage, pages/SegmentDetailPage, pages/telefony

apps/web <RecordDrawer>.pdr .pdr-rail .pdr-sec .pdr-row +1SourceStoryLegacy card Person Drawer.htmlLegacy card Company Drawer.htmlLegacy card Deal Drawer.html
ExamplesCodeUsageAccessibilityChangelog

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