Andreas Reinhold / reiniandClaude Opus 5
cf63f11bfb
`[data-md-toggle] { min-width: 0 }` let the switch's root shrink below
its 52px track as a flex item. In `<x-row justify="between">` beside a
paragraph, flex shrinking weighs each item by its width, so the root of
a bare switch gave up a share of its 52px, and a switch with a long
label of its own gave its label a column one word wide and less; the
track, which does not shrink inside the root, ran out of it and past a
card's edge on a phone. `<x-checkbox>`'s root did the same with its box.
Both roots now keep their automatic minimum, the control and, beside a
label, its longest word, so the text beside the control, or the
control's own label, wraps instead. The toggle's docblock and the skill
say so.
A browser test lays a bare switch, a labelled switch and a bare
checkbox beside long text in rows on a 393px window and checks each
control's size and that it stays inside its row, and that the switch's
own label wraps inside its root; it fails without the change in Chrome,
Firefox and Safari.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
57 lines
2.5 KiB
PHP
57 lines
2.5 KiB
PHP
{{-- A switch, M3's: a 52×32 track whose handle grows and slides across when it turns on.
|
||
|
||
On a real checkbox with `role="switch"`, so it is focusable, announced as on or off, and takes
|
||
Space from the keyboard; the handle is drawn beside it. `label` and `hint` sit beside it and are
|
||
its name — a switch without `label` needs an `aria-label`. `right` puts it at the end of the
|
||
row, where a setting's switch usually is. `icons` draws a check on the handle when on and a
|
||
cross when off; `icons="selected"` only the check. Every other attribute reaches the `<input>`
|
||
(resources/css/components/toggle.css).
|
||
|
||
Without a label the row is only the 52×32 track, so the track carries `md-touch-target` and
|
||
catches presses over M3's 48px minimum. Beside text in a row (`<x-row justify="between">`, a
|
||
setting's words and its switch) the track never shrinks: the text wraps, and so does the
|
||
switch's own label. `class` and `style` land on the root, `data-md-toggle`. --}}
|
||
|
||
@props([
|
||
'label' => null,
|
||
'hint' => null,
|
||
'right' => false,
|
||
'icons' => false,
|
||
])
|
||
|
||
@php
|
||
$model = $attributes->whereStartsWith('wire:model')->first();
|
||
$id = $attributes->get('id') ?? 'switch-'.substr(md5($model.'|'.$label), 0, 12);
|
||
$icons = $icons === 'selected' ? 'selected' : ($icons ? 'both' : null);
|
||
@endphp
|
||
|
||
<div data-md-toggle {{ $attributes->only(['class', 'style', 'wire:key']) }}>
|
||
<label for="{{ $id }}" data-md-selection-row @if ($right) data-md-right @endif>
|
||
<span data-md-switch @if ($icons) data-md-icons="{{ $icons }}" @endif @if (blank($label) && blank($hint)) class="md-touch-target" @endif>
|
||
<input
|
||
{{ $attributes->except(['class', 'style', 'id', 'wire:key']) }}
|
||
id="{{ $id }}"
|
||
type="checkbox"
|
||
role="switch"
|
||
/>
|
||
<span data-md-switch-handle>
|
||
@if ($icons)
|
||
<x-livewire-material::icon name="check" size="16" data-md-switch-on />
|
||
<x-livewire-material::icon name="close" size="16" data-md-switch-off />
|
||
@endif
|
||
</span>
|
||
</span>
|
||
|
||
@if (filled($label) || filled($hint))
|
||
<span data-md-selection-text>
|
||
@if (filled($label))
|
||
<span data-md-selection-label>{{ $label }}</span>
|
||
@endif
|
||
@if (filled($hint))
|
||
<span data-md-selection-hint>{{ $hint }}</span>
|
||
@endif
|
||
</span>
|
||
@endif
|
||
</label>
|
||
</div>
|