Andreas Reinhold / reiniandClaude Opus 5
247c596c3a
An over-engineering audit of the whole tree, applied in five reviewed batches. Behaviour stays the same except where UPGRADE.md says otherwise. PHP: the showcase and error-page stylesheets are prebuilt into resources/dist by bin/stylesheets.mjs, through Vite's own postcss-import (first occurrence kept, the order an application's build gives), instead of Stylesheets::bundle() inlining imports on every request; only the import walk DesignGuard needs stays. SchemeStylesheet::withProfiles() replaces three copies of the scheme-plus-profiles loop, material:scheme leaves spec and contrast checks to the node script that already made them, and the error page's scheme cache, the hashed view namespace, the translations path with no lang/ folder and DesignGuard's 1.x-name hints are gone. JS: the androidx shape port progress.js and both bin scripts each carried lives once in resources/js/shapes.js (the generated SVGs are unchanged); util.js holds ringIndex(), ms(), reopenGuard() and remember(), which were written out several times; listeners are released through AbortController; tooltip.js's hoverPopover() serves the rich tooltip too. CSS: every rule for an element inside the navigation rail queries `--md-navigation-rail-value` instead of repeating the seven collapsed conditions under five media branches; badge, alert, progress, slider and button read one non-inheriting colour-role table (components/color.css); the dialog chrome, the submenu's popover chrome, the chip's state layer and touch target, and the visually-hidden inputs use the shared rules they copied; foundation/tokens.css is folded into foundation.css. Views: Support\Field and Support\Link replace the error-key, bound-value and link-attribute blocks copied into the fields and link components; the timepicker period group, the menu filter and the showcase head are partials; the datepicker's steppers and entry fields are loops; component docblocks no longer restate SKILL.md. Tests and tooling: one dataset-driven ComponentStylesheetsTest replaces four per-group files, DesignGuardTest and the layout-component tests use datasets, browser tests share one ready() helper, CSS parsing lives in ComponentStylesheet alone. docs/audits and the finding IDs citing it are removed, as are pestphp/pest-plugin-laravel, the unused composer scripts and check:font; the lint job runs in the feature job, which now installs node packages so the prebuilt-stylesheet staleness test runs in CI. Feature suite 1177 passed, Chrome browser suite 299 passed. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
81 lines
3.8 KiB
PHP
81 lines
3.8 KiB
PHP
{{-- A badge: M3's count or dot on an icon, or a short status label.
|
|
|
|
M3's two badges (BadgeTokens, androidx Compose Material 3, Apache-2.0):
|
|
- `<x-badge />` — the small badge, a 6px dot: something new, no number.
|
|
- `<x-badge value="3" />` — the large badge, 16px tall, label-small: a count. `max` caps what is
|
|
shown ("99+").
|
|
Both are `error` by default, as M3 draws them, and an `outline` status label draws its edge in
|
|
`outline`, not `outline-variant`: M3 asks a badge for 3:1 against what is behind it, and
|
|
`outline-variant` is the decorative role dividers use. `floating` pins one to the top-end
|
|
corner of a `position: relative` parent, on M3's anchor geometry — the dot flush in the corner,
|
|
the count 2px above it — an icon or an icon button:
|
|
|
|
<span style="position: relative; display: inline-flex"><x-icon name="notifications" /><x-badge value="4" floating /></span>
|
|
|
|
The status label is not an M3 badge but every app needs one: `tonal` draws the value in the
|
|
colour's container ("Expired" in error-container), `solid` in the colour itself (a label that
|
|
has to stand out, "Built in" in primary), `outline` in a neutral edge. `color` (alias
|
|
`tone`): `error` (the default), `primary`, `secondary`, `tertiary`, `success`, `warning`, `info`,
|
|
and two without a hue of their own:
|
|
- `neutral` — neutral ink on every variant: on-surface-variant with surface text as a dot or
|
|
count (the ink an outline badge already writes in), surface-container-high with
|
|
on-surface-variant text when `tonal`, the outline edge when `outline`.
|
|
- `plain` — no background, text or border colour at all, only shape, size and type, so the
|
|
caller's CSS paints it.
|
|
|
|
The value is `value`, or the slot, which renders as HTML — an icon beside the word:
|
|
`<x-badge tonal><x-icon name="bolt" size="12" /> Pro</x-badge>`. With neither it is a dot.
|
|
|
|
A count or dot says nothing to a screen reader on its own: give the icon's control a label
|
|
that includes it ("Notifications, 4 new"), or pass `label` here.
|
|
|
|
Drawn by resources/css/components/badge.css from `data-md-dot` (the small badge),
|
|
`data-md-variant` (a status label: `solid`, `tonal` or `outline`, the first of them that is
|
|
set, in that order), `data-md-color` and `data-md-floating`. --}}
|
|
|
|
@props([
|
|
'value' => null,
|
|
'max' => null,
|
|
'color' => null,
|
|
'tone' => null,
|
|
'tonal' => false,
|
|
'solid' => false,
|
|
'outline' => false,
|
|
'floating' => false,
|
|
'label' => null,
|
|
])
|
|
|
|
@php
|
|
$color = in_array($color ?? $tone, ['primary', 'secondary', 'tertiary', 'error', 'success', 'warning', 'info', 'neutral', 'plain'], true) ? ($color ?? $tone) : 'error';
|
|
// hasActualContent(): a slot holding only a comment, or an empty @foreach, is still a dot.
|
|
$markup = $value === null && $slot->hasActualContent();
|
|
$text = $value ?? ($markup ? trim((string) $slot) : null);
|
|
$dot = blank($text);
|
|
$status = ($tonal || $solid || $outline) && ! $dot;
|
|
|
|
if (! $dot && $max !== null && is_numeric($text) && (int) $text > (int) $max) {
|
|
$text = $max.'+';
|
|
$markup = false;
|
|
}
|
|
|
|
// `solid` wins over `tonal`, and either over `outline`, as the three have always resolved.
|
|
$variant = match (true) {
|
|
! $status => null,
|
|
(bool) $solid => 'solid',
|
|
(bool) $tonal => 'tonal',
|
|
default => 'outline',
|
|
};
|
|
|
|
$attributes = $attributes->merge([
|
|
'data-md-badge' => true,
|
|
'data-md-dot' => $dot ? true : null,
|
|
'data-md-variant' => $variant,
|
|
'data-md-color' => $color,
|
|
'data-md-floating' => $floating ? true : null,
|
|
'aria-label' => $label,
|
|
'aria-hidden' => $label === null && ! $status ? 'true' : null,
|
|
]);
|
|
@endphp
|
|
|
|
<span {{ $attributes }}>@unless ($dot)@if ($markup){{ $slot }}@else{{ $text }}@endif@endunless</span>
|