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

Give a connected segment M3's 48px target and width

Browse Source 
An <x-group> segment is a plain label, 32px or 40px tall, with nothing reaching
past it, and nothing gave a connected <x-button-group> its 48dp minimum width
either — both numbers M3 names and tells you not to reduce. The segment now
carries the shared `touch-target` utility and a 48px floor, and groups.css puts
the floor on the buttons a caller nests in a connected group. <x-button> drops
its hand-rolled ::after for the same utility. Plan step 11, actions.md ACT-05.

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
2026-09-14 05:56:52 +02:00
co-authored by Claude Opus 5
parent c1ca157341
commit e4de067350
5 changed files with 34 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/ButtonGroupTest.php
+10
View File
@@ -46,6 +46,16 @@ it('draws a choice as connected radios', function () {
->and(substr_count($html, '<svg'))->toBe(1);
});
it('keeps a 48px target and a 48px minimum width on the smallest connected segments', function () {
$options = [['id' => 'a', 'name' => 'A']];
expect((string) $this->blade('<x-group size="sm" name="x" :$options />', ['options' => $options]))
->toContain('touch-target min-w-12')
->and((string) $this->blade('<x-group size="md" name="x" :$options />', ['options' => $options]))
->not->toContain('touch-target')
->toContain('min-w-0');
});
it('draws several choices as checkboxes', function () {
expect((string) $this->blade('<x-group name="days" multiple variant="outlined" :options="[[\'id\' => \'mon\', \'name\' => \'Mon\']]" />'))
->toContain('type="checkbox"')
tests/Feature/Components/ButtonTest.php
+2 -2
View File
@@ -63,8 +63,8 @@ it('rounds by default, squares on request, and squares off further while pressed
});
it('reaches a 48px touch target below the medium size', function () {
expect(buttonClasses('<x-button label="Go" size="sm" />'))->toContain('after:min-h-12')
->and(buttonClasses('<x-button label="Go" size="md" />'))->not->toContain('after:min-h-12');
expect(buttonClasses('<x-button label="Go" size="sm" />'))->toContain('touch-target')
->and(buttonClasses('<x-button label="Go" size="md" />'))->not->toContain('touch-target');
});
it('is an icon button named by its tooltip when it has no label', function () {