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

Rewrite the showcase's Menus section without Tailwind

Browse Source 
Plan step 38: text moves onto the md-* classes; the "Icons in their
own colour" example's two roles outside the fixed md-ink-* set
(tertiary, secondary) move to a data-md-showcase-icon-color hook in
showcase.css targeting the item's [data-md-icon] child, since
icon-class only reaches roles the fixed set already names. Swimming's
info icon keeps icon-class, now icon-class="md-ink-info".

Every id, aria-label and role selector the Chromium ActionsTest
selectors read against /material/menus (#menus, the More/Sort/Share/
Assign to/Photo triggers, the submenu and sheet-at-compact behaviour)
is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 04:46:00 +02:00
co-authored by Claude Sonnet 5
parent 9aab3fbe67
commit 4d1481c832
2 changed files with 18 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/showcase.css
+10
View File
@@ -349,4 +349,14 @@
justify-content: flex-end;
height: 288px;
}
/* Menus: an item's icon in a colour beyond the fixed md-ink-* set (icon-class covers the
roles that set already has, md-ink-info among them). */
[data-md-showcase-icon-color='tertiary'] [data-md-icon] {
color: var(--md-sys-color-tertiary);
}
[data-md-showcase-icon-color='secondary'] [data-md-icon] {
color: var(--md-sys-color-secondary);
}
}
resources/views/showcase/sections/menus.blade.php
+8 -8
View File
@@ -130,19 +130,19 @@
<x-button label="New plan" icon="add" variant="filled" />
</x-slot:trigger>
<x-menu-item label="Running" icon="directions_run" icon-class="text-tertiary" />
<x-menu-item label="Cycling" icon="directions_bike" icon-class="text-secondary" />
<x-menu-item label="Swimming" icon="pool" icon-class="text-info" />
<x-menu-item label="Rowing" icon="rowing" icon-class="text-tertiary" disabled />
<x-menu-item label="Running" icon="directions_run" data-md-showcase-icon-color="tertiary" />
<x-menu-item label="Cycling" icon="directions_bike" data-md-showcase-icon-color="secondary" />
<x-menu-item label="Swimming" icon="pool" icon-class="md-ink-info" />
<x-menu-item label="Rowing" icon="rowing" data-md-showcase-icon-color="tertiary" disabled />
</x-menu>
BLADE,
];
@endphp
<section id="menus" class="scroll-mt-24 space-y-6">
<h2 class="type-headline-md">Menus</h2>
<x-livewire-material::stack as="section" id="menus" gap="space300">
<h2 class="md-type-headline-md">Menus</h2>
<p class="max-w-3xl type-body-md text-on-surface-variant">
<p class="md-type-body-md md-ink-variant">
<code>&lt;x-menu&gt;</code> with <code>&lt;x-menu-item&gt;</code>, <code>&lt;x-menu-group&gt;</code> and <code>&lt;x-menu-separator&gt;</code>.
Open one with the keyboard too: arrows, Home, End, a letter, Escape. A <code>submenu</code> item opens a second list beside it
&mdash; Right to enter it, Left to come back. A <code>sheet-at-compact</code> menu opens the same items in a bottom sheet
@@ -152,4 +152,4 @@
@foreach ($examples as $title => $code)
<x-showcase::example :$title :$code />
@endforeach
</section>
</x-livewire-material::stack>