DetailsPanel
One retained detail-content owner with docked, accessible-resizable, and modal Sheet presentations.@gemologic/sheen-patterns · applicationPlayground
<ThemeProvider><DetailsPanel panelId="order-42" title="Order 42" open onOpenChange={() => {}} resizable presentation="docked"><p>Accepted detail</p></DetailsPanel></ThemeProvider>Variant matrix
Docked inspector
presentation: docked
presentation: sheet
Anatomy
- Package
@gemologic/sheen-patterns- Source
packages/patterns/src/DetailsPanel.tsx- Tokens
--sheen-color-bg-raised--sheen-color-border-control--sheen-color-focus-ring
Accessibility
Role: complementary, dialog, separatorKeyboard: Tab, Shift+Tab, Escape, ArrowLeft, ArrowRight, Home, EndDo
- Keep panelId URL-backed or controlled and pass server-resolved presentation inputs when rendering standalone.
Do not
- Do not render separate desktop and mobile copies of the content.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
panelId * | string | — | Stable app or URL-backed identity for the accepted detail record. |
title * | string | — | Visible panel heading and accessible name. |
open * | boolean | — | App-owned visibility. Closed content remains mounted and inert while the model exists. |
presentation | "docked" | "sheet" | docked | Deterministic docked or Sheet behavior. AdminApp changes this without replacing content. |
onOpenChange * | (open: boolean) => void | — | Visibility proposal from close, backdrop, or Escape. |
returnFocus | () => HTMLElement | undefined | — | Optional surviving focus origin used when closing. |
resizable | boolean | false | Expose a pointer and keyboard separator in docked presentation. |
width | number | — | Controlled width in CSS pixels. |
defaultWidth | number | 360 | Initial uncontrolled width in CSS pixels. |
minWidth | number | 280 | Minimum accepted width in CSS pixels. |
maxWidth | number | 640 | Maximum accepted width in CSS pixels. |
onWidthChange | (width: number) => void | — | Accepted resize proposal for app persistence or controlled state. |
closeLabel | string | Close details | Localized close-control and backdrop label. |
children * | JSX.Element | — | The single accepted details content owner, never duplicated between presentations. |