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

Draw the alert's dismiss button from the interaction classes

Browse Source 
Plan step 36 ("Interaction is the shared classes", the user, 2026-09-14).
The dismiss button hand-rolled md-state-layer, md-focus-ring and
md-touch-target, and alert.css's own header said so; it now renders the
classes and keeps only its own size, offset and colour.

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:10:26 +02:00
co-authored by Claude Opus 5
parent 480387a64e
commit 7ff6928d4a
3 changed files with 11 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/AlertTest.php
+5 -5
View File
@@ -47,17 +47,17 @@ it('takes actions, drops its icon on request, and can be dismissed', function ()
->and(substr_count($html, '<svg'))->toBe(1);
});
it('reaches 48px from its 40px dismiss button', function () {
it('reaches 48px from its 40px dismiss button, from the foundation\'s class, not a copy', function () {
$css = ComponentStylesheet::read('alert');
expect($css->declarations('[data-md-alert-dismiss]'))->toMatchArray([
'width' => 'var(--md-sys-measurement-space500)',
'height' => 'var(--md-sys-measurement-space500)',
])
->and($css->declarations('[data-md-alert-dismiss]::after'))->toMatchArray([
'min-width' => 'var(--md-sys-measurement-space600)',
'min-height' => 'var(--md-sys-measurement-space600)',
]);
->and($css->has('[data-md-alert-dismiss]::after'))->toBeFalse()
->and($css->has('[data-md-alert-dismiss]::before'))->toBeFalse()
->and((string) $this->blade('<x-alert description="Draft." dismissible />'))
->toMatch('/class="md-state-layer md-focus-ring md-touch-target" data-md-alert-dismiss/');
});
it('draws neutral in surface-container-high, on-surface', function () {