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/MenuTest.php
+4 -4
View File
@@ -126,13 +126,13 @@ it('adds icon-class to the leading icon, over its own colour but not over disabl
$leading = fn (string $html): string => preg_match('/<svg[^>]*class="([^"]*)"/', $html, $icon) ? $icon[1] : '';
expect($leading((string) $this->blade('<x-menu-item label="Running plan" icon="directions_run" icon-class="text-sport-run" icon-right="chevron_right" />')))
->toBe('shrink-0 size-5 [:where(&amp;)]:text-on-surface-variant text-sport-run')
->toBe('size-5 [:where(&amp;)]:text-on-surface-variant text-sport-run')
->and($leading((string) $this->blade('<x-menu-item label="Running plan" icon="directions_run" icon-class="text-sport-run" :selected="true" />')))
->toBe('shrink-0 size-5 [:where(&amp;)]:text-on-tertiary-container text-sport-run')
->toBe('size-5 [:where(&amp;)]:text-on-tertiary-container text-sport-run')
->and($leading((string) $this->blade('<x-menu-item label="Running plan" icon="directions_run" icon-class="text-sport-run" disabled />')))
->toBe('shrink-0 size-5 text-sport-run text-on-surface/38!')
->toBe('size-5 text-sport-run text-on-surface/38!')
->and($leading((string) $this->blade('<x-menu-item label="Running plan" icon="directions_run" />')))
->toBe('shrink-0 size-5 text-on-surface-variant')
->toBe('size-5 text-on-surface-variant')
->and((string) $this->blade('<x-menu-item label="Next" icon-right="chevron_right" icon-class="text-sport-run" />'))
->not->toContain('text-sport-run');
});