Skip to content

Commit d3d24a9

Browse files
GiyoMoonGiyoMoon
authored
feat(drawer): add transitions (#60)
1 parent 8a68c2c commit d3d24a9

File tree

6 files changed

+27
-18
lines changed

6 files changed

+27
-18
lines changed

‎.changeset/wet-pugs-dance.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"docs": patch
3+
---
4+
5+
Add transitions to the drawer component

‎apps/docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"chart.js": "^4.4.1",
2424
"class-variance-authority": "^0.7.0",
2525
"clsx": "^2.0.0",
26-
"corvu": "^0.3.0",
26+
"corvu": "^0.4.0",
2727
"shosho": "^1.4.3",
2828
"solid-icons": "^1.0.12",
2929
"solid-js": "1.7.12",

‎apps/docs/public/registry/ui/drawer.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"files": [
77
{
88
"name": "drawer.tsx",
9-
"content": "import type { Component, ComponentProps } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as DrawerPrimitive from \"corvu/drawer\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Drawer = DrawerPrimitive.Root\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay: Component<DrawerPrimitive.OverlayProps> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return (\n <DrawerPrimitive.Overlay class={cn(\"fixed inset-0 z-50 bg-black/80\", props.class)} {...rest} />\n )\n}\n\nconst DrawerContent: Component<DrawerPrimitive.ContentProps> = (props) => {\n const [, rest] = splitProps(props, [\"class\", \"children\"])\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DrawerPrimitive.Content\n class={cn(\n \"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border\",\n props.class\n )}\n {...rest}\n >\n <div class=\"bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full\" />\n {props.children}\n </DrawerPrimitive.Content>\n </DrawerPortal>\n )\n}\n\nconst DrawerHeader: Component<ComponentProps<\"div\">> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return <div class={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", props.class)} {...rest} />\n}\n\nconst DrawerFooter: Component<ComponentProps<\"div\">> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return <div class={cn(\"t-auto flex flex-col gap-2 p-4\", props.class)} {...rest} />\n}\n\nconst DrawerTitle: Component<DrawerPrimitive.LabelProps> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return (\n <DrawerPrimitive.Label\n class={cn(\"text-lg font-semibold leading-none tracking-tight\", props.class)}\n {...rest}\n />\n )\n}\n\nconst DrawerDescription: Component<DrawerPrimitive.DescriptionProps> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return (\n <DrawerPrimitive.Description\n class={cn(\"text-muted-foreground text-sm\", props.class)}\n {...rest}\n />\n )\n}\n\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription\n}\n"
9+
"content": "import type { Component, ComponentProps } from \"solid-js\"\nimport { splitProps } from \"solid-js\"\n\nimport * as DrawerPrimitive from \"corvu/drawer\"\n\nimport { cn } from \"~/lib/utils\"\n\nconst Drawer = DrawerPrimitive.Root\n\nconst DrawerTrigger = DrawerPrimitive.Trigger\n\nconst DrawerPortal = DrawerPrimitive.Portal\n\nconst DrawerClose = DrawerPrimitive.Close\n\nconst DrawerOverlay: Component<DrawerPrimitive.OverlayProps> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n const drawerContext = DrawerPrimitive.useContext()\n return (\n <DrawerPrimitive.Overlay\n class={cn(\n \"fixed inset-0 z-50 data-[transitioning]:transition-colors data-[transitioning]:duration-300\",\n props.class\n )}\n style={{\n 'background-color': `rgb(0 0 0 / ${0.8 * drawerContext.openPercentage()})`,\n }}\n {...rest}\n />\n )\n}\n\nconst DrawerContent: Component<DrawerPrimitive.ContentProps> = (props) => {\n const [, rest] = splitProps(props, [\"class\", \"children\"])\n return (\n <DrawerPortal>\n <DrawerOverlay />\n <DrawerPrimitive.Content\n class={cn(\n \"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border data-[transitioning]:transition-transform data-[transitioning]:duration-300 md:select-none\",\n props.class\n )}\n {...rest}\n >\n <div class=\"bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full\" />\n {props.children}\n </DrawerPrimitive.Content>\n </DrawerPortal>\n )\n}\n\nconst DrawerHeader: Component<ComponentProps<\"div\">> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return <div class={cn(\"grid gap-1.5 p-4 text-center sm:text-left\", props.class)} {...rest} />\n}\n\nconst DrawerFooter: Component<ComponentProps<\"div\">> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return <div class={cn(\"t-auto flex flex-col gap-2 p-4\", props.class)} {...rest} />\n}\n\nconst DrawerTitle: Component<DrawerPrimitive.LabelProps> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return (\n <DrawerPrimitive.Label\n class={cn(\"text-lg font-semibold leading-none tracking-tight\", props.class)}\n {...rest}\n />\n )\n}\n\nconst DrawerDescription: Component<DrawerPrimitive.DescriptionProps> = (props) => {\n const [, rest] = splitProps(props, [\"class\"])\n return (\n <DrawerPrimitive.Description\n class={cn(\"text-muted-foreground text-sm\", props.class)}\n {...rest}\n />\n )\n}\n\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription\n}\n"
1010
}
1111
],
1212
"type": "ui"

