Andreas Reinhold / reiniandClaude Opus 5
973cc0b68c
The slot was cast to a string and escaped, so an icon beside a badge's word showed as literal markup. It renders as HTML now; `value` stays escaped, and a slot holding only whitespace or comments is still a dot (hasActualContent rather than isNotEmpty). `color="neutral"` draws neutral ink on every variant: a dot or count in on-surface-variant with surface text (the ink the outline badge already writes in), a tonal label in surface-container-high with on-surface-variant text, and an outline in outline-variant. `color="plain"` emits no background, text or border colour in any variant, keeping shape, size and type, so an application's own colour classes paint it without racing the badge's. Every existing colour renders the same classes as before, and an unknown colour still falls back to error. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01RHoXZSHc8gGpZjFmA5fPc2
84 lines
5.3 KiB
PHP
84 lines
5.3 KiB
PHP
@php
|
|
$examples = [
|
|
'Badges' => <<<'BLADE'
|
|
<span class="relative inline-flex"><x-icon name="notifications" /><x-badge floating /></span>
|
|
<span class="relative inline-flex"><x-icon name="mail" /><x-badge value="4" floating /></span>
|
|
<span class="relative inline-flex"><x-icon name="inbox" /><x-badge value="1204" max="999" floating /></span>
|
|
<x-badge value="Expired" tonal />
|
|
<x-badge value="Active" color="success" tonal />
|
|
<x-badge value="Password" color="info" tonal />
|
|
<x-badge value="Pro" outline />
|
|
<x-badge value="Draft" color="neutral" tonal />
|
|
<x-badge value="Archived" color="neutral" outline />
|
|
<span class="relative inline-flex"><x-icon name="chat" /><x-badge value="2" color="neutral" floating /></span>
|
|
<x-badge tonal color="tertiary"><x-icon name="bolt" filled class="size-3" /> Pro</x-badge>
|
|
<x-badge value="Beta" tonal color="plain" class="bg-primary-fixed text-on-primary-fixed" />
|
|
BLADE,
|
|
'Snackbars' => <<<'BLADE'
|
|
<div x-data class="flex flex-wrap items-center gap-4">
|
|
<x-button label="Saved" variant="tonal" x-on:click="materialToast('Settings saved', { type: 'success' })" />
|
|
<x-button label="With a description" variant="tonal" x-on:click="materialToast('Upload failed', { type: 'error', description: 'The file is larger than 4 GB.' })" />
|
|
<x-button label="With an action" variant="tonal" x-on:click="materialToast('Share deleted', { action: { label: 'Undo', handler: () => materialToast('Share restored', { type: 'info' }) } })" />
|
|
<x-button label="Until dismissed" variant="tonal" x-on:click="materialToast('Your storage is almost full', { type: 'warning', timeout: 0 })" />
|
|
<x-button label="Sticky, with an event" variant="tonal" x-on:click="materialToast('A new version is ready', { type: 'info', sticky: true, action: { label: 'Reload', event: 'showcase:reload' } })" x-on:showcase:reload.window="materialToast('Reloading…')" />
|
|
</div>
|
|
BLADE,
|
|
'Plain tooltips' => <<<'BLADE'
|
|
<x-button icon="content_copy" tooltip="Copy link" />
|
|
<x-button icon="qr_code_2" tooltip-bottom="Show QR code" />
|
|
<x-tooltip text="Expires in 3 days" side="right">
|
|
<span tabindex="0" class="focus-ring rounded-corner-xs type-body-md text-on-surface-variant">holiday-photos.zip</span>
|
|
</x-tooltip>
|
|
BLADE,
|
|
'Rich tooltips' => <<<'BLADE'
|
|
<x-rich-tooltip title="Expiry" text="Recipients lose access after this time. Admins can change the longest time allowed.">
|
|
<x-button icon="help" aria-label="About expiry" />
|
|
</x-rich-tooltip>
|
|
|
|
<x-rich-tooltip title="Password protection" text="Recipients need the password before they can see the files." persistent>
|
|
<x-button label="Press for details" icon="lock" variant="outlined" />
|
|
<x-slot:actions>
|
|
<x-button label="Learn more" />
|
|
</x-slot:actions>
|
|
</x-rich-tooltip>
|
|
BLADE,
|
|
'Alerts' => <<<'BLADE'
|
|
<x-alert title="Storage almost full" description="3.8 GB of 4 GB used. Old shares are deleted when they expire." color="warning" class="w-full" />
|
|
<x-alert description="Links are shown only once. Copy yours before you leave the page." class="w-full" dismissible />
|
|
<x-alert title="Upload failed" color="error" class="w-full">
|
|
The connection dropped at 64%.
|
|
<x-slot:actions><x-button label="Try again" /></x-slot:actions>
|
|
</x-alert>
|
|
<x-alert description="Settings saved." color="success" class="w-full" />
|
|
BLADE,
|
|
'Stats' => <<<'BLADE'
|
|
<div class="grid w-full gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<x-stat title="Shares" value="1,204" icon="link" description="12 this week" />
|
|
<x-stat title="Files" value="8,317" icon="description" />
|
|
<x-stat title="Stored" value="3.2 GB" icon="hard_drive" description="of 4 GB" />
|
|
<x-stat title="Downloads" value="42,019" icon="download" />
|
|
</div>
|
|
BLADE,
|
|
'Empty state' => <<<'BLADE'
|
|
<x-empty-state icon="upload_file" title="No shares yet" description="Files you share appear here, with their links and when they expire." class="w-full">
|
|
<x-slot:actions>
|
|
<x-button label="Upload files" icon="upload" variant="filled" />
|
|
</x-slot:actions>
|
|
</x-empty-state>
|
|
BLADE,
|
|
];
|
|
@endphp
|
|
|
|
<section id="communication" class="scroll-mt-24 space-y-6">
|
|
<h2 class="type-headline-md">Communication</h2>
|
|
|
|
<p class="max-w-3xl type-body-md text-on-surface-variant">
|
|
<code><x-badge></code>, <code><x-toast></code> (the snackbar host, fed by the <code>Toasts</code> concern or <code>materialToast()</code>),
|
|
<code><x-tooltip></code>, <code><x-rich-tooltip></code>, <code><x-alert></code>, <code><x-stat></code> and <code><x-empty-state></code>.
|
|
</p>
|
|
|
|
@foreach ($examples as $title => $code)
|
|
<x-showcase::example :$title :$code />
|
|
@endforeach
|
|
</section>
|