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:
parent
4fbfd4dc52
commit
88c69f2953
2 changed files with 5 additions and 12 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue