Skip to content

Small buttons, filter chips and the view switch meet the 44px touch floor (spec 075, #316) - #332

Merged
plainprogrammer merged 24 commits into
mainfrom
075-small-controls-touch-floor
Nov 12, 2026
Merged

plainprogrammer merged 24 commits into
mainfrom
075-small-controls-touch-floor

Conversation

@plainprogrammer

Copy link
Copy Markdown
Owner

Closes #316

On a coarse pointer (a touch screen) the small buttons (.c-btn--sm), filter chips (.c-filter) and view-switch buttons (.c-seg button) were 40px, below the 44px every other control and every select reaches. They now reach the floor, and the icon-only ones are 44px wide too. A mouse sees no change (28px stays).

The ruling. Decision 1 of spec 075 (raise to 44px for all, or keep a reasoned exception for dense toolbars) was taken by the maintainer on 2026-11-11: option A, 44px for all, coarse pointer only. Measured before the spec (every coarse rule applied at 360px): no page overflows, no row gains a line, the collection's sticky filter bar grows 4px (173 to 177px), table rows on a phone grow about 4px each (the "…" trigger is 46px with its border, 42px before).

What changes

  • CSS: one block in additions.css (components.css is the export's file and is untouched): .c-btn--sm, .c-filter, .c-seg button { min-height: var(--touch-floor) } and .c-btn--sm.c-btn--icon, .c-seg button { min-width: var(--touch-floor) }, inside @media (pointer: coarse). Same specificity as the export's 40px rule, linked after it, so it wins by source order (a re-export restores the 40px lines and still loses). The five page rules that already gave their buttons 44px at every pointer (Locations, the Decks pages, the deck zone heads, number entry's list, the scanner's adds, undos and sitting) stay. Two comments that said "40px" are corrected.
  • Docs: the design system README's Touch rule (no exception now; where the rules live; add the page to the audit spec when you add a small control), one sentence each in Button, Chip, ViewSwitch, TableActions, BulkForm, Pager, AdminJobs, and the 40px sentences of FilterSelect and NumberEntry corrected. Spec 072 is frozen and unedited; the index records the supersession both ways.
  • Tests: a new system spec, spec/system/small_controls_touch_floor_spec.rb (21 examples), proves the rule's order, every small control of 16 audited places at 1280px and 360px (44px high, icon-only 44px wide), the fine pointer's 28px, no overflow or overlap at 360px, no row gaining a line, nothing else resizing, and three can-fail partners. CoarsePointer (spec/support/coarse_pointer.rb) gained inject_coarse and layout_report, hoisted from spec 072's file, with rules named by selector text and stylesheet, never by value. Two of spec 072's examples and one of deck_page_spec.rb are re-premised (they assumed a 40px small button).
  • No app code changed: git diff origin/main...HEAD -- app db config lib script is additions.css only (19 insertions, 5 deletions).

Verification

  • Targeted run (new file, spec 072's, the deck, proxy, card page, locations examples and design_system_files_spec): 129 examples, 0 failures; the new file alone is 21 examples, 0 failures after the review's additions. The red runs before the CSS are in the commit bodies.
  • bin/rubocop: no offenses; bin/yard doc: builds. The pre-push hook ran the full bin/ci and passed on 655af2fa.
  • Plan and spec each had two Opus read-only reviews; the implementation review (Mode B) is SPEC-ALIGNED WITH MINOR FINDINGS, all taken (verification.md).

Screenshots

Factory data, placeholder card images. Headless Firefox has a fine pointer, so these are not photographs of a touch screen: both columns apply every (pointer: coarse) rule of the shipped stylesheet in source order; "before" leaves out the new block (the small controls stay at the export's 40px), "after" applies it. 56 JPEGs (7 pages × light/dark × 1280px/360px × before/after) are in docs/specs/075-small-controls-touch-floor/screenshots/; a selection at 360px:

Before (40px) After (44px)
Collection filter bar and view switch, light
Bulk bar, dark
Admin jobs, state chips, dark
Collection table, row menus, light
Deck page, proxy row menu, dark

At 1280px (a coarse pointer on a tablet, both columns), the bulk bar's buttons go from 40px to 44px:

Before After

There is no workflow to record (a stylesheet rule); the static shots are the evidence.

Owed after merge

The plan's retirement (distill-feature state 1, housekeeping PR). Left out on purpose and named in the spec: the table's 20px checkboxes, the tab bar, inline text links and the avatar menu are other targets under 44px. spec/support/runtime_log.txt was not refreshed (the new file is heavy, about 60 page or frame loads per AC-1.5 example): refresh it only if the shard balance shows it.

🤖 Generated with Claude Code

plainprogrammer and others added 22 commits November 11, 2026 22:06
Draft 0.3.0 after two Opus spec review rounds: raise .c-btn--sm, .c-filter
and .c-seg button to the 44px floor on a coarse pointer, one block in
additions.css; decision 1 awaits the maintainer.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…or spec 075

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…ontrol AC-1.7 compares

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…uch-floor

# Conflicts:
#	docs/specs/README.md
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…ter (spec 075)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Red by design until Task 5's CSS block. bin/rspec spec/system/select_touch_floor_spec.rb spec/system/deck_page_spec.rb: 40 examples, 2 failures.
1) deck_page_spec AC-2.11: expected "var(--touch-floor)", got nil (no additions.css rule yet).
2) select_touch_floor_spec AC-1.7 can fail: expected [44, 90], got [40, 90] (Search button is 40px before the CSS).

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…the fine pointer (red)

Red run, bin/rspec spec/system/small_controls_touch_floor_spec.rb: 5 examples, 3 failures.
- AC-1.1 fails on the missing rule: one rule has the selector text '.c-btn--sm, .c-filter, .c-seg button' (components.css, 40px), not two, and no '.c-btn--sm.c-btn--icon, .c-seg button' rule exists.
- AC-1.2 at 1280px and at 360px fail on needs: the coarse-pointer rule [{sheet: "additions", selector: ".c-btn--sm, .c-filter, .c-seg button"}, ".c-btn--sm.c-btn--icon, .c-seg button"] is not in the loaded stylesheets (both named).
- AC-1.3 passes at 1280px and at 360px; it also asserts every control the audit table lists is drawn at a fine pointer, on all 16 pages (checked with a wrong text: it fails by naming the page).

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…can-fail partners (red)

Red run, bin/rspec spec/system/small_controls_touch_floor_spec.rb: 19 examples, 17 failures, 2 passes.
- Passes: AC-1.3 at 1280px and at 360px (the fine pointer, every listed control drawn).
- AC-1.1 fails on the missing rule (one rule with the selector text, not two; no '.c-btn--sm.c-btn--icon, .c-seg button' rule).
- 14 examples fail on needs, naming both missing rules ({sheet: "additions", selector: ".c-btn--sm, .c-filter, .c-seg button"} and ".c-btn--sm.c-btn--icon, .c-seg button"): AC-1.2 at both widths, AC-1.4, AC-1.5 at both widths, AC-1.6 at both widths, AC-1.7, the three can-fail partners (AC-1.7, AC-1.5, AC-1.2), row 16 (the status message's Undo), row 14b at both widths (candidate and printings frame, reached inside the 360px frame).
- 2 examples fail on needs naming the height rule: row 1 (a visitor's Sign in) at both widths.
Checked before commit with a throwaway copy that appended the block's two rules to every injection: the other 18 examples then pass, so none depends on anything but the block.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…arse pointer (spec 075, #316)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…ception (spec 075)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
… every listed control at 360px (spec 075 review)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…(spec 075 review)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…spec 075 review)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…x (spec 075 review)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…tirement owed

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…27 D4)

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
…sheet, per-control audit, plan snippets and the cops

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
@plainprogrammer
plainprogrammer marked this pull request as ready for review November 12, 2026 04:32
@plainprogrammer plainprogrammer self-assigned this Nov 12, 2026
@plainprogrammer
plainprogrammer merged commit 17103c2 into main Nov 12, 2026
9 checks passed
@plainprogrammer
plainprogrammer deleted the 075-small-controls-touch-floor branch November 12, 2026 12:35
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Small buttons, filter chips and the view switch meet the 44px touch floor

1 participant