Commit @5bb7ff00950b8182bdf4c3b0df7ddca10cdc7c94

임동욱 08-18

fix: fill lg 탭을 세그먼트 컨트롤로 바로잡고 고른 탭 호버 제거

디자인시스템 파일의 tab(391:4433)을 다시 보니 fill lg가 낱개 탭이 아니라 세그먼트
컨트롤이었다. 목록이 테두리·둥근 모서리·흰 바탕을 갖고 항목이 그 안에 갇힌다.
`overflow: clip`이 있어야 끝 칸의 채운 색이 둥근 모서리를 넘지 않는다.

칸 사이 구분선은 고르지 않은 칸이 자기 오른쪽에 그린다 — 고른 칸은 색이 바뀌어 경계가
이미 보이므로 선을 두지 않는다(시안 그대로). 어느 칸이 골라져도 선이 맞아떨어진다.

fill md는 낱개 알약이 맞아 그대로 둔다.

고른 탭에 hover·pressed가 걸리던 것도 고쳤다. 규칙 특이도가 0,5,0이라 고름 규칙(0,2,0)을
이겨서, 고른 탭에 마우스를 올리면 남색·파란 밑줄이 옅은 파랑으로 덮였다.

검증: 목록 테두리 1px #cdd1d5 · 모서리 12px · clip · 흰 바탕, 구분선이 고르지 않은
칸에만 붙는 것을 확인. hover 규칙이 고른 탭 6개 어디에도 걸리지 않는다.

Co-Authored-By: Claude Opus 5

@5bb7ff00950b8182bdf4c3b0df7ddca10cdc7c94

6b23efb

5bb7ff0

@fox/dev-test/component-registry.tsx

--- @fox/dev-test/component-registry.tsx

+++ @fox/dev-test/component-registry.tsx

...	...	@@ -565,7 +565,7 @@
565	565	id: "fox-button",
566	566	name: "FoxButton",
567	567	description:
568		- "Figma 시안(btn, 컴포넌트 세트 106:1606)을 토큰만으로 옮겼습니다. 너비는 내용에 따라 가변이고 높이만 고정입니다. hover·pressed는 마우스를 올리거나 눌러 확인하세요. error 계열은 시안 미정이라 비어 있습니다.",
	568	+ "Figma 시안(btn, 컴포넌트 세트 106:1606)을 토큰만으로 옮겼습니다. 너비는 내용에 따라 가변이고 높이만 고정입니다. 고른 탭에는 hover·pressed가 걸리지 않습니다 — 이미 제 모양이 있어서입니다. error 계열은 시안 미정이라 비어 있습니다.",
