38 lines
1.4 KiB
Markdown
38 lines
1.4 KiB
Markdown
# Data Model: Inline Confirmation Buttons
|
|
|
|
## Entities
|
|
|
|
### ConfirmButton State
|
|
|
|
The `ConfirmButton` manages a single piece of ephemeral UI state:
|
|
|
|
| Field | Type | Description |
|
|
|-------|------|-------------|
|
|
| isConfirming | boolean | Whether the button is in the "confirm" (armed) state |
|
|
|
|
**State transitions**:
|
|
|
|
```
|
|
idle ──[first click/Enter/Space]──▶ confirming
|
|
confirming ──[second click/Enter/Space]──▶ action executed → idle (or unmount)
|
|
confirming ──[5s timeout]──▶ idle
|
|
confirming ──[Escape]──▶ idle
|
|
confirming ──[click outside]──▶ idle
|
|
confirming ──[focus loss]──▶ idle
|
|
```
|
|
|
|
### ConfirmButton Props (Component Interface)
|
|
|
|
| Prop | Type | Required | Description |
|
|
|------|------|----------|-------------|
|
|
| onConfirm | () => void | yes | Callback executed on confirmed second activation |
|
|
| icon | ReactElement | yes | The default icon to display (e.g., X, Trash2) |
|
|
| label | string | yes | Accessible label for the button (used in aria-label and title) |
|
|
| className | string | no | Additional CSS classes passed through to the underlying button |
|
|
| disabled | boolean | no | When true, the button cannot enter confirm state |
|
|
|
|
**Notes**:
|
|
- No domain entities are created or modified by this feature.
|
|
- The confirm state is purely ephemeral — never persisted, never serialized.
|
|
- The component does not introduce any new domain types or application-layer changes.
|