Skip to content

Commit

Permalink
feat(headless:tabs): isSwipeable prop이 false면 dragProp을 spread하지 않게 변…
Browse files Browse the repository at this point in the history 
…경해요 (#488)

* feat: tabs overflow to visible

* chore: stylesheet bump

* chore: bump

* chore: useSwipeable bump
  • Loading branch information
@junghyeonsu
junghyeonsu authored Dec 4, 2024
1 parent 9a9e607 commit 5f167e1
Show file tree
Hide file tree
Showing 13 changed files with 66 additions and 34 deletions.
2 changes: 1 addition & 1 deletion docs/components/example/index.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@
"tabs-alert": "import {\n Tabs,\n TabContent,\n TabContentList,\n TabTrigger,\n TabTriggerList,\n} from \"seed-design/ui/tabs\";\n\nexport default function TabsAlert() {\n return (\n <div style={{ width: \"360px\" }}>\n <Tabs defaultValue=\"1\">\n <TabTriggerList>\n <TabTrigger value=\"1\">라벨1</TabTrigger>\n <TabTrigger value=\"2\" alert>\n 라벨2\n </TabTrigger>\n <TabTrigger value=\"3\">라벨3</TabTrigger>\n </TabTriggerList>\n <TabContentList>\n <TabContent value=\"1\">\n <Content>Content 1</Content>\n </TabContent>\n <TabContent value=\"2\">\n <Content>Content 2</Content>\n </TabContent>\n <TabContent value=\"3\">\n <Content>Content 3</Content>\n </TabContent>\n </TabContentList>\n </Tabs>\n </div>\n );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n return (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"300px\",\n backgroundColor: \"var(--seed-color-bg-layer-default)\",\n }}\n >\n {props.children}\n </div>\n );\n};",
"tabs-disabled": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsDisabled() {\n return (\n <div style={{ width: \"360px\" }}>\n <Tabs defaultValue=\"1\">\n <TabTriggerList>\n <TabTrigger value=\"1\">라벨1</TabTrigger>\n <TabTrigger value=\"2\" isDisabled>\n 라벨2\n </TabTrigger>\n <TabTrigger value=\"3\">라벨3</TabTrigger>\n </TabTriggerList>\n <TabContentList>\n <TabContent value=\"1\">\n <Content>Content 1</Content>\n </TabContent>\n <TabContent value=\"2\">\n <Content>Content 2</Content>\n </TabContent>\n <TabContent value=\"3\">\n <Content>Content 3</Content>\n </TabContent>\n </TabContentList>\n </Tabs>\n </div>\n );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n return (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"300px\",\n backgroundColor: \"var(--seed-color-bg-layer-default)\",\n }}\n >\n {props.children}\n </div>\n );\n};",
"tabs-dynamic-height": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsDynamicHeight() {\n return (\n <div style={{ width: \"360px\" }}>\n <Tabs defaultValue=\"1\" lazyMode=\"unmount\" isLazy={true} isSwipeable={false}>\n <TabTriggerList>\n <TabTrigger value=\"1\">라벨1</TabTrigger>\n <TabTrigger value=\"2\">라벨2</TabTrigger>\n <TabTrigger value=\"3\">라벨3</TabTrigger>\n </TabTriggerList>\n <TabContentList>\n <TabContent value=\"1\">\n <Content height=\"100px\">Content 1</Content>\n </TabContent>\n <TabContent value=\"2\">\n <Content height=\"200px\">Content 2</Content>\n </TabContent>\n <TabContent value=\"3\">\n <Content height=\"300px\">Content 3</Content>\n </TabContent>\n </TabContentList>\n </Tabs>\n <div style={{ height: \"100px\", backgroundColor: \"gray\" }}>아래 컨텐츠</div>\n </div>\n );\n}\n\nconst Content = (props: React.PropsWithChildren<{ height: string }>) => {\n const { height, children } = props;\n return (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height,\n backgroundColor: \"var(--seed-color-bg-layer-default)\",\n }}\n >\n {children}\n </div>\n );\n};",
"tabs-fix-trigger-list": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsFixTriggerList() {\n return (\n // 600은 화면 높이라고 가정합니다.\n <div style={{ width: \"360px\", height: \"600px\" }}>\n <Tabs\n defaultValue=\"1\"\n lazyMode=\"keepMounted\"\n isLazy={true}\n isSwipeable={false}\n fixTriggerList\n style={{ height: \"100%\" }} // 탭 영역을 전체 화면으로 설정합니다.\n >\n <TabTriggerList>\n <TabTrigger value=\"1\">라벨1</TabTrigger>\n <TabTrigger value=\"2\">라벨2</TabTrigger>\n <TabTrigger value=\"3\">라벨3</TabTrigger>\n </TabTriggerList>\n <TabContentList>\n <TabContent value=\"1\">\n <Content height=\"1000px\">Content 1</Content>\n </TabContent>\n <TabContent value=\"2\">\n <Content height=\"1000px\">Content 2</Content>\n </TabContent>\n <TabContent value=\"3\">\n <Content height=\"1000px\">Content 3</Content>\n </TabContent>\n </TabContentList>\n </Tabs>\n </div>\n );\n}\n\nconst Content = (props: React.PropsWithChildren<{ height: string }>) => {\n const { height, children } = props;\n return (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height,\n background: \"linear-gradient(to bottom, white, gray)\",\n }}\n >\n {children}\n </div>\n );\n};",
"tabs-fix-trigger-list": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsFixTriggerList() {\n return (\n // 600은 화면 높이라고 가정합니다.\n <div style={{ width: \"360px\", height: \"600px\" }}>\n <Tabs\n defaultValue=\"1\"\n lazyMode=\"keepMounted\"\n isLazy={true}\n size=\"medium\"\n isSwipeable={false}\n fixTriggerList\n style={{ height: \"100%\" }} // 탭 영역을 전체 화면으로 설정합니다.\n >\n <TabTriggerList>\n <TabTrigger value=\"1\">라벨1</TabTrigger>\n <TabTrigger value=\"2\">라벨2</TabTrigger>\n <TabTrigger value=\"3\">라벨3</TabTrigger>\n </TabTriggerList>\n <TabContentList>\n <TabContent value=\"1\">\n <Content height=\"1000px\">Content 1</Content>\n </TabContent>\n <TabContent value=\"2\">\n <Content height=\"1000px\">Content 2</Content>\n </TabContent>\n <TabContent value=\"3\">\n <Content height=\"1000px\">Content 3</Content>\n </TabContent>\n </TabContentList>\n </Tabs>\n </div>\n );\n}\n\nconst Content = (props: React.PropsWithChildren<{ height: string }>) => {\n const { height, children } = props;\n return (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height,\n background: \"linear-gradient(to bottom, white, gray)\",\n }}\n >\n {children}\n </div>\n );\n};",
"tabs-layout-fill": "import {\n Tabs,\n TabContent,\n TabContentList,\n TabTrigger,\n TabTriggerList,\n} from \"seed-design/ui/tabs\";\n\nexport default function TabsLayoutFill() {\n return (\n <div style={{ width: \"360px\" }}>\n <Tabs defaultValue=\"2\" layout=\"fill\">\n <TabTriggerList>\n <TabTrigger value=\"1\">라벨1</TabTrigger>\n <TabTrigger value=\"2\">라벨2</TabTrigger>\n <TabTrigger value=\"3\">라벨3</TabTrigger>\n </TabTriggerList>\n <TabContentList>\n <TabContent value=\"1\">\n <Content>Content 1</Content>\n </TabContent>\n <TabContent value=\"2\">\n <Content>Content 2</Content>\n </TabContent>\n <TabContent value=\"3\">\n <Content>Content 3</Content>\n </TabContent>\n </TabContentList>\n </Tabs>\n </div>\n );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n return (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"300px\",\n backgroundColor: \"var(--seed-color-bg-layer-default)\",\n }}\n >\n {props.children}\n </div>\n );\n};",
"tabs-layout-hug": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsLayoutHug() {\n return (\n <div style={{ width: \"360px\" }}>\n <Tabs defaultValue=\"1\" layout=\"hug\">\n <TabTriggerList>\n <TabTrigger value=\"1\">라벨1</TabTrigger>\n <TabTrigger value=\"2\">라벨2</TabTrigger>\n <TabTrigger value=\"3\">라벨3</TabTrigger>\n </TabTriggerList>\n <TabContentList>\n <TabContent value=\"1\">\n <Content>Content 1</Content>\n </TabContent>\n <TabContent value=\"2\">\n <Content>Content 2</Content>\n </TabContent>\n <TabContent value=\"3\">\n <Content>Content 3</Content>\n </TabContent>\n </TabContentList>\n </Tabs>\n </div>\n );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n return (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"300px\",\n backgroundColor: \"var(--seed-color-bg-layer-default)\",\n }}\n >\n {props.children}\n </div>\n );\n};",
"tabs-preview": "import { Tabs, TabContent, TabContentList, TabTrigger, TabTriggerList } from \"seed-design/ui/tabs\";\n\nexport default function TabsPreview() {\n return (\n <div style={{ width: \"360px\" }}>\n <Tabs defaultValue=\"1\">\n <TabTriggerList>\n <TabTrigger value=\"1\">라벨1</TabTrigger>\n <TabTrigger value=\"2\">라벨2</TabTrigger>\n <TabTrigger value=\"3\">라벨3</TabTrigger>\n </TabTriggerList>\n <TabContentList>\n <TabContent value=\"1\">\n <Content>Content 1</Content>\n </TabContent>\n <TabContent value=\"2\">\n <Content>Content 2</Content>\n </TabContent>\n <TabContent value=\"3\">\n <Content>Content 3</Content>\n </TabContent>\n </TabContentList>\n </Tabs>\n </div>\n );\n}\n\nconst Content = (props: React.PropsWithChildren) => {\n return (\n <div\n style={{\n display: \"flex\",\n justifyContent: \"center\",\n alignItems: \"center\",\n height: \"300px\",\n backgroundColor: \"var(--seed-color-bg-layer-default)\",\n }}\n >\n {props.children}\n </div>\n );\n};",
Expand Down
6 changes: 3 additions & 3 deletions docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@
"@seed-design/react-radio-group": "0.0.0-alpha-20241030023710",
"@seed-design/react-segmented-control": "workspace:^",
"@seed-design/react-switch": "0.0.0-alpha-20241030023710",
"@seed-design/react-tabs": "0.0.0-alpha-20241203133940",
"@seed-design/recipe": "0.0.0-alpha-20241203133940",
"@seed-design/react-tabs": "0.0.0-alpha-20241204061301",
"@seed-design/recipe": "0.0.0-alpha-20241204032829",
"@seed-design/rootage-cli": "0.0.0",
"@seed-design/rootage-core": "0.0.0",
"@seed-design/stylesheet": "3.0.0-alpha-20241203133940",
"@seed-design/stylesheet": "3.0.0-alpha-20241204032654",
"@stackflow/config": "^1.2.0",
"@stackflow/core": "^1.1.0",
"@stackflow/plugin-basic-ui": "^1.10.0",
Expand Down
Loading

0 comments on commit 5f167e1

Please sign in to comment.