Merge branch 'dev' into improve-comp-changes

Author: pettinarip

src/@chakra-ui/components/Popover.ts

@@ -0,0 +1,62 @@
+import { popoverAnatomy as parts } from "@chakra-ui/anatomy"
+import { cssVar } from "@chakra-ui/react"
+import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system"
+
+import { defineMergeStyles, popoverDefaultTheme } from "./components.utils"
+
+const { definePartsStyle, defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys)
+
+const {
+  baseStyle: defaultBaseStyle,
+  sizes: defaultSizes,
+  defaultProps,
+} = popoverDefaultTheme
+
+const $arrowBg = cssVar("popper-arrow-bg")
+const $arrowSize = cssVar("popper-arrow-size")
+const $arrowShadowColor = cssVar("popper-arrow-shadow-color")
+
+const baseStyle = definePartsStyle(
+  defineMergeStyles(defaultBaseStyle, {
+    popper: {
+      borderRadius: "base",
+      zIndex: "popover",
+    },
+    content: {
+      [$arrowSize.variable]: "8px",
+      p: 2,
+      bg: "background.highlight",
+      borderRadius: "base",
+      boxShadow: `0px 0px 16px 0px #00000040`,
+      fontSize: "sm",
+      border: "none",
+      minWidth: "48", // 12rem
+      maxWidth: "xs", // 20rem
+      lineHeight: "base",
+      w: "auto",
+    },
+    body: {
+      color: "body.base",
+      fontWeight: "normal",
+      textTransform: "none",
+    },
+    header: {
+      border: "none",
+    },
+    arrow: {
+      [$arrowBg.variable]: "colors.background.highlight",
+      [$arrowShadowColor.variable]: "colors.background.highlight",
+      border: "none",
+    },
+  })
+)
+
+export const Popover = defineMultiStyleConfig({
+  baseStyle,
+  sizes: defaultSizes,
+  defaultProps: {
+    ...defaultProps,
+    variant: undefined,
+  },
+})

src/@chakra-ui/components/components.utils.ts

@@ -20,6 +20,7 @@ const {
   List: listDefaultTheme,
   Menu: menuDefaultTheme,
   Modal: modalDefaultTheme,
+  Popover: popoverDefaultTheme,
   Radio: radioDefaultTheme,
   Select: selectDefaultTheme,
   Spinner: spinnerDefaultTheme,
@@ -48,6 +49,7 @@ export {
   listDefaultTheme,
   menuDefaultTheme,
   modalDefaultTheme,
+  popoverDefaultTheme,
   radioDefaultTheme,
   selectDefaultTheme,
   spinnerDefaultTheme,

src/@chakra-ui/components/index.ts

@@ -19,6 +19,7 @@ import { Heading } from "./Heading"
 import { Input } from "./Input"
 import { Link } from "./Link"
 import { Modal } from "./Modal"
+import { Popover } from "./Popover"
 import { Progress } from "./Progress"
 import { Radio } from "./Radio"
 import { ReactSelect } from "./ReactSelect"
@@ -49,6 +50,7 @@ export default {
   Link,
   Menu: menuDefaultTheme,
   Modal,
+  Popover,
   Progress,
   Radio,
   ReactSelect,

src/components/DencunBanner.tsx

@@ -1,11 +1,13 @@
-import { Box, Text, Tooltip } from "@chakra-ui/react"
+import { Box, Text } from "@chakra-ui/react"
 
 import DismissableBanner from "@/components/Banners/DismissableBanner"
 import Emoji from "@/components/Emoji"
 import Link from "@/components/Link"
 
 import NetworkUpgradeSummaryData from "@/data/NetworkUpgradeSummaryData"
 
+import Tooltip from "./Tooltip"
+
 const DencunBanner = () => {
   const dateTimeAsString = NetworkUpgradeSummaryData.cancun
     .dateTimeAsString as string
@@ -16,14 +18,10 @@ const DencunBanner = () => {
         <Emoji text="🚨" me="2" />
         The Deneb + Cancun network upgrade is scheduled for{" "}
         <Tooltip
-          label={
-            <Box bg="background.base" p="2" rounded="base">
-              Epoch 269568 - {upgradeDate.toLocaleString()}
-            </Box>
-          }
+          content={<Box>Epoch 269568 - {upgradeDate.toLocaleString()}</Box>}
           aria-label="Deneb/Cancun timing"
         >
-          {upgradeDate.toLocaleDateString()}
+          <span>{upgradeDate.toLocaleDateString()}</span>
         </Tooltip>
         . Node operators must update client software to a supported version to
         prepare.{" "}

src/components/EthPriceCard.tsx

@@ -141,7 +141,9 @@ const EthPriceCard = ({ isLeftAlign = false, ...props }: EthPriceCardProps) => {
       >
         {t("eth-current-price")}
         <Tooltip content={tooltipContent}>
-          <Icon as={MdInfoOutline} boxSize="14px" ms={2} />
+          <Box as="span" ms={2}>
+            <Icon as={MdInfoOutline} boxSize="14px" />
+          </Box>
         </Tooltip>
       </Heading>