refactor: ToolTip styles (#1317)

* refactor: ToolTip styles - changes background and text color - adds triangle pointer (placement depended) * sets correct font styles * Refactor positioning of pointer - refactor to use retuned `placement` value from `useOverlayPosition` to set position of tooltip pointer -> this prop updates based on position within window
centrifuge · May 3, 2023 · 0d5bb37 · 0d5bb37
1 parent c844eeb
commit 0d5bb37
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 15 deletions.
diff --git a/fabric/src/components/Positioner/index.tsx b/fabric/src/components/Positioner/index.tsx
@@ -1,4 +1,4 @@
-import { AriaPositionProps, OverlayContainer, useOverlayPosition } from '@react-aria/overlays'
+import { AriaPositionProps, OverlayContainer, PlacementAxis, useOverlayPosition } from '@react-aria/overlays'
 import * as React from 'react'
 import { useTheme } from 'styled-components'
 import { TextContext } from '../Text'
@@ -9,7 +9,7 @@ type PositionerProps = {
   overlayRef: React.RefObject<HTMLElement>
   placement?: AriaPositionProps['placement']
   offset?: number
-  render: (props: React.HTMLAttributes<Element>) => React.ReactElement
+  render: (props: React.HTMLAttributes<Element> & { pointer: PlacementAxis }) => React.ReactElement
 }
 
 const PositionerInner: React.FC<PositionerProps> = ({
@@ -21,15 +21,15 @@ const PositionerInner: React.FC<PositionerProps> = ({
   render,
 }) => {
   const theme = useTheme()
-  const { overlayProps } = useOverlayPosition({
+  const { overlayProps, ...restProps } = useOverlayPosition({
     targetRef,
     overlayRef,
     placement,
     offset: theme.space[offset] ?? offset,
     isOpen: isShown,
   })
 
-  return render(overlayProps)
+  return render({ ...overlayProps, pointer: restProps.placement })
 }
 
 export const Positioner: React.FC<PositionerProps> = (props) => {

diff --git a/fabric/src/components/Tooltip/index.tsx b/fabric/src/components/Tooltip/index.tsx
@@ -1,5 +1,7 @@
+import { PlacementAxis } from '@react-aria/overlays'
 import { useTooltip, useTooltipTrigger } from '@react-aria/tooltip'
 import { useTooltipTriggerState } from '@react-stately/tooltip'
+import css, { CssFunctionReturnType } from '@styled-system/css'
 import * as React from 'react'
 import styled from 'styled-components'
 import { Positioner } from '../Positioner'
@@ -28,6 +30,44 @@ const StyledTrigger = styled(Text)`
   text-underline-offset: 3px;
 `
 
+const placements: {
+  [key in PlacementAxis as string]: CssFunctionReturnType
+} = {
+  bottom: css({
+    top: 'calc( var(--size) * -1)',
+    left: 'calc(50% - var(--size))',
+  }),
+
+  top: css({
+    bottom: 'calc( var(--size) * -1)',
+    left: 'calc(50% - var(--size))',
+  }),
+
+  left: css({
+    top: 'calc(50% - var(--size))',
+    right: 'calc( var(--size) * -1)',
+  }),
+
+  right: css({
+    top: 'calc(50% - var(--size))',
+    left: 'calc( var(--size) * -1)',
+  }),
+}
+
+const Container = styled(Stack)<{ pointer: PlacementAxis }>`
+  filter: ${({ theme }) => `drop-shadow(${theme.shadows.cardInteractive})`};
+
+  &::before {
+    --size: 5px;
+
+    content: '';
+    position: absolute;
+    ${({ pointer }) => placements[pointer!]}
+    border: ${({ theme }) => `var(--size) solid ${theme.colors.backgroundPrimary}`};
+    transform: rotate(-45deg);
+  }
+`
+
 export const Tooltip: React.FC<TooltipProps> = ({ title, body, children, disabled, delay = 1000, ...textProps }) => {
   const triggerRef = React.useRef<HTMLButtonElement>(null)
   const overlayRef = React.useRef<HTMLDivElement>(null)
@@ -49,23 +89,25 @@ export const Tooltip: React.FC<TooltipProps> = ({ title, body, children, disable
           targetRef={triggerRef}
           overlayRef={overlayRef}
           placement="top"
-          render={(positionProps) => (
-            <Stack
+          render={({ pointer, ...rest }) => (
+            <Container
               {...tooltipElementProps}
-              {...positionProps}
+              {...rest}
               ref={overlayRef}
-              backgroundColor="backgroundInverted"
+              backgroundColor="backgroundPrimary"
               p={1}
               borderRadius="tooltip"
               width={220}
+              gap="3px"
+              pointer={pointer}
             >
-              <Text variant="label2" color="textInverted">
-                {title}
-              </Text>
-              <Text variant="body3" color="textInverted">
-                {body}
-              </Text>
-            </Stack>
+              {!!title && (
+                <Text variant="body3" fontWeight={600}>
+                  {title}
+                </Text>
+              )}
+              <Text variant="body3">{body}</Text>
+            </Container>
           )}
         />
       )}