-
Notifications
You must be signed in to change notification settings - Fork 28
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: tabs headless, tabs component, segmented-control component (#…
…481) * refactor: tabs * refactor: option -> trigger로 parts명 변경 * refactor: rootEl가 있을때만 setProperty * feat: segmented control 변경 * chore: build * chore: className 변경 * feat: 전부 CSS Variable로 처리 * chore: useTabs에서 layout prop 삭제 * fix: rootEl state * refactor: 안쓰는 transition 정리 * fix: `--seed-design-segmented-control-tab-count` 계산 전 눈속임 * feat: defaultValue fallback, mount 이전 상태는 slot 대신 inline style로 * chore: generate:all --------- Co-authored-by: Joo Chanhwi <[email protected]>
- Loading branch information
1 parent
be093ab
commit 88cb5d5
Showing
22 changed files
with
256 additions
and
207 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,10 @@ | ||
| import { SegmentedControl, SegmentedControlOption } from "seed-design/ui/segmented-control"; | ||
| import { SegmentedControl, SegmentedControlTrigger } from "seed-design/ui/segmented-control"; | ||
|
|
||
| export default function SegmentedControlFixedWidth() { | ||
| return ( | ||
| <SegmentedControl style={{ width: "600px" }}> | ||
| <SegmentedControlOption value="new">New</SegmentedControlOption> | ||
| <SegmentedControlOption value="hot">Hot</SegmentedControlOption> | ||
| <SegmentedControl defaultValue="new"> | ||
| <SegmentedControlTrigger value="new">New</SegmentedControlTrigger> | ||
| <SegmentedControlTrigger value="hot">Hot</SegmentedControlTrigger> | ||
| </SegmentedControl> | ||
| ); | ||
| } |
10 changes: 5 additions & 5 deletions
10
docs/components/example/segmented-control-long-label-fixed-width.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,11 @@ | ||
| import { SegmentedControl, SegmentedControlOption } from "seed-design/ui/segmented-control"; | ||
| import { SegmentedControl, SegmentedControlTrigger } from "seed-design/ui/segmented-control"; | ||
|
|
||
| export default function SegmentedControlLongLabelFixedWidth() { | ||
| return ( | ||
| <SegmentedControl style={{ width: "600px" }}> | ||
| <SegmentedControlOption value="price">가격 높은 순</SegmentedControlOption> | ||
| <SegmentedControlOption value="discount">할인율 높은 순</SegmentedControlOption> | ||
| <SegmentedControlOption value="popularity">인기 많은 순</SegmentedControlOption> | ||
| <SegmentedControl defaultValue="price"> | ||
| <SegmentedControlTrigger value="price">가격 높은 순</SegmentedControlTrigger> | ||
| <SegmentedControlTrigger value="discount">할인율 높은 순</SegmentedControlTrigger> | ||
| <SegmentedControlTrigger value="popularity">인기 많은 순</SegmentedControlTrigger> | ||
| </SegmentedControl> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,11 @@ | ||
| import { SegmentedControl, SegmentedControlOption } from "seed-design/ui/segmented-control"; | ||
| import { SegmentedControl, SegmentedControlTrigger } from "seed-design/ui/segmented-control"; | ||
|
|
||
| export default function SegmentedControlLongLabel() { | ||
| return ( | ||
| <SegmentedControl> | ||
| <SegmentedControlOption value="price">가격 높은 순</SegmentedControlOption> | ||
| <SegmentedControlOption value="discount">할인율 높은 순</SegmentedControlOption> | ||
| <SegmentedControlOption value="popularity">인기 많은 순</SegmentedControlOption> | ||
| <SegmentedControl defaultValue="price"> | ||
| <SegmentedControlTrigger value="price">가격 높은 순</SegmentedControlTrigger> | ||
| <SegmentedControlTrigger value="discount">할인율 높은 순</SegmentedControlTrigger> | ||
| <SegmentedControlTrigger value="popularity">인기 많은 순</SegmentedControlTrigger> | ||
| </SegmentedControl> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,10 @@ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import { SegmentedControl, SegmentedControlOption } from "seed-design/ui/segmented-control"; | ||
| import { SegmentedControl, SegmentedControlTrigger } from "seed-design/ui/segmented-control"; | ||
|
|
||
| export default function SegmentedControlPreview() { | ||
| const options = ["New", "Hot"]; | ||
| const [value, setValue] = useState("New"); | ||
|
|
||
| return ( | ||
| <div className="flex flex-col gap-3 items-center text-center"> | ||
| <SegmentedControl value={value} defaultValue="New" onValueChange={setValue}> | ||
| {options.map((option) => ( | ||
| <SegmentedControlOption key={option} value={option}> | ||
| {option} | ||
| </SegmentedControlOption> | ||
| ))} | ||
| </SegmentedControl> | ||
| <div>Selected value: {value}</div> | ||
| </div> | ||
| <SegmentedControl> | ||
| <SegmentedControlTrigger value="Hot">Hot</SegmentedControlTrigger> | ||
| <SegmentedControlTrigger value="New">New</SegmentedControlTrigger> | ||
| </SegmentedControl> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.