ListDetailDetail

The detail pane. A labelled region named by its ListDetailDetailHeader title or an aria-label.

Import

import { ListDetailDetail } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/list-detail.

Usage

export const SideBySide: Story = {
  decorators: inWidth("48rem"),
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const list = canvas.getByRole("list", { name: "Students" });
    await expect(list).toBeVisible();
    await expect(canvas.getByText("Pick a student.")).toBeVisible();
    await expect(canvas.queryByRole("button", { name: "Back to list" })).toBeNull();
    await userEvent.click(canvas.getByRole("button", { name: /Luis/ }));
    await expect(canvas.getByRole("button", { name: /Luis/ })).toHaveAttribute(
      "aria-current",
      "true",
    );
    await expect(canvas.getByRole("region", { name: "Luis Ramírez" })).toBeVisible();
    // Beside the list, the list stays visible and keeps focus.
    await expect(list).toBeVisible();
    await expect(canvas.getByRole("button", { name: /Luis/ })).toHaveFocus();
    await expect(
      getComputedStyle(list.closest("[data-view]") as Element).gridTemplateColumns.split(" "),
    ).toHaveLength(2);
  },
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
backLabel	string		Label of the back action shown in the single-pane view. Defaults to the localized “Back to list”.
hideBack	boolean	false	Hides the back action (the consumer then provides its own way back).

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Side By Side
• Collapses To Single Pane
• Controlled
• Reports Selection
• Spanish Back
• Back Calls On Back
• List Rail
• Narrow Ratio
• Card With Header

Source

packages/ui/src/containers/list-detail/list-detail.tsx