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

Draw the slider on M3's own specs table

Browse Source 
The md handle is 52px, not the 44 the MDC tokens gave it; the value
indicator is M3's 44x48 label container, not Flutter's 32px pill; and a
stop indicator, a tick and the inset icon now take the "on" colour of the
part of the track they sit on, which M3's nine colour roles spell out and
the library had inverted. Space held with an arrow moves by the same
large interval as PageUp, M3's "Space & Arrows" row.

Plan step 20, findings IN-04, IN-05, IN-06 and IN-24.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 05:55:41 +02:00
co-authored by Claude Fable 5.1
parent da4952e684
commit 66f9d36a37
4 changed files with 114 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/SliderTest.php
+10 -4
View File
@@ -36,6 +36,12 @@ it('draws the first frame on the server: the track split around the handle, and
->toMatch('/data-value-label\s+class="[^"]*opacity-0[^"]*"\s*>40<\/span>/');
});
it('draws M3\'s 44x48 value indicator and puts the stop on the inactive track', function () {
expect((string) $this->blade('<x-slider value="40" />'))
->toContain('flex h-11 min-w-12 origin-bottom')
->toMatch('/data-stop="end"[^>]*class="[^"]*bg-on-secondary-container/');
});
it('snaps and clamps the value to the step grid', function (string $template, string $value) {
expect((string) $this->blade($template))->toContain("value=\"{$value}\"");
})->with([
@@ -139,7 +145,7 @@ it('sizes the track and the handle by Expressive\'s tokens', function (string $s
})->with([
'xs' => ['xs', 'h-4', 'h-11 group-data-focused/thumb:h-9.5', 'h-12'],
'sm' => ['sm', 'h-6', 'h-11 group-data-focused/thumb:h-9.5', 'h-12'],
'md' => ['md', 'h-10', 'h-11 group-data-focused/thumb:h-9.5', 'h-12'],
'md' => ['md', 'h-10', 'h-13 group-data-focused/thumb:h-11.5', 'h-13'],
'lg' => ['lg', 'h-14', 'h-17 group-data-focused/thumb:h-15.5', 'h-17'],
'xl' => ['xl', 'h-24', 'h-27 group-data-focused/thumb:h-25.5', 'h-27'],
]);
@@ -148,7 +154,7 @@ it('insets an icon in the track from md, but not on a small, range or centred sl
expect((string) $this->blade('<x-slider size="md" icon="volume_up" value="60" />'))
->toContain('data-track-icon')
->toMatch('/data-track-icon\s+data-active/')
->toContain('text-primary data-active:text-secondary-container');
->toContain('text-on-secondary-container data-active:text-on-primary');
expect((string) $this->blade('<x-slider size="xl" icon="volume_up" value="2" />'))
->toMatch('/data-track-icon\s+class/')
@@ -172,7 +178,7 @@ it('marks every step when asked, and no more than 200 of them', function () {
expect(substr_count($html, 'data-tick="'))->toBe(11)
->and($html)->toContain('data-tick="0.5"')
->and($html)->toContain('bg-primary data-active:bg-secondary-container');
->and($html)->toContain('bg-on-secondary-container data-active:bg-on-primary');
expect((string) $this->blade('<x-slider ticks :max="1000" />'))->not->toContain('data-tick=')
->and((string) $this->blade('<x-slider ticks step="any" />'))->not->toContain('data-tick=')
@@ -184,7 +190,7 @@ it('shows the value label on drag, always, or never', function () {
expect((string) $this->blade('<x-slider value-label="always" value="30" />'))
->toContain('data-value-label')
->toContain('mt-9')
->toContain('mt-12')
->not->toContain('opacity-0 scale-75');
expect((string) $this->blade('<x-slider value-label="never" />'))->not->toContain('data-value-label');