Andreas Reinhold / reiniandClaude Sonnet 5
bc284b2b33
Plan step 36 (navigation group, third batch, last component):
<x-scheme-picker>'s class lists move into resources/css/components/
scheme-picker.css, keyed on data-md-scheme-picker (its legend and
options grid, 2 columns below medium and 4 from it) and
data-md-scheme-picker-option, whose radio inside is read with :has()
for the chosen and the focus states — the input, not the label, is
the real control and carries the ring group.css's own segments keep
the same refinement for. `dark:bg-(--swatch-dark)` becomes
[data-theme='dark'] on the swatch (theme.css's own dark custom
variant reduces to a plain descendant selector here, since the
swatch never carries data-theme itself); the profile's name keeps its
label-large type as a text class on the view, since it is the
caller's own prose.
Hooks renamed: data-scheme-picker to data-md-scheme-picker,
data-scheme-option to data-md-scheme-picker-option, updated in
SchemePickerTest.php and tests/Browser/{ThemeTest,ColourProfilesTest}.php.
Browser tests added (docs/plans/material-3-browser-tests.md): the
contrast switch repaints at once and survives a wire:navigate, and
prefers-contrast: more picks high (Playwright's contrast context
option, the same shape as the existing reducedMotion tests).
This is the last navigation-group component off Tailwind. Every
package component is now drawn without Tailwind; tailwind.css keeps
only tokens/theme.css and tokens/utilities.css, which the showcase
still needs until step 38.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
89 lines
3.8 KiB
PHP
89 lines
3.8 KiB
PHP
<?php
|
|
|
|
use NoNameWeb\LivewireMaterial\Support\Scheme;
|
|
|
|
use function Orchestra\Testbench\workbench_path;
|
|
|
|
/*
|
|
* The Workbench's three profiles (baseline, teal, rose), generated into its stylesheet. Tests other
|
|
* than these run without profiles, so each one here points the package at the scheme file.
|
|
*/
|
|
|
|
beforeEach(function () {
|
|
config(['livewire-material.scheme' => workbench_path('resources/css/material-scheme.json')]);
|
|
|
|
$this->profiles = json_decode(file_get_contents(workbench_path('resources/css/material-scheme.json')), true)['profiles'];
|
|
});
|
|
|
|
afterEach(function () {
|
|
Scheme::resolveProfileUsing(null);
|
|
});
|
|
|
|
/**
|
|
* A #rrggbb hex as the rgb() a computed style reports.
|
|
*/
|
|
function rgb(string $hex): string
|
|
{
|
|
[$red, $green, $blue] = sscanf($hex, '#%02x%02x%02x');
|
|
|
|
return "rgb({$red}, {$green}, {$blue})";
|
|
}
|
|
|
|
/**
|
|
* The page's primary colour role, as <html> resolves it.
|
|
*/
|
|
function pagePrimary(): string
|
|
{
|
|
return "getComputedStyle(document.documentElement).getPropertyValue('--md-sys-color-primary').trim()";
|
|
}
|
|
|
|
function profilesReady(mixed $page): mixed
|
|
{
|
|
return $page->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
it('draws each profile in light and dark, and the default without the attribute', function () {
|
|
$page = profilesReady(visit('/material/colour')->inLightMode())
|
|
->assertScript("document.documentElement.getAttribute('data-scheme') === 'baseline'")
|
|
->assertScript(pagePrimary()." === '{$this->profiles['baseline']['light']['primary']}'");
|
|
|
|
$page->script("document.documentElement.setAttribute('data-scheme', 'teal')");
|
|
$page->assertScript(pagePrimary()." === '{$this->profiles['teal']['light']['primary']}'");
|
|
|
|
$page->script("document.documentElement.setAttribute('data-theme', 'dark')");
|
|
$page->assertScript(pagePrimary()." === '{$this->profiles['teal']['dark']['primary']}'")
|
|
// A panel that sets its own theme keeps the page's profile.
|
|
->assertScript("getComputedStyle(document.querySelector('#colour [data-theme=\"light\"] .bg-primary')).backgroundColor === '".rgb($this->profiles['teal']['light']['primary'])."'");
|
|
|
|
$page->script("document.documentElement.removeAttribute('data-scheme')");
|
|
$page->assertScript(pagePrimary()." === '{$this->profiles['baseline']['dark']['primary']}'")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('previews a profile from the picker and the showcase menu, and keeps it through wire:navigate', function () {
|
|
$page = profilesReady(visit('/material/colour')->inLightMode());
|
|
|
|
$page->click('#colour [data-md-scheme-picker-option="rose"]')
|
|
->assertScript("document.documentElement.getAttribute('data-scheme') === 'rose'")
|
|
->assertScript(pagePrimary()." === '{$this->profiles['rose']['light']['primary']}'")
|
|
->assertScript("window.eval(\"Alpine.store('theme').scheme\") === 'rose'");
|
|
|
|
$page->click('[data-test="showcase-profiles"] [aria-haspopup="menu"]')
|
|
->click('[data-scheme-preview="teal"]')
|
|
->assertScript("document.documentElement.getAttribute('data-scheme') === 'teal'");
|
|
|
|
$page->click('[data-md-navigation-rail-panel] a[href$="/material/buttons"]')
|
|
->assertScript("location.pathname.endsWith('/material/buttons')")
|
|
->assertScript("document.documentElement.getAttribute('data-scheme') === 'teal'")
|
|
->assertNoJavaScriptErrors();
|
|
});
|
|
|
|
it('paints the profile the application resolves from the first frame', function () {
|
|
Scheme::resolveProfileUsing(fn (): string => 'rose');
|
|
|
|
profilesReady(visit('/material')->inDarkMode())
|
|
->assertScript("document.documentElement.getAttribute('data-scheme') === 'rose'")
|
|
->assertScript(pagePrimary()." === '{$this->profiles['rose']['dark']['primary']}'");
|
|
});
|