Add the row layout component

Plan step 35: <x-row gap align justify wrap stack-below>, children side by side in a pane and stacked under one another below an M3 breakpoint, in the inline direction so a right-to-left document mirrors it. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-14 14:50:39 +02:00
parent b677e60876
commit 8de053f15c
6 changed files with 247 additions and 0 deletions
@@ -72,3 +72,26 @@ it('spaces a stack with its token, never with its parent\'s, and hides it from a
    layoutPage($body, 600)
        ->assertScript(layoutStyle('#hidden-from', 'display')." === 'none'");
 });
+
+it('stacks a row below its breakpoint and lays it side by side from it', function () {
+    $body = '<x-row id="row" gap="space200" stack-below="medium"><span>One</span><span>Two</span></x-row>'
+        .'<x-row id="aligned" align="start" stack-below="medium"><span>One</span></x-row>'
+        .'<x-row id="hidden" hide-below="medium"><span>Medium and up</span></x-row>';
+
+    layoutPage($body, 599)
+        ->assertScript(layoutStyle('#row', 'flexDirection')." === 'column'")
+        ->assertScript(layoutStyle('#row', 'alignItems')." === 'stretch'")
+        ->assertScript(layoutStyle('#aligned', 'alignItems')." === 'flex-start'")
+        ->assertScript(layoutStyle('#row', 'rowGap')." === '16px'")
+        ->assertScript(layoutStyle('#hidden', 'display')." === 'none'");
+
+    layoutPage($body, 600)
+        ->assertScript(layoutStyle('#row', 'flexDirection')." === 'row'")
+        ->assertScript(layoutStyle('#row', 'alignItems')." === 'center'")
+        ->assertScript(layoutStyle('#hidden', 'display')." === 'flex'");
+});
+
+it('mirrors a row in a right-to-left document', function () {
+    layoutPage('<x-row id="row"><span id="first">First</span><span id="second">Second</span></x-row>', 800, 600, 'rtl')
+        ->assertScript(layoutRect('#first', 'left').' > '.layoutRect('#second', 'left'));
+});
@@ -0,0 +1,60 @@
+<?php
+
+it('lays its children side by side in a div, with nothing set but itself', function () {
+    $root = layoutRoot((string) $this->blade('<x-row><span>One</span><span>Two</span></x-row>'));
+
+    expect($root)->toMatchArray(['<' => 'div', 'data-md-row' => 'data-md-row'])
+        ->not->toHaveKeys(['data-md-gap', 'data-md-align', 'data-md-justify', 'data-md-wrap', 'data-md-stack-below']);
+});
+
+it('spaces its children with a spacing token only, and with none for anything else', function () {
+    expect(layoutRoot((string) $this->blade('<x-row gap="space100" />'))['data-md-gap'])->toBe('space100')
+        ->and(layoutRoot((string) $this->blade('<x-row gap="tight" />'))['data-md-gap'])->toBe('none');
+});
+
+it('aligns its children across it and places them along it', function () {
+    foreach (['center', 'start', 'end', 'stretch', 'baseline'] as $align) {
+        expect(layoutRoot((string) $this->blade('<x-row :align="$align" />', ['align' => $align]))['data-md-align'])->toBe($align);
+    }
+
+    foreach (['start', 'center', 'end', 'between'] as $justify) {
+        expect(layoutRoot((string) $this->blade('<x-row :justify="$justify" />', ['justify' => $justify]))['data-md-justify'])->toBe($justify);
+    }
+
+    expect(layoutRoot((string) $this->blade('<x-row align="middle" justify="around" />')))->not->toHaveKeys(['data-md-align', 'data-md-justify']);
+});
+
+it('wraps only when asked', function () {
+    expect(layoutRoot((string) $this->blade('<x-row wrap />')))->toHaveKey('data-md-wrap')
+        ->and(layoutRoot((string) $this->blade('<x-row :wrap="false" />')))->not->toHaveKey('data-md-wrap');
+});
+
+it('stacks below one of M3\'s breakpoints, and never below compact', function () {
+    foreach (['medium', 'expanded', 'large', 'extra-large'] as $breakpoint) {
+        expect(layoutRoot((string) $this->blade('<x-row :stack-below="$b" />', ['b' => $breakpoint]))['data-md-stack-below'])->toBe($breakpoint);
+    }
+
+    foreach (['compact', 'tablet', '600'] as $breakpoint) {
+        expect(layoutRoot((string) $this->blade('<x-row :stack-below="$b" />', ['b' => $breakpoint])))->not->toHaveKey('data-md-stack-below');
+    }
+});
+
+it('takes the element, the visibility props and the caller\'s class and style', function () {
+    expect(layoutRoot((string) $this->blade('<x-row as="nav" hide-from="expanded" class="toolbar-row" style="min-height: 3rem" aria-label="Filters" />')))
+        ->toMatchArray([
+            '<' => 'nav',
+            'data-md-hide-from' => 'expanded',
+            'class' => 'toolbar-row',
+            'style' => 'min-height: 3rem;',
+            'aria-label' => 'Filters',
+        ]);
+});
+
+it('draws the row from a stylesheet in the layout layer, stacking at the breakpoint in px', function () {
+    $css = (string) file_get_contents(__DIR__.'/../../../resources/css/layout/row.css');
+
+    expect($css)->toContain('@layer material.layout')
+        ->toContain("@media (width < 840px) {\n        [data-md-row][data-md-stack-below='expanded'] {\n            flex-direction: column;")
+        ->toContain("[data-md-row][data-md-stack-below='expanded']:not([data-md-align]) {\n            align-items: stretch;")
+        ->and((string) file_get_contents(__DIR__.'/../../../resources/css/layout.css'))->toContain("@import './layout/row.css';");
+});