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/ShapeTest.php
+9 -1
View File
@@ -26,7 +26,15 @@ it('draws every shape as one path in the text colour, filling a 100-unit box', f
it('renders a shape hidden from assistive tech', function () {
$this->blade('<x-shape name="cookie-9" class="size-20 text-secondary-container" />')
->assertSee('<svg aria-hidden="true" focusable="false" class="size-20 text-secondary-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"', false);
->assertSee('<svg data-md-shape="data-md-shape" aria-hidden="true" focusable="false" class="size-20 text-secondary-container" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"', false);
});
it('draws the size it is given', function () {
$this->blade('<x-shape name="cookie-9" size="160" />')
->assertSee('style="--md-shape-size: 160px"', false);
$this->blade('<x-shape name="cookie-9" size="huge" />')
->assertDontSee('--md-shape-size', false);
});
it('refuses a shape that does not exist', function () {