DMC/studentportalen
1
1
Fork 0
Code Issues 50 Pull Requests 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 +12 -13
1 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 1fe96800ca - Show all commits

25
frontend/src/components/TextInput/TextInput.tsx
View File

@ -1,4 +1,4 @@
import type { InputHTMLAttributes, ReactNode, CSSProperties } from 'react';
import type { InputHTMLAttributes, ReactNode } from 'react';
// isValidElement: checks if something is a React element (e.g., <svg>, <MyComponent />)
// cloneElement: creates a copy of a React element with modified/additional props
import { cloneElement, isValidElement } from 'react';
@ -40,16 +40,16 @@ const textClasses: Record<TextInputSize, string> = {
lg: 'body-normal-lg',
};
const iconContainerStyles: Record<TextInputSize, CSSProperties> = {
sm: { width: 'var(--control-height-sm)', height: 'var(--control-height-sm)' },
md: { width: 'var(--control-height-md)', height: 'var(--control-height-md)' },
lg: { width: 'var(--control-height-lg)', height: 'var(--control-height-lg)' },
const iconContainerSizeClasses: Record<TextInputSize, string> = {
sm: 'w-(--control-height-sm) h-(--control-height-sm)',
md: 'w-(--control-height-md) h-(--control-height-md)',
lg: 'w-(--control-height-lg) h-(--control-height-lg)',
};
const iconStyles: Record<TextInputSize, CSSProperties> = {
sm: { width: 'var(--font-size-body-md)', height: 'var(--font-size-body-md)' },
md: { width: 'var(--font-size-body-md)', height: 'var(--font-size-body-md)' },
lg: { width: 'var(--font-size-body-lg)', height: 'var(--font-size-body-lg)' },
const iconSizeClasses: Record<TextInputSize, string> = {
sm: '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)',
};
const baseClasses = 'bg-base-canvas border-[length:var(--border-width-sm)] border-base-ink-medium';
@ -84,11 +84,10 @@ export default function TextInput({
>
{icon && (
<div
className="flex items-center justify-center shrink-0 text-base-ink-placeholder"
style={iconContainerStyles[size]}
className={`flex items-center justify-center shrink-0 text-base-ink-placeholder ${iconContainerSizeClasses[size]}`}
>
{isValidElement<{ style?: CSSProperties }>(icon)
? cloneElement(icon, { style: iconStyles[size] })
{isValidElement<{ className?: string }>(icon)
? cloneElement(icon, { className: iconSizeClasses[size] })
: icon}
</div>
)}