ControlIsland API

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import ControlIsland, ControlIslandRole, and ControlIslandStatus from @prepared911/ui/blocks/control-island.

Prop	Type	Default
`label`	`LocalizedMessage`	required
`roles`	`readonly ControlIslandRoleItem[]`	required
`role`	`ControlIslandRole`	—
`defaultRole`	`ControlIslandRole`	first role
`onRoleChange`	`(role, details) => void`	—
`raiseHandIcon`	`Glyph`	required
`raiseHandLabel`	`LocalizedMessage`	required
`raisedHand`	`boolean`	—
`defaultRaisedHand`	`boolean`	`false`
`onRaisedHandChange`	`(raised, details) => void`	—
`availability`	`ControlIslandAvailability`	—
`size`	`ButtonSize`	`Medium`
`className`	`string`	—
`id`	`string`	—
`ref`	`Ref<HTMLDivElement>`	—

ControlIslandRole: Supervisor, Calltaker, Dispatcher. ref, id, and className land on the host around the Expanding ButtonGroup. ControlIslandRoleItem: role (ControlIslandRole), icon (Glyph), label (LocalizedMessage), optional queueLabel for Calltaker and Dispatcher.

ControlIslandAvailability

Pass on availability when the call taker role should show the status pill.

Prop	Type	Default
`status`	`ControlIslandStatus` (`Ready`, `OnBreak`, `NotReady`, `OnCall`, `Ringing`)	uncontrolled
`defaultStatus`	`ControlIslandStatus`	`Ready`
`onStatusChange`	`(status: ControlIslandChoosableStatus, details: ChangeDetails) => void`	none
`statusItems`	`Record<ControlIslandStatus, { label: LocalizedMessage; icon: Glyph }>`	required
`statusMenuLabel`	`LocalizedMessage`	required
`statusMenuIcon`	`Glyph` (chevron on choosable pills)	required
`ringingAnnouncement`	`LocalizedMessage`	required

ControlIslandChoosableStatus is Ready | OnBreak | NotReady. onStatusChange is never called with OnCall or Ringing.

Props

Name	Type	Default	Description
`label`	`LocalizedMessage`	—	Accessible name of the island (`role="group"`), such as "Role and availability".
`raiseHandIcon`	`Glyph`	—	Glyph of the raise hand control in operator role content.
`raiseHandLabel`	`LocalizedMessage`	—	Name of the raise hand control, such as "Raise hand". It does not change with the pressed state.
`roles`	`readonly ControlIslandRoleItem[]`	—	Roles the person may work in, in display order. The island never infers access beyond this list.
`availability`	`ControlIslandAvailability`	—	Call taker availability copy and state. When passed, the call taker role's content ends in the status pill; when omitted, the call taker has no status control.
`className`	`string`	—	Classes appended to the island's host.
`defaultRaisedHand`	`boolean`	`false`	Initial raised state when uncontrolled.
`defaultRole`	`ControlIslandRole`	The first entry of `roles`	Selected role on first render when uncontrolled.
`id`	`string`	—	Id of the island's host element.
`onRaisedHandChange`	`((raised: boolean, details: ChangeDetails<ChangeReason>) => void)`	—	Called with the next state when the raise hand control is pressed. Cancel the details to keep the previous state. @param raised - Next raised state @param details - Change metadata
`onRoleChange`	`((role: ControlIslandRole, details: ChangeDetails<ChangeReason>) => void)`	—	Called when a role segment is pressed, with `ChangeReason.ItemPress`. Pressing the selected role does not call it. Cancel the details to keep the previous role. @param role - The pressed role @param details - Change metadata
`raisedHand`	`boolean`	—	Whether the hand is raised when controlled. Pair with `onRaisedHandChange`.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the island's host element.
`role`	`ControlIslandRole`	—	Selected role when controlled. Pair with `onRoleChange`.
`size`	`ButtonSize`	`ButtonSize.Medium`	Control height of the island's controls, from the shared scale (ADR 0012). The role segments, 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 on each side: Medium is a 38px island with 30px pills.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Control Island / Accessibility

Control Island / ControlIsland usage

On this page

ControlIslandAvailability