569	569	variants: [
570	570	{
571	571	label: "계열 (type) — hover·pressed 확인 가능",
...	...	@@ -2770,12 +2770,12 @@
2770	2770	id: "fox-tab",
2771	2771	name: "FoxTab",
2772	2772	description:
2773		- "Figma 시안(tab 171:14016 · tab-item 171:13927, 관리자페이지 파일)을 FoxTab / FoxTabItem 둘로 옮겼습니다. lg는 폭을 고르게 나눠 갖고 md는 글자만큼만 차지합니다. 좌우 화살표·Home·End로 옮길 수 있고 탭키는 고른 탭에만 닿습니다(ARIA 탭 규약). hover·pressed는 마우스를 올리거나 눌러 확인하세요.",
	2773	+ "Figma 시안(tab 171:14016 · tab-item 171:13927, 관리자페이지 파일)을 FoxTab / FoxTabItem 둘로 옮겼습니다. lg는 폭을 고르게 나눠 갖고 md는 글자만큼만 차지합니다. 좌우 화살표·Home·End로 옮길 수 있고 탭키는 고른 탭에만 닿습니다(ARIA 탭 규약). 고른 탭에는 hover·pressed가 걸리지 않습니다 — 이미 제 모양이 있어서입니다.",
2774	2774	variants: [
2775	2775	{ label: "line · lg — 폭을 고르게 나눠 갖고 목록에 밑줄이 깔립니다", node: <TabLiveDemo type="line" size="lg" /> },
2776	2776	{ label: "line · md — 글자만큼만 차지하고 8px 간격", node: <TabLiveDemo type="line" size="md" /> },
2777		- { label: "fill · lg — 고른 탭이 남색으로 채워집니다", node: <TabLiveDemo type="fill" size="lg" /> },
2778		- { label: "fill · md — 모서리가 둥글어집니다", node: <TabLiveDemo type="fill" size="md" /> },
	2777	+ { label: "fill · lg — 세그먼트 컨트롤. 목록이 테두리와 모서리를 갖습니다", node: <TabLiveDemo type="fill" size="lg" /> },
	2778	+ { label: "fill · md — 항목 하나하나가 알약입니다", node: <TabLiveDemo type="fill" size="md" /> },
2779	2779	{
2780	2780	label: "잠긴 탭 — 화살표 이동에서도 건너뜁니다",
2781	2781	node: (

6b23efb

5bb7ff0

@fox/styles/_fox-tab-item.scss

--- @fox/styles/_fox-tab-item.scss

+++ @fox/styles/_fox-tab-item.scss


   text-decoration: none;
   cursor: pointer;
 
-  &:hover:not(:disabled):not([aria-disabled="true"]) {
+  // 고른 탭은 이미 제 모양이 있어 hover·pressed를 걸지 않는다.
+  &:hover:not(:disabled):not([aria-disabled="true"]):not(&--active) {
     background: fox.color(action-secondary-hover);
   }
 
-  &:active:not(:disabled):not([aria-disabled="true"]) {
+  &:active:not(:disabled):not([aria-disabled="true"]):not(&--active) {
     background: fox.color(action-secondary-pressed);
   }
 

   color: fox.color(font-neutral-strong-inverse);
 }
 
-// md에서만 모서리가 둥글다(시안).
+// md는 항목 하나하나가 알약이다(시안).
 .fox-tab--fill.fox-tab--md .fox-tab-item {
   border-radius: fox.radius(4);
 }
+
+// lg는 세그먼트 컨트롤이라 모서리를 목록이 갖는다. 칸 사이 구분선은 고르지 않은 칸이
+// 자기 오른쪽에 그린다 — 고른 칸은 색이 바뀌어 경계가 이미 보이므로 선을 두지 않는다
+// (시안 그대로).
+.fox-tab--fill.fox-tab--lg .fox-tab-item:not(.fox-tab-item--active) {
+  border-inline-end: fox.border(1) solid fox.color(border-neutral-subtle);
+}

6b23efb

5bb7ff0

@fox/styles/_fox-tab.scss

--- @fox/styles/_fox-tab.scss

+++ @fox/styles/_fox-tab.scss

...	...	@@ -64,4 +64,14 @@
64	64	&--line#{&}--lg .fox-tab-item {
65	65	margin-block-end: calc(-1 * #{fox.border(1)});
66	66	}
	67	+
	68	+ // ── fill 계열 ─────────────────────────────────────────────────────────────
	69	+ // lg는 세그먼트 컨트롤이다 — 목록이 테두리와 둥근 모서리를 갖고 항목이 그 안에 갇힌다.
	70	+ // `overflow: clip`이 있어야 끝 칸의 채운 색이 둥근 모서리를 넘지 않는다.
	71	+ &--fill#{&}--lg &__list {
	72	+ overflow: clip;
	73	+ border: fox.border(1) solid fox.color(border-neutral-subtle);
	74	+ border-radius: fox.radius(4);
	75	+ background: fox.color(surface-neutral-default);
	76	+ }
67	77	}

Add a comment

Open 0
Closed 0

List

...	...	@@ -36,11 +36,12 @@
36	36	text-decoration: none;
37	37	cursor: pointer;
38	38
39		- &:hover:not(:disabled):not([aria-disabled="true"]) {
	39	+ // 고른 탭은 이미 제 모양이 있어 hover·pressed를 걸지 않는다.
	40	+ &:hover:not(:disabled):not([aria-disabled="true"]):not(&--active) {
40	41	background: fox.color(action-secondary-hover);
41	42	}
42	43
43		- &:active:not(:disabled):not([aria-disabled="true"]) {
	44	+ &:active:not(:disabled):not([aria-disabled="true"]):not(&--active) {
44	45	background: fox.color(action-secondary-pressed);
45	46	}
46	47
...	...	@@ -85,7 +86,14 @@
85	86	color: fox.color(font-neutral-strong-inverse);
86	87	}
87	88
88		-// md에서만 모서리가 둥글다(시안).
	89	+// md는 항목 하나하나가 알약이다(시안).
89	90	.fox-tab--fill.fox-tab--md .fox-tab-item {
90	91	border-radius: fox.radius(4);
91	92	}
	93	+
	94	+// lg는 세그먼트 컨트롤이라 모서리를 목록이 갖는다. 칸 사이 구분선은 고르지 않은 칸이
	95	+// 자기 오른쪽에 그린다 — 고른 칸은 색이 바뀌어 경계가 이미 보이므로 선을 두지 않는다
	96	+// (시안 그대로).
	97	+.fox-tab--fill.fox-tab--lg .fox-tab-item:not(.fox-tab-item--active) {
	98	+ border-inline-end: fox.border(1) solid fox.color(border-neutral-subtle);
	99	+}

Delete comment