Add an illustration slot to the empty state
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
This commit is contained in:
co-authored by
Claude Opus 5
parent
e63c0f684c
commit
d77ecf5e2a
@@ -15,3 +15,34 @@ it('sets an icon on an Expressive shape above its words and action', function ()
|
||||
->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);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user