gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-03-04 11:56:09 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

ui/buttons: add support for low profile style

Browse Source
This commit is contained in:
Adorian Doran 2026-02-16 18:15:29 +02:00
parent ea25477e3d
commit d64f2c72b7
1 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
apps/client/src/widgets/react/Button.tsx
View File

@ -18,7 +18,7 @@ export interface ButtonProps {
keyboardShortcut?: string; keyboardShortcut?: string;
/** Called when the button is clicked. If not set, the button will submit the form (if any). */ /** Called when the button is clicked. If not set, the button will submit the form (if any). */
onClick?: () => void; onClick?: () => void;
primary?: boolean; kind?: "primary" | "secondary" | "lowProfile";
disabled?: boolean; disabled?: boolean;
size?: "normal" | "small" | "micro"; size?: "normal" | "small" | "micro";
style?: CSSProperties; style?: CSSProperties;
@ -26,15 +26,23 @@ export interface ButtonProps {
title?: string; title?: string;
} }
const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style, triggerCommand, ...restProps }: ButtonProps) => { const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortcut, icon, kind, disabled, size, style, triggerCommand, ...restProps }: ButtonProps) => {
// Memoize classes array to prevent recreation // Memoize classes array to prevent recreation
const classes = useMemo(() => { const classes = useMemo(() => {
const classList: string[] = ["btn"]; const classList: string[] = ["btn"];
if (primary) {
classList.push("btn-primary"); switch(kind) {
} else { case "primary":
classList.push("btn-secondary"); classList.push("btn-primary");
break;
case "lowProfile":
classList.push("tn-low-profile");
break;
default:
classList.push("btn-secondary");
break;
} }
if (className) { if (className) {
classList.push(className); classList.push(className);
} }
@ -44,7 +52,7 @@ const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortc
classList.push("btn-micro"); classList.push("btn-micro");
} }
return classList.join(" "); return classList.join(" ");
}, [primary, className, size]); }, [kind, className, size]);
// Memoize keyboard shortcut rendering // Memoize keyboard shortcut rendering
const shortcutElements = useMemo(() => { const shortcutElements = useMemo(() => {