Add buttons, menus and the rest of M3 Expressive's actions
tests / browser (firefox, firefox) (push) Successful in 1m54s
tests / browser (safari, webkit) (push) Successful in 2m17s
tests / lint (push) Successful in 59s
tests / feature (8.4) (push) Successful in 1m7s
tests / feature (8.5) (push) Successful in 1m0s
tests / browser (chrome, chromium) (push) Successful in 1m49s
tests / browser (firefox, firefox) (push) Successful in 1m54s
tests / browser (safari, webkit) (push) Successful in 2m17s
tests / lint (push) Successful in 59s
tests / feature (8.4) (push) Successful in 1m7s
tests / feature (8.5) (push) Successful in 1m0s
tests / browser (chrome, chromium) (push) Successful in 1m49s
<x-button> (label buttons, icon buttons and toggles in five sizes, with filled, tonal, outlined, elevated and text variants in any colour role), <x-tooltip>, <x-menu> with items, groups and separators, <x-button-group>, <x-group> as a connected button group, <x-split-button>, <x-fab>, <x-fab-menu> and <x-loading>. Sizes, colours and shapes come from androidx Compose Material 3's tokens; the loading indicator ports its Morph into SVG + SMIL. Menus follow WAI-ARIA's menu button pattern on popovers placed by CSS anchor positioning. Browser tests run in Chromium, Firefox and WebKit. The showcase fetches the icon names on demand: inlined, they tripped Pest's test server into HTTP 431s under Firefox. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
This commit is contained in:
co-authored by
Claude Opus 5
parent
b48e879254
commit
cd64f4f371
@@ -0,0 +1,43 @@
|
||||
<?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('bg-primary text-on-primary')
|
||||
->and((string) $this->blade('<x-split-button label="Save" variant="tonal"><x-menu-item label="Draft" /></x-split-button>'))->toContain('bg-secondary-container');
|
||||
});
|
||||
|
||||
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');
|
||||
});
|
||||
Reference in New Issue
Block a user