tooltip fixes

toolkit/chakra/tooltip.tsx

@@ -20,7 +20,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
     const {
       showArrow: showArrowProp,
       onOpenChange,
-      visual,
+      variant,
       selected,
       children,
       disabled,
@@ -38,7 +38,6 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
     const [ open, setOpen ] = React.useState(defaultOpen);
 
     const isMobile = useIsMobile();
-    // TODO @tom2drum merge refs
     const triggerRef = useClickAway<HTMLButtonElement>(() => setOpen(false));
 
     const handleOpenChange = React.useCallback((details: { open: boolean }) => {
@@ -52,7 +51,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
 
     if (disabled || (disableOnMobile && isMobile)) return children;
 
-    const defaultShowArrow = visual === 'popover' ? false : true;
+    const defaultShowArrow = variant === 'popover' ? false : true;
     const showArrow = showArrowProp !== undefined ? showArrowProp : defaultShowArrow;
 
     const positioning = {
@@ -70,7 +69,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
         open={ open }
         onOpenChange={ isMobile ? undefined : handleOpenChange }
         closeOnClick={ false }
-        visual={ visual }
+        variant={ variant }
         lazyMount={ lazyMount }
         unmountOnExit={ unmountOnExit }
         { ...rest }

toolkit/theme/recipes/tooltip.recipe.ts

@@ -34,7 +34,7 @@ export const recipe = defineSlotRecipe({
     },
   },
   variants: {
-    visual: {
+    variant: {
       regular: {
         content: {
           '--tooltip-bg': 'colors.tooltip.bg',
@@ -79,6 +79,6 @@ export const recipe = defineSlotRecipe({
     },
   },
   defaultVariants: {
-    visual: 'regular',
+    variant: 'regular',
   },
 });

ui/block/BlockDetails.tsx

@@ -517,13 +517,11 @@ const BlockDetails = ({ query }: Props) => {
             </Skeleton>
             { !txFees.isEqualTo(ZERO) && (
               <Tooltip content="Burnt fees / Txn fees * 100%">
-                <Box>
-                  <Utilization
-                    ml={ 4 }
-                    value={ burntFees.dividedBy(txFees).toNumber() }
-                    isLoading={ isPlaceholderData }
-                  />
-                </Box>
+                <Utilization
+                  ml={ 4 }
+                  value={ burntFees.dividedBy(txFees).toNumber() }
+                  isLoading={ isPlaceholderData }
+                />
               </Tooltip>
             ) }
           </DetailsInfoItem.Value>

ui/block/details/BlockDetailsBlobInfo.tsx

@@ -73,9 +73,7 @@ const BlockDetailsBlobInfo = ({ data }: Props) => {
             { burntBlobFees.dividedBy(WEI).toFixed() } { currencyUnits.ether }
             { !blobFees.isEqualTo(ZERO) && (
               <Tooltip content="Blob burnt fees / Txn fees * 100%">
-                <div>
-                  <Utilization ml={ 4 } value={ burntBlobFees.dividedBy(blobFees).toNumber() }/>
-                </div>
+                <Utilization ml={ 4 } value={ burntBlobFees.dividedBy(blobFees).toNumber() }/>
               </Tooltip>
             ) }
           </DetailsInfoItem.Value>

ui/blocks/BlocksTableItem.tsx

-import { Flex, Box } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -121,9 +121,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement, animation }: Pr
             </Skeleton>
           </Flex>
           <Tooltip content="Burnt fees / Txn fees * 100%" disabled={ isLoading }>
-            <Box w="min-content">
-              <Utilization mt={ 2 } value={ burntFees.div(txFees).toNumber() } isLoading={ isLoading }/>
-            </Box>
+            <Utilization mt={ 2 } w="min-content" value={ burntFees.div(txFees).toNumber() } isLoading={ isLoading }/>
           </Tooltip>
         </TableCell>
       ) }

ui/pages/Chakra.tsx

@@ -28,6 +28,7 @@ import ButtonShowcase from 'ui/showcases/Button';
 import LinksShowcase from 'ui/showcases/Links';
 import PaginationShowcase from 'ui/showcases/Pagination';
 import TabsShowcase from 'ui/showcases/Tabs';
+import TooltipsShowcase from 'ui/showcases/Tooltip';
 
 const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
 
@@ -58,6 +59,7 @@ const ChakraShowcases = () => {
           <TabsTrigger value="links">Links</TabsTrigger>
           <TabsTrigger value="pagination">Pagination</TabsTrigger>
           <TabsTrigger value="tabs">Tabs</TabsTrigger>
+          <TabsTrigger value="tooltips">Tooltips</TabsTrigger>
           <TabsTrigger value="unsorted">Unsorted</TabsTrigger>
         </TabsList>
         <AlertsShowcase/>
@@ -66,6 +68,7 @@ const ChakraShowcases = () => {
         <LinksShowcase/>
         <TabsShowcase/>
         <PaginationShowcase/>
+        <TooltipsShowcase/>
 
         <TabsContent value="unsorted">
           <VStack align="flex-start" gap={ 6 }>
@@ -153,18 +156,6 @@ const ChakraShowcases = () => {
               </HStack>
             </section>
 
-            <section>
-              <Heading textStyle="heading.md" mb={ 2 }>Tooltips</Heading>
-              <HStack gap={ 4 }>
-                <Tooltip content="Tooltip content">
-                  <span>Default</span>
-                </Tooltip>
-                <Tooltip content="Tooltip content" visual="navigation">
-                  <span>Navigation</span>
-                </Tooltip>
-              </HStack>
-            </section>
-
             <section>
               <Heading textStyle="heading.md" mb={ 2 }>Progress Circle</Heading>
               <HStack gap={ 4 }>

ui/shared/GasUsedToTargetRatio.tsx

@@ -11,7 +11,7 @@ type Props = {
 const GasUsedToTargetRatio = ({ value, isLoading }: Props) => {
   return (
     <Tooltip content="% of Gas Target">
-      <Skeleton color="text_secondary" loading={ isLoading }>
+      <Skeleton color="text.secondary" loading={ isLoading }>
         <span>{ (value > 0 ? '+' : '') + value.toLocaleString(undefined, { maximumFractionDigits: 2 }) }%</span>
       </Skeleton>
     </Tooltip>

ui/shared/SocketNewItemsNotice.tsx

-import { Link, Text, chakra, Table } from '@chakra-ui/react';
+import { Text, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import { Alert } from 'toolkit/chakra/alert';
+import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableCell, TableRow } from 'toolkit/chakra/table';
 
 interface InjectedProps {
   content: React.ReactNode;
@@ -56,7 +58,7 @@ const SocketNewItemsNotice = chakra(({ children, className, url, num, alert, typ
   const content = !isLoading ? (
     <Alert
       className={ className }
-      visual="warning_table"
+      status="warning_table"
       px={ 4 }
       py="6px"
       fontSize="sm"
@@ -82,7 +84,7 @@ export const Desktop = ({ ...props }: Props) => {
       my={ props.isLoading ? '6px' : 0 }
       { ...props }
     >
-      { ({ content }) => <Table.Row><Table.Cell colSpan={ 100 } p={ 0 } _first={{ p: 0 }} _last={{ p: 0 }}>{ content }</Table.Cell></Table.Row> }
+      { ({ content }) => <TableRow><TableCell colSpan={ 100 } p={ 0 } _first={{ p: 0 }} _last={{ p: 0 }}>{ content }</TableCell></TableRow> }
     </SocketNewItemsNotice>
   );
 };

ui/shared/Utilization/Utilization.tsx

-import { Box, Flex, chakra } from '@chakra-ui/react';
+import type { HTMLChakraProps } from '@chakra-ui/react';
+import { Box, Flex } from '@chakra-ui/react';
 import { clamp } from 'es-toolkit';
 import React from 'react';
 
 import { Skeleton } from 'toolkit/chakra/skeleton';
 
-interface Props {
-  className?: string;
+interface Props extends Omit<HTMLChakraProps<'div'>, 'direction'> {
   value: number;
   colorScheme?: 'green' | 'gray';
   isLoading?: boolean;
@@ -13,13 +13,13 @@ interface Props {
 
 const WIDTH = 50;
 
-const Utilization = ({ className, value, colorScheme = 'green', isLoading }: Props) => {
+const Utilization = ({ value, colorScheme = 'green', isLoading, ...rest }: Props) => {
   const valueString = (clamp(value * 100 || 0, 0, 100)).toLocaleString(undefined, { maximumFractionDigits: 2 }) + '%';
   const colorGrayScheme = { _light: 'gray.500', _dark: 'gray.400' };
   const color = colorScheme === 'gray' ? colorGrayScheme : 'green.500';
 
   return (
-    <Flex className={ className } alignItems="center" columnGap={ 2 }>
+    <Flex alignItems="center" columnGap={ 2 } { ...rest }>
       <Skeleton loading={ isLoading } w={ `${ WIDTH }px` } h="4px" borderRadius="full" overflow="hidden">
         <Box bg={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} h="100%">
           <Box bg={ color } w={ valueString } h="100%"/>
@@ -34,4 +34,4 @@ const Utilization = ({ className, value, colorScheme = 'green', isLoading }: Pro
   );
 };
 
-export default React.memo(chakra(Utilization));
+export default React.memo(Utilization);

ui/shared/block/BlockGasUsed.tsx

-import { chakra, Box } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -31,14 +31,12 @@ const BlockGasUsed = ({ className, gasUsed, gasLimit, gasTarget, isLoading }: Pr
   return (
     <>
       <Tooltip content="Gas Used %" disabled={ isLoading }>
-        <Box>
-          <Utilization
-            colorScheme="gray"
-            value={ BigNumber(gasUsed).dividedBy(BigNumber(gasLimit)).toNumber() }
-            isLoading={ isLoading }
-            className={ className }
-          />
-        </Box>
+        <Utilization
+          colorScheme="gray"
+          value={ BigNumber(gasUsed).dividedBy(BigNumber(gasLimit)).toNumber() }
+          isLoading={ isLoading }
+          className={ className }
+        />
       </Tooltip>
       { gasTarget && (
         <>

ui/shared/entities/ens/EnsEntity.tsx

@@ -78,7 +78,7 @@ const Icon = (props: IconProps) => {
     return (
       <Tooltip
         content={ content }
-        visual="popover"
+        variant="popover"
         positioning={{
           placement: 'bottom-start',
         }}

ui/showcases/Tooltip.tsx

+import React from 'react';
+
+import { Tooltip } from 'toolkit/chakra/tooltip';
+import Utilization from 'ui/shared/Utilization/Utilization';
+
+import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
+
+const TooltipsShowcase = () => {
+  return (
+    <Container value="tooltips">
+      <Section>
+        <SectionHeader>Variant</SectionHeader>
+        <SamplesStack>
+          <Sample label="variant: regular">
+            <Tooltip content="Tooltip content">
+              <span>Default</span>
+            </Tooltip>
+            <Tooltip content="Tooltip content">
+              <Utilization value={ 0.5 }/>
+            </Tooltip>
+          </Sample>
+          <Sample label="variant: navigation">
+            <Tooltip content="Tooltip content" variant="navigation">
+              <span>Default</span>
+            </Tooltip>
+          </Sample>
+          <Sample label="variant: popover">
+            <Tooltip content="Tooltip content" variant="popover">
+              <span>Default</span>
+            </Tooltip>
+          </Sample>
+        </SamplesStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default React.memo(TooltipsShowcase);

ui/snippets/header/alerts/MaintenanceAlert.tsx

@@ -10,7 +10,7 @@ const MaintenanceAlert = () => {
   }
 
   return (
-    <Alert visual="neutral">
+    <Alert status="neutral">
       <Box
         dangerouslySetInnerHTML={{ __html: config.UI.maintenanceAlert.message }}
         css={{

ui/snippets/navigation/horizontal/NavLinkGroup.tsx

@@ -48,7 +48,7 @@ const NavLinkGroup = ({ item }: Props) => {
 
   return (
     <Tooltip
-      visual="popover"
+      variant="popover"
       content={ content }
       onOpenChange={ onOpenChange }
       lazyMount={ false }

ui/snippets/navigation/vertical/NavLink.tsx

@@ -59,7 +59,7 @@ const NavLink = ({ item, onClick, isCollapsed, isDisabled }: Props) => {
           showArrow={ false }
           disabled={ isMobile || isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
           positioning={{ placement: 'right', offset: { crossAxis: 0, mainAxis: 20 } }}
-          visual="navigation"
+          variant="navigation"
           contentProps={{
             color: isInternalLink && item.isActive ? 'link.navigation.fg.selected' : 'link.navigation.fg.hover',
           }}

ui/snippets/navigation/vertical/NavLinkGroup.tsx

@@ -58,7 +58,7 @@ const NavLinkGroup = ({ item, isCollapsed }: Props) => {
         positioning={{ placement: 'right-start', offset: { crossAxis: 0, mainAxis: 8 } }}
         // should not be lazy to help google indexing pages
         lazyMount={ false }
-        visual="popover"
+        variant="popover"
         interactive
       >
         <Box