File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
08-14
08-14
08-18
08-18
08-18
08-14
08-18
08-14
08-14
08-18
08-18
08-14
08-18
08-18
Hyerin1201
08-14
728f9c2
feat: 디자인시스템 FoxCheckIcon, FoxCheckbox, FoxCheckboxGroup 추가 — FoxConditionalOption에 체크박스 지원
UNIX
// FoxCheckboxGroup — 시안: 통합관리자페이지 디자인시스템(KE9UILWhB8qTBe14uXUn4F)
// Figma checkbox-group
//
// 체크박스 여러 칸의 배치만 책임진다. 켜짐 여부는 각 `fox-checkbox`의 네이티브 input이
// 소유한다 — 그룹이 상태를 갖지 않는다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-checkbox-group fox-checkbox-group--vertical" role="group" aria-label="약관">
// <label class="fox-checkbox fox-checkbox--lg">…</label>
// <label class="fox-checkbox fox-checkbox--lg">…</label>
// </div>
//
// 라디오 묶음과 달리 `role="radiogroup"`이 아니라 `role="group"`이다 — 체크박스는 서로를
// 끄지 않아 "하나만 고르는 묶음"이 아니기 때문이다.
//
// 배치 규칙은 `fox-radio-group`과 같은 값이다. 시안에서 두 묶음이 같은 간격을 쓴다.
//
// 토큰이 아닌 값(사용자 승인):
// - display / flex-direction / flex-wrap / align-*: 배치 규칙.
@use "@fox/styles/abstracts" as fox;
.fox-checkbox-group {
display: flex;
// 세로 — 한 칸씩 아래로 쌓인다. 라벨 길이가 달라도 왼쪽 끝이 맞아야 하므로 flex-start다.
&--vertical {
flex-direction: column;
align-items: flex-start;
gap: fox.gap(7);
}
// 가로 — 폭이 모자라면 다음 줄로 넘어간다. `align-content`가 있어야 여러 줄이 됐을 때
// 줄 묶음 전체가 가운데 정렬된다.
&--horizontal {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
gap: fox.gap(7) fox.gap(9);
}
}