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

Draw the empty state without Tailwind

Browse Source 
Plan step 36 (actions, last of the batch). <x-empty-state> renders
data-md-empty-state with data-md-empty-state-illustration/-shape/
-icon/-title/-description/-actions; no class list. empty-state.css
draws the secondary-container shape behind the on-secondary-container
icon (the icon needs its own stacking context to paint above the
shape's absolute position), the title-large title and the 448px
body-medium description. The docblock's illustration example moves
from a caller class to a caller style, since the shape rule scans
the whole file. EmptyStateTest is rewritten on the hooks and
ComponentStylesheet.

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 16:52:09 +02:00
co-authored by Claude Opus 5
parent 4cc905b144
commit 99e73fdc58
5 changed files with 102 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/ActionStylesheetsTest.php
+1
View File
@@ -30,6 +30,7 @@ dataset('action components', [
'progress',
'alert',
'stat',
'empty-state',
]);
it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {
tests/Feature/Components/EmptyStateTest.php
+19 -8
View File
@@ -1,5 +1,7 @@
<?php
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
it('sets an icon on an Expressive shape above its words and action', function () {
$html = (string) $this->blade(<<<'BLADE'
<x-empty-state icon="upload_file" shape="flower" title="No shares yet" description="Files you share appear here.">
@@ -8,12 +10,21 @@ it('sets an icon on an Expressive shape above its words and action', function ()
BLADE);
expect($html)
->toContain('text-secondary-container')
->toContain('text-on-secondary-container')
->toContain('<h3 class="type-title-lg">No shares yet</h3>')
->toContain('data-md-empty-state')
->toContain('data-md-empty-state-shape')
->toContain('data-md-empty-state-icon')
->toContain('<h3 data-md-empty-state-title>No shares yet</h3>')
->toContain('data-md-empty-state-description')
->toContain('Files you share appear here.')
->toContain('data-md-empty-state-actions')
->toContain('Upload files')
->and(substr_count($html, '<svg'))->toBe(2);
->and(substr_count($html, '<svg'))->toBe(2)
->and(ComponentStylesheet::read('empty-state')->declarations('[data-md-empty-state-shape]'))->toMatchArray([
'color' => 'var(--md-sys-color-secondary-container)',
])
->and(ComponentStylesheet::read('empty-state')->declarations('[data-md-empty-state-icon]'))->toMatchArray([
'color' => 'var(--md-sys-color-on-secondary-container)',
]);
});
it('draws an illustration in place of the shape and icon', function () {
@@ -25,8 +36,8 @@ it('draws an illustration in place of the shape and icon', function () {
expect($html)
->toContain('<div class="text-primary"><svg class="size-32" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" /></svg></div>')
->not->toContain('text-secondary-container')
->not->toContain('text-on-secondary-container')
->not->toContain('data-md-empty-state-shape')
->not->toContain('data-md-empty-state-icon')
->toContain('No routes yet')
->and(substr_count($html, '<svg'))->toBe(1);
});
@@ -41,8 +52,8 @@ it('keeps the shape and icon while the illustration slot holds nothing but comme
BLADE);
expect($html)
->toContain('text-secondary-container')
->toContain('text-on-secondary-container')
->toContain('data-md-empty-state-shape')
->toContain('data-md-empty-state-icon')
->not->toContain('artwork to come')
->and(substr_count($html, '<svg'))->toBe(2);
});