Repository navigation
Small buttons, filter chips and the view switch meet the 44px touch floor (spec 075, #316) - #332
Merged
Merged
Conversation
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
marked this pull request as ready for review
November 12, 2026 04:32
…uch-floor # Conflicts: # docs/design-system/README.md # docs/specs/README.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
additions.css(components.cssis 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.Button,Chip,ViewSwitch,TableActions,BulkForm,Pager,AdminJobs, and the 40px sentences ofFilterSelectandNumberEntrycorrected. Spec 072 is frozen and unedited; the index records the supersession both ways.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) gainedinject_coarseandlayout_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 ofdeck_page_spec.rbare re-premised (they assumed a 40px small button).git diff origin/main...HEAD -- app db config lib scriptisadditions.cssonly (19 insertions, 5 deletions).Verification
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 fullbin/ciand passed on655af2fa.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 indocs/specs/075-small-controls-touch-floor/screenshots/; a selection at 360px:At 1280px (a coarse pointer on a tablet, both columns), the bulk bar's buttons go from 40px to 44px:
There is no workflow to record (a stylesheet rule); the static shots are the evidence.
Owed after merge
The plan's retirement (
distill-featurestate 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.txtwas 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