ccopeland/red
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
.planning/phases/16-multi-signer-ui/16-UI-SPEC.md
View File

@@ -48,7 +48,7 @@ Exceptions:
- Colored signer dot: 8px × 8px circle (sm × sm) — consistent with existing badge geometry - 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) - 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 - 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`). 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 ] [ Signers section — NEW ]
label: "Signers" label: "Signers"
[ email input ] [ Add button ] [ email input ] [ Add Signer button ]
helper: "Each signer receives their own signing link." helper: "Each signer receives their own signing link."
[ signer list ] [ signer list ]
signer row: ● indigo dot email@example.com [×] 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:** **Signer Row spec:**
- Colored dot: 8px × 8px circle, `background: signerColor`, `border-radius: 50%`, `flex-shrink: 0` - Colored dot: 8px × 8px circle, `background: signerColor`, `border-radius: 50%`, `flex-shrink: 0`
- Email text: 14px regular, `color: #374151` (gray-700), `flex: 1`, `truncate` - 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 - 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: 6px between dot, email, and × button (`gap-1.5` ≈ 6px) - Row gap: `gap-2` (8px) between dot, email, and × button
- Row background: white with 1px `#E5E7EB` border, `border-radius: 0.375rem`, padding `6px 8px` - Row background: white with 1px `#E5E7EB` border, `border-radius: 0.375rem`, padding `py-1 px-2` (4px vertical, 8px horizontal)
**Email input spec:** **Email input spec:**
- Full-width text input, `border: 1px solid #D1D5DB`, `border-radius: 0.375rem`, `padding: 6px 8px`, `font-size: 0.875rem` - Full-width text input, `border: 1px solid #D1D5DB`, `border-radius: 0.375rem`, `padding: 6px 8px`, `font-size: 0.875rem`
- Placeholder: `"signer@example.com"` - Placeholder: `"signer@example.com"`
- Inline with "Add" button: flex row, `gap: 8px` - Inline with "Add Signer" button: flex row, `gap: 8px`
**Add button spec:** **Add Signer button spec:**
- Label: "Add" - 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` - 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 - 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 ### Signer Add Flow
1. Agent types email in signer input 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 3. Input validates: non-empty, valid email format, not duplicate
4. On valid: signer appended to list with auto-assigned color, input cleared 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) 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) | | Primary CTA | "Prepare and Send" (existing — unchanged) |
| Signer section label | "Signers" | | Signer section label | "Signers" |
| Signer input placeholder | "signer@example.com" | | 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." | | Signer helper text | "Each signer receives their own signing link." |
| Active signer dropdown label | "Active signer:" | | 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) | | Empty signer list (no signers added) | "No signers added yet." (shown as placeholder row in muted text, OR omitted entirely — planner decides) |