Checkbox, NestedCheckbox

[yangwooseong]

Summary

Checkbox 와 NestedCheckbox 컴포넌트를 구현하기 위한 RFC 문서입니다.

Goals & Requirements

컴포넌트 스펙과 디자인 시안에 맞는 컴포넌트를 각각 구현합니다. 기본적인 요구사항은 다음과 같습니다.

• 마우스로 체크 상태를 토글할 수 있고, 탭키로 포커싱이 가능하며, 포커싱했을 때 스페이스로 체크 상태를 토글 할수 있어야 합니다.
• Checkbox를 단독으로 쓰는 경우, Checkbox와 NestedCheckbox 를 같이 사용하는 경우 모두 대응해야 합니다. 같이 사용했을 때 Checkbox는 Indeterminate상태까지 표현할 수 있어야 합니다.
• uncontrolled와 controlled 모두 사용가능하도록 합니다.

Design Details

• controlled, uncontrolled 방식을 모두 지원해야 합니다. uncontrolled 로 사용할 때는 props중에 defaultChecked가 undefined가 아닐때이고, 이 때는 NestedCheckbox의 체크 상태를 담고있는 컨텍스트를 주입합니다. 컨텍스트의 인터페이스는 아래와 같은 형태가 될 것 같습니다. NestedCheckbox가 체크될 때나 defaultChecked인 상태일 때 컨텍스트의 toggleChecked를 호출해서 Checkbox의 checkedMap을 바꾸게 됩니다.

type CheckedBoxContext = {
  checkedMap: Map<string, boolean> // NestedCheckbox의 name을 key 로 활용합니다.
  toggleChecked: (name: string) => void
}

• 컴포넌트 인터페이스

interface CheckboxOwnProps {
  /**
   * check 상태
   * /
  checked?: boolean
  /**
   * uncontrolled 로 사용하고 싶을 때 선언
   * /
  defaultChecked?: boolean
  /**
   * label과 쌍으로 쓰이기 위한 id 
   * /
  id?: string
  /**
   * form을 제출할 때 value와 같이 쓰이는 값
   * /
  name?: string
  /**
    * form을 제출할 때 value와 같이 쓰이는 값
    * @default "on"
    * 
  value?: string
  /**
   * 체크 상태가 변할 때 호출되는 함수
   * / 
  onCheckedChange?: (checked: boolean) => void
}

interface NestedCheckboxOwnProps {
  /**
   * check 상태
   * /
  checked?: boolean
  /**
   * uncontrolled 로 사용하고 싶을 때 선언
   * /
  defaultChecked?: boolean
  /**
   * label과 쌍으로 쓰이기 위한 id 
   * /
  id?: string
  /**
   * form을 제출할 때 value와 같이 쓰이는 값
   * /
  name?: string // uncontrolled 로 사용할 때는 required 
  /**
    * form을 제출할 때 value와 같이 쓰이는 값
    * @default "on"
    * 
  value?: string
  /**
   * 체크 상태가 변할 때 호출되는 함수
   * / 
  onCheckedChange?: (checked: boolean) => void
} 

• 폼 컴포넌트는 미구현 상태이기 때문에 FormControl 의 컨텍스트를 받는 것은 TODO 로 남겨놓습

Use Cases

아래와 같은 형태로 사용되길 기대합니다. Nested하게 사용하는 케이스가 있어서 라벨을 children 이 아닌 props로 관리합니다.

<Checkbox label="개인 정보 수집에 동의" />

// Nested로 사용할 때
<Checkbox label="개인 정보 수집에 동의">
  <NestedCheckbox label="이메일" value="이메일" />
  <NestedCheckbox label="전화 번호" value="전화 번호" />
</Checkbox>

Accessibility

Checkbox는 role="checkbox" 속성을 가져야 합니다.
체크 상태에 따라 aria-checked="false", "true", "mixed" 속성을 지원합니다.
탭으로 포커싱을 할 수 있고 키보드로 체크 상태를 지원합니다.

Test Plan

• aria-* 속성 테스트 (role, aria-checked, aria-disabled, aria-required)
• 마우스 클릭, 키보드 (tab, space) 인터렉션 테스트
• Nested & uncontrolled 로 사용했을 때, NestedCheckbox의 체크 상태에 따라 Checkbox의 체크 상태가 잘 결정되는지

Alternatives

No response

References

• https://www.radix-ui.com/primitives/docs/components/checkbox
• https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
• 컴포넌트 스펙(internal)
• 디자인 스펙(internal)

[channeltalk]

https://desk.channel.io/#/channels/1/team_chats/groups/1237/6729b0c5f26aaab711e9

[sungik-choi]

@yangwooseong

컴포넌트 스펙과 동일하게 NestedCheckbox가 아니라 하나의 Checkbox 컴포넌트로 구현하는 방향은 어떨까요?

<Checkbox>
  <Checkbox />
</Checkbox>

• 지금은 NestedCheckbox가 별도의 컴포넌트로 구현되어있는데 이렇게 구현할 경우 컴포넌트가 자신을 둘러싼 환경(부모에 Checkbox가 있다)을 반드시 알고 있어야만 유연하게 사용하기 어려울 거 같다는 생각이 들었습니다.
• NestedCheckbox가 단독으로 사용될 여지는 없어보여서, 상위 Checkbox 컨텍스트에 접근할 수 있는 NestedCheckbox로 간주하고 동작하게 하면 어떨까 합니다. 마찬가지로 variant도 사용처에서는 신경쓸 이유가 없어보여서, 외부에는 노출시키지 않아도 좋겠다는 생각이 듭니다.
• Nested하게 사용되는 케이스에서 부모 Checkbox에 aria-controls 속성도 챙겨지면 좋을 거 같아요.
• showRequired prop도 추가되어야할 거 같습니다. (이 prop은 디자이너와 이야기해봐서 required 동작과 UI를 꼭 분리해야하는게 아니라면 required 속성이 참이면 별표 UI도 같이 보여지도록 합치면 사용하기 용이할 거 같네요)

폼 컴포넌트는 미구현 상태이기 때문에 FormControl 의 컨텍스트를 받는 것은 TODO 로 남겨놓습...

• 폼 컴포넌트가 미구현이더라도 FormComponentProps를 포함한 전체 인터페이스가 문서에 적어주세요!

[yangwooseong]

컴포넌트 스펙과 동일하게 NestedCheckbox가 아니라 하나의 Checkbox 컴포넌트로 구현하는 방향은 어떨까요?

• 저는 NesteCheckbox 가 분리되는게 컴포넌트 스펙으로 이해했습니다. 스펙이나 피그마 상으로도 모두 분리되어 있어서요..!

[sungik-choi]

저는 NesteCheckbox 가 분리되는게 컴포넌트 스펙으로 이해했습니다. 스펙이나 피그마 상으로도 모두 분리되어 있어서요..!

컴포넌트 분리하는거로 스펙 업데이트한걸 저도 며칠 전에 확인해서 다시 고민해볼게요..!