-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
refactor: extract LabeledField wrapper to remove label+input boilerplate (@byseif21) #7784
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Miodec
merged 7 commits into
monkeytypegame:master
from
byseif21:refactor/labeled-field-component
Apr 8, 2026
Merged
Changes from all commits
Commits
Show all changes
7 commits
Select commit
Hold shift + click to select a range
9bae1fc
refactor: extract LabeledField wrapper to remove label+input boilerplate
byseif21 b3687d0
quote modals
byseif21 aa78e21
fix
byseif21 b544f2a
no pointer, cleanup
byseif21 9db851f
fix
byseif21 a08049d
test
byseif21 f886c82
update styling
Miodec File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
57 changes: 57 additions & 0 deletions
57
frontend/__tests__/components/ui/form/LabeledField.spec.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { render, screen } from "@solidjs/testing-library"; | ||
| import { describe, it, expect } from "vitest"; | ||
|
|
||
| import { LabeledField } from "../../../../src/ts/components/ui/form/LabeledField"; | ||
|
|
||
| describe("LabeledField", () => { | ||
| it("renders label text correctly", () => { | ||
| render(() => ( | ||
| <LabeledField label="test label"> | ||
| <input /> | ||
| </LabeledField> | ||
| )); | ||
|
|
||
| expect(screen.getByText("test label")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("renders children correctly", () => { | ||
| render(() => ( | ||
| <LabeledField label="test"> | ||
| <div data-testid="child">child content</div> | ||
| </LabeledField> | ||
| )); | ||
|
|
||
| expect(screen.getByTestId("child")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("renders subtext when provided", () => { | ||
| render(() => ( | ||
| <LabeledField label="test" subLabel="helper text"> | ||
| <input /> | ||
| </LabeledField> | ||
| )); | ||
|
|
||
| expect(screen.getByText("helper text")).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it("links label to input when id is provided", () => { | ||
| const { container } = render(() => ( | ||
| <LabeledField label="test" id="test-id"> | ||
| <input id="test-id" /> | ||
| </LabeledField> | ||
| )); | ||
|
|
||
| const label = container.querySelector("label"); | ||
| expect(label).toHaveAttribute("for", "test-id"); | ||
| }); | ||
|
|
||
| it("applies custom class to wrapper", () => { | ||
| const { container } = render(() => ( | ||
| <LabeledField label="test" class="custom-wrapper-class"> | ||
| <input /> | ||
| </LabeledField> | ||
| )); | ||
|
|
||
| expect(container.firstChild).toHaveClass("custom-wrapper-class"); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { JSXElement, Show } from "solid-js"; | ||
|
|
||
| import { cn } from "../../../utils/cn"; | ||
|
|
||
| export function LabeledField(props: { | ||
| label: string; | ||
| subLabel?: string; | ||
| id?: string; | ||
| children: JSXElement; | ||
| class?: string; | ||
| }): JSXElement { | ||
byseif21 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| return ( | ||
| <div class={cn("grid gap-1", props.class)}> | ||
| <label | ||
| // oxlint-disable-next-line react/no-unknown-property | ||
| for={props.id} | ||
| class="text-sub lowercase" | ||
byseif21 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| > | ||
| {props.label} | ||
| </label> | ||
byseif21 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <Show when={props.subLabel}> | ||
| <div class="mb-1 text-em-xs text-sub opacity-50">{props.subLabel}</div> | ||
| </Show> | ||
| {props.children} | ||
| </div> | ||
| ); | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.