Skip to content

Commit afb697f

Browse files
pettinarippettinarip
authored
Merge pull request #10974 from amit-ksh/new-ds/tooltip
update tooltip component based on new DS
2 parents 9cbf671 + db12afd commit afb697f

File tree

17 files changed

+273
-223
lines changed

17 files changed

+273
-223
lines changed

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

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { popoverAnatomy as parts } from "@chakra-ui/anatomy"
2+
import { cssVar } from "@chakra-ui/react"
3+
import { createMultiStyleConfigHelpers } from "@chakra-ui/styled-system"
4+
5+
import { defineMergeStyles, popoverDefaultTheme } from "./components.utils"
6+
7+
const { definePartsStyle, defineMultiStyleConfig } =
8+
createMultiStyleConfigHelpers(parts.keys)
9+
10+
const {
11+
baseStyle: defaultBaseStyle,
12+
sizes: defaultSizes,
13+
defaultProps,
14+
} = popoverDefaultTheme
15+
16+
const $arrowBg = cssVar("popper-arrow-bg")
17+
const $arrowSize = cssVar("popper-arrow-size")
18+
const $arrowShadowColor = cssVar("popper-arrow-shadow-color")
19+
20+
const baseStyle = definePartsStyle(
21+
defineMergeStyles(defaultBaseStyle, {
22+
popper: {
23+
borderRadius: "base",
24+
zIndex: "popover",
25+
},
26+
content: {
27+
[$arrowSize.variable]: "8px",
28+
p: 2,
29+
bg: "background.highlight",
30+
borderRadius: "base",
31+
boxShadow: `0px 0px 16px 0px #00000040`,
32+
fontSize: "sm",
33+
border: "none",
34+
minWidth: "48", // 12rem
35+
maxWidth: "xs", // 20rem
36+
lineHeight: "base",
37+
w: "auto",
38+
},
39+
body: {
40+
color: "body.base",
41+
fontWeight: "normal",
42+
textTransform: "none",
43+
},
44+
header: {
45+
border: "none",
46+
},
47+
arrow: {
48+
[$arrowBg.variable]: "colors.background.highlight",
49+
[$arrowShadowColor.variable]: "colors.background.highlight",
50+
border: "none",
51+
},
52+
})
53+
)
54+
55+
export const Popover = defineMultiStyleConfig({
56+
baseStyle,
57+
sizes: defaultSizes,
58+
defaultProps: {
59+
...defaultProps,
60+
variant: undefined,
61+
},
62+
})

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ const {
2020
List: listDefaultTheme,
2121
Menu: menuDefaultTheme,
2222
Modal: modalDefaultTheme,
23+
Popover: popoverDefaultTheme,
2324
Radio: radioDefaultTheme,
2425
Select: selectDefaultTheme,
2526
Spinner: spinnerDefaultTheme,
@@ -48,6 +49,7 @@ export {
4849
listDefaultTheme,
4950
menuDefaultTheme,
5051
modalDefaultTheme,
52+
popoverDefaultTheme,
5153
radioDefaultTheme,
5254
selectDefaultTheme,
5355
spinnerDefaultTheme,

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { Heading } from "./Heading"
1919
import { Input } from "./Input"
2020
import { Link } from "./Link"
2121
import { Modal } from "./Modal"
22+
import { Popover } from "./Popover"
2223
import { Progress } from "./Progress"
2324
import { Radio } from "./Radio"
2425
import { ReactSelect } from "./ReactSelect"
@@ -49,6 +50,7 @@ export default {
4950
Link,
5051
Menu: menuDefaultTheme,
5152
Modal,
53+
Popover,
5254
Progress,
5355
Radio,
5456
ReactSelect,

‎src/components/DencunBanner.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1-
import { Box, Text, Tooltip } from "@chakra-ui/react"
1+
import { Box, Text } from "@chakra-ui/react"
22

33
import DismissableBanner from "@/components/Banners/DismissableBanner"
44
import Emoji from "@/components/Emoji"
55
import Link from "@/components/Link"
66

77
import NetworkUpgradeSummaryData from "@/data/NetworkUpgradeSummaryData"
88

9+
import Tooltip from "./Tooltip"
10+
911
const DencunBanner = () => {
1012
const dateTimeAsString = NetworkUpgradeSummaryData.cancun
1113
.dateTimeAsString as string
@@ -16,14 +18,10 @@ const DencunBanner = () => {
1618
<Emoji text="🚨" me="2" />
1719
The Deneb + Cancun network upgrade is scheduled for{" "}
1820
<Tooltip
19-
label={
20-
<Box bg="background.base" p="2" rounded="base">
21-
Epoch 269568 - {upgradeDate.toLocaleString()}
22-
</Box>
23-
}
21+
content={<Box>Epoch 269568 - {upgradeDate.toLocaleString()}</Box>}
2422
aria-label="Deneb/Cancun timing"
2523
>
26-
{upgradeDate.toLocaleDateString()}
24+
<span>{upgradeDate.toLocaleDateString()}</span>
2725
</Tooltip>
2826
. Node operators must update client software to a supported version to
2927
prepare.{" "}

‎src/components/EthPriceCard.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,9 @@ const EthPriceCard = ({ isLeftAlign = false, ...props }: EthPriceCardProps) => {
141141
>
142142
{t("eth-current-price")}
143143
<Tooltip content={tooltipContent}>
144-
<Icon as={MdInfoOutline} boxSize="14px" ms={2} />
144+
<Box as="span" ms={2}>
145+
<Icon as={MdInfoOutline} boxSize="14px" />
146+
</Box>
145147
</Tooltip>
146148
</Heading>
147149

‎src/components/FindWallet/WalletTable/WalletMoreInfoCategory.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,12 +78,14 @@ export const WalletMoreInfoCategory = ({
7878
<p>{feature.label}</p>
7979
<Tooltip
8080
content={
81-
<Text lineHeight={1.2}>
81+
<Text>
8282
{t(walletFilterData[feature.filterKey].description)}
8383
</Text>
8484
}
8585
>
86-
<Icon as={MdInfoOutline} color={featureColor} />
86+
<Box as="span">
87+
<Icon as={MdInfoOutline} color={featureColor} />
88+
</Box>
8789
</Tooltip>
8890
</HStack>
8991
)

‎src/components/Glossary/GlossaryTooltip/index.tsx

Lines changed: 24 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { ReactNode } from "react"
2-
import { Text, useBreakpointValue } from "@chakra-ui/react"
2+
import { Box, Text, useBreakpointValue } from "@chakra-ui/react"
33

44
import GlossaryDefinition from "@/components/Glossary/GlossaryDefinition"
55
import Tooltip from "@/components/Tooltip"
@@ -13,28 +13,30 @@ const GlossaryTooltip = ({ children, termKey }: GlossaryTooltipProps) => {
1313
const isLargeScreen = useBreakpointValue({ base: false, lg: true })
1414

1515
return isLargeScreen ? (
16-
<Tooltip
17-
content={
18-
<GlossaryDefinition
19-
term={termKey}
20-
size="sm"
21-
options={{ ns: "glossary-tooltip" }}
22-
/>
23-
}
24-
>
25-
<Text
26-
as="u"
27-
textDecorationStyle="dotted"
28-
textUnderlineOffset="3px"
29-
_hover={{
30-
textDecorationColor: "primary.hover",
31-
color: "primary.hover",
32-
}}
33-
cursor="help"
16+
<Box display="inline-block">
17+
<Tooltip
18+
content={
19+
<GlossaryDefinition
20+
term={termKey}
21+
size="sm"
22+
options={{ ns: "glossary-tooltip" }}
23+
/>
24+
}
3425
>
35-
{children}
36-
</Text>
37-
</Tooltip>
26+
<Text
27+
as="u"
28+
textDecorationStyle="dotted"
29+
textUnderlineOffset="3px"
30+
_hover={{
31+
textDecorationColor: "primary.hover",
32+
color: "primary.hover",
33+
}}
34+
cursor="help"
35+
>
36+
{children}
37+
</Text>
38+
</Tooltip>
39+
</Box>
3840
) : (
3941
<Text as="span">{children}</Text>
4042
)

‎src/components/Simulator/MoreInfoPopover.tsx

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -41,18 +41,13 @@ export const MoreInfoPopover = ({ isFirstStep, children }: MoreInfoPopover) => {
4141
</MotionButton>
4242
</PopoverTrigger>
4343
<PopoverContent
44-
bg="background.highlight"
4544
px={4}
4645
py={6}
4746
insetStart={{ base: 4, sm: 8 }}
48-
maxW={{ base: "calc(100vw - 3rem)", sm: "calc(100vw - 5rem)" }}
49-
borderRadius="base"
50-
boxShadow="tooltip"
47+
w={{ base: "calc(100vw - 3rem)", sm: "calc(100vw - 5rem)" }}
5148
>
52-
<PopoverArrow bg="background.highlight" boxShadow="2xl" />
53-
<PopoverHeader mb={2}>
54-
<PopoverCloseButton ms="auto" />
55-
</PopoverHeader>
49+
<PopoverArrow />
50+
<PopoverCloseButton ms="auto" />
5651
<PopoverBody sx={{ "p:last-of-type": { mb: 2 } }}>
5752
{children}
5853
</PopoverBody>

‎src/components/Simulator/NotificationPopover.tsx

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -26,23 +26,14 @@ export const NotificationPopover = ({
2626
return (
2727
<Popover placement={placement}>
2828
<PopoverTrigger>{children}</PopoverTrigger>
29-
<PopoverContent
30-
bg="background.highlight"
31-
px={4}
32-
py={2}
33-
maxW="15rem"
34-
borderRadius="base"
35-
boxShadow="tooltip"
36-
fontSize="xs"
37-
{...restProps}
38-
>
29+
<PopoverContent px={4} py={2} maxW="15rem" fontSize="xs" {...restProps}>
3930
<Flex gap={2}>
40-
<PopoverHeader fontWeight="bold" mb={2} flex={1} mt={0.5}>
31+
<PopoverHeader fontWeight="bold" mb={2} flex={1} mt={0.5} p={0}>
4132
{title || ""}
4233
</PopoverHeader>
4334
<PopoverCloseButton ms="auto" />
4435
</Flex>
45-
<PopoverBody>{content}</PopoverBody>
36+
<PopoverBody p={0}>{content}</PopoverBody>
4637
</PopoverContent>
4738
</Popover>
4839
)

‎src/components/Staking/StakingStatsBox.tsx

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useRouter } from "next/router"
22
import { useTranslation } from "next-i18next"
33
import { MdInfoOutline } from "react-icons/md"
4-
import { Code, Flex, Icon, VStack } from "@chakra-ui/react"
4+
import { Box, Code, Flex, Icon, VStack } from "@chakra-ui/react"
55

66
import type { ChildOnlyProp, Lang, StakingStatsData } from "@/lib/types"
77

@@ -50,15 +50,17 @@ const Label = ({ children }: ChildOnlyProp) => (
5050
// BeaconchainTooltip component
5151
const BeaconchainTooltip = ({ children }: ChildOnlyProp) => (
5252
<Tooltip content={children}>
53-
<Icon
54-
as={MdInfoOutline}
55-
color="text"
56-
marginInlineStart={2}
57-
_hover={{ color: "primary.base" }}
58-
_active={{ color: "primary.base" }}
59-
_focus={{ color: "primary.base" }}
60-
boxSize={4}
61-
/>
53+
<Box as="span" marginInlineStart={2}>
54+
<Icon
55+
as={MdInfoOutline}
56+
color="text"
57+
_hover={{ color: "primary.base" }}
58+
_active={{ color: "primary.base" }}
59+
_focus={{ color: "primary.base" }}
60+
boxSize={4}
61+
verticalAlign="middle"
62+
/>
63+
</Box>
6264
</Tooltip>
6365
)
6466

@@ -94,9 +96,11 @@ const StakingStatsBox = ({ data }: StakingStatsBoxProps) => {
9496
<Label>
9597
{t("page-staking-stats-box-metric-1")}
9698
<BeaconchainTooltip>
97-
<Text>{t("page-staking-stats-box-metric-1-tooltip")}</Text>
98-
{t("common:data-provided-by")}{" "}
99-
<InlineLink href="https://beaconcha.in/">Beaconcha.in</InlineLink>
99+
<Box textTransform="none">
100+
<Text>{t("page-staking-stats-box-metric-1-tooltip")}</Text>
101+
{t("common:data-provided-by")}{" "}
102+
<InlineLink href="https://beaconcha.in/">Beaconcha.in</InlineLink>
103+
</Box>
100104
</BeaconchainTooltip>
101105
</Label>
102106
</Cell>
@@ -105,9 +109,11 @@ const StakingStatsBox = ({ data }: StakingStatsBoxProps) => {
105109
<Label>
106110
{t("page-staking-stats-box-metric-2")}
107111
<BeaconchainTooltip>
108-
<Text>{t("page-staking-stats-box-metric-2-tooltip")}</Text>
109-
{t("common:data-provided-by")}{" "}
110-
<InlineLink href="https://beaconcha.in/">Beaconcha.in</InlineLink>
112+
<Box textTransform="none">
113+
<Text>{t("page-staking-stats-box-metric-2-tooltip")}</Text>
114+
{t("common:data-provided-by")}{" "}
115+
<InlineLink href="https://beaconcha.in/">Beaconcha.in</InlineLink>
116+
</Box>
111117
</BeaconchainTooltip>
112118
</Label>
113119
</Cell>
@@ -116,11 +122,13 @@ const StakingStatsBox = ({ data }: StakingStatsBoxProps) => {
116122
<Label>
117123
{t("page-staking-stats-box-metric-3")}
118124
<BeaconchainTooltip>
119-
<Text>{t("page-staking-stats-box-metric-3-tooltip")}</Text>
120-
{t("common:data-provided-by")}{" "}
121-
<InlineLink href="https://beaconcha.in/ethstore">
122-
Beaconcha.in
123-
</InlineLink>
125+
<Box textTransform="none">
126+
<Text>{t("page-staking-stats-box-metric-3-tooltip")}</Text>
127+
{t("common:data-provided-by")}{" "}
128+
<InlineLink href="https://beaconcha.in/ethstore">
129+
Beaconcha.in
130+
</InlineLink>
131+
</Box>
124132
</BeaconchainTooltip>
125133
</Label>
126134
</Cell>

0 commit comments

Comments
 (0)