mara/hyperhive
mara/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Activity

fixup! swarm-ui: shared Hint, ActionRow, Toolbar, EmptyState, ExternalLink and ExpandableCard replace per-page copies

Browse source
This commit is contained in:
iris 2026-11-06 17:59:32 +01:00 • committed by mara
commit 2b53fcd742
2 changed files with 31 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/packages/swarm-ui/src/ui/expandable-card/ExpandableCard.tsx
View file

@ -10,8 +10,10 @@
//
// `ExpandableCardSkeleton` is its twin for a list that is loading: the same
// card and the same head layout with a placeholder in each slot.
// `ExpandableCardListSkeleton` is a few of them in a `SkeletonRegion`, so
// assistive tech hears once that the list is loading.
import type { ComponentChildren } from "preact";
import { Skeleton } from "../skeleton/Skeleton.js";
import { Skeleton, SkeletonRegion } from "../skeleton/Skeleton.js";
import { Card } from "../card/Card.js";
import "./ExpandableCard.css";
@ -92,6 +94,25 @@ export function ExpandableCard({
);
}
export function ExpandableCardListSkeleton({
label,
count = 3,
metaOnOwnRow = false,
}: {
/** What is loading, as a screen reader says it: "the builds". */
label: string;
count?: number;
metaOnOwnRow?: boolean;
}) {
return (
<SkeletonRegion label={label}>
{Array.from({ length: count }, (_, i) => (
<ExpandableCardSkeleton key={i} metaOnOwnRow={metaOnOwnRow} />
))}
</SkeletonRegion>
);
}
export function ExpandableCardSkeleton({
metaOnOwnRow = false,
}: {

6
frontend/packages/swarm-ui/src/ui/hint/Hint.tsx
View file

@ -3,9 +3,9 @@
// for what each form and card used to restyle under its own class name, so
// "muted", "warning", "error" and "ok" mean the same colour everywhere.
//
// `error` and `warn` are read out when they appear (`role="alert"` for an
// error); the others are plain text unless the caller passes a `role`, such as
// `status` for a line that changes after a save. `class` is for a page's
// `error` is read out when it appears (`role="alert"`); the other tones are
// plain text unless the caller passes a `role`, such as `status` for a line
// that changes after a save. `class` is for a page's
// layout around the hint (a margin, a width), not for its colour.
import type { ComponentChildren } from "preact";
import "./Hint.css";