shared badge: drop the disclosure chevron

mara, #3757: remove the chevrons. aria-expanded's own outline/bg
stays as the only affordance.
This commit is contained in:
iris 2026-08-30 13:35:41 +02:00 committed by mara
commit 88c69f2953
2 changed files with 5 additions and 12 deletions

View file

@ -93,10 +93,6 @@
/* Fixes badge with emoji having different size. */
line-height: 1;
}
.ui-badge-caret {
font-size: 0.75em;
color: var(--muted-on-dim);
}
/* Blended with `--fg`, not the raw accent a stylix-fed scheme can pick
any hue/lightness for `--green`/`--amber`/etc., and nothing guarantees
an arbitrary accent clears 4.5:1 against `--purple-dim` the way the two

View file

@ -47,9 +47,11 @@ export interface BadgeProps {
/** Decorative glyph before the label; `aria-hidden`, the text is still the real label. */
icon?: ComponentChildren;
/**
* Present renders a `<button>` (real control, min touch target) and
* shows a disclosure caret. Absent renders a plain `<span>` (status
* display only, e.g. "alive"/"idle 6m").
* Present renders a `<button>` (real control, min touch target),
* `aria-expanded` reflecting `expanded`. Absent renders a plain
* `<span>` (status display only, e.g. "alive"/"idle 6m"). No visible
* disclosure caret (mara: "remove the chevrons") `hover` +
* `aria-expanded`'s outline/bg (Badge.css) are the only affordance.
*/
onClick?: (e: MouseEvent) => void;
/** Only meaningful with `onClick` — drives the caret direction + `aria-expanded`. */
@ -89,11 +91,6 @@ export function Badge({
) : null}
{label ? <span class="ui-badge-label">{label}</span> : null}
<span class="ui-badge-value">{value}</span>
{onClick ? (
<span class="ui-badge-caret" aria-hidden="true">
{expanded ? '▴' : '▾'}
</span>
) : null}
</>
);
if (onClick) {