Andreas Reinhold / reiniandClaude Opus 5
4ad257034e
Plan step 36. <x-button> renders data-md-button with its variant, colour, size, shape, icon-button width, selected state and compact FAB as data-md-* attributes, and passes the glyph's size to <x-icon>. button.css draws Button*Tokens' geometry per size, the colour roles through custom properties that the disabled treatment replaces, the state layer, focus ring and 48px target, and the compact FAB below 600px. Its corner rules carry no specificity (:where), so a group's stylesheet reshapes the buttons inside it with any selector; the split button no longer passes an empty corners prop, which is gone. data-icon-button becomes data-md-icon-button, also in groups.css, toolbar.css and theme-toggle's own button (navigation group), and the AppBarTest assertions follow the new hooks. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
44 lines
1.9 KiB
PHP
44 lines
1.9 KiB
PHP
<?php
|
|
|
|
it('puts the action on the leading button and the menu on the trailing one', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-split-button label="Download all" icon="download" wire:click="downloadZip" menu-label="Download options" class="mt-4">
|
|
<x-menu-item label="As a ZIP" />
|
|
</x-split-button>
|
|
BLADE);
|
|
|
|
expect($html)
|
|
->toContain('data-button-group="split"')
|
|
->toContain('mt-4')
|
|
->toContain('data-split="leading"')
|
|
->toContain('wire:click="downloadZip"')
|
|
->toContain('data-split="trailing"')
|
|
->toContain('aria-label="Download options"')
|
|
->toContain('role="menu"')
|
|
->toContain('As a ZIP')
|
|
->and(substr_count($html, 'wire:click="downloadZip"'))->toBe(1);
|
|
});
|
|
|
|
it('leaves the corners to the group', function () {
|
|
$html = (string) $this->blade('<x-split-button label="Save"><x-menu-item label="Draft" /></x-split-button>');
|
|
|
|
preg_match_all('/<button\b[^>]*data-split="[^"]*"[^>]*>/', $html, $halves);
|
|
|
|
expect($halves[0])->toHaveCount(2);
|
|
|
|
foreach ($halves[0] as $half) {
|
|
expect($half)->not->toContain('rounded-corner-full')->not->toContain('active:rounded-corner');
|
|
}
|
|
});
|
|
|
|
it('is filled unless another container variant is asked for', function () {
|
|
expect((string) $this->blade('<x-split-button label="Save" variant="text"><x-menu-item label="Draft" /></x-split-button>'))->toContain('data-md-variant="filled"')->not->toContain('data-md-variant="text"')
|
|
->and((string) $this->blade('<x-split-button label="Save" variant="tonal"><x-menu-item label="Draft" /></x-split-button>'))->toContain('data-md-variant="tonal"');
|
|
});
|
|
|
|
it('gives the two smallest sizes their narrower inner padding and 48px trailing button', function () {
|
|
expect((string) $this->blade('<x-split-button label="Save" size="xs"><x-menu-item label="Draft" /></x-split-button>'))
|
|
->toContain('pe-2.5')
|
|
->toContain('w-12');
|
|
});
|