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 +8 -8
1 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 6a9f8ed9af - Show all commits

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

@ -10,16 +10,16 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
}
const variantClasses: Record<ButtonVariant, string> = {
primary: 'bg-primary text-base-canvas border border-primary hover:bg-secondary hover:text-base-canvas hover:border-primary focus:bg-base-canvas focus:text-base-ink-strong focus:border-primary focus:outline focus:outline-sky-100',
secondary: 'bg-base-canvas text-base-ink-strong border border-base-ink-soft hover:bg-base-canvas hover:text-base-ink-strong hover:border-base-ink-medium focus:bg-base-canvas focus:text-base-ink-strong focus:border-primary focus:outline focus:outline-sky-100',
red: 'bg-other-red-100 text-su-white border border-other-red-100 focus:bg-base-canvas focus:text-base-ink-strong focus:border-primary focus:outline focus:outline-sky-100',
green: 'bg-other-green text-su-white border border-other-green focus:bg-base-canvas focus:text-base-ink-strong focus:border-primary focus:outline focus:outline-sky-100',
primary: 'bg-primary text-base-canvas border border-primary hover:bg-secondary hover:text-base-canvas hover:border-primary 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',
secondary: 'bg-base-canvas text-base-ink-strong border border-base-ink-soft 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',
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
red: 'bg-other-red-100 text-su-white border border-other-red-100 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',
green: 'bg-other-green text-su-white border border-other-green 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',
};
const sizeClasses: Record<ButtonSize, string> = {
sm: 'h-(--control-height-sm) min-w-(--button-min-width-sm) px-(--button-padding-x-sm) text-body-md rounded-(--border-radius-sm)',
md: 'h-(--control-height-md) min-w-(--button-min-width-md) px-(--button-padding-x-md) text-body-md rounded-(--border-radius-sm)',
lg: 'h-(--control-height-lg) min-w-(--button-min-width-lg) px-(--button-padding-x-lg) text-body-lg rounded-(--border-radius-md)',
sm: 'h-(--control-height-sm) min-w-(--button-min-width-sm) px-(--button-padding-x-sm) body-normal-md rounded-(--border-radius-sm)',
md: 'h-(--control-height-md) min-w-(--button-min-width-md) px-(--button-padding-x-md) body-normal-md rounded-(--border-radius-sm)',
lg: 'h-(--control-height-lg) min-w-(--button-min-width-lg) px-(--button-padding-x-lg) body-normal-lg rounded-(--border-radius-md)',
};
const textPaddingClasses: Record<ButtonSize, string> = {
@ -35,7 +35,7 @@ export default function Button({
children,
...props
}: ButtonProps) {
const baseClasses = 'inline-flex items-center justify-center font-semibold';
const baseClasses = 'inline-flex items-center justify-center cursor-pointer';
const classes = [
baseClasses,