From 3ab49004cf34e2fc60cfe5d9517a93b37f26b81b Mon Sep 17 00:00:00 2001 From: Chandler Copeland Date: Fri, 3 Apr 2026 16:07:45 -0600 Subject: [PATCH] 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) --- .../phases/16-multi-signer-ui/16-UI-SPEC.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/.planning/phases/16-multi-signer-ui/16-UI-SPEC.md b/.planning/phases/16-multi-signer-ui/16-UI-SPEC.md index 43938c4..7082f66 100644 --- a/.planning/phases/16-multi-signer-ui/16-UI-SPEC.md +++ b/.planning/phases/16-multi-signer-ui/16-UI-SPEC.md @@ -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) |