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

Draw the menu group without Tailwind

Browse Source 
<x-menu-group> renders data-md-menu-group with data-md-gap and no
class list; menu-group.css draws the plain cluster's 4px padding and
the gapped Expressive layout's 2px item gap and 8px cluster margin
from SegmentedMenuTokens (plan step 36, actions).

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 16:08:25 +02:00
co-authored by Claude Opus 5
parent 2acd9ab492
commit 2f8fb2183f
5 changed files with 76 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Feature/Components/ActionStylesheetsTest.php
+1
View File
@@ -20,6 +20,7 @@ dataset('action components', [
'split-button',
'fab',
'menu-separator',
'menu-group',
]);
it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {
tests/Feature/Components/MenuTest.php
+14 -7
View File
@@ -72,7 +72,11 @@ it('gives an item M3\'s 48px row and 16px sides, and the separator its 8px', fun
expect((string) $this->blade('<x-menu-item label="Copy" />'))->toContain('min-h-12')->toContain('px-4')
->and(trim((string) $this->blade('<x-menu-separator />')))->toBe('<hr role="separator" data-md-menu-separator />')
->and(ComponentStylesheet::read('menu-separator')->declarations('[data-md-menu-separator]'))->toBe(['block-size' => '1px', 'margin-block' => 'var(--md-sys-measurement-space100)', 'margin-inline' => 'var(--md-sys-measurement-space200)', 'border-width' => '0', 'background-color' => 'var(--md-sys-color-outline-variant)'])
->and((string) $this->blade('<x-menu-group label="Sort by" />'))->toContain('px-4 pt-2 pb-1');
->and((string) $this->blade('<x-menu-group label="Sort by" />'))->toContain('data-md-menu-group-label')
->and(ComponentStylesheet::read('menu-group')->declarations('[data-md-menu-group-label]'))->toMatchArray([
'padding-inline' => 'var(--md-sys-measurement-space200)',
'padding-block' => 'var(--md-sys-measurement-space100) var(--md-sys-measurement-space50)',
]);
});
it('marks the page an item leads to, and carries a badge', function () {
@@ -108,21 +112,24 @@ it('separates and labels groups', function () {
it('separates clusters by a gap instead of a divider when asked', function () {
$html = (string) $this->blade('<x-menu-group gap><x-menu-item label="Cut" /></x-menu-group>');
$css = ComponentStylesheet::read('menu-group');
// M3 Expressive's grouped layout: 2px between the items of a cluster, 8px between clusters —
// the same 8px the divider keeps above and below its line.
expect($html)
->toContain('role="group"')
->toContain('not-first:mt-2')
->toContain('space-y-0.5')
->toContain('data-md-gap')
->toContain('data-md-menu-group-items')
->not->toContain('aria-label')
->not->toContain('py-1 first:pt-0')
->and($css->declarations('[data-md-menu-group][data-md-gap]:not(:first-child)'))->toBe(['margin-block-start' => 'var(--md-sys-measurement-space100)'])
->and($css->declarations('[data-md-menu-group-items]'))->toMatchArray(['gap' => 'var(--md-sys-measurement-space25)'])
->and((string) $this->blade('<x-menu-group label="Then" gap><x-menu-item label="Cut" /></x-menu-group>'))
->toContain('aria-label="Then"')
->toContain('space-y-0.5')
->toContain('data-md-menu-group-items')
->and((string) $this->blade('<x-menu-group label="Sort by"><x-menu-item label="Newest" /></x-menu-group>'))
->toContain('py-1 first:pt-0 last:pb-0')
->not->toContain('space-y-0.5');
->not->toContain('data-md-gap')
->not->toContain('data-md-menu-group-items')
->and($css->declarations('[data-md-menu-group]:not([data-md-gap])'))->toBe(['padding-block' => 'var(--md-sys-measurement-space50)']);
});
it('adds icon-class to the leading icon, over its own colour but not over disabled', function () {