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

Keep the state layer off a disabled field trailing button

Browse Source 
Plan step 36 audit. field.css's trailing button (clear, copy, reveal)
scales its state layer with the field's own icon size and doubles it as
the touch target, which the foundation's fixed-size interaction classes
cannot draw, and the hook stays data-md-field-button rather than a class
because datepicker and timepicker, not yet rewritten, still select it —
so it keeps its own declarations. It never hid the layer on a disabled
button, unlike every rewritten component's copy; it now does.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 18:13:55 +02:00
co-authored by Claude Opus 5
parent 627709b67d
commit d5a3df535c
2 changed files with 19 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/field.css
+10 -1
View File
@@ -165,7 +165,11 @@
pointer-events: none;
}
/* A trailing button — clear, copy, reveal — is an icon button: the icon in a 40px state layer. */
/* A trailing button — clear, copy, reveal — is an icon button: the icon in a state layer that
scales with the field's own icon size (40px at `md`, smaller at `sm`/`xs`), which the
foundation's fixed-size classes cannot draw; the layer doubles as the touch target, since it
already reaches 40px+ without a second pseudo. The hook stays `data-md-field-button` rather
than a class because datepicker and timepicker, not yet rewritten, still select it. */
[data-md-field-button] {
position: relative;
display: grid;
@@ -203,6 +207,11 @@
background-color: color-mix(in srgb, var(--md-sys-color-on-surface-variant) calc(var(--md-sys-state-pressed-state-layer-opacity) * 100%), transparent);
}
[data-md-field-button]:disabled::before,
[data-md-field-button][aria-disabled='true']::before {
display: none;
}
[data-md-field-affix] {
flex: none;
color: var(--md-sys-color-on-surface-variant);
tests/Feature/Components/FieldTest.php
+9
View File
@@ -1,5 +1,14 @@
<?php
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
it('hides the trailing button\'s state layer once it is disabled', function () {
// The field's trailing button (clear, copy, reveal) scales its state layer with the field's
// own icon size, which the foundation's fixed classes cannot draw, so it keeps its own
// declarations, keyed on the shared data-md-field-button hook. Disabled must still hide it.
expect(ComponentStylesheet::read('field')->declarations("[data-md-field-button]:disabled::before, [data-md-field-button][aria-disabled='true']::before"))->toBe(['display' => 'none']);
});
it('draws an outlined field with a notched label unless told otherwise', function () {
$html = (string) $this->blade('<x-input label="Share name" />');