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

Rewrite the showcase's Icons section without Tailwind

Browse Source 
Plan step 38: the filter row is now real components — <x-input
icon="search"> and two <x-checkbox>s — instead of a bespoke bordered
label and accent-coloured native inputs; the result grid is
<x-grid min-item="120px"> of <x-surface as="li">/<x-stack> tiles.
The fetched symbol's mask stays the view's own x-bind:style (its
shorthand depends on the fetched name), but the size it toggles
between 24 and 20px is now the data-md-showcase-icon-size attribute
a script sets, never a class, drawn by data-md-showcase-icon-mask in
showcase.css.

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 04:18:37 +02:00
co-authored by Claude Sonnet 5
parent 3669415d57
commit 44a29a8ea2
2 changed files with 42 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/showcase.css
+15
View File
@@ -261,4 +261,19 @@
border-radius: var(--md-sys-shape-corner-full); border-radius: var(--md-sys-shape-corner-full);
background-color: var(--md-sys-color-tertiary); background-color: var(--md-sys-color-tertiary);
} }
/* Icons: one search result's mask (its `mask` shorthand is the fetched symbol, so it stays the
view's own x-bind:style), 24px by default and 20px once optical size 20 is on — the state a
script toggles as data-md-showcase-icon-size, never a class. */
[data-md-showcase-icon-mask] {
display: block;
width: 24px;
height: 24px;
background-color: currentColor;
}
[data-md-showcase-icon-mask][data-md-showcase-icon-size='20'] {
width: 20px;
height: 20px;
}
} }
resources/views/showcase/sections/icons.blade.php
+27 -35
View File
@@ -1,6 +1,7 @@
<section <x-livewire-material::stack
as="section"
id="icons" id="icons"
class="scroll-mt-24 space-y-6" gap="space300"
x-data="{ x-data="{
names: [], names: [],
query: '', query: '',
@@ -17,47 +18,38 @@
}" }"
x-intersect.once="load()" x-intersect.once="load()"
> >
<h2 class="type-headline-md">Icons</h2> <h2 class="md-type-headline-md">Icons</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant"> <p class="md-type-body-md md-ink-variant">
Every Material Symbol (Rounded, 400, grade 0) as <code>&lt;x-icon name="…" /&gt;</code>, outlined or <code>filled</code>, Every Material Symbol (Rounded, 400, grade 0) as <code>&lt;x-icon name="…" /&gt;</code>, outlined or <code>filled</code>,
drawn from the optical size 24 cut or — for an icon 20px or smaller, where 24's strokes would look thin — drawn from the optical size 24 cut or — for an icon 20px or smaller, where 24's strokes would look thin —
the 20 cut: <code>&lt;x-icon name="…" optical="20" class="size-5" /&gt;</code>. the 20 cut: <code>&lt;x-icon name="…" optical="20" /&gt;</code>.
</p> </p>
<p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use"> <p class="md-type-body-md md-ink-variant" data-test="when-to-use">
<code>filled</code> means active or selected; <code>optical="20"</code> when an icon is drawn at 20px or less; one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden. <code>filled</code> means active or selected; <code>optical="20"</code> when an icon is drawn at 20px or less; one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden.
</p> </p>
<div class="flex flex-wrap items-center gap-4"> <x-livewire-material::row gap="space200" wrap align="center">
<label class="flex min-w-72 flex-1 items-center gap-2 rounded-corner-xs border border-outline px-3 py-2 focus-within:outline-3 focus-within:outline-secondary"> <x-livewire-material::input icon="search" type="search" x-model.debounce.150ms="query" placeholder="Search {{ number_format(count(\NoNameWeb\LivewireMaterial\Support\SvgFile::symbolNames())) }} symbols" full />
<x-livewire-material::icon name="search" class="size-5 text-on-surface-variant" /> <x-livewire-material::checkbox label="Filled" x-model="filled" />
<input type="search" x-model.debounce.150ms="query" placeholder="Search {{ number_format(count(\NoNameWeb\LivewireMaterial\Support\SvgFile::symbolNames())) }} symbols" class="w-full bg-transparent type-body-lg outline-none" /> <x-livewire-material::checkbox label="Optical size 20" x-model="optical20" />
</label> </x-livewire-material::row>
<label class="flex items-center gap-2 type-label-lg"> <x-livewire-material::grid as="ul" min-item="120px" gap="space100">
<input type="checkbox" x-model="filled" class="size-4 accent-primary" />
Filled
</label>
<label class="flex items-center gap-2 type-label-lg">
<input type="checkbox" x-model="optical20" class="size-4 accent-primary" />
Optical size 20
</label>
</div>
<ul class="grid grid-cols-[repeat(auto-fill,minmax(7.5rem,1fr))] gap-2">
<template x-for="name in matches" x-bind:key="name"> <template x-for="name in matches" x-bind:key="name">
<li class="flex flex-col items-center gap-2 rounded-corner-md bg-surface-container p-3 text-center"> <x-livewire-material::surface as="li" level="surface-container" corner="md" padding="space100">
<span <x-livewire-material::stack gap="space100" align="center">
class="bg-current" <span
x-bind:class="optical20 ? 'size-5' : 'size-6'" data-md-showcase-icon-mask
x-bind:style="{ x-bind:data-md-showcase-icon-size="optical20 ? '20' : null"
mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg${optical20 ? '?optical=20' : ''}') center / contain no-repeat`, x-bind:style="{
}" mask: `url('{{ rtrim(route('livewire-material.showcase', [], false), '/') }}/symbols/${filled ? 'filled' : 'outlined'}/${name}.svg${optical20 ? '?optical=20' : ''}') center / contain no-repeat`,
></span> }"
<code class="w-full break-all type-label-sm text-on-surface-variant" x-text="name"></code> ></span>
</li> <code class="md-type-label-sm md-ink-variant md-text-center" x-text="name"></code>
</x-livewire-material::stack>
</x-livewire-material::surface>
</template> </template>
</ul> </x-livewire-material::grid>
</section> </x-livewire-material::stack>