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

Draw the menu separator without Tailwind

Browse Source 
The separator renders data-md-menu-separator and takes its 1px line,
8px block margin and 16px inset from menu-separator.css in
material.components (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 15:47:07 +02:00
co-authored by Claude Opus 5
parent b573cfbcc2
commit 6df034f81a
5 changed files with 26 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components.css
+1
View File
@@ -20,6 +20,7 @@
@import './components/button-group.css';
@import './components/split-button.css';
@import './components/fab.css';
@import './components/menu-separator.css';
/* Inputs, selection and data */
@import './components/form.css';
resources/css/components/menu-separator.css
+18
View File
@@ -0,0 +1,18 @@
/*
* <x-menu-separator>: a line between groups of items in a menu — 1px in `outline-variant`, with
* M3's 8px above and below it, inset to the 16px the items keep either side (M3's menu page:
* "dividers are more subtle and are the right choice for scrollable menus"; SegmentedMenuTokens'
* divider spacing).
*/
@layer material.reset, material.tokens, material.base, material.layout, material.components, material.text, material.visibility;
@layer material.components {
[data-md-menu-separator] {
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);
}
}
resources/views/components/menu-separator.blade.php
+2 -2
View File
@@ -1,4 +1,4 @@
{{-- A line between groups of items in an `<x-menu>`: 1px, with M3's 8px above and below it, inset
to the 16px the items keep either side. --}}
to the 16px the items keep either side. Drawn by resources/css/components/menu-separator.css. --}}
<hr role="separator" {{ $attributes->class('mx-4 my-2 h-px border-0 bg-outline-variant') }} />
<hr role="separator" data-md-menu-separator {{ $attributes }} />
tests/Feature/Components/ActionStylesheetsTest.php
+1
View File
@@ -19,6 +19,7 @@ dataset('action components', [
'button-group',
'split-button',
'fab',
'menu-separator',
]);
it('draws the component from a stylesheet shaped like every package stylesheet', function (string $name) {
tests/Feature/Components/MenuTest.php
+4 -1
View File
@@ -1,5 +1,7 @@
<?php
use NoNameWeb\LivewireMaterial\Tests\Support\ComponentStylesheet;
it('opens a popover menu from its trigger', function () {
$html = (string) $this->blade(<<<'BLADE'
<x-menu label="Share actions">
@@ -68,7 +70,8 @@ it('makes a selectable item a menuitemcheckbox, ticked at its end', function ()
it('gives an item M3\'s 48px row and 16px sides, and the separator its 8px', function () {
expect((string) $this->blade('<x-menu-item label="Copy" />'))->toContain('min-h-12')->toContain('px-4')
->and((string) $this->blade('<x-menu-separator />'))->toContain('mx-4 my-2')
->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');
});