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

Size icons and shapes with a prop instead of a Tailwind class

Browse Source 
<x-icon size> writes --md-icon-size (24px by default) and takes the optical-size-20
cut for 20px or less, as M3 asks; mirror-rtl flips a directional symbol. <x-shape
size> writes --md-shape-size. Both draw from plain-CSS stylesheets in
material.components, gathered in components.css until all.css replaces it; a
caller's size class still wins while the other components are rewritten.
Plan steps 35 and 36, the prop every component rewrite depends on.

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 13:49:24 +02:00
co-authored by Claude Opus 5
parent 94f9404319
commit bdbb76a0bd
10 changed files with 136 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/IconTest.php
+37 -5
View File
@@ -16,16 +16,48 @@ function symbolGeometry(string $file): string
it('draws a symbol inline, hidden from screen readers, 24px by default', function () {
$this->blade('<x-icon name="calendar_month" />')
->assertSee('class="shrink-0 size-6"', false)
->assertSee('data-md-icon', false)
->assertDontSee('--md-icon-size', false)
->assertDontSee('class=', false)
->assertSee('aria-hidden="true"', false)
->assertSee('fill="currentColor"', false)
->assertSee('viewBox="0 -960 960 960"', false);
});
it('leaves the size to a caller who gives one', function () {
it('draws the size it is given, and still takes a caller\'s class', function () {
$this->blade('<x-icon name="calendar_month" size="32" />')
->assertSee('style="--md-icon-size: 32px"', false);
$this->blade('<x-icon name="calendar_month" class="size-4 text-primary" />')
->assertSee('class="shrink-0 size-4 text-primary"', false)
->assertDontSee('size-6', false);
->assertSee('class="size-4 text-primary"', false);
});
it('ignores a size that is not a whole number of pixels in range', function () {
foreach (['large', '4', '300', '20.5'] as $size) {
$this->blade('<x-icon name="calendar_month" size="'.$size.'" />')
->assertDontSee('--md-icon-size', false);
}
});
it('takes the 20 cut for a size of 20 or less, unless optical says otherwise', function () {
expect((string) $this->blade('<x-icon name="home" size="20" />'))->toContain(symbolGeometry('outlined-20/home'))
->and((string) $this->blade('<x-icon name="home" size="18" />'))->toContain(symbolGeometry('outlined-20/home'))
->and((string) $this->blade('<x-icon name="home" size="24" />'))->toContain(symbolGeometry('outlined/home'))
->and((string) $this->blade('<x-icon name="home" size="20" optical="24" />'))->toContain(symbolGeometry('outlined/home'));
});
it('mirrors a directional symbol only when asked', function () {
$this->blade('<x-icon name="arrow_back" mirror-rtl />')->assertSee('data-md-mirror-rtl', false);
$this->blade('<x-icon name="arrow_back" />')->assertDontSee('data-md-mirror-rtl', false);
});
it('draws its size from a stylesheet in the components layer', function () {
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/icon.css');
expect($css)->toContain('@layer material.components')
->toContain('inline-size: var(--md-icon-size, 24px)')
->toContain('[data-md-icon][data-md-mirror-rtl]:dir(rtl)')
->and((string) file_get_contents(__DIR__.'/../../../resources/css/components.css'))->toContain("@import './components/icon.css';");
});
it('names the icon for a screen reader when it carries the meaning alone', function () {
@@ -48,7 +80,7 @@ it('draws the optical size 20 cut when the caller asks for it', function () {
$dense = (string) $this->blade('<x-icon name="home" class="size-5" optical="20" />');
expect($dense)->not->toBe($standard)
->and($dense)->toContain('class="shrink-0 size-5"')
->and($dense)->toContain('class="size-5"')
->and($dense)->toContain('fill="currentColor"')
->and($dense)->toContain(symbolGeometry('outlined-20/home'));
});