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

Rewrite the showcase's Progress section without Tailwind

Browse Source 
Plan step 38: the "bind" example's wrapper div becomes <x-stack>/
<x-row>, and the one enlarged circular indicator moves to a
data-md-showcase-progress-lg hook. Along the way, $examples changes
from a ['Title' => [code, stack]] tuple back to the plain
'Title' => <<<'BLADE' every other section uses, with the row
exceptions listed separately: the tuple's leading `[` broke
Sections::index()'s regex, so every one of this section's examples
was silently missing from the showcase search index. Fixing the shape
recovers them — the Feature ShowcaseTest's search-index assertion
count moves from 259 to 266.

Every aria-label the Chromium ProgressTest reads off #progress
(Linear, Circular, Circular wavy, Bound, the indeterminate variants)
is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 04:49:30 +02:00
co-authored by Claude Sonnet 5
parent c87fc8ca41
commit e1cdc52b48
2 changed files with 33 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/showcase.css
+7
View File
@@ -383,4 +383,11 @@
[data-md-showcase-illustration='on-accent'] {
fill: var(--md-sys-color-on-tertiary);
}
/* Progress: one circular indicator drawn larger than its 48px default, to show the ring
scales with its box. */
[data-md-showcase-progress-lg] {
width: 96px;
height: 96px;
}
}
resources/views/showcase/sections/progress.blade.php
+26 -23
View File
@@ -1,57 +1,60 @@
@php
$examples = [
'Linear: determinate and indeterminate' => [<<<'BLADE'
'Linear: determinate and indeterminate' => <<<'BLADE'
<x-progress value="40" label="Linear" />
<x-progress label="Linear, indeterminate" />
BLADE, true],
'Linear wavy' => [<<<'BLADE'
BLADE,
'Linear wavy' => <<<'BLADE'
<x-progress value="60" wavy label="Wavy" />
<x-progress wavy label="Wavy, indeterminate" />
BLADE, true],
'Thick' => [<<<'BLADE'
BLADE,
'Thick' => <<<'BLADE'
<x-progress value="70" thick label="Thick" />
<x-progress value="55" wavy thick label="Thick wavy" />
<x-progress wavy thick label="Thick wavy, indeterminate" />
BLADE, true],
'Circular' => [<<<'BLADE'
BLADE,
'Circular' => <<<'BLADE'
<x-progress value="65" circular label="Circular" />
<x-progress circular label="Circular, indeterminate" />
<x-progress value="65" circular wavy label="Circular wavy" />
<x-progress circular wavy label="Circular wavy, indeterminate" />
<x-progress value="65" circular thick label="Circular thick" />
<x-progress value="65" circular wavy thick label="Circular wavy thick" />
<x-progress circular wavy class="size-24" label="Circular wavy, 96px" />
BLADE, false],
'Colours' => [<<<'BLADE'
<x-progress circular wavy data-md-showcase-progress-lg label="Circular wavy, 96px" />
BLADE,
'Colours' => <<<'BLADE'
<x-progress value="35" color="secondary" label="Secondary" />
<x-progress value="50" wavy color="tertiary" label="Tertiary" />
<x-progress value="65" color="error" label="Error" />
<x-progress value="80" wavy color="success" label="Success" />
<x-progress value="45" color="warning" label="Warning" />
<x-progress value="55" wavy color="info" label="Info" />
BLADE, true],
'Following a value in the browser (bind)' => [<<<'BLADE'
<div x-data="{ progress: 30 }" class="w-full space-y-6">
BLADE,
'Following a value in the browser (bind)' => <<<'BLADE'
<x-livewire-material::stack gap="space300" x-data="{ progress: 30 }">
<x-button label="Set a random value" variant="tonal" x-on:click="progress = Math.round(Math.random() * 100)" />
<x-progress bind="progress" label="Bound" />
<x-progress bind="progress" wavy label="Bound wavy" />
<div class="flex gap-6">
<x-livewire-material::row gap="space300">
<x-progress bind="progress" circular label="Bound circular" />
<x-progress bind="progress" circular wavy label="Bound circular wavy" />
</div>
</div>
BLADE, false],
</x-livewire-material::row>
</x-livewire-material::stack>
BLADE,
];
// Every example stacks except Circular, which lays several indicators side by side in a row.
$rows = ['Circular'];
@endphp
<section id="progress" class="scroll-mt-24 space-y-6">
<h2 class="type-headline-md">Progress</h2>
<x-livewire-material::stack as="section" id="progress" gap="space300">
<h2 class="md-type-headline-md">Progress</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant">
<p class="md-type-body-md md-ink-variant">
<code>&lt;x-progress&gt;</code>: M3 Expressive's linear and circular progress indicators, flat or wavy, determinate or indeterminate.
</p>
@foreach ($examples as $title => [$code, $stack])
<x-showcase::example :$title :$code :$stack />
@foreach ($examples as $title => $code)
<x-showcase::example :$title :$code :stack="! in_array($title, $rows, true)" />
@endforeach
</section>
</x-livewire-material::stack>