Featuring Design System
ChangelogComponents

0.1.17

Checkbox / Radio / Skeleton의 compound 트리를 단일 컴포넌트 + Group 구조로 단순화합니다. 호출 한 줄, 트리 한 단계가 줄어듭니다.

이번 릴리즈는 Checkbox / Radio / Skeleton API 단순화에 집중합니다. 두 단계로 작성하던 compound 트리(Root + Input)를 한 번의 호출로 끝나도록 정리했습니다.

Breaking Changes — Checkbox / Radio 단일 컴포넌트화

Checkbox.RootCheckbox.Input을 합쳐 Checkbox 단일 컴포넌트로 사용합니다. Radio도 동일하게 Radio 단일 컴포넌트가 됩니다. 그룹은 Checkbox.Group / Radio.Group을 그대로 사용합니다.

/* Before */
<Checkbox.Group>
  <Checkbox.Root>
    <Checkbox.Input value="a" />
  </Checkbox.Root>
</Checkbox.Group>

/* After */
<Checkbox.Group>
  <Checkbox value="a" />
</Checkbox.Group>

BreakingCheckbox.Root / Checkbox.Input / Radio.Root / Radio.Input 사용처는 단일 Checkbox / Radio 호출로 교체해 주세요. 함께 노출되던 CheckboxRoot / CheckboxInput / RadioRoot / RadioInput 식별자도 제거됩니다. CheckboxInputProps / RadioInputProps 타입은 CheckboxProps / RadioProps로 통합되었습니다.

Label.Root로 감싸 인라인 라벨을 만드는 패턴은 그대로 동작합니다.

<Label.Root>
  <Checkbox value="a" />
  <Label.Text>옵션 A</Label.Text>
</Label.Root>

Breaking Changes — Skeleton.Root → callable Skeleton

Skeleton.Root를 호출하던 자리표시는 Skeleton으로 직접 호출합니다. 기존 namespace 멤버(Skeleton.Avatar.Root, Skeleton.Button.Root 등)는 그대로 유지됩니다.

/* Before */
<Skeleton.Root $css={{ width: '12.5rem', height: '$spacing-600' }} />

/* After */
<Skeleton $css={{ width: '12.5rem', height: '$spacing-600' }} />

BreakingSkeleton.Root 사용처는 Skeleton으로 교체해 주세요. Skeleton은 callable 컴포넌트이면서 모든 namespace 멤버(Skeleton.Typo, Skeleton.Avatar.*, Skeleton.Button.* 등)를 그대로 노출합니다.

Breaking Changes — Skeleton.Checkbox / Skeleton.Radio 단일화

실제 Checkbox / Radio의 변경에 맞춰 Skeleton.Checkbox.{Root,Input} / Skeleton.Radio.{Root,Input}도 단일 Skeleton.Checkbox / Skeleton.Radio로 통합됩니다. 그룹은 Skeleton.Checkbox.Group / Skeleton.Radio.Group으로 그대로 유지됩니다.

/* Before */
<Skeleton.Checkbox.Group>
  <Skeleton.Checkbox.Root>
    <Skeleton.Checkbox.Input />
  </Skeleton.Checkbox.Root>
</Skeleton.Checkbox.Group>

/* After */
<Skeleton.Checkbox.Group>
  <Skeleton.Checkbox />
</Skeleton.Checkbox.Group>

BreakingSkeleton.Checkbox.Root / .Input, Skeleton.Radio.Root / .Input 사용처는 각각 Skeleton.Checkbox / Skeleton.Radio 한 번의 호출로 교체해 주세요. 실제 Checkbox / Radio와 트리 구조가 1

맞아 로딩이 끝나고 실제 컴포넌트로 치환되는 순간 layout shifting 없이 자연스럽게 이어집니다.

내부 정리

  • Dropdown.ItemCheckbox / Dropdown.ItemRadio, Menu.ItemCheckbox / Menu.ItemRadio, Select.ItemCheckbox / Select.ItemRadio의 ref 타입을 HTMLInputElement로 정정합니다. 단일 컴포넌트화로 외부 ref가 hidden input을 직접 가리키게 되었기 때문입니다.
  • checkboxRootClass / radioRootClass와 거기에 묶여 있던 hover 셀렉터를 정리합니다. hover 스코프는 Label.Root와 input wrapper만 기준으로 동작합니다.