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

Add hint-class to the group and icon-class to menu items

Browse Source 
<x-group hint-class> adds classes to the hint, as the text fields'
hint-class does, and a validation message still replaces the hint.
<x-menu-item icon-class> adds classes to the leading icon, for an icon
whose colour means something of its own, such as a sport's glyph.

A colour class there has to win over the component's own colour, and
which of two colour utilities wins depends on the order Tailwind emits
them (text-error comes before text-on-surface-variant). So when either
prop is given, the component's own colour is written with a :where()
variant that carries no specificity, as the fields' hint colour sits
in the components layer. A disabled item's icon stays disabled. Without
the props the markup is unchanged. The skill now also lists the fields'
hint-class, which it had left out.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
This commit is contained in:
Andreas Reinhold / reini
2026-09-13 18:18:39 +02:00
co-authored by Claude Opus 5
parent a83d7f62ea
commit ab7317faae
8 changed files with 111 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Browser/ActionsTest.php
+30
View File
@@ -221,3 +221,33 @@ it('hangs a menu on its menu button, even when the button is fixed to a corner o
->assertScript("(() => { const names = getComputedStyle(document.querySelector('[data-test=\"more\"]')).getPropertyValue('anchor-name'); return names.includes('--material-button-') && names.includes('--material-menu-'); })()")
->assertScript('(({ control, menu }) => menu.top >= control.bottom && menu.top - control.bottom <= 16 && Math.abs(menu.left - control.left) <= 16)('.menuAgainst('more', 'Share actions').')');
});
it('paints a group\'s hint and a menu item\'s icon in the colour their classes name', function () {
Route::middleware('web')->get('/colour-class-probe', fn () => Blade::render(<<<'BLADE'
<!DOCTYPE html>
<html>
<head>
<x-theme-script />
@vite(config('livewire-material.showcase.vite'))
</head>
<body class="bg-surface">
<span id="error-ink" class="text-error">Reference</span>
<div id="terrain">
<x-group name="terrain" hint="No elevation data here" hint-class="text-error" :options="[['id' => 'flat', 'name' => 'Flat']]" />
</div>
<x-menu-item id="run" label="Running plan" icon="directions_run" icon-class="text-error" />
<x-menu-item id="chosen" label="Cycling plan" icon="directions_bike" icon-class="text-error" :selected="true" />
<x-menu-item id="off" label="Swimming plan" icon="pool" icon-class="text-error" disabled />
</body>
</html>
BLADE));
$ink = fn (string $element): string => "getComputedStyle({$element}).color";
$error = $ink("document.querySelector('#error-ink')");
visit('/colour-class-probe')->waitForEvent('networkidle')
->assertScript($ink("document.querySelector('#terrain p')")." === {$error}")
->assertScript($ink("document.querySelector('#run svg')")." === {$error}")
->assertScript($ink("document.querySelector('#chosen svg')")." === {$error}")
->assertScript($ink("document.querySelector('#off svg')")." !== {$error}");
});