Draw the menu separator without Tailwind
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:
co-authored by
Claude Opus 5
parent
b573cfbcc2
commit
6df034f81a
@@ -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) {
|
||||
|
||||
@@ -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');
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user