Merge pull request chakra-ui#3427 from TheAsda/docs/drawer

Update drawer docs

.changeset/chatty-deers-flash.md

@@ -0,0 +1,7 @@
+---
+"@chakra-ui/modal": patch
+"@chakra-ui/docs": patch
+---
+
+- Add drawer example to modal readme
+- Fix github references in drawer and alert-dialog docs

packages/modal/README.md

@@ -188,3 +188,78 @@ function AlertDialogExample() {
   )
 }
 ```
+
+# Drawer
+
+The Drawer component is a panel that slides out from the edge of the screen. 
+It can be useful when you need users to complete a task or view some details 
+without leaving the current page.
+
+## Installation
+
+```sh
+yarn add @chakra-ui/modal
+
+# or
+
+npm i @chakra-ui/modal
+```
+
+## Import components
+
+```jsx
+import {
+  Drawer,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerBody,
+  DrawerCloseButton,
+} from "@chakra-ui/react"
+```
+
+## Basic usage
+
+## Usage
+
+By default focus is placed on `DrawerCloseButton` when the drawer opens.
+
+```jsx
+function DrawerExample() {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const btnRef = React.useRef()
+
+  return (
+    <>
+      <Button ref={btnRef} colorScheme="teal" onClick={onOpen}>
+        Open
+      </Button>
+      <Drawer
+        isOpen={isOpen}
+        placement="right"
+        onClose={onClose}
+        finalFocusRef={btnRef}
+      >
+        <DrawerOverlay>
+          <DrawerContent>
+            <DrawerCloseButton />
+            <DrawerHeader>Create your account</DrawerHeader>
+
+            <DrawerBody>
+              <Input placeholder="Type here..." />
+            </DrawerBody>
+
+            <DrawerFooter>
+              <Button variant="outline" mr={3} onClick={onClose}>
+                Cancel
+              </Button>
+              <Button color="blue">Save</Button>
+            </DrawerFooter>
+          </DrawerContent>
+        </DrawerOverlay>
+      </Drawer>
+    </>
+  )
+}
+```

website/pages/docs/overlay/alert-dialog.mdx

@@ -11,8 +11,8 @@ description:
 confirmation or action.
 
 <ComponentLinks
-  github={{ package: "dialog" }}
-  npm={{ package: "@chakra-ui/dialog" }}
+  github={{ package: "modal" }}
+  npm={{ package: "@chakra-ui/modal" }}
 />
 
 <carbon-ad></carbon-ad>

website/pages/docs/overlay/drawer.mdx

@@ -14,8 +14,8 @@ without leaving the current page.
 
 <ComponentLinks
   theme={{ componentName: "drawer" }}
-  github={{ package: "drawer" }}
-  npm={{ package: "@chakra-ui/drawer" }}
+  github={{ package: "modal" }}
+  npm={{ package: "@chakra-ui/modal" }}
 />
 
 <carbon-ad></carbon-ad>