Closed jeremiasjutz closed 3 weeks ago
hi @jeremiasjutz do you have any examples on how to get this fix to properly work? I've been looking into it but so far the animations only work when nesting instances vertically.
For example, using the following code; if you set direction = 'right'
the stack animations don't work:
function getClassNames(direction: string): string {
if (direction == 'right') {
return 'fixed inset-y-0 right-0 flex h-auto flex-col border bg-gray-100 lg:w-[400px]';
}
return 'fixed inset-x-0 bottom-0 flex flex-col bg-gray-100 lg:h-[400px]';
}
export const SampleDrawer: React.FunctionComponent = () => {
const direction = 'bottom';
return (
<Drawer.Root shouldScaleBackground={true} direction={direction}>
<Drawer.Trigger>
<Button>Open Drawer</Button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<Drawer.Content className={getClassNames(direction)}>
<p className="text-base">
Lorem ipsum dolor sit...
</p>
<Drawer.NestedRoot direction={direction}>
<Drawer.Trigger>
<Button className="my-4">Open Second Drawer</Button>
</Drawer.Trigger>
<Drawer.Portal>
<Drawer.Overlay className="fixed inset-0 bg-black/40" />
<Drawer.Content className={getClassNames(direction)}>
<div className="mx-auto max-w-md">
<p className="text-base">
Lorem ipsum dolor sit...
</p>
</div>
</Drawer.Content>
</Drawer.Portal>
</Drawer.NestedRoot>
</Drawer.Content>
</Drawer.Portal>
</Drawer.Root>
);
};
@bcessa it seems like the current implementation (including my fix) does not handle directions other than bottom and right. As I only needed the nested drawer on the right, I did not encounter your issues. If I get to it, I might open another PR that fixes the other two directions.
this fixes issue #490