Give a connected segment M3's 48px target and width
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:
co-authored by
Claude Opus 5
parent
c1ca157341
commit
e4de067350
@@ -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 () {
|
||||
|
||||
Reference in New Issue
Block a user