chore: update docs

.eslintrc

@@ -38,6 +38,8 @@
     "no-shadow": "off",
     "guard-for-in": "off",
     "react/no-danger": "off",
+    "react/button-has-type": "off",
+    "react/no-unescaped-entities": "off",
     "operator-assignment": "off",
     "prefer-destructuring": "off",
     "react/state-in-constructor": "off",

packages/tooltip/stories/tooltip.stories.tsx

@@ -195,7 +195,9 @@ export const WithModal = () => {
             <div style={{ float: "right" }}>
               <Tooltip label="Notifications" aria-label="3 Notifications">
                 <button style={{ fontSize: 25 }}>
-                  <span>🔔</span>
+                  <span role="img" aria-label="Bell">
+                    🔔
+                  </span>
                   <span>3</span>
                 </button>
               </Tooltip>
@@ -224,15 +226,15 @@ export const withWrappedDisabledButton = () => (
 )
 
 export const withIsOpenProp = () => (
-  <Tooltip label="Hello world" isOpen={true} hasArrow>
+  <Tooltip label="Hello world" isOpen hasArrow>
     <button style={{ fontSize: 25, pointerEvents: "all" }} disabled>
       Can't Touch This
     </button>
   </Tooltip>
 )
 
 export const withDefaultIsOpenProp = () => (
-  <Tooltip label="Hello world" defaultIsOpen={true}>
+  <Tooltip label="Hello world" defaultIsOpen>
     <button style={{ fontSize: 25, pointerEvents: "all" }}>
       Can't Touch This
     </button>

website/pages/docs/layout/flex.mdx

@@ -73,32 +73,40 @@ stackable and responsive layouts.
 ```
 
 ### Flex and Spacer vs Grid vs Stack
-The `Flex` and `Spacer` components, `Grid` and `HStack` treat children of different
-widths differently. In `HStack`, the children will have equal spacing between them
-but they won't span the entire width of the container. In `Grid`, the starting points
-of the children will be equally spaced but the gaps between the children will
-be different. With `Flex` and `Spacer`, the children will span the entire width
-of the container and also have equal spacing between them.
+
+The `Flex` and `Spacer` components, `Grid` and `HStack` treat children of
+different widths differently.
+
+- In `HStack`, the children will have equal spacing between them but they won't
+  span the entire width of the container.
+- In `Grid`, the starting points of the children will be equally spaced but the
+  gaps between the children will be different.
+- With `Flex` and `Spacer`, the children will span the entire width of the
+  container and also have equal spacing between them.
 
 ```jsx
 <Box>
-  Flex and Spacer: Full width, equal Spacing
+  <Text>Flex and Spacer: Full width, equal Spacing</Text>
   <Flex>
     <Box w="70px" h="10" bg="red.500" />
     <Spacer />
     <Box w="170px" h="10" bg="red.500" />
     <Spacer />
     <Box w="180px" h="10" bg="red.500" />
   </Flex>
-
-  Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
+
+  <Text>
+    Grid: The children start at the beginning, the 1/3 mark and 2/3 mark
+  </Text>
   <Grid templateColumns="repeat(3, 1fr)" gap={6}>
     <Box w="70px" h="10" bg="blue.500" />
     <Box w="170px" h="10" bg="blue.500" />
     <Box w="180px" h="10" bg="blue.500" />
   </Grid>
-
-  HStack: The children have equal spacing but don't span the whole container
+
+  <Text>
+    HStack: The children have equal spacing but don't span the whole container
+  </Text>
   <HStack spacing="24px">
     <Box w="70px" h="10" bg="teal.500" />
     <Box w="170px" h="10" bg="teal.500" />
@@ -113,11 +121,13 @@ aligned to the right
 ```jsx
 <Flex>
   <Box p="2">
-    <Heading size="md">A Chakraic App</Heading>
+    <Heading size="md">Chakra App</Heading>
   </Box>
   <Spacer />
   <Box>
-    <Button colorScheme="teal" mr="4">Sign Up</Button>
+    <Button colorScheme="teal" mr="4">
+      Sign Up
+    </Button>
     <Button colorScheme="teal">Log in</Button>
   </Box>
 </Flex>