Add the feed canonical layout

Plan step 35: <x-feed min-item gap>, following the reference's feed rules - one column below medium, then as many equal columns of at least the minimum item width as the feed has room for, 24px apart from medium, items in their source order. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-14 14:51:30 +02:00
parent 9eb06323aa
commit acd6ba21ae
7 changed files with 179 additions and 0 deletions
@@ -0,0 +1,42 @@
+<?php
+
+it('lays out a feed with a 240px minimum item and M3\'s spacer', function () {
+    $html = (string) $this->blade('<x-feed><article>One</article><article>Two</article></x-feed>');
+
+    expect(layoutRoot($html))->toMatchArray(['<' => 'div', 'data-md-feed' => 'data-md-feed', 'style' => '--md-min-item: 240px;'])
+        ->not->toHaveKey('data-md-gap')
+        ->and($html)->toContain('<article>One</article><article>Two</article>');
+});
+
+it('takes a minimum item width as a length or a number of px', function () {
+    foreach (['280px' => '280px', '18rem' => '18rem', '320' => '320px'] as $given => $length) {
+        expect(layoutRoot((string) $this->blade('<x-feed :min-item="$m" />', ['m' => $given]))['style'])->toBe("--md-min-item: {$length};");
+    }
+
+    expect(layoutRoot((string) $this->blade('<x-feed min-item="a third" />'))['style'])->toBe('--md-min-item: 240px;');
+});
+
+it('replaces the spacer with a spacing token, and with no gap for an unknown one', function () {
+    expect(layoutRoot((string) $this->blade('<x-feed gap="space400" />'))['data-md-gap'])->toBe('space400')
+        ->and(layoutRoot((string) $this->blade('<x-feed gap="wide" />'))['data-md-gap'])->toBe('none');
+});
+
+it('takes the element, the visibility props, and the caller\'s class and style after its own', function () {
+    expect(layoutRoot((string) $this->blade('<x-feed as="ul" hide-below="medium" class="photos" style="padding-block: 1rem" />')))
+        ->toMatchArray([
+            '<' => 'ul',
+            'data-md-hide-below' => 'medium',
+            'class' => 'photos',
+            'style' => '--md-min-item: 240px; padding-block: 1rem;',
+        ]);
+});
+
+it('keeps one column on a compact window and fills columns from medium, in the layout layer', function () {
+    $css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/feed.css');
+
+    expect($css)->toContain('@layer material.layout')
+        ->toContain("[data-md-feed] {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr);")
+        ->toContain("@media (width >= 600px) {\n            grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--md-min-item, 240px)), 1fr));")
+        ->not->toContain('grid-auto-flow')
+        ->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/feed.css';");
+});