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

List components #31

Merged
stne3960 merged 68 commits from list_item into main 2025-12-18 12:41:13 +01:00
Conversation 12 Commits 68 Files Changed 8 +14 -21
4 changed files with 14 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9c8c3bda86 - Show all commits

8
frontend/src/components/Combobox/Combobox.tsx
View File

@ -30,10 +30,10 @@ const widthClasses: Record<ComboboxSize, string> = {
const dropdownWrapperClasses = 'absolute top-full left-0 z-50 w-full mt-(--spacing-sm)';
function SearchIcon({ style }: { style?: React.CSSProperties }) {
function SearchIcon({ className }: { className?: string }) {
return (
<svg
style={style}
className={className}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@ -208,10 +208,10 @@ export default function Combobox({
: customWidth
? 'relative'
: `relative ${widthClasses[size]}`;
const containerStyle = customWidth ? { width: customWidth } : undefined;
const widthStyle = customWidth ? { width: customWidth } : undefined;
return (
<div ref={containerRef} className={containerClasses} style={containerStyle}>
<div ref={containerRef} className={containerClasses} style={widthStyle}>
<TextInput
value={displayValue}
onChange={handleInputChange}

13
frontend/src/components/ListCard/ListCard.tsx
View File

@ -1,4 +1,4 @@
import type { HTMLAttributes, CSSProperties } from 'react';
import type { HTMLAttributes } from 'react';
export interface ListCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
title: string;
@ -14,15 +14,12 @@ const baseClasses = [
'focus-visible:border-primary focus-visible:border-[length:var(--border-width-sm)] focus-visible:outline focus-visible:outline-sky-100 focus-visible:outline-[length:var(--border-width-lg)]',
].join(' ');
const iconStyles: CSSProperties = {
width: 'var(--font-size-body-md)',
height: 'var(--font-size-body-md)',
};
const removeIconClasses = 'w-(--font-size-body-md) h-(--font-size-body-md)';
function RemoveIcon({ style }: { style?: CSSProperties }) {
function RemoveIcon() {
return (
<svg
style={style}
className={removeIconClasses}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
@ -58,7 +55,7 @@ export default function ListCard({ title, subtitle = '', onRemove, className = '
onClick={onRemove}
className="shrink-0 ml-(--spacing-sm) text-base-ink-placeholder group-hover:text-base-ink-max group-focus-visible:text-base-ink-max focus-visible:outline-none cursor-pointer"
>
<RemoveIcon style={iconStyles} />
<RemoveIcon />
</button>
)}
</div>

10
frontend/src/components/ListItem/ListItem.tsx
View File

@ -1,4 +1,4 @@
import type { HTMLAttributes, CSSProperties } from 'react';
import type { HTMLAttributes } from 'react';
export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
title: string;
@ -7,22 +7,18 @@ export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
focused?: boolean;
}
const iconStyles: CSSProperties = {
width: 'var(--font-size-body-md)',
height: 'var(--font-size-body-md)',
marginLeft: 'var(--spacing-sm)',
};
const checkmarkIconClasses = 'w-(--font-size-body-md) h-(--font-size-body-md) ml-(--spacing-sm)';
function CheckmarkIcon() {
return (
<svg
className={checkmarkIconClasses}
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
style={iconStyles}
>
<polyline points="20 6 9 17 4 12" />
</svg>

4
frontend/src/components/ParticipantPicker/ParticipantPicker.tsx
View File

@ -44,10 +44,10 @@ export default function ParticipantPicker({
: customWidth
? 'flex flex-col gap-(--spacing-sm)'
: `flex flex-col gap-(--spacing-sm) ${widthClasses[size]}`;
const containerStyle = customWidth ? { width: customWidth } : undefined;
const widthStyle = customWidth ? { width: customWidth } : undefined;
return (
<div className={containerClasses} style={containerStyle}>
<div className={containerClasses} style={widthStyle}>
<Combobox
options={options}
value={value}