Andreas Reinhold / reiniandClaude Opus 5
889f8a8aa1
tests / lint (push) Has been cancelled
tests / feature (8.4) (push) Has been cancelled
tests / feature (8.5) (push) Has been cancelled
tests / browser (chrome, chromium) (push) Has been cancelled
tests / browser (firefox, firefox) (push) Has been cancelled
tests / browser (safari, webkit) (push) Has been cancelled
The showcase is now an overview and one page per section behind a grouped navigation rail, moved between with wire:navigate, instead of one long page under a scrolling top bar. The switch exposed a WebKit bug in the menu: inside a focusable region, WebKit moves focus out of the closing popover before its toggle event, so Escape no longer returned focus to the trigger. The menu now reads it on beforetoggle. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01V9NnLxnPp8vaaurb3Z1MFy
59 lines
2.3 KiB
PHP
59 lines
2.3 KiB
PHP
<?php
|
|
|
|
/**
|
|
* The theme <html> shows. A bare `html` selector would be read as text to search for.
|
|
*/
|
|
function theme(string $attribute, string $value): string
|
|
{
|
|
return "document.documentElement.getAttribute('{$attribute}') === '{$value}'";
|
|
}
|
|
|
|
it('follows the operating system while the visitor has not chosen', function () {
|
|
visit('/material')->inDarkMode()
|
|
->assertScript(theme('data-theme', 'dark'))
|
|
->assertScript(theme('data-theme-choice', 'system'))
|
|
->assertNoJavaScriptErrors();
|
|
|
|
visit('/material')->inLightMode()
|
|
->assertScript(theme('data-theme', 'light'));
|
|
});
|
|
|
|
it('keeps the visitor\'s choice over the operating system', function () {
|
|
// The theme switch waits for Alpine (x-cloak); a press before then would find nothing to press.
|
|
$page = visit('/material')->inDarkMode()
|
|
->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'")
|
|
->assertScript(theme('data-theme', 'dark'));
|
|
|
|
$page->click('[data-theme-option="light"]')
|
|
->assertScript(theme('data-theme', 'light'))
|
|
->assertAttribute('[data-theme-option="light"]', 'aria-checked', 'true')
|
|
->assertScript("localStorage.getItem('material-theme') === 'light'");
|
|
|
|
$page->refresh()
|
|
->assertScript(theme('data-theme', 'light'))
|
|
->assertScript(theme('data-theme-choice', 'light'));
|
|
});
|
|
|
|
it('adopts an earlier toggle\'s choice once', function () {
|
|
config(['livewire-material.theme.legacy_keys' => ['mary-theme']]);
|
|
|
|
$page = visit('/material')->inLightMode()
|
|
->assertScript(theme('data-theme', 'light'));
|
|
|
|
$page->script("localStorage.setItem('mary-theme', JSON.stringify('dark'))");
|
|
|
|
$page->refresh()
|
|
->assertScript(theme('data-theme', 'dark'))
|
|
->assertScript("localStorage.getItem('mary-theme') === null")
|
|
->assertScript("localStorage.getItem('material-theme') === 'dark'");
|
|
});
|
|
|
|
it('repaints a section that sets its own theme', function () {
|
|
$swatch = fn (int $index): string => "getComputedStyle(document.querySelectorAll('#colour [data-theme] .bg-primary')[{$index}]).backgroundColor";
|
|
|
|
visit('/material/colour')->inLightMode()
|
|
->assertScript(theme('data-theme', 'light'))
|
|
->assertScript("{$swatch(0)} !== {$swatch(1)}");
|
|
});
|