Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: initial nested transform #491

Merged

Conversation

jeremiasjutz
Copy link
Contributor

this fixes issue #490

@jeremiasjutz jeremiasjutz changed the title fix initial nested transform fix: initial nested transform Oct 14, 2024
@emilkowalski emilkowalski merged commit 5bccd2c into emilkowalski:main Oct 29, 2024
@bcessa
Copy link

bcessa commented Nov 11, 2024

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>
  );
};

@jeremiasjutz
Copy link
Contributor Author

jeremiasjutz commented Nov 15, 2024

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants