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

Draw the alert without Tailwind

Browse Source 
Plan step 36 (actions). <x-alert> renders data-md-alert with
data-md-color and data-md-alert-content/-title/-description/-actions/
-dismiss; no class list. alert.css draws the state's tinted container
colour across all eight colours, the medium corner, and the dismiss
button reaching M3's 48px target from its 40px (ACT-18) with its own
state layer, focus ring and touch target. AlertTest is rewritten on
the hooks and ComponentStylesheet.

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 16:48:37 +02:00
co-authored by Claude Opus 5
parent 15cd306aba
commit 05c3b968ba
5 changed files with 209 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/AlertTest.php
+38 -5
View File
@@ -1,23 +1,34 @@
<?php
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
it('states a notice in its state\'s container, with the state\'s icon', function () {
$html = (string) $this->blade('<x-alert title="Storage almost full" description="3.8 of 4 GB" color="warning" />');
expect($html)
->toContain('role="status"')
->toContain('bg-warning-container text-on-warning-container')
->toContain('data-md-alert')
->toContain('data-md-color="warning"')
->toContain('Storage almost full')
->toContain('3.8 of 4 GB')
->toContain('<svg');
->toContain('<svg')
->and(ComponentStylesheet::read('alert')->declarations("[data-md-alert][data-md-color='warning']"))->toBe([
'background-color' => 'var(--md-sys-color-warning-container)',
'color' => 'var(--md-sys-color-on-warning-container)',
]);
});
it('is a status whatever its colour, and interrupts only when asked to', function () {
expect((string) $this->blade('<x-alert description="Saved." tone="success" />'))->toContain('role="status"')->toContain('bg-success-container')
->and((string) $this->blade('<x-alert description="Heads up." />'))->toContain('role="status"')->toContain('bg-info-container')
expect((string) $this->blade('<x-alert description="Saved." tone="success" />'))->toContain('role="status"')->toContain('data-md-color="success"')
->and((string) $this->blade('<x-alert description="Heads up." />'))->toContain('role="status"')->toContain('data-md-color="info"')
->and((string) $this->blade('<x-alert description="Broken." color="error" />'))->toContain('role="status"')
->and((string) $this->blade('<x-alert description="Broken." color="error" assertive />'))->toContain('role="alert"');
});
it('falls back to info for an unknown colour', function () {
expect((string) $this->blade('<x-alert description="Odd." color="purple" />'))->toContain('data-md-color="info"');
});
it('takes actions, drops its icon on request, and can be dismissed', function () {
$html = (string) $this->blade(<<<'BLADE'
<x-alert :icon="false" dismissible>
@@ -28,9 +39,31 @@ it('takes actions, drops its icon on request, and can be dismissed', function ()
expect($html)
->toContain('The connection dropped.')
->toContain('data-md-alert-actions')
->toContain('Try again')
->toContain('x-data="{ shown: true }"')
->toContain('data-md-alert-dismiss')
->toContain('aria-label="Dismiss"')
->toContain('touch-target')
->and(substr_count($html, '<svg'))->toBe(1);
});
it('reaches 48px from its 40px dismiss button', 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)',
]);
});
it('draws neutral in surface-container-high, on-surface', function () {
expect((string) $this->blade('<x-alert description="Draft." color="neutral" />'))->toContain('data-md-color="neutral"')
->and(ComponentStylesheet::read('alert')->declarations("[data-md-alert][data-md-color='neutral']"))->toBe([
'background-color' => 'var(--md-sys-color-surface-container-high)',
'color' => 'var(--md-sys-color-on-surface)',
]);
});