Feedback Bar

import { Canvas, Controls, Meta, Title } from '@storybook/addon-docs/blocks';

import * as FeedbackBarStories from './FeedbackBar.stories';

<Meta of={FeedbackBarStories} name='Usage' />

<Title />

## Purpose

Thumbs up and down for rating agent output. The component is UI only: it reports the choice and nothing else.

It is built on the `IconButton` primitive: two toggle icon buttons (`thumbsUp`, `thumbsDown`) in a labelled group. The buttons themselves (size, focus, tooltip and the pressed state) are the `IconButton`'s; this component adds the pairing (choosing one unpresses the other, pressing the chosen one clears it), the group label and the status text.

## Usage

Put it under an agent message, in the `actionsEnd` slot of a Suggestion Card, or under other agent output.

- It is controlled: pass `value` (`up`, `down` or nothing) and `onValueChange`. Pressing the chosen thumb again passes `null`.
- `upLabel`, `downLabel` and `groupLabel` are required. They are the screen-reader text and tooltips; the bar holds no copy. Word the labels so they do not promise what happens to the answer.
- `statusLabel` replaces the thumbs with text (for example a thank-you) and is announced to screen readers.
- The `children` slot takes extra actions after the thumbs, such as the PDS `ClipboardButton` (copy, which turns into a check when pressed) or a retry button.
- What the screen does with the choice, and any follow-up such as a reason, is not part of this component.

## Implementation

See the table below for the available props. The Interactive story lets you press the thumbs and watch the status text appear and fade back. The All States story shows each state: no choice, a chosen thumb, the status text and extra actions (the copy button is the PDS Clipboard Button, which turns into a check when pressed).

<hr />

<Canvas of={FeedbackBarStories.Interactive} />
<Controls of={FeedbackBarStories.Interactive} />