fix(sw): correct footer auxiliary button state colors
This commit is contained in:
1 parent
6cf885412e
commit
40c5b89814
14 files changed
+118
-41
No files matched your search
@@ -199,6 +199,24 @@ const MENU_NODES: [string, string][] = [
|
||||
]
|
||||
const toolProps = (tool: SWFooterTool) => ({ label: tool.label, icon: tool.icon, activeIcon: tool.activeIcon, "aria-label": tool.ariaLabel })
|
||||
const AUX0 = { label: AUX_ITEMS[0].label, icon: AUX_ITEMS[0].icon }
|
||||
/** Figma component sets of the six auxiliary toggles, in AUX_ITEMS order. */
|
||||
const AUX_SETS = ["26:9248", "26:9267", "26:9298", "26:9320", "26:9381", "26:9412"]
|
||||
|
||||
/** Live toggles: click to select / deselect; "하나만" makes the selection move between buttons. */
|
||||
function AuxToggleDemo() {
|
||||
const [items, setItems] = useState(AUX_ITEMS)
|
||||
const [single, setSingle] = useState(false)
|
||||
return (
|
||||
<div className="sw-footer-story-aux-demo">
|
||||
<label className="sw-story-log"><input type="checkbox" checked={single} onChange={event => setSingle(event.target.checked)} /> 하나만 선택(다른 버튼을 누르면 선택 이동)</label>
|
||||
<SWTheme className="sw-footer-story-group-surface sw-footer-story-inline">
|
||||
<SWFooterAuxGroup items={items} onPressedChange={(id, pressed) => setItems(list => list.map(item => (
|
||||
item.id === id ? { ...item, pressed } : single && pressed ? { ...item, pressed: false } : item)))} />
|
||||
</SWTheme>
|
||||
<p className="sw-story-log" data-aux-state="">선택: {items.filter(item => item.pressed).map(item => item.label).join(", ") || "없음"}</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
const SMALL_COMMAND = { width: 120, ["--hm-sw-footer-command-expanded-height" as string]: "71px" }
|
||||
|
||||
export const FigmaVariants: Story = {
|
||||
@@ -336,11 +354,26 @@ export const States: Story = {
|
||||
</div>
|
||||
<p className="sw-story-log">분류 Hover 고정: 두 번째 탭(수정)에 data-sb-hover.</p>
|
||||
</StorySection>
|
||||
<StorySection title="보조기능 · 측면 버튼 (Figma Default만 있음)" description="Hover·pressed는 Footer의 #FF5C00 글자 규칙을 재사용(Figma 미정의).">
|
||||
<StorySection title="보조기능 버튼 (Figma btn_객체스냅 26:9248 … btn_선가중치 26:9412)" description="Default = 갈색 그라데이션 테두리 · #F1EDE5 아이콘 · #F6F4F2 글자. Hover = 노랑 테두리(SW Header Hover 토큰)만, 아이콘·글자 기본색. Selected(Figma Variant2 = Variant3) = 주황 그라데이션 테두리 + #FF5C00 아이콘 + #FF5C00 글자, Hover 중에도 유지.">
|
||||
<div className="sw-footer-story-aux-compare">
|
||||
{AUX_ITEMS.map((item, index) => (
|
||||
<figure key={item.id} className="sw-footer-story-aux-row">
|
||||
<figcaption>{AUX_SETS[index]} {item.label}</figcaption>
|
||||
<img src={new URL(`./assets/figma-reference/footer/aux-buttons/${AUX_SETS[index].replace(":", "-")}.png`, import.meta.url).href} alt={`Figma ${AUX_SETS[index]} ${item.label}`} />
|
||||
<SWTheme className="sw-footer-story-group-surface sw-footer-story-aux-states">
|
||||
<SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} />
|
||||
<Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed={false} /></Pin>
|
||||
<SWFooterAuxButton label={item.label} icon={item.icon} pressed />
|
||||
<Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton label={item.label} icon={item.icon} pressed /></Pin>
|
||||
</SWTheme>
|
||||
</figure>
|
||||
))}
|
||||
</div>
|
||||
<p className="sw-story-log">구현 열: Default · Hover · Selected · Selected + Hover (Hover는 data-sb-hover 고정)</p>
|
||||
<AuxToggleDemo />
|
||||
</StorySection>
|
||||
<StorySection title="측면 버튼 (Figma Default만 있음)" description="Hover·pressed는 Footer의 #FF5C00 글자 규칙을 재사용(Figma 미정의).">
|
||||
<div className="sw-footer-story-states">
|
||||
<StateCell title="보조 Default"><SWFooterAuxButton {...AUX0} /></StateCell>
|
||||
<StateCell title="보조 Hover"><Pin hover=".hm-sw-footer-aux__button"><SWFooterAuxButton {...AUX0} /></Pin></StateCell>
|
||||
<StateCell title="보조 pressed"><SWFooterAuxButton {...AUX0} pressed /></StateCell>
|
||||
<StateCell title="보조 Disabled"><SWFooterAuxButton {...AUX0} disabled /></StateCell>
|
||||
<StateCell title="측면 Default"><SWFooterSideButton title="보조기능" subtitle="전체보기" /></StateCell>
|
||||
<StateCell title="측면 Hover"><Pin hover=".hm-sw-footer-side"><SWFooterSideButton title="명령어" subtitle="전체보기" side="end" /></Pin></StateCell>
|
||||
|
||||
Reference in new issue
Block a user