Pattern

Review list

Values to check before a change goes ahead: a caption per group, then each label on the left and its value on the right.

Copy it from /dashboard/accounts/:acctId/sites/:siteId/animal-list/:group

Two groups

A caption-tone heading per group, then the label on the left and the value right-aligned. On a phone the value sits under its label, left-aligned.

Route: /dashboard/accounts/:acctId/sites/:siteId/animal-list/:group
Screenshot: docs/agents/ui-patterns/review-list-1440.png

Changes

Status: Available
Location and Volunteer: Sunny Paws Adoption Center

Relationships

Mark as siblings: Link 3 animals
Mark as bonded: Link 2 animals

<ReviewList
  groups={[
    {
      caption: 'Changes',
      rows: [
        {
          label: 'Status',
          value: 'Available',
        },
        {
          label: 'Location and Volunteer',
          value: 'Sunny Paws Adoption Center',
        },
      ],
    },
    {
      caption: 'Relationships',
      rows: [
        {
          label: 'Mark as siblings',
          value: 'Link 3 animals',
        },
        {
          label: 'Mark as bonded',
          value: 'Link 2 animals',
        },
      ],
    },
  ]}
/>

A long value

A value is never truncated: it wraps beside its label, and on a phone under it.

Route: /dashboard/accounts/:acctId/sites/:siteId/animal-list/:group
Screenshot: docs/agents/ui-patterns/review-list-390.png

Changes

Tags: Add Bottle Baby, Senior, Special Needs, Shy With Dogs, Good With Cats, Needs a Quiet Home
Spayed or Neutered: Yes

<ReviewList
  groups={[
    {
      caption: 'Changes',
      rows: [
        {
          label: 'Tags',
          value: 'Add Bottle Baby, Senior, Special Needs, Shy With Dogs, Good With Cats, Needs a Quiet Home',
        },
        {
          label: 'Spayed or Neutered',
          value: 'Yes',
        },
      ],
    },
  ]}
/>