Andreas Reinhold / reiniandClaude Opus 5
07e008d942
A sticky toast stays until it is dismissed or its action pressed, for a
question that must be answered ("A new version is ready" with Reload).
It is kept aside rather than queued, so it never holds up ordinary
toasts: one that arrives while it shows takes its place, and the sticky
toast comes back once the queue is empty. One is kept at a time; a newer
sticky toast replaces it. Every other toast keeps today's queue.
An action's `event` names a window event dispatched when it is pressed,
beside `handler`, for toasts whose detail cannot carry a function. The
snackbar now closes before either runs, so a toast they show is not the
one dismissed.
`data-toast` and `data-toast-action` give applications stable hooks for
their tests.
The queue now forgets a cleared timer in next(): a toast dismissed by a
click that neither hovered nor focused it first, as a screen reader
activates a button, left its timer running and cut the next toast short.
The showcase's snackbar buttons had no Alpine scope and did nothing; they
are wrapped in one, with a sticky example.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
24 lines
787 B
PHP
24 lines
787 B
PHP
<?php
|
|
|
|
it('hosts the snackbar queue, kept across wire:navigate', function () {
|
|
$html = (string) $this->blade('<x-toast />');
|
|
|
|
expect($html)
|
|
->toContain('x-persist="material-toast"')
|
|
->toContain('x-data="materialSnackbar"')
|
|
->toContain('bg-inverse-surface')
|
|
->toContain('justify-center');
|
|
});
|
|
|
|
it('can sit at the start', function () {
|
|
expect((string) $this->blade('<x-toast position="bottom-start" />'))->toContain('justify-start');
|
|
});
|
|
|
|
it('marks the snackbar and its action for tests and styling', function () {
|
|
$html = (string) $this->blade('<x-toast />');
|
|
|
|
expect($html)
|
|
->toMatch('/<div\s[^>]*\bdata-toast\b[^>]*aria-live="polite"/')
|
|
->toMatch('/<button\s[^>]*\bdata-toast-action\b[^>]*x-on:click="act\(\)"/');
|
|
});
|