Andreas Reinhold / reiniandClaude Fable 5.1
42d62ed00c
Density was applied to every fine-pointer device with no way out, which M3 forbids outright: "don't apply density by default; offer an explicit density opt-in instead, keeping opt-out targets at >= 48x48 CSS px". A row is now 52px and `dense` is a prop that tightens it to 36. The row divider also takes outline-variant itself rather than 60% of it, since M3 keeps opacity for state layers and disabled. Plan step 20, findings IN-16 and IN-30. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
83 lines
3.9 KiB
PHP
83 lines
3.9 KiB
PHP
<?php
|
||
|
||
use Illuminate\Pagination\LengthAwarePaginator;
|
||
use Illuminate\Pagination\Paginator;
|
||
use Livewire\Component;
|
||
use Livewire\Livewire;
|
||
use Livewire\WithPagination;
|
||
|
||
it('marks a table for its styles and takes a size', function () {
|
||
expect((string) $this->blade('<x-table class="min-w-160"><tbody><tr><td>a</td></tr></tbody></x-table>'))
|
||
->toContain('<table data-table data-size="sm" class="min-w-160">')
|
||
->and((string) $this->blade('<x-table size="xs" />'))->toContain('data-size="xs"')
|
||
->and((string) $this->blade('<x-table size="huge" />'))->toContain('data-size="sm"');
|
||
});
|
||
|
||
it('tightens a table only when the caller asks for it', function () {
|
||
expect((string) $this->blade('<x-table />'))->not->toContain('data-dense')
|
||
->and((string) $this->blade('<x-table dense />'))->toContain('data-dense');
|
||
});
|
||
|
||
it('sorts by its column, ascending first and then flipping', function () {
|
||
expect((string) $this->blade('<x-sort-header column="size" :sort-by="[\'column\' => \'name\', \'direction\' => \'asc\']">Size</x-sort-header>'))
|
||
->not->toContain('aria-sort')
|
||
->toContain('wire:click="$set(\'sortBy\', {"column":"size","direction":"asc"})"')
|
||
->and((string) $this->blade('<x-sort-header column="size" model="order" :sort-by="[\'column\' => \'size\', \'direction\' => \'asc\']" class="text-end">Size</x-sort-header>'))
|
||
->toContain('aria-sort="ascending"')
|
||
->toContain('class="text-end"')
|
||
->toContain('$set(\'order\', {"column":"size","direction":"desc"})')
|
||
->and((string) $this->blade('<x-sort-header column="size" :sort-by="[\'column\' => \'size\', \'direction\' => \'desc\']">Size</x-sort-header>'))
|
||
->toContain('aria-sort="descending"')
|
||
->toContain('"direction":"asc"');
|
||
});
|
||
|
||
it('gives the sort button and every page control a 48px target', function () {
|
||
$pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']);
|
||
|
||
expect((string) $this->blade('<x-sort-header column="size" :sort-by="[]">Size</x-sort-header>'))
|
||
->toContain('touch-target')
|
||
->and((string) $pages->links())
|
||
->toContain('state-layer focus-ring touch-target');
|
||
});
|
||
|
||
it('draws Laravel\'s paginators in M3', function () {
|
||
$pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']);
|
||
|
||
expect((string) $pages->links())
|
||
->toContain('data-pagination')
|
||
->toContain('Page 3 of 10')
|
||
->toContain('21–30 of 95')
|
||
->toContain('<span aria-current="page" class="grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums bg-secondary-container text-on-secondary-container max-medium:hidden">3</span>')
|
||
->toContain('href="/shares?page=2" rel="prev"')
|
||
->toContain('aria-label="Go to page 4"')
|
||
->not->toContain('text-gray');
|
||
|
||
expect((string) (new Paginator(range(1, 11), 10, 2, ['path' => '/shares']))->links())
|
||
->toContain('data-pagination')
|
||
->toContain('href="/shares?page=1"')
|
||
->toContain('href="/shares?page=3"')
|
||
->toContain('Previous');
|
||
});
|
||
|
||
it('draws Livewire\'s paginators in M3, wired to its page actions', function () {
|
||
Livewire::component('paging-probe', new class extends Component
|
||
{
|
||
use WithPagination;
|
||
|
||
public function render(): string
|
||
{
|
||
return <<<'BLADE'
|
||
<div>
|
||
{{ (new \Illuminate\Pagination\LengthAwarePaginator(range(1, 10), 95, 10, $this->getPage(), ['path' => '/'])) ->links() }}
|
||
</div>
|
||
BLADE;
|
||
}
|
||
});
|
||
|
||
expect(Livewire::test('paging-probe')->html())
|
||
->toContain('data-pagination')
|
||
->toContain('wire:click="gotoPage(2, \'page\')"')
|
||
->toContain('wire:click="nextPage(\'page\')"')
|
||
->not->toContain('text-gray');
|
||
});
|