Skip to content

refactor: JDS Checkbox, Radio 타입 안정성 개선 #502

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.

Sign up for GitHub

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
itwillbeoptimal merged 3 commits into from
Jul 2, 2026
Merged

refactor: JDS Checkbox, Radio 타입 안정성 개선 #502

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
acc77d7
fix: Checkbox/Radio의 input type prop 외부 오버라이드 차단
itwillbeoptimal Jun 30, 2026
b5654e1
fix: Checkbox.Label z-index 추가
itwillbeoptimal Jun 30, 2026
7ef1999
refactor: Checkbox, Radio 타입 정의 type으로 통일
itwillbeoptimal Jun 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/jds/src/components/Checkbox/checkbox.css.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,7 @@ export const checkboxItem = recipe({

export const checkboxLabel = style({
whiteSpace: "nowrap",
zIndex: 10,

@Zero-1016 Zero-1016 Jun 30, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 overlay()의 절대배치 ::before/::after가 라벨 텍스트를 덮는 걸 방지하기 위한 스태킹 보정

vars: { [labelColorVar]: vars.color.semantic.object.bolder },
selectors: {
"[data-disabled] &": { vars: { [labelColorVar]: vars.color.semantic.object.subtle } },
Expand Down
25 changes: 7 additions & 18 deletions packages/jds/src/components/Checkbox/checkbox.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ export type CheckboxSize = (typeof CHECKBOX_SIZE_OPTIONS)[number];
export type CheckboxVariant = (typeof CHECKBOX_VARIANT_OPTIONS)[number];
export type CheckedState = boolean | "indeterminate";

// Checkbox.Root

type CheckboxRootControlledProps = {
value: string[];
defaultValue?: never;
Expand All @@ -33,18 +31,13 @@ type CheckboxRootBaseProps = {
export type CheckboxRootProps = CheckboxRootBaseProps &
(CheckboxRootControlledProps | CheckboxRootUncontrolledProps);

// Checkbox.Item

export interface CheckboxItemProps extends ComponentPropsWithoutRef<"label"> {
export type CheckboxItemProps = ComponentPropsWithoutRef<"label"> & {
size?: CheckboxSize;
variant?: CheckboxVariant;
disabled?: boolean;
isInvalid?: boolean;
children: ReactNode;
}

// Checkbox.Basic
// Checkbox.Root 안에서 사용 시 value가 그룹 내 식별자가 되며 checked 상태는 그룹이 관리한다.
};

type CheckboxBasicControlledProps = {
checked: CheckedState;
Expand All @@ -60,7 +53,7 @@ type CheckboxBasicUncontrolledProps = {

type CheckboxBasicBaseProps = Omit<
ComponentPropsWithoutRef<"input">,
"size" | "checked" | "defaultChecked" | "onChange"
"size" | "checked" | "defaultChecked" | "onChange" | "type"
> & {
size?: CheckboxSize;
value?: string;
Expand All @@ -71,14 +64,10 @@ type CheckboxBasicBaseProps = Omit<
export type CheckboxBasicProps = CheckboxBasicBaseProps &
(CheckboxBasicControlledProps | CheckboxBasicUncontrolledProps);

// Checkbox.Label

export interface CheckboxLabelProps {
export type CheckboxLabelProps = {
children: ReactNode;
}

// Checkbox.Helper
};

export interface CheckboxHelperProps {
export type CheckboxHelperProps = {
children: ReactNode;
}
};
20 changes: 11 additions & 9 deletions packages/jds/src/components/Radio/radio.types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,23 +29,25 @@ type RadioRootBaseProps = {
export type RadioRootProps = RadioRootBaseProps &
(RadioRootControlledProps | RadioRootUncontrolledProps);

export interface RadioBasicProps
extends Omit<ComponentPropsWithoutRef<"input">, "value" | "size"> {
export type RadioBasicProps = Omit<
ComponentPropsWithoutRef<"input">,
"value" | "size" | "type"
> & {
size?: RadioSize;
value: string;
}
};

export interface RadioItemProps extends ComponentPropsWithoutRef<"label"> {
export type RadioItemProps = ComponentPropsWithoutRef<"label"> & {
size?: RadioSize;
variant?: RadioVariant;
disabled?: boolean;
children: ReactNode;
}
};

export interface RadioLabelProps {
export type RadioLabelProps = {
children: ReactNode;
}
};

export interface RadioHelperProps {
export type RadioHelperProps = {
children: ReactNode;
}
};
Loading