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. */
|
/* Fixes badge with emoji having different size. */
|
||||||
line-height: 1;
|
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
|
/* Blended with `--fg`, not the raw accent — a stylix-fed scheme can pick
|
||||||
any hue/lightness for `--green`/`--amber`/etc., and nothing guarantees
|
any hue/lightness for `--green`/`--amber`/etc., and nothing guarantees
|
||||||
an arbitrary accent clears 4.5:1 against `--purple-dim` the way the two
|
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. */
|
/** Decorative glyph before the label; `aria-hidden`, the text is still the real label. */
|
||||||
icon?: ComponentChildren;
|
icon?: ComponentChildren;
|
||||||
/**
|
/**
|
||||||
* Present → renders a `<button>` (real control, min touch target) and
|
* Present → renders a `<button>` (real control, min touch target),
|
||||||
* shows a disclosure caret. Absent → renders a plain `<span>` (status
|
* `aria-expanded` reflecting `expanded`. Absent → renders a plain
|
||||||
* display only, e.g. "alive"/"idle 6m").
|
* `<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;
|
onClick?: (e: MouseEvent) => void;
|
||||||
/** Only meaningful with `onClick` — drives the caret direction + `aria-expanded`. */
|
/** Only meaningful with `onClick` — drives the caret direction + `aria-expanded`. */
|
||||||
|
|
@ -89,11 +91,6 @@ export function Badge({
|
||||||
) : null}
|
) : null}
|
||||||
{label ? <span class="ui-badge-label">{label}</span> : null}
|
{label ? <span class="ui-badge-label">{label}</span> : null}
|
||||||
<span class="ui-badge-value">{value}</span>
|
<span class="ui-badge-value">{value}</span>
|
||||||
{onClick ? (
|
|
||||||
<span class="ui-badge-caret" aria-hidden="true">
|
|
||||||
{expanded ? '▴' : '▾'}
|
|
||||||
</span>
|
|
||||||
) : null}
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
if (onClick) {
|
if (onClick) {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue