Andreas Reinhold / reiniandClaude Fable 5.1
b1f64771f3
Plan step 23, containment.md § Missing ("Cards: the dragged state").
`data-dragged` on `<x-card>` takes the top of M3's card elevation scale
— Level4 (8dp) elevated, Level3 (6dp) filled and outlined — under the
16% dragged state layer from tokens/state.css. The row's hover and press
rules now exclude a dragged card, so the card a pointer is holding stays
at its dragged level. The application owns the attribute: nothing in the
browser tells a card it is being carried.
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
78 lines
3.5 KiB
PHP
78 lines
3.5 KiB
PHP
<?php
|
|
|
|
it('draws M3\'s three cards, each naming its variant for its per-state elevation', function (string $variant, string $classes) {
|
|
expect((string) $this->blade("<x-card variant=\"{$variant}\">Body</x-card>"))
|
|
->toContain($classes)
|
|
->toContain('rounded-corner-md')
|
|
->toContain("data-card=\"{$variant}\"");
|
|
})->with([
|
|
'filled' => ['filled', 'bg-surface-container-highest'],
|
|
'elevated' => ['elevated', 'bg-surface-container-low shadow-elevation-1'],
|
|
'outlined' => ['outlined', 'border border-outline-variant bg-surface'],
|
|
]);
|
|
|
|
it('is filled unless it knows the variant', function () {
|
|
expect((string) $this->blade('<x-card variant="glass">Body</x-card>'))
|
|
->toContain('bg-surface-container-highest')
|
|
->toContain('data-card="filled"');
|
|
});
|
|
|
|
it('lays out a header, menu, media, body and actions', function () {
|
|
$html = (string) $this->blade(<<<'BLADE'
|
|
<x-card title="holiday-photos.zip" subtitle="248 MB" separator>
|
|
<x-slot:figure><img src="/x.png" alt=""></x-slot:figure>
|
|
<x-slot:menu><button>⋮</button></x-slot:menu>
|
|
Expires in 3 days.
|
|
<x-slot:actions><button>Copy link</button></x-slot:actions>
|
|
</x-card>
|
|
BLADE);
|
|
|
|
expect($html)
|
|
->toContain('<img src="/x.png" alt="">')
|
|
->toContain('<h3 class="type-title-md">holiday-photos.zip</h3>')
|
|
->toContain('248 MB')
|
|
->toContain('<button>⋮</button>')
|
|
->toContain('role="separator"')
|
|
->toContain('Expires in 3 days.')
|
|
->toContain('<button>Copy link</button>')
|
|
->and(strpos($html, 'Expires'))->toBeLessThan(strpos($html, 'Copy link'));
|
|
});
|
|
|
|
it('passes row attributes through', function () {
|
|
expect((string) $this->blade('<x-card data-list-row><a href="/s/1" data-list-open>Open</a></x-card>'))
|
|
->toContain('data-list-row')
|
|
->toContain('data-list-open');
|
|
});
|
|
|
|
it('makes a directly actionable card the one tab stop, named by its title', function () {
|
|
$html = (string) $this->blade('<x-card actionable title="holiday-photos.zip"><a href="/s/1" data-list-open tabindex="-1">Open</a></x-card>');
|
|
|
|
expect($html)
|
|
->toContain('data-list-row')
|
|
->toContain('data-list-actionable')
|
|
->toContain('tabindex="0"')
|
|
->toContain('role="button"')
|
|
->toContain('aria-label="holiday-photos.zip"')
|
|
->and((string) $this->blade('<x-card actionable role="link" title="Share">Body</x-card>'))
|
|
->toContain('role="link"')
|
|
->and(substr_count((string) $this->blade('<x-card actionable role="link" title="Share">Body</x-card>'), 'role="link"'))->toBe(1)
|
|
->and((string) $this->blade('<x-card title="Share">Body</x-card>'))
|
|
->not->toContain('data-list-actionable')
|
|
->not->toContain('tabindex');
|
|
});
|
|
|
|
it('draws M3\'s dragged state while the application says the card is being carried', function () {
|
|
$css = (string) file_get_contents(__DIR__.'/../../../resources/css/components/list.css');
|
|
|
|
expect((string) $this->blade('<x-card data-dragged variant="elevated">Body</x-card>'))
|
|
->toContain('data-dragged')
|
|
->and($css)
|
|
->toContain('[data-card][data-dragged] {')
|
|
->toContain('var(--md-sys-elevation-3),')
|
|
->toContain("[data-card='elevated'][data-dragged] {")
|
|
->toContain('var(--md-sys-elevation-4),')
|
|
->toContain('calc(var(--md-sys-state-dragged-state-layer-opacity) * 100%)')
|
|
->toContain(':not([data-dragged]):hover')
|
|
->toContain(':not([data-dragged]):active');
|
|
});
|