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

Text input component #30

Merged
stne3960 merged 35 commits from text_input into main 2025-12-16 17:59:33 +01:00
Conversation 6 Commits 35 Files Changed 3 +19 -5
1 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit d6a65eee0b - Show all commits

24
frontend/src/components/Icon/Icon.tsx
View File

@ -3,8 +3,9 @@ import clsx from "clsx";
/** /**
* Icon sizes matching the design system control sizes. * Icon sizes matching the design system control sizes.
* "inherit" (default) uses 1em to scale with the parent's font-size.
*/ */
stne3960 marked this conversation as resolved
ansv7779 commented 2025-12-16 13:31:13 +01:00
Review
Copy Link

Shouldn't icons inherit their size from their context? Like if I add an icon to a small button or a large heading I would assume it would scale to that context rather than having its own independent size.

Shouldn't icons inherit their size from their context? Like if I add an icon to a small button or a large heading I would assume it would scale to that context rather than having its own independent size.
stne3960 commented 2025-12-16 14:56:04 +01:00
Review
Copy Link

For certain cases, yes, it probably should. I've added inherit as a default. However, we need to be able to override it like in the TextInput component. Here, the icon is in a dedicated container that's sized by --control-height-* tokens, not font-size. There's no text for it to "inherit" from since the icon container and the input text are siblings, not parent/child.

For certain cases, yes, it probably should. I've added inherit as a default. However, we need to be able to override it like in the TextInput component. Here, the icon is in a dedicated container that's sized by --control-height-* tokens, not font-size. There's no text for it to "inherit" from since the icon container and the input text are siblings, not parent/child.
export type IconSize = "sm" | "md" | "lg"; export type IconSize = "inherit" | "sm" | "md" | "lg";
/** /**
* Base props for all icon components. * Base props for all icon components.
@ -22,9 +23,10 @@ export type IconComponent = React.ComponentType<IconProps>;
/** /**
* Size classes using design system font-size tokens. * Size classes using design system font-size tokens.
* Icons scale with typography. * "inherit" uses 1em so icons scale with the parent's font-size.
*/ */
const iconSizeClasses: Record<IconSize, string> = { const iconSizeClasses: Record<IconSize, string> = {
inherit: "w-[1em] h-[1em]",
sm: "w-(--font-size-body-md) h-(--font-size-body-md)", sm: "w-(--font-size-body-md) h-(--font-size-body-md)",
md: "w-(--font-size-body-md) h-(--font-size-body-md)", md: "w-(--font-size-body-md) h-(--font-size-body-md)",
lg: "w-(--font-size-body-lg) h-(--font-size-body-lg)", lg: "w-(--font-size-body-lg) h-(--font-size-body-lg)",
@ -43,7 +45,11 @@ const baseSvgProps: SVGAttributes<SVGSVGElement> = {
strokeLinejoin: "round", strokeLinejoin: "round",
}; };
export function SearchIcon({ size = "md", className, ...props }: IconProps) { export function SearchIcon({
size = "inherit",
className,
...props
}: IconProps) {
return ( return (
<svg <svg
className={clsx(iconSizeClasses[size], className)} className={clsx(iconSizeClasses[size], className)}
@ -56,7 +62,11 @@ export function SearchIcon({ size = "md", className, ...props }: IconProps) {
); );
} }
export function RemoveIcon({ size = "md", className, ...props }: IconProps) { export function RemoveIcon({
size = "inherit",
className,
...props
}: IconProps) {
return ( return (
<svg <svg
className={clsx(iconSizeClasses[size], className)} className={clsx(iconSizeClasses[size], className)}
@ -69,7 +79,11 @@ export function RemoveIcon({ size = "md", className, ...props }: IconProps) {
); );
} }
export function CheckmarkIcon({ size = "md", className, ...props }: IconProps) { export function CheckmarkIcon({
size = "inherit",
className,
...props
}: IconProps) {
return ( return (
<svg <svg
className={clsx(iconSizeClasses[size], className)} className={clsx(iconSizeClasses[size], className)}