Item

GradeTested

UsageCopy Anchor Link

import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@cadence-clinical/ui";

<Item variant="outline">
  <ItemMedia variant="icon">
    <CalendarDays aria-hidden />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Review clinic</ItemTitle>
    <ItemDescription>Thursday at 10:15. Outpatients, Level 2.</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button variant="outline" size="sm">
      Reschedule
    </Button>
  </ItemActions>
</Item>;

Item follows the shadcn Item and keeps its part names. Every part is optional. ItemHeader and ItemFooter add a full-width row above or below the rest.

Item is a composite: it uses the Separator primitive.

For something a person said, with its author, role and time, such as a comment on a patient, use a Comment instead.

A list of itemsCopy Anchor Link

A set of items is usually a list, so say so. Render the group as a ul and each item as an li, and set divided to draw a line between them:

<ItemGroup divided render={<ul aria-label="Appointments" />}>
  <Item render={<li />}>...</Item>
  <Item render={<li />}>...</Item>
</ItemGroup>

A ul may hold only li elements, so do not put an ItemSeparator in one. divided draws its lines as borders. Use ItemSeparator between two sets of items in a group that is not a list.

An item that can be pressedCopy Anchor Link

Pass a link or a button through render, and the whole item becomes the target.

<Item variant="outline" render={<a href="/appointments/review" />}>
  ...
</Item>

What Cadence changesCopy Anchor Link

• Nothing is cut short. The shadcn item clamps its title to one line and its description to two. An item is where a medicine's name or a result is shown, so here both wrap, however long they are, and the actions stay in the row. On a narrow screen the actions drop under the content.
• Spacing and text follow the density. size="sm" is one step tighter again. shadcn's third size, xs, is left out.
• A list is valid markup. shadcn gives the group a list role and its items none, and puts separators between them. Here the list meaning comes through render, and divided draws the lines.
• The focus ring is never faded.

PropsCopy Anchor Link