noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give the bottom sheet's drag handle a 48dp target

Browse Source 
Plan step 12, containment.md C-01. The handle button was 32x4px: the
padding that makes M3's 48dp hit target sat on the wrapper, which is not
the control. `touch-target` on the button and 22px above and below it —
SheetDefaults.kt's DragHandleVerticalPadding — make the pressed area
48x48 while the handle is still drawn 32x4.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 05:53:46 +02:00
co-authored by Claude Opus 5
parent 0adfb6fff4
commit f02fa1a78d
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/bottom-sheet.blade.php
+7 -3
View File
@@ -9,7 +9,11 @@
SheetBottomTokens (androidx Compose Material 3, Apache-2.0): surface-container-low, extra-large SheetBottomTokens (androidx Compose Material 3, Apache-2.0): surface-container-low, extra-large
top corners, elevation 1, a 32×4px drag handle in on-surface-variant; 640px wide at most, centred top corners, elevation 1, a 32×4px drag handle in on-surface-variant; 640px wide at most, centred
on a wide screen; it rises on emphasized decelerate. `title` and `actions` as on a dialog. on a wide screen; it rises on emphasized decelerate. `title` and `actions` as on a dialog.
`height` caps it (default: 90% of the screen); content scrolls inside. --}} `height` caps it (default: 90% of the screen); content scrolls inside.
The handle is drawn 32×4px and pressed 48×48: `touch-target` on the button and 22px above and
below it, which is M3's "drag handle has an accessible 48dp hit target" and SheetDefaults.kt's
`DragHandleVerticalPadding = 22.dp` (docs/reference/m3/components-actions-communication-containment.md § Bottom sheets → Specs). --}}
@props([ @props([
'title' => null, 'title' => null,
@@ -56,8 +60,8 @@
$attributes->get('class'), $attributes->get('class'),
]) }} ]) }}
> >
<div class="flex shrink-0 cursor-grab justify-center py-4 active:cursor-grabbing" data-drag-handle> <div class="flex shrink-0 cursor-grab justify-center py-5.5 active:cursor-grabbing" data-drag-handle>
<button type="button" class="h-1 w-8 rounded-corner-full bg-on-surface-variant/40 outline-offset-4 focus-visible:outline-3 focus-visible:outline-secondary" aria-label="{{ __('Close') }}" x-on:click="close()"></button> <button type="button" class="touch-target h-1 w-8 rounded-corner-full bg-on-surface-variant/40 outline-offset-4 focus-visible:outline-3 focus-visible:outline-secondary" aria-label="{{ __('Close') }}" x-on:click="close()"></button>
</div> </div>
<div x-ref="body" class="min-h-0 flex-1 overflow-y-auto px-6 pb-6"> <div x-ref="body" class="min-h-0 flex-1 overflow-y-auto px-6 pb-6">
tests/Feature/Components/OverlayTest.php
+2
View File
@@ -86,6 +86,8 @@ it('draws a modal bottom sheet with a drag handle, or a standard one without a s
->toContain('rounded-t-corner-xl bg-surface-container-low') ->toContain('rounded-t-corner-xl bg-surface-container-low')
->toContain('data-drag-handle') ->toContain('data-drag-handle')
->toContain('aria-modal="true"') ->toContain('aria-modal="true"')
->toContain('py-5.5')
->toContain('touch-target h-1 w-8')
->and((string) $this->blade('<x-bottom-sheet standard>Body</x-bottom-sheet>')) ->and((string) $this->blade('<x-bottom-sheet standard>Body</x-bottom-sheet>'))
->toContain('...materialBottomSheet(true)') ->toContain('...materialBottomSheet(true)')
->not->toContain('bg-scrim/32') ->not->toContain('bg-scrim/32')