Andreas Reinhold / reiniandClaude Opus 5
a99fbd3794
`mode="picker"` hand-rolled an outlined segmented button, point for point the design M3 Expressive deprecates, and its own arrow keys neither wrapped nor handled Up/Down. Both rows are now <x-group>: native radios in a fieldset, so the browser supplies the radiogroup, both axes, the wrap and the roving tab stop, and the store is bound through an x-model accessor — a contrast row still marks the resolved level but writes through setContrast(). A new `label` prop legends the row. Plan: docs/plans/material-3-alignment.md, step 14 (navigation N-04, N-17). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
148 lines
6.3 KiB
PHP
148 lines
6.3 KiB
PHP
<?php
|
|
|
|
use Illuminate\Support\Facades\Blade;
|
|
use Illuminate\Support\Facades\Route;
|
|
use Livewire\Component;
|
|
use Livewire\Livewire;
|
|
|
|
class BarsProbe extends Component
|
|
{
|
|
public string $tab = 'files';
|
|
|
|
public function render(): string
|
|
{
|
|
return <<<'BLADE'
|
|
<div>
|
|
<x-app-bar variant="medium" title="Recipients" id="bar">
|
|
<x-slot:navigation><x-button icon="arrow_back" tooltip="Back" /></x-slot:navigation>
|
|
<x-slot:actions><x-theme-toggle id="toggle" /></x-slot:actions>
|
|
</x-app-bar>
|
|
|
|
<div class="space-y-6 p-4">
|
|
<p>tab: <span id="tab">{{ $tab }}</span></p>
|
|
|
|
<x-tabs id="share" wire:model.live="tab" :tabs="[['name' => 'files', 'label' => 'Files'], ['name' => 'people', 'label' => 'People'], ['name' => 'locked', 'label' => 'Locked', 'disabled' => true], ['name' => 'activity', 'label' => 'Activity']]">
|
|
<x-tab name="files">Three files.</x-tab>
|
|
<x-tab name="people">Anna and Ben.</x-tab>
|
|
<x-tab name="activity">Two downloads.</x-tab>
|
|
</x-tabs>
|
|
|
|
<x-toolbar label="Formatting">
|
|
<button type="button" id="bold">B</button>
|
|
<button type="button" id="italic">I</button>
|
|
<button type="button" id="underline">U</button>
|
|
</x-toolbar>
|
|
|
|
<x-theme-toggle mode="cycle" id="cycle" />
|
|
<x-theme-toggle mode="picker" />
|
|
|
|
<x-section-nav :items="[['title' => 'Profile', 'url' => '#profile', 'active' => true], ['title' => 'Security', 'url' => '#security']]" no-wire-navigate />
|
|
|
|
<div style="height: 200vh"></div>
|
|
</div>
|
|
</div>
|
|
BLADE;
|
|
}
|
|
}
|
|
|
|
function barsProbe()
|
|
{
|
|
Livewire::component('bars-probe', BarsProbe::class);
|
|
|
|
Route::middleware('web')->get('/bars-probe', fn () => Blade::render(<<<'BLADE'
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<x-theme-script />
|
|
@vite(config('livewire-material.showcase.vite'))
|
|
@livewireStyles
|
|
</head>
|
|
<body class="bg-surface">
|
|
<livewire:bars-probe />
|
|
@livewireScripts
|
|
</body>
|
|
</html>
|
|
BLADE));
|
|
|
|
return visit('/bars-probe')->waitForEvent('networkidle')
|
|
->assertScript("document.readyState === 'complete' && typeof window.Alpine !== 'undefined' && typeof window.Livewire !== 'undefined'");
|
|
}
|
|
|
|
it('moves between tabs with the arrow keys, skipping disabled ones, and tells Livewire', function () {
|
|
$page = barsProbe()
|
|
->click('#share-people')
|
|
->assertSeeIn('#tab', 'people')
|
|
->assertSee('Anna and Ben.')
|
|
->assertAttribute('#share-people', 'tabindex', '0')
|
|
->assertAttribute('#share-files', 'tabindex', '-1');
|
|
|
|
$page->keys('#share-people', 'ArrowRight')
|
|
->assertSeeIn('#tab', 'activity')
|
|
->assertScript("document.activeElement.id === 'share-activity'")
|
|
->assertScript("getComputedStyle(document.querySelector('#share-activity [data-tab-indicator]')).opacity === '1'");
|
|
|
|
$page->keys('#share-activity', 'Home')
|
|
->assertSeeIn('#tab', 'files')
|
|
->assertScript("document.activeElement.id === 'share-files'");
|
|
|
|
$page->keys('#share-files', 'ArrowLeft')
|
|
->assertSeeIn('#tab', 'activity');
|
|
});
|
|
|
|
it('collapses a medium app bar into its row as the page scrolls, and fades its small title in', function () {
|
|
$headline = "getComputedStyle(document.querySelector('#bar [data-app-bar-row] [data-app-bar-headline]')).opacity";
|
|
|
|
$page = barsProbe()
|
|
->assertScript("! document.querySelector('#bar').hasAttribute('data-collapsed')")
|
|
->assertScript("{$headline} === '0'");
|
|
|
|
$page->script('window.scrollTo(0, 600)');
|
|
|
|
$page->assertScript("document.querySelector('#bar').hasAttribute('data-collapsed') && document.querySelector('#bar').hasAttribute('data-scrolled')")
|
|
->assertScript("Math.round(document.querySelector('#bar [data-app-bar-row]').getBoundingClientRect().top) === 0")
|
|
->assertScript("document.querySelector('#bar').getBoundingClientRect().bottom <= 65")
|
|
->assertScript("{$headline} === '1'");
|
|
|
|
$page->script('window.scrollTo(0, 0)');
|
|
|
|
$page->assertScript("! document.querySelector('#bar').hasAttribute('data-collapsed')");
|
|
});
|
|
|
|
it('moves focus along a toolbar with the arrow keys', function () {
|
|
barsProbe()
|
|
->keys('#bold', 'ArrowRight')
|
|
->assertScript("document.activeElement.id === 'italic'")
|
|
->keys('#italic', 'End')
|
|
->assertScript("document.activeElement.id === 'underline'")
|
|
->keys('#underline', 'ArrowRight')
|
|
->assertScript("document.activeElement.id === 'bold'");
|
|
});
|
|
|
|
it('switches the theme from a toggle, a cycle and a picker', function () {
|
|
$page = barsProbe()
|
|
->click('label:has(input[name="material-theme"][value="light"])')
|
|
->assertScript("document.documentElement.dataset.theme === 'light'")
|
|
->assertAttribute('#toggle', 'aria-pressed', 'false');
|
|
|
|
$page->click('#toggle')
|
|
->assertScript("document.documentElement.dataset.theme === 'dark'")
|
|
->assertAttribute('#toggle', 'aria-pressed', 'true')
|
|
->assertScript('document.querySelector(\'input[name="material-theme"][value="dark"]\').checked');
|
|
|
|
$page->click('#cycle')
|
|
->assertScript("document.documentElement.dataset.themeChoice === 'system'")
|
|
->click('#cycle')
|
|
->assertScript("document.documentElement.dataset.themeChoice === 'light'");
|
|
});
|
|
|
|
it('turns section tabs into a picker on a phone', function () {
|
|
barsProbe()
|
|
->resize(400, 800)
|
|
->assertScript("getComputedStyle(document.querySelector('[data-section-nav] nav')).display === 'none'")
|
|
->click('[data-section-picker] button')
|
|
->assertScript("document.querySelector('[data-section-picker] [popover]').matches(':popover-open')")
|
|
// A menu of places: the current section is the page, not a checked choice.
|
|
->assertAttribute('[data-section-picker] [role="menuitem"][href="#profile"]', 'aria-current', 'page')
|
|
->assertScript("! document.querySelector('[data-section-picker] [role=\"menuitem\"][href=\"#security\"]').hasAttribute('aria-current')");
|
|
});
|