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

Square the rail's collapsed FAB whatever size it is

Browse Source 
The actions stream has since given the small extended FAB an 80px minimum width,
which the morph would have kept once the label closed. Dropping that minimum and
squaring the box against the height its size already sets gives back the 56, 80
or 96px FAB without this file naming any of those numbers.
Plan: docs/plans/material-3-alignment.md, step 21 (navigation N-23).

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:19:18 +02:00
co-authored by Claude Opus 5
parent b921be855d
commit 2482a0b6d4
2 changed files with 14 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/NavigationRailTest.php
+6 -11
View File
@@ -67,21 +67,16 @@ it('takes M3\'s optional divider and turns the container fill off', function ()
->toMatch("/\\[data-navigation-rail='collapsible'\\] \\{\\s+width: 6rem;/");
});
it('flattens a FAB nested in the rail header to elevation 0', function () {
$html = (string) $this->blade(<<<'BLADE'
<x-navigation-rail mode="expanded">
<x-slot:header><x-fab icon="edit" tooltip-right="Compose" /></x-slot:header>
</x-navigation-rail>
BLADE);
// The hook the unlayered rules in navigation.css need (N-03).
expect($html)->toContain('data-fab');
it('flattens a FAB nested in the rail header and morphs its label', function () {
// Both rules hang off `data-fab` on <x-fab>'s root, and both are unlayered, because what they
// beat — the FAB's shadow, its gap, an extended FAB's minimum width — are utilities.
expect(file_get_contents(__DIR__.'/../../../resources/css/components/navigation.css'))
// A nested FAB rests at elevation 0, not the 3 a standalone one has (N-03).
->toContain('[data-navigation-rail-header] [data-fab],')
->toContain('[data-navigation-rail-header] [data-fab]:hover {')
// One FAB whose label springs shut, not two swapped by display (N-23).
->toContain('[data-navigation-rail-header] [data-fab] > span {');
->toContain('[data-navigation-rail-header] [data-fab] > span {')
->toMatch('/@variant rail-collapsed \{\s+min-width: 0;\s+aspect-ratio: 1;\s+gap: 0;/');
});
it('draws a destination in both shapes, with its count on the icon and at the end', function () {