fixup! swarm-ui: shared Hint, ActionRow, Toolbar, EmptyState, ExternalLink and ExpandableCard replace per-page copies
This commit is contained in:
parent
2b53fcd742
commit
53ccbcb4b3
5 changed files with 5 additions and 33 deletions
|
|
@ -20,15 +20,6 @@
|
|||
color: var(--fg);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
/* `plain`: text only, no box, for a control that reads as a link in a row of
|
||||
text (it keeps the touch-target height). */
|
||||
.ui-button-plain {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
}
|
||||
.ui-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
import type { ComponentChildren } from "preact";
|
||||
import "./Button.css";
|
||||
|
||||
export type ButtonVariant = "primary" | "default" | "plain";
|
||||
export type ButtonVariant = "primary" | "default";
|
||||
|
||||
export function Button({
|
||||
variant = "default",
|
||||
|
|
|
|||
|
|
@ -5,23 +5,15 @@ import type { ComponentChildren } from "preact";
|
|||
|
||||
export function ExternalLink({
|
||||
href,
|
||||
title,
|
||||
class: extraClass,
|
||||
children,
|
||||
}: {
|
||||
href: string;
|
||||
title?: string;
|
||||
class?: string;
|
||||
children: ComponentChildren;
|
||||
}) {
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title={title}
|
||||
class={extraClass}
|
||||
>
|
||||
<a href={href} target="_blank" rel="noopener noreferrer" class={extraClass}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,6 +6,3 @@
|
|||
gap: 0.5em 0.75em;
|
||||
margin-block-end: 0.5em;
|
||||
}
|
||||
.ui-toolbar-start {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,16 @@
|
|||
// <Toolbar> — the bar above a list or a card: filters, a count, the refresh
|
||||
// picker. Items sit on one line and wrap when narrow, aligned to the end by
|
||||
// default (where the refresh picker sits on every page that has one).
|
||||
// picker. Items sit on one line and wrap when narrow, aligned to the end
|
||||
// (where the refresh picker sits on every page that has one).
|
||||
import type { ComponentChildren } from "preact";
|
||||
import "./Toolbar.css";
|
||||
|
||||
export function Toolbar({
|
||||
justify = "end",
|
||||
class: extraClass,
|
||||
children,
|
||||
}: {
|
||||
justify?: "start" | "end";
|
||||
class?: string;
|
||||
children: ComponentChildren;
|
||||
}) {
|
||||
const classes = [
|
||||
"ui-toolbar",
|
||||
justify === "start" && "ui-toolbar-start",
|
||||
extraClass,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
const classes = ["ui-toolbar", extraClass].filter(Boolean).join(" ");
|
||||
return <div class={classes}>{children}</div>;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue