Usage
@prepared911/ui/blocks/control-island and its styles.css, plus the styles.css of each component the block composes (Box, Button, ButtonGroup, Icon, Menu, Text, VisuallyHidden).
ControlIsland is the raised pill at the start of the Navbar. It carries the person's role, queue, and availability. It is one block with three variants; variant is required and decides which props exist.
briefcase-business, headset, and route for the roles, hand for raise hand, chevron-down for the menu pill, and phone-call for Ringing.
items, value, defaultValue, onValueChange, size, and label pass straight through, and each item becomes a ButtonGroupItem. The group draws the whole pill, so the block adds nothing but a host that takes className, id, and ref. Hovering or focusing a collapsed role never changes a width: its label shows in a tooltip. Pressing a role selects it at once and it shows its label while selected; the selected role gets no tooltip, and a disabled role still shows its tooltip on hover (CI-22, ButtonGroup BG-28 to BG-32). Calltaker and Dispatcher have no expanding segments.status is Busy, Ready, or Ringing. It is controlled with status or uncontrolled with defaultStatus (Busy).
onStatusChange(status, details). Cancel the details to keep the previous choice.onStatusChange is never called with it.status, keeps the person's choice itself, and passes it back when the call ends. See the Composition story.ringingAnnouncement.
A toggle Button (aria-pressed) named by raiseHandLabel, which does not change with the state. It is controlled with raisedHand or uncontrolled with defaultRaisedHand, and reports through onRaisedHandChange(raised, details).
size is the shared control height (ADR 0012) and defaults to Medium, the design's size: a 38px island with 30px pills. The role segments, the badge, the raise hand control, and the status pill all follow it. A pill is the control height plus its 1px edge on each side, and the island is a pill plus a 4px inset (--space-4, measured from the island's outer edge) above and below, so the pills are centered and the three variants are always the same height:
size | Control height | Pill | Island |
|---|---|---|---|
Small | 24px | 26px | 34px |
Medium | 28px | 30px | 38px |
Large | 32px | 34px | 42px |
NavbarStart takes the island as a child. See the Composition stories InNavbarSupervisor, InNavbarCalltaker, and InNavbarDispatcher, which use the real Navbar, and the Navbar's Composition stories (Calltaker, Dispatcher, Supervisor) for the full header design.
The badge and the queue label are static. The badge shows only a glyph, so roleLabel is its accessible name. The queue label truncates with an ellipsis when the island is short of room.