Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-10-02 16:20:36 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

CSS modules ownership cleanup

Browse Source 
Closes #3358
This commit is contained in:
Kalle
2026-08-21 21:51:31 +03:00
parent 5c888a5395
commit 9a237ff26a
182 changed files with 4537 additions and 4545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/form/fields/FormFieldWrapper.module.css
View File

@@ -10,3 +10,12 @@
width: 100%;
}
}
/* the entity-search fields: their trigger button has to fill the field's width */
.searchRoot {
width: 100%;
& button[class] {
width: 100%;
}
}

16
app/form/fields/FormFieldWrapper.tsx
View File

@@ -117,3 +117,19 @@ export function FormFieldWrapper({
</div>
);
}
/**
* Wrapper for the entity-search fields (user, team, tournament), which render
* their own label through the search component instead of taking one here.
*/
export function SearchFormFieldWrapper({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className={styles.searchRoot}>
<div className="stack xs">{children}</div>
</div>
);
}

37
app/form/fields/TeamSearchFormField.tsx
View File

@@ -1,7 +1,10 @@
import { TeamSearch } from "~/components/elements/TeamSearch";
import type { FormFieldProps, TeamSearchFieldOptions } from "../types";
import { FormFieldMessages, useTranslatedTexts } from "./FormFieldWrapper";
import styles from "./UserSearchFormField.module.css";
import {
FormFieldMessages,
SearchFormFieldWrapper,
useTranslatedTexts,
} from "./FormFieldWrapper";
type TeamSearchFormFieldProps = FormFieldProps<"team-search"> &
TeamSearchFieldOptions & {
@@ -26,21 +29,19 @@ export function TeamSearchFormField({
});
return (
<div className={styles.root}>
<div className="stack xs">
<TeamSearch
initialTeam={initialTeam}
onChange={(team) => {
onChange(team?.id ?? null);
onTeamSelected?.(team);
}}
onBlur={() => onBlur?.()}
label={translatedLabel}
isRequired={required}
isDisabled={disabled}
/>
<FormFieldMessages name={name} error={error} bottomText={bottomText} />
</div>
</div>
<SearchFormFieldWrapper>
<TeamSearch
initialTeam={initialTeam}
onChange={(team) => {
onChange(team?.id ?? null);
onTeamSelected?.(team);
}}
onBlur={() => onBlur?.()}
label={translatedLabel}
isRequired={required}
isDisabled={disabled}
/>
<FormFieldMessages name={name} error={error} bottomText={bottomText} />
</SearchFormFieldWrapper>
);
}

39
app/form/fields/TournamentSearchFormField.tsx
View File

@@ -3,8 +3,11 @@ import {
type TournamentSearchItem,
} from "~/components/elements/TournamentSearch";
import type { FormFieldProps } from "../types";
import { FormFieldMessages, useTranslatedTexts } from "./FormFieldWrapper";
import styles from "./UserSearchFormField.module.css";
import {
FormFieldMessages,
SearchFormFieldWrapper,
useTranslatedTexts,
} from "./FormFieldWrapper";
type TournamentSearchFormFieldProps = FormFieldProps<"tournament-search"> & {
value: number | null;
@@ -32,22 +35,20 @@ export function TournamentSearchFormField({
});
return (
<div className={styles.root}>
<div className="stack xs">
<TournamentSearch
initialTournamentId={value ?? undefined}
pastOnly={pastOnly}
onChange={(tournament) => {
onChange(tournament?.id ?? null);
onTournamentSelected?.(tournament);
}}
onBlur={() => onBlur?.()}
label={translatedLabel}
isRequired={required}
isDisabled={disabled}
/>
<FormFieldMessages name={name} error={error} bottomText={bottomText} />
</div>
</div>
<SearchFormFieldWrapper>
<TournamentSearch
initialTournamentId={value ?? undefined}
pastOnly={pastOnly}
onChange={(tournament) => {
onChange(tournament?.id ?? null);
onTournamentSelected?.(tournament);
}}
onBlur={() => onBlur?.()}
label={translatedLabel}
isRequired={required}
isDisabled={disabled}
/>
<FormFieldMessages name={name} error={error} bottomText={bottomText} />
</SearchFormFieldWrapper>
);
}

7
app/form/fields/UserSearchFormField.module.css
View File

@@ -1,7 +0,0 @@
.root {
width: 100%;
& button[class] {
width: 100%;
}
}

37
app/form/fields/UserSearchFormField.tsx
View File

@@ -1,7 +1,10 @@
import { UserSearch } from "~/components/elements/UserSearch";
import type { FormFieldProps, UserSearchFieldOptions } from "../types";
import { FormFieldMessages, useTranslatedTexts } from "./FormFieldWrapper";
import styles from "./UserSearchFormField.module.css";
import {
FormFieldMessages,
SearchFormFieldWrapper,
useTranslatedTexts,
} from "./FormFieldWrapper";
type UserSearchFormFieldProps = FormFieldProps<"user-search"> &
UserSearchFieldOptions & {
@@ -27,21 +30,19 @@ export function UserSearchFormField({
});
return (
<div className={styles.root}>
<div className="stack xs">
<UserSearch
initialUserId={value ?? undefined}
onChange={(user) => {
onChange(user?.id ?? null);
onUserSelected?.(user);
}}
onBlur={() => onBlur?.()}
label={translatedLabel}
isRequired={required}
isDisabled={disabled}
/>
<FormFieldMessages name={name} error={error} bottomText={bottomText} />
</div>
</div>
<SearchFormFieldWrapper>
<UserSearch
initialUserId={value ?? undefined}
onChange={(user) => {
onChange(user?.id ?? null);
onUserSelected?.(user);
}}
onBlur={() => onBlur?.()}
label={translatedLabel}
isRequired={required}
isDisabled={disabled}
/>
<FormFieldMessages name={name} error={error} bottomText={bottomText} />
</SearchFormFieldWrapper>
);
}