message: chore: add readme for modal
diff: @@ -15,3 +15,94 @@ npm i @chakra-ui/modal
  ```
  ## Import components
  +
  +```jsx
  +import {
  + Modal,
  + ModalOverlay,
  + ModalContent,
  + ModalHeader,
  + ModalFooter,
  + ModalBody,
  + ModalCloseButton,
  +} from "@chakra-ui/core"
  +```
  +
  +## Usage
  +
  +When the modal opens, focus is sent into the modal and set to the first tabbable
  +element. If there are no tabbled element, focus is set on the `ModalContent`.
  +
  +```jsx
  +function BasicUsage() {
  + const { isOpen, onOpen, onClose } = useDisclosure()
  + return (
  + <>
  + <Button onClick={onOpen}>Open Modal</Button>
  +
  + <Modal isOpen={isOpen} onClose={onClose}>
  + <ModalOverlay>
  + <ModalContent>
  + <ModalHeader>Modal Title</ModalHeader>
  + <ModalCloseButton />
  +
  + <ModalBody>
  + <Lorem count={2} />
  + </ModalBody>
  +
  + <ModalFooter>
  + <Button variantColor="blue" mr={3} onClick={onClose}>
  + Close
  + </Button>
  + <Button variant="ghost">Secondary Action</Button>
  + </ModalFooter>
  + </ModalContent>
  + </ModalOverlay>
  + </Modal>
  + </>
  + )
  +}
  +```
  +
  +### Control Focus when Modal closes
  +
  +When the dialog closes, it returns focus to the element that triggered. Set
  +`finalFocusRef` to element that should receive focus when the modal opens.
  +
  +```jsx
  +function ReturnFocus() {
  + const { isOpen, onOpen, onClose } = useDisclosure()
  + const finalRef = React.useRef()
  +
  + return (
  + <>
  + <Box ref={finalRef} tabIndex={-1} aria-label="Focus moved to this box">
  + Some other content that'll receive focus on close.
  + </Box>
  +
  + <Button mt={4} onClick={onOpen}>
  + Open Modal
  + </Button>
  +
  + <Modal finalFocusRef={finalRef} isOpen={isOpen} onClose={onClose}>
  + <ModalOverlay>
  + <ModalContent>
  + <ModalHeader>Modal Title</ModalHeader>
  + <ModalCloseButton />
  + <ModalBody>
  + <Lorem count={2} />
  + </ModalBody>
  +
  + <ModalFooter>
  + <Button variantColor="blue" mr={3} onClick={onClose}>
  + Close
  + </Button>
  + <Button variant="ghost">Secondary Action</Button>
  + </ModalFooter>
  + </ModalContent>
  + </ModalOverlay>
  + </Modal>
  + </>
  + )
  +}
  +```
  