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

Draw the paginators' live steps from the interaction classes

Browse Source 
Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14).
A prior pass on this same step had hand-rolled the page step's state
layer, focus ring and touch target to keep the views free of a class
list; the user's decision reverses that: a live step (a link or button,
never the current-page or disabled span) now renders md-state-layer,
md-focus-ring and md-touch-target, and pagination.css keeps only the
step's own size, colour and shape.

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 / reini
2026-09-14 18:12:05 +02:00
co-authored by Claude Opus 5
parent 7ff6928d4a
commit 627709b67d
4 changed files with 21 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/DataTest.php
+9 -12
View File
@@ -43,7 +43,7 @@ it('sorts by its column, ascending first and then flipping', function () {
->toContain('&quot;direction&quot;:&quot;asc&quot;');
});
it('gives the sort button and every page control a 48px target', function () {
it('gives the sort button and every page control a 48px target, from the foundation\'s classes', 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>'))
@@ -51,19 +51,13 @@ it('gives the sort button and every page control a 48px target', function () {
->toContain('--md-icon-size: 16px')
->not->toContain('data-md-active')
->and((string) $pages->links())
->toContain('<a href="/shares?page=4" data-md-pagination-step data-md-pagination-page aria-label="Go to page 4">')
->toContain('<a href="/shares?page=4" class="md-state-layer md-focus-ring md-touch-target" data-md-pagination-step data-md-pagination-page aria-label="Go to page 4">')
->and(ComponentStylesheet::read('pagination')->declarations('[data-md-pagination-step]'))->toMatchArray([
'width' => 'var(--md-sys-measurement-space500)',
'height' => 'var(--md-sys-measurement-space500)',
])
->and(ComponentStylesheet::read('pagination')->declarations(':is(a, button)[data-md-pagination-step]::after'))->toMatchArray([
'min-width' => 'var(--md-sys-measurement-space600)',
'min-height' => 'var(--md-sys-measurement-space600)',
])
->and(ComponentStylesheet::read('pagination')->declarations(':is(a, button)[data-md-pagination-step]:focus-visible'))->toBe([
'outline' => '3px solid var(--md-sys-color-secondary)',
'outline-offset' => '2px',
]);
->and(ComponentStylesheet::read('pagination')->has(':is(a, button)[data-md-pagination-step]::after'))->toBeFalse()
->and(ComponentStylesheet::read('pagination')->has(':is(a, button)[data-md-pagination-step]:focus-visible'))->toBeFalse();
});
it('draws Laravel\'s paginators in M3', function () {
@@ -73,12 +67,14 @@ it('draws Laravel\'s paginators in M3', function () {
->toContain('data-md-pagination')
->toContain('<span data-md-pagination-compact>Page 3 of 10</span>')
->toContain('<span data-md-pagination-range>21–30 of 95</span>')
// The current page is a plain span, not a live step: it carries no interaction class.
->toContain('<span aria-current="page" data-md-pagination-step data-md-pagination-page>3</span>')
->toContain('href="/shares?page=2" rel="prev"')
->toContain('aria-label="Go to page 4"')
->toContain('data-md-mirror-rtl')
->not->toContain('text-gray')
->not->toContain('class="');
// A live step (a link or a button) carries only the foundation's interaction classes.
->not->toMatch('/class="(?!md-state-layer md-focus-ring md-touch-target")/');
expect((string) (new Paginator(range(1, 11), 10, 2, ['path' => '/shares']))->links())
->toContain('data-md-pagination')
@@ -108,7 +104,8 @@ it('draws Livewire\'s paginators in M3, wired to its page actions', function ()
->toContain('wire:click="gotoPage(2, \'page\')"')
->toContain('wire:click="nextPage(\'page\')"')
->not->toContain('text-gray')
->not->toContain('class="');
// A live step (a link or a button) carries only the foundation's interaction classes.
->not->toMatch('/class="(?!md-state-layer md-focus-ring md-touch-target")/');
});
it('draws the sort header from its stylesheet, its arrow hidden until the column sorts or is hovered', function () {