Props

Storybook

ControlIsland API

View SourceOpens in a new tab Submit IssueOpens in a new tab

Import ControlIsland, ControlIslandRole, and ControlIslandStatus from @prepared911/ui/blocks/control-island.

Prop	Type	Default
`label`	`LocalizedMessage`	required
`roles`	`readonly ControlIslandRoleItem[]`	required
`role`	`ControlIslandRole`	—
`defaultRole`	`ControlIslandRole`	first role
`onRoleChange`	`(role, details) => void`	—
`raiseHandIcon`	`Glyph`	required
`raiseHandLabel`	`LocalizedMessage`	required
`raisedHand`	`boolean`	—
`defaultRaisedHand`	`boolean`	`false`
`onRaisedHandChange`	`(raised, details) => void`	—
`availability`	`ControlIslandAvailability`	—
`size`	`ButtonSize`	`Medium`
`className`	`string`	—
`id`	`string`	—
`ref`	`Ref<HTMLDivElement>`	—

ControlIslandAvailability

Pass on availability when the call taker role should show the status pill.

Prop	Type	Default
`status`	`ControlIslandStatus` (`Ready`, `OnBreak`, `NotReady`, `OnCall`, `Ringing`)	uncontrolled
`defaultStatus`	`ControlIslandStatus`	`Ready`
`onStatusChange`	`(status: ControlIslandChoosableStatus, details: ChangeDetails) => void`	none
`statusItems`	`Record<ControlIslandStatus, { label: LocalizedMessage; icon: Glyph }>`	required
`statusMenuLabel`	`LocalizedMessage`	required
`statusMenuIcon`	`Glyph` (chevron on choosable pills)	required
`ringingAnnouncement`	`LocalizedMessage`	required

ControlIslandChoosableStatus is Ready | OnBreak | NotReady. onStatusChange is never called with OnCall or Ringing.

Props

Name	Type	Default	Description
`label`	`LocalizedMessage`	—	Accessible name of the island (`role="group"`), such as "Role and availability".
`raiseHandIcon`	`Glyph`	—	Glyph of the raise hand control in operator role content.
`raiseHandLabel`	`LocalizedMessage`	—	Name of the raise hand control, such as "Raise hand". It does not change with the pressed state.
`roles`	`readonly ControlIslandRoleItem[]`	—	Roles the person may work in, in display order. The island never infers access beyond this list.
`availability`	`ControlIslandAvailability`	—	Call taker availability copy and state. When passed, the call taker role's content ends in the status pill; when omitted, the call taker has no status control.
`className`	`string`	—	Classes appended to the island's host.
`defaultRaisedHand`	`boolean`	`false`	Initial raised state when uncontrolled.
`defaultRole`	`ControlIslandRole`	The first entry of `roles`	Selected role on first render when uncontrolled.
`id`	`string`	—	Id of the island's host element.
`onRaisedHandChange`	`((raised: boolean, details: ChangeDetails<ChangeReason>) => void)`	—	Called with the next state when the raise hand control is pressed. Cancel the details to keep the previous state. @param raised - Next raised state @param details - Change metadata
`onRoleChange`	`((role: ControlIslandRole, details: ChangeDetails<ChangeReason>) => void)`	—	Called when a role segment is pressed, with `ChangeReason.ItemPress`. Pressing the selected role does not call it. Cancel the details to keep the previous role. @param role - The pressed role @param details - Change metadata
`raisedHand`	`boolean`	—	Whether the hand is raised when controlled. Pair with `onRaisedHandChange`.
`ref`	`Ref<HTMLDivElement>`	—	Ref to the island's host element.
`role`	`ControlIslandRole`	—	Selected role when controlled. Pair with `onRoleChange`.
`size`	`ButtonSize`	`ButtonSize.Medium`	Control height of the island's controls, from the shared scale (ADR 0012). The role segments, 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 on each side: Medium is a 38px island with 30px pills.

Storybook

Interactive examples and edge cases for this component are in Storybook.

DefaultOpens in a new tab

Control Island / Accessibility

Control Island / ControlIsland usage

On this page

ControlIslandAvailability

Props

Storybook