Draw the menu group without Tailwind
<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:
co-authored by
Claude Opus 5
parent
2acd9ab492
commit
2f8fb2183f
@@ -16,7 +16,9 @@
|
||||
list round and each cluster reads as one block. Clusters stand 8px apart, the same 8px a
|
||||
separator keeps above and below its line, so a menu is the same height whichever it uses.
|
||||
SegmentedMenuTokens' own GroupShape is 8dp where the library's list ends are 12dp; the
|
||||
library's shape wins, so a cluster's ends and a list's ends match. --}}
|
||||
library's shape wins, so a cluster's ends and a list's ends match.
|
||||
|
||||
Drawn by resources/css/components/menu-group.css from `data-md-gap`. --}}
|
||||
|
||||
@props([
|
||||
'label' => null,
|
||||
@@ -24,24 +26,21 @@
|
||||
])
|
||||
|
||||
@php
|
||||
$attributes = $attributes
|
||||
->class([
|
||||
'py-1 first:pt-0 last:pb-0' => ! $gap,
|
||||
'not-first:mt-2' => $gap,
|
||||
])
|
||||
->merge(array_filter([
|
||||
'role' => 'group',
|
||||
'aria-label' => $label,
|
||||
], fn ($value): bool => filled($value)));
|
||||
$attributes = $attributes->merge(array_filter([
|
||||
'data-md-menu-group' => true,
|
||||
'data-md-gap' => $gap ? true : null,
|
||||
'role' => 'group',
|
||||
'aria-label' => filled($label) ? $label : null,
|
||||
], fn ($value): bool => $value !== null));
|
||||
@endphp
|
||||
|
||||
<div {{ $attributes }}>
|
||||
@if (filled($label))
|
||||
<div aria-hidden="true" class="px-4 pt-2 pb-1 type-label-lg text-on-surface-variant">{{ $label }}</div>
|
||||
<div data-md-menu-group-label aria-hidden="true">{{ $label }}</div>
|
||||
@endif
|
||||
|
||||
@if ($gap)
|
||||
<div class="space-y-0.5">{{ $slot }}</div>
|
||||
<div data-md-menu-group-items>{{ $slot }}</div>
|
||||
@else
|
||||
{{ $slot }}
|
||||
@endif
|
||||
|
||||
Reference in New Issue
Block a user