DMC/studentportalen
1
1
Fork 0
Code Issues 50 Pull Requests 1 Actions Projects 1 Wiki Activity

button-component #29

Merged
stne3960 merged 22 commits from button-component into main 2025-12-12 11:52:31 +01:00
Conversation 6 Commits 22 Files Changed 24 +22 -16
1 changed files with 22 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 77f849b75c - Show all commits

38
frontend/src/components/Button/Button.tsx
View File

@ -11,27 +11,33 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
const variantClasses: Record<ButtonVariant, string> = {
primary: `
bg-primary text-base-canvas
border border-primary
hover(bg-secondary text-base-canvas border border-primary)
focus-visible(bg-base-canvas text-base-ink-strong border border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
bg-primary text-base-canvas
stne3960 marked this conversation as resolved Outdated
ansv7779 commented 2025-12-10 16:51:40 +01:00
Outdated
Review
Copy Link

This is unwieldy. Any way to break it down or group them somehow? Like the border styles, focus styles, colors, and so on.

Is it necessary to repeat the prefix or can you do something like hover:[a, b, c] instead of hover:a hover:b hover:c?

This is unwieldy. Any way to break it down or group them somehow? Like the border styles, focus styles, colors, and so on. Is it necessary to repeat the prefix or can you do something like `hover:[a, b, c]` instead of `hover:a hover:b hover:c`?
👍 1
border border-primary
hover:bg-secondary hover:text-base-canvas
hover:border hover:border-primary
focus-visible:bg-base-canvas focus-visible:text-base-ink-strong
focus-visible:border focus-visible:border-primary
focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100
`.trim(),
secondary: `
bg-base-canvas text-base-ink-strong
secondary: `bg-base-canvas text-base-ink-strong
border-solid [border-width:var(--border-width-sm)] border-base-ink-soft
hover(bg-base-canvas text-base-ink-strong border-base-ink-medium)
focus-visible(bg-base-canvas text-base-ink-strong border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
`.trim(),
hover:bg-base-canvas hover:text-base-ink-strong
hover:border-base-ink-medium
focus-visible:bg-base-canvas focus-visible:text-base-ink-strong
focus-visible:border-primary
focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100
`.trim(),
red: `
bg-other-red-100 text-su-white
focus-visible(bg-base-canvas text-base-ink-strong border border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
bg-other-red-100 text-su-white
focus-visible:bg-base-canvas focus-visible:text-base-ink-strong
focus-visible:border-primary focus-visible:border
focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100
`.trim(),
green: `
bg-other-green text-su-white
focus-visible(bg-base-canvas text-base-ink-strong border border-primary outline outline-[length:var(--border-width-lg)] outline-sky-100)
focus-visible:bg-base-canvas focus-visible:text-base-ink-strong
focus-visible:border-primary focus-visible:border
focus-visible:outline focus-visible:outline-[length:var(--border-width-lg)] focus-visible:outline-sky-100
`.trim(),
};
@ -62,7 +68,7 @@ export default function Button({
sizeClasses[size],
className,
]
.filter(Boolean) // Filter out empty strings and undefined values so they won't pollute the class list
.filter(Boolean)
.join(" ");
return (