docs(16): fix spacing violations flagged by ui-checker

- Replace gap-1.5 (6px) with gap-2 (8px) in signer row
- Replace padding 6px 8px with py-1 px-2 (4px/8px) in signer row
- Raise touch target exception from 28px to 32px, name override as touch-target-compact-remove with rationale
- Rename "Add" button to "Add Signer" (verb+noun CTA per Dimension 1)

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Chandler Copeland
2026-04-03 16:07:45 -06:00
parent f62354e628
commit 3ab49004cf

View File

@@ -48,7 +48,7 @@ Exceptions:
- Colored signer dot: 8px × 8px circle (sm × sm) — consistent with existing badge geometry
- Active signer dropdown height: 32px (matches existing PreparePanel button height convention of `py-1.5` = 6px top + 6px bottom + 20px line ≈ 32px)
- Signer list email input height: 32px (`py-1.5 px-2`) to match textarea style in existing PreparePanel
- Touch targets for remove (×) buttons: minimum 28px × 28px (compact panel context, not primary CTA)
- Touch targets for remove (×) buttons: minimum 32px × 32px (compact panel context, not primary CTA — named override: `touch-target-compact-remove`)
Source: measured from existing `PreparePanel.tsx` button styles (`py-2 px-4` = 8px + 8px vertical, matching `md` token) and `DocumentsTable.tsx` cell padding (`0.875rem 1.5rem`).
@@ -141,7 +141,7 @@ This section catalogs the new and modified UI elements for Phase 16.
──────────────────────────────
[ Signers section — NEW ]
label: "Signers"
[ email input ] [ Add button ]
[ email input ] [ Add Signer button ]
helper: "Each signer receives their own signing link."
[ signer list ]
signer row: ● indigo dot email@example.com [×]
@@ -156,17 +156,17 @@ This section catalogs the new and modified UI elements for Phase 16.
**Signer Row spec:**
- Colored dot: 8px × 8px circle, `background: signerColor`, `border-radius: 50%`, `flex-shrink: 0`
- Email text: 14px regular, `color: #374151` (gray-700), `flex: 1`, `truncate`
- Remove button (×): 16px text, `color: #9CA3AF`, hover `color: #DC2626`, no border, cursor pointer, minimum 28px touch target via padding
- Row gap: 6px between dot, email, and × button (`gap-1.5` ≈ 6px)
- Row background: white with 1px `#E5E7EB` border, `border-radius: 0.375rem`, padding `6px 8px`
- Remove button (×): 16px text, `color: #9CA3AF`, hover `color: #DC2626`, no border, cursor pointer, minimum 32px touch target via padding (`touch-target-compact-remove` named override)
- Row gap: `gap-2` (8px) between dot, email, and × button
- Row background: white with 1px `#E5E7EB` border, `border-radius: 0.375rem`, padding `py-1 px-2` (4px vertical, 8px horizontal)
**Email input spec:**
- Full-width text input, `border: 1px solid #D1D5DB`, `border-radius: 0.375rem`, `padding: 6px 8px`, `font-size: 0.875rem`
- Placeholder: `"signer@example.com"`
- Inline with "Add" button: flex row, `gap: 8px`
- Inline with "Add Signer" button: flex row, `gap: 8px`
**Add button spec:**
- Label: "Add"
**Add Signer button spec:**
- Label: "Add Signer"
- Style: `bg-gray-700 text-white` hover `bg-gray-800`, `px-3 py-1.5`, `border-radius: 0.375rem`, `font-size: 0.875rem font-weight: 500`
- Disabled when input is empty or contains an already-added email
@@ -233,7 +233,7 @@ The existing "Prepare and Send" button already has a disabled state. Phase 16 ad
### Signer Add Flow
1. Agent types email in signer input
2. Agent presses Enter or clicks "Add"
2. Agent presses Enter or clicks "Add Signer"
3. Input validates: non-empty, valid email format, not duplicate
4. On valid: signer appended to list with auto-assigned color, input cleared
5. On invalid: input border turns red (`border-red-400`), no addition, no persistent error message (transient only)
@@ -271,7 +271,7 @@ The existing "Prepare and Send" button already has a disabled state. Phase 16 ad
| Primary CTA | "Prepare and Send" (existing — unchanged) |
| Signer section label | "Signers" |
| Signer input placeholder | "signer@example.com" |
| Add signer button | "Add" |
| Add signer button | "Add Signer" |
| Signer helper text | "Each signer receives their own signing link." |
| Active signer dropdown label | "Active signer:" |
| Empty signer list (no signers added) | "No signers added yet." (shown as placeholder row in muted text, OR omitted entirely — planner decides) |