@scattered-light/loomiere-base-ui 0.6.1 → 0.7.1

package/dist/design-system/components/ListDetail/README.md

@@ -0,0 +1,43 @@
+# ListDetail
+
+Loomiere component, not part of Base UI. The detail of one item, next to its list. Not a Base UI part. It is a Splitter when this element is at least list-detail.split-min-width wide, measured on the element itself so it still works inside another panel. Narrower, the detail is the existing Drawer (the default) or it replaces the list, which stays mounted and hidden so its scroll position survives Back. The list stays in the splitter's first panel whether the detail is open, closed, or in a drawer, so its scroll survives. The detail is portaled into a node the component created, and that node moves. The list sits on the page surface. The detail sits on surface.raised: a pane beside the list, one step off the page, with the splitter line as the only divider. A modal surface would make the pane look like a dialog stuck in the layout. Drawer mode does not restyle that; it uses the Drawer's own modal surface, title and Close, so it matches every other drawer. The header title is text-title-condense. title-amplify is for a dialog or a drawer, a layer over the page. A pane heading shares the view with the list, so the condensed title fits the row. Close is a quiet icon-only Button: a text Close would compete with the title and the actions in a short header. Page mode puts Back, icon and word, where Close was. Focus moves to the heading when the detail opens, and back to the row when it closes. Changing the title because another row was picked does not move focus. Escape closes only when it bubbles out of the detail, so an open menu handles it first. Nothing listens on window. Page changes are announced by that focus move; there is no live region. data-layout is split, drawer or page. data-open is set while the detail is open.
+
+Use `Loomiere.ListDetail`, this package's component: it puts the class names on for you (`import { ListDetail } from '@scattered-light/loomiere-base-ui'`, or from `@scattered-light/loomiere-base-ui/custom`).
+
+Not a Base UI part, so there is no base-ui.com page for it.
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `ListDetail` | `data-layout`: `split`, `drawer`, `page`; `data-open` |
+| `ListDetailHost` |   |
+| `ListDetailSlot` |   |
+| `ListDetailSplit` |   |
+| `ListDetailList` |   |
+| `ListDetailDetail` | `data-layout`: `split`, `page`, `drawer` |
+| `DrawerPopup` |   |
+| `ListDetailHeader` |   |
+| `ListDetailBody` |   |
+| `ListDetailTitle` |   |
+| `DrawerTitle` |   |
+| `ListDetailActions` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the ListDetail stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  args: { open: true },
+  render: () => (
+    <div style={box(960)}>
+      <Transactions />
+    </div>
+  ),
+};
+```
+
+The preview also shows `Drawer`, `Page`, `CloseDisabled`.