‎apps/docs/src/registry/example/drawer-demo.tsx

Lines changed: 4 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { createSignal } from "solid-js"
22

3-
import { As } from "corvu"
43
import { TbMinus, TbPlus } from "solid-icons/tb"
54

65
import { Button } from "~/registry/ui/button"
@@ -24,10 +23,8 @@ export default function DrawerDemo() {
2423

2524
return (
2625
<Drawer>
27-
<DrawerTrigger asChild>
28-
<As component={Button} variant="outline">
29-
Open Drawer
30-
</As>
26+
<DrawerTrigger as={Button} variant="outline">
27+
Open Drawer
3128
</DrawerTrigger>
3229
<DrawerContent>
3330
<div class="mx-auto w-full max-w-sm">
@@ -65,10 +62,8 @@ export default function DrawerDemo() {
6562
</div>
6663
<DrawerFooter>
6764
<Button>Submit</Button>
68-
<DrawerClose asChild>
69-
<As component={Button} variant="outline">
70-
Cancel
71-
</As>
65+
<DrawerClose as={Button} variant="outline">
66+
Cancel
7267
</DrawerClose>
7368
</DrawerFooter>
7469
</div>

‎apps/docs/src/registry/ui/drawer.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,18 @@ const DrawerClose = DrawerPrimitive.Close
1515

1616
const DrawerOverlay: Component<DrawerPrimitive.OverlayProps> = (props) => {
1717
const [, rest] = splitProps(props, ["class"])
18+
const drawerContext = DrawerPrimitive.useContext()
1819
return (
19-
<DrawerPrimitive.Overlay class={cn("fixed inset-0 z-50 bg-black/80", props.class)} {...rest} />
20+
<DrawerPrimitive.Overlay
21+
class={cn(
22+
"fixed inset-0 z-50 data-[transitioning]:transition-colors data-[transitioning]:duration-300",
23+
props.class
24+
)}
25+
style={{
26+
'background-color': `rgb(0 0 0 / ${0.8 * drawerContext.openPercentage()})`,
27+
}}
28+
{...rest}
29+
/>
2030
)
2131
}
2232

@@ -27,7 +37,7 @@ const DrawerContent: Component<DrawerPrimitive.ContentProps> = (props) => {
2737
<DrawerOverlay />
2838
<DrawerPrimitive.Content
2939
class={cn(
30-
"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
40+
"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border data-[transitioning]:transition-transform data-[transitioning]:duration-300 md:select-none",
3141
props.class
3242
)}
3343
{...rest}

‎pnpm-lock.yaml

Lines changed: 4 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)