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

Cover a disabled icon button's colour inside a toolbar

Browse Source 
The reviewer asked this run to look closely at it; no test exercised
it. toolbar.css's primary recolour already excludes :disabled and
[aria-disabled] so button.css's own disabled colour wins there — this
pins that a disabled button in a standard toolbar resolves to the
disabled formula, not primary, while an enabled sibling resolves to
primary (plan step 36, navigation group).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 01:52:09 +02:00
co-authored by Claude Sonnet 5
parent f86f3270cd
commit 66847d5104
1 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/BarsTest.php
+18 -2
View File
@@ -317,9 +317,10 @@ function toolbarScaffoldProbe()
['title' => 'Sent', 'icon' => 'send', 'url' => '/toolbar-scaffold-probe'],
]">
<x-toolbar variant="docked" rounded place="bottom" label="Formatting" id="toolbar">
<x-button icon="format_bold" tooltip="Bold" />
<x-button id="bold-btn" icon="format_bold" tooltip="Bold" />
<x-divider vertical />
<x-button icon="format_italic" tooltip="Italic" />
<x-button id="italic-btn" icon="format_italic" tooltip="Italic" />
<x-button id="underline-btn" icon="format_underlined" tooltip="Underline" disabled />
</x-toolbar>
<div style="height: 200vh"></div>
@@ -357,6 +358,21 @@ it('rounds a docked toolbar and its divider from 840px, clear of the window\'s e
->assertNoJavaScriptErrors();
});
it('draws a disabled icon button inside a toolbar disabled, not in the toolbar\'s primary recolour', function () {
// toolbar.css recolours a standard (non-vibrant) toolbar's icon buttons to primary, but its
// selector excludes :disabled and [aria-disabled] so button.css's own disabled colour still
// wins there (resources/css/components/toolbar.css). A scratch element resolves each formula
// to a real rgb string, so the comparison does not have to guess the browser's serialization.
$primary = "(() => { const d = document.createElement('span'); d.style.color = 'var(--md-sys-color-primary)'; document.body.appendChild(d); const v = getComputedStyle(d).color; d.remove(); return v; })()";
$disabledColor = "(() => { const d = document.createElement('span'); d.style.color = 'color-mix(in srgb, var(--md-sys-color-on-surface) calc(var(--md-sys-state-disabled-content-opacity) * 100%), transparent)'; document.body.appendChild(d); const v = getComputedStyle(d).color; d.remove(); return v; })()";
toolbarScaffoldProbe()->resize(1024, 800)
->assertScript("getComputedStyle(document.querySelector('#bold-btn')).color === {$primary}")
->assertScript("getComputedStyle(document.querySelector('#underline-btn')).color !== {$primary}")
->assertScript("getComputedStyle(document.querySelector('#underline-btn')).color === {$disabledColor}")
->assertNoJavaScriptErrors();
});
function tabsFirstPaintProbe(): void
{
Route::middleware('web')->get('/tabs-first-paint-probe', fn () => Blade::render(<<<'BLADE'