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-14
08-14
08-18
08-18
08-14
08-18
08-18
Hyerin1201
08-18
ea426c3
feat: 디자인시스템 FoxChip, FoxSelectText, FoxSegmentedControl, FoxToggleQuantity 계열 추가 — FoxSelect 다중 선택 지원
UNIX
// FoxSegmentedControl — 시안: 통합관리자페이지 디자인시스템 Figma segmented-control
//
// 칸들을 테두리 하나로 감싸는 자리다. 시안이 주는 규칙이 배치 두 줄과 크기별 모서리뿐이라
// 이 파일도 그만큼이다 — 칸 안쪽은 `fox-segmented-control-item`이 전부 갖는다.
//
// 마크업 계약 (React 밖 소비자용):
// <div class="fox-segmented-control fox-segmented-control--lg" role="radiogroup"
// aria-label="보기 방식">
// <label class="fox-segmented-control-item fox-segmented-control-item--lg">…</label>
// <label class="fox-segmented-control-item fox-segmented-control-item--lg">…</label>
// </div>
//
// `inline-flex`라 묶음이 내용만큼만 넓다 — 옆에 다른 것을 놓을 수 있다. 줄 전체를 차지해야
// 하면 호출부가 `className`으로 폭을 준다(그것이 `className`을 여는 유일한 이유다).
//
// ⚠️ `overflow: hidden`이 필요하다. 켜진 칸과 비활성 칸은 배경이 채워지는데, 첫 칸·마지막
// 칸에서 그 사각형 배경이 묶음의 둥근 모서리 밖으로 삐져나온다. 칸마다 모서리를 주는 대신
// 묶음에서 한 번 잘라 낸다 — 칸이 몇 개든, 어느 칸이 켜지든 규칙이 하나로 끝난다.
//
// 크기가 바꾸는 것은 모서리뿐이다. 높이·여백·글자는 칸이 갖는다 — 그래서 묶음과 칸의
// `size`가 어긋나면 안 되고, React 쪽에서 묶음이 자식 값을 덮어쓴다.
//
// 토큰이 아닌 값:
// - box-sizing / display / flex / overflow: 구조 규칙.
@use "@fox/styles/abstracts" as fox;
.fox-segmented-control {
box-sizing: border-box;
display: inline-flex;
align-items: center;
// 채워진 칸 배경을 둥근 모서리로 잘라 낸다(파일 상단 ⚠️ 참고).
overflow: hidden;
border: fox.border(1) solid fox.color(border-neutral-default);
&--lg {
border-radius: fox.form(radius-lg);
}
&--md {
border-radius: fox.form(radius-md);
}
&--sm {
border-radius: fox.form(radius-sm);
}
&--xsm {
border-radius: fox.form(radius-xsm);
}
}