[bug]: Incorrect Usage of <DrawerClose> in Documentation Causes HTML Button Nesting Error

[Tchano-Py]

Describe the bug

I noticed an issue in the documentation for the component that could cause HTML hydration errors. The current example has a element nested inside another element, which is invalid in HTML and leads to the following warning:

Warning: In HTML <button> cannot be a descendant of <button>. This will cause a hydration error.

The current documentation demonstrates the usage of the Drawer component as follows:

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose> // <---
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

The recommended fix is to update the documentation to include the asChild property on , as shown below:

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Are you absolutely sure?</DrawerTitle>
      <DrawerDescription>This action cannot be undone.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose asChild> // <---
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Affected component/components

DrawerClose

How to reproduce

• Implement the code as per the current documentation.

• Observe the hydration error in the browser console.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Operating System: Windows 11
Browser: Microsoft Edge

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues

[kewldan]

I have created a PR for fixing this issue