Andreas Reinhold / reiniandClaude Opus 5
d77ecf5e2a
An application with its own artwork for an empty collection puts it in the `illustration` slot, which is drawn in place of the shape and icon. The slot's attributes go on the element around it, so its class sets the colour an SVG's currentColor takes. A slot holding only whitespace or comments counts as empty (hasActualContent), and without the slot the empty state renders as before. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
49 lines
2.0 KiB
PHP
49 lines
2.0 KiB
PHP
<?php
|
|
|
|
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.">
|
|
<x-slot:actions><x-button label="Upload files" /></x-slot:actions>
|
|
</x-empty-state>
|
|
BLADE);
|
|
|
|
expect($html)
|
|
->toContain('text-secondary-container')
|
|
->toContain('text-on-secondary-container')
|
|
->toContain('<h3 class="type-title-lg">No shares yet</h3>')
|
|
->toContain('Files you share appear here.')
|
|
->toContain('Upload files')
|
|
->and(substr_count($html, '<svg'))->toBe(2);
|
|
});
|
|
|
|
it('draws an illustration in place of the shape and icon', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-empty-state icon="upload_file" title="No routes yet">
|
|
<x-slot:illustration class="text-primary"><svg class="size-32" viewBox="0 0 10 10" aria-hidden="true"><circle cx="5" cy="5" r="4" /></svg></x-slot:illustration>
|
|
</x-empty-state>
|
|
BLADE);
|
|
|
|
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')
|
|
->toContain('No routes yet')
|
|
->and(substr_count($html, '<svg'))->toBe(1);
|
|
});
|
|
|
|
it('keeps the shape and icon while the illustration slot holds nothing but comments', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-empty-state title="No shares yet">
|
|
<x-slot:illustration>
|
|
<!-- artwork to come -->
|
|
</x-slot:illustration>
|
|
</x-empty-state>
|
|
BLADE);
|
|
|
|
expect($html)
|
|
->toContain('text-secondary-container')
|
|
->toContain('text-on-secondary-container')
|
|
->not->toContain('artwork to come')
|
|
->and(substr_count($html, '<svg'))->toBe(2);
|
|
});
|