[components] Fix tooltip and popover arrows

sanity-io · Oct 6, 2020 · 307a776 · 307a776
1 parent 76b4d52
commit 307a776
Show file tree

Hide file tree

Showing 10 changed files with 160 additions and 216 deletions.
diff --git a/packages/@sanity/components/src/popover/arrow.css b/packages/@sanity/components/src/popover/arrow.css
@@ -4,99 +4,51 @@
   position: absolute;
   pointer-events: none;
   width: 27px;
-  height: 12px;
-  transform-origin: 0 0;
-  color: var(--component-bg);
+  height: 27px;
+  fill: none;
 
-  @nest & > svg {
-    display: block;
-  }
-
-  @nest &[data-placement='top'] {
-    transform-origin: left bottom;
-    bottom: 1px;
-    left: 50%;
-    transform: rotate(180deg) translate(-50%);
-  }
-
-  @nest &[data-placement='top-end'] {
-    transform-origin: left bottom;
-    bottom: 1px;
-    right: 3px;
-    transform: rotate(180deg) translateX(-100%);
-  }
-
-  @nest &[data-placement='top-start'] {
-    transform-origin: left bottom;
-    bottom: 1px;
-    left: 3px;
-    transform: rotate(180deg) translateX(-100%);
+  @nest :empty + & {
+    display: none;
   }
 
-  @nest &[data-placement='right'] {
-    transform-origin: left bottom;
-    transform: rotate(-90deg) translateX(-50%);
-    bottom: 50%;
-    left: 1px;
+  @nest & > svg {
+    display: block;
+    transform-origin: 13.5px 13.5px;
   }
 
-  @nest &[data-placement='right-end'] {
-    transform-origin: left bottom;
-    transform: rotate(-90deg);
-    bottom: 3px;
-    left: 1px;
+  @nest [data-popper-placement^='top'] > & {
+    bottom: -27px;
   }
 
-  @nest &[data-placement='right-start'] {
-    transform-origin: left bottom;
-    transform: rotate(-90deg) translateX(-50%);
-    top: 3px;
-    left: 1px;
-  }
+  @nest [data-popper-placement^='right'] > & {
+    left: -27px;
 
-  @nest &[data-placement='left'] {
-    transform-origin: right bottom;
-    right: 1px;
-    transform: rotate(90deg);
-    top: 50%;
+    @nest & > svg {
+      transform: rotate(90deg);
+    }
   }
 
-  @nest &[data-placement='left-start'] {
-    transform-origin: right bottom;
-    right: 1px;
-    transform: rotate(90deg) translateX(50%);
-    top: 3px;
-  }
+  @nest [data-popper-placement^='left'] > & {
+    right: -27px;
 
-  @nest &[data-placement='left-end'] {
-    transform-origin: right bottom;
-    right: 1px;
-    transform: rotate(90deg);
-    bottom: 3px;
+    @nest & > svg {
+      transform: rotate(-90deg);
+    }
   }
 
-  @nest &[data-placement='bottom'] {
-    top: 1px;
-    left: 50%;
-    transform: translate(-50%, -100%);
-  }
+  @nest [data-popper-placement^='bottom'] > & {
+    top: -27px;
 
-  @nest &[data-placement='bottom-end'] {
-    top: 1px;
-    right: 3px;
-    transform: translate(0, -100%);
+    @nest & > svg {
+      transform: rotate(180deg);
+    }
   }
+}
 
-  @nest &[data-placement='bottom-start'] {
-    top: 1px;
-    left: 3px;
-    transform: translateY(-100%);
-  }
+.border {
+  fill: var(--hairline-color);
 }
 
-.arrowBorderGroup {
-  & > path {
-    fill: var(--hairline-color);
-    /* fill: var(--card-shadow-outline-color); */
-  }
+.shape {
+  fill: var(--component-bg);
 }
diff --git a/packages/@sanity/components/src/popover/arrow.tsx b/packages/@sanity/components/src/popover/arrow.tsx
@@ -5,19 +5,14 @@ import styles from './arrow.css'
 export const PopoverArrow = forwardRef((props: React.HTMLProps<HTMLDivElement>, ref) => {
   return (
     <div {...props} className={styles.root} ref={ref as any}>
-      <svg
-        width="27"
-        height="11"
-        viewBox="0 0 27 11"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g className={styles.arrowBorderGroup}>
-          <path d="M1.18359 10.0001C3.2959 10.0001 5.29525 9.04623 6.62431 7.40445L11.1684 1.79112C12.3691 0.307911 14.6312 0.307907 15.8319 1.79112L20.376 7.40445C21.7051 9.04622 23.7044 10.0001 25.8167 10.0001H21.9437C21.0534 9.50751 20.2547 8.84388 19.5988 8.03364L15.0547 2.42031C14.2542 1.43151 12.7461 1.43151 11.9457 2.42032L7.40155 8.03365C6.74565 8.84388 5.9469 9.50751 5.05659 10.0001H1.18359Z" />
-        </g>
+      <svg width="27" height="27" viewBox="0 0 27 27">
         <path
-          d="M19.5986 8.03365L15.0545 2.42031C14.254 1.43151 12.746 1.43151 11.9455 2.42031L7.40138 8.03365C5.88246 9.90996 3.59749 11.0001 1.18342 11.0001H0H27H25.8166C23.4025 11.0001 21.1175 9.90996 19.5986 8.03365Z"
-          fill="currentColor"
+          className={styles.border}
+          d="M1.18708 1C3.29803 1.0011 5.29585 1.95479 6.62414 3.59561L11.1683 9.20895C12.369 10.6922 14.631 10.6922 15.8317 9.20894L20.3759 3.59561C21.7042 1.95478 23.702 1.0011 25.8129 1H21.9436C21.0533 1.49255 20.2545 2.15618 19.5986 2.96641L15.0545 8.57975C14.254 9.56855 12.746 9.56855 11.9455 8.57975L7.40139 2.96642C6.74548 2.15618 5.94673 1.49255 5.05643 1H1.18708Z"
+        />
+        <path
+          className={styles.shape}
+          d="M1.18342 0C3.59749 0 5.88246 1.0901 7.40138 2.96642L11.9455 8.57975C12.746 9.56855 14.254 9.56855 15.0545 8.57975L19.5986 2.96641C21.1175 1.0901 23.4025 0 25.8166 0H27H0H1.18342Z"
         />
       </svg>
     </div>

diff --git a/packages/@sanity/components/src/popover/popover.css b/packages/@sanity/components/src/popover/popover.css
@@ -9,4 +9,8 @@
   color: var(--component-text-color);
   border-radius: var(--border-radius-medium);
   box-shadow: 0 0 0 1px var(--hairline-color), 0 4px 8px color(var(--gray) alpha(30%));
+
+  @nest &:empty {
+    display: none;
+  }
 }
diff --git a/packages/@sanity/components/src/popover/popover.tsx b/packages/@sanity/components/src/popover/popover.tsx
@@ -31,12 +31,28 @@ interface PopoverProps {
 }
 
 export function Popover(props: PopoverProps & Omit<React.HTMLProps<HTMLDivElement>, 'children'>) {
-  const {className, disabled, placement = 'bottom', style, targetElement, ...restProps} = props
+  const {
+    className,
+    content,
+    disabled,
+    placement = 'bottom',
+    style,
+    targetElement,
+    ...restProps
+  } = props
   const [referenceElement, setReferenceElement] = useState(null)
   const [popperElement, setPopperElement] = useState(null)
-  const {styles: popperStyles, attributes} = usePopper(referenceElement, popperElement, {
+  const [arrowElement, setArrowElement] = useState(null)
+  const popper = usePopper(referenceElement, popperElement, {
     placement,
     modifiers: [
+      {
+        name: 'arrow',
+        options: {
+          element: arrowElement,
+          padding: 4
+        }
+      },
       {
         name: 'preventOverflow',
         options: {
@@ -64,6 +80,10 @@ export function Popover(props: PopoverProps & Omit<React.HTMLProps<HTMLDivElemen
     }
   }, [targetElement])
 
+  useEffect(() => {
+    if (popper.forceUpdate) popper.forceUpdate()
+  }, [content])
+
   const children =
     targetElement === undefined
       ? cloneElement(props.children, {ref: setReferenceElement})
@@ -77,12 +97,12 @@ export function Popover(props: PopoverProps & Omit<React.HTMLProps<HTMLDivElemen
         <div
           {...restProps}
           className={classNames(styles.root, className)}
-          ref={setPopperElement as any}
-          style={{...popperStyles.popper, ...(style || {})}}
-          {...attributes.popper}
+          ref={setPopperElement}
+          style={{...popper.styles.popper, ...(style || {})}}
+          {...popper.attributes.popper}
         >
-          <div className={styles.card}>{props.content}</div>
-          <PopoverArrow data-placement={placement} style={popperStyles.arrow} />
+          <div className={styles.card}>{content}</div>
+          <PopoverArrow ref={setArrowElement} style={popper.styles.arrow} />
         </div>
       )}
     </>

diff --git a/packages/@sanity/components/src/popover/stories/default.js b/packages/@sanity/components/src/popover/stories/default.js
@@ -1,10 +1,11 @@
 import {Popover} from 'part:@sanity/components/popover'
-import {boolean, select} from 'part:@sanity/storybook/addons/knobs'
+import {boolean, select, text} from 'part:@sanity/storybook/addons/knobs'
 import Sanity from 'part:@sanity/storybook/addons/sanity'
 import {CenteredContainer} from 'part:@sanity/storybook/components'
 import React from 'react'
 
 export function DefaultStory() {
+  const children = text('Children', 'Content', 'Props')
   const open = boolean('Open', true, 'Props')
   const placement = select(
     'Placement',
@@ -30,7 +31,7 @@ export function DefaultStory() {
     <CenteredContainer>
       <Sanity part="part:@sanity/components/dialogs/default" propTables={[Popover]}>
         <Popover
-          content={<div style={{padding: '1em'}}>popover content</div>}
+          content={children ? <div style={{padding: '1em'}}>{children}</div> : null}
           open={open}
           placement={placement}
         >
@@ -41,7 +42,7 @@ export function DefaultStory() {
               background: 'rgba(127, 127, 127, 0.5)'
             }}
           >
-            reference
+            Reference
           </span>
         </Popover>
       </Sanity>

diff --git a/packages/@sanity/components/src/tooltip/arrow.css b/packages/@sanity/components/src/tooltip/arrow.css
@@ -4,102 +4,55 @@
   position: absolute;
   pointer-events: none;
   width: 15px;
-  height: 6px;
-  transform-origin: 0 0;
+  height: 15px;
+  fill: none;
 
-  & > svg {
-    display: block;
-    color: var(--component-bg);
-
-    @nest [data-tone='navbar'] & {
-      color: var(--main-navigation-color);
-    }
-  }
-
-  @nest &[data-placement='top'] {
-    transform-origin: left bottom;
-    bottom: 0;
-    left: 50%;
-    transform: rotate(180deg) translate(-50%);
+  @nest :empty + & {
+    display: none;
   }
 
-  @nest &[data-placement='top-end'] {
-    transform-origin: left bottom;
-    bottom: 0;
-    right: 4px;
-    transform: rotate(180deg) translateX(-100%);
+  @nest & > svg {
+    display: block;
+    transform-origin: 7.5px 7.5px;
   }
 
-  @nest &[data-placement='top-start'] {
-    transform-origin: left bottom;
-    bottom: 0;
-    left: 4px;
-    transform: rotate(180deg) translateX(-100%);
+  @nest [data-popper-placement^='top'] > & {
+    bottom: -15px;
   }
 
-  @nest &[data-placement='right'] {
-    transform-origin: left bottom;
-    transform: rotate(-90deg) translateX(-50%);
-    bottom: 50%;
-    left: 0;
-  }
+  @nest [data-popper-placement^='right'] > & {
+    left: -15px;
 
-  @nest &[data-placement='right-end'] {
-    transform-origin: left bottom;
-    transform: rotate(-90deg);
-    bottom: 4px;
-    left: 0;
-  }
-
-  @nest &[data-placement='right-start'] {
-    transform-origin: left bottom;
-    transform: rotate(-90deg) translateX(-50%);
-    top: 4px;
-    left: 0;
-  }
-
-  @nest &[data-placement='left'] {
-    transform-origin: right bottom;
-    right: 0;
-    transform: rotate(90deg);
-    top: 50%;
+    @nest & > svg {
+      transform: rotate(90deg);
+    }
   }
 
-  @nest &[data-placement='left-start'] {
-    transform-origin: right bottom;
-    right: 0;
-    transform: rotate(90deg) translateX(50%);
-    top: 4px;
-  }
+  @nest [data-popper-placement^='left'] > & {
+    right: -15px;
 
-  @nest &[data-placement='left-end'] {
-    transform-origin: right bottom;
-    right: 0;
-    transform: rotate(90deg);
-    bottom: 4px;
+    @nest & > svg {
+      transform: rotate(-90deg);
+    }
   }
 
-  @nest &[data-placement='bottom'] {
-    top: 0;
-    left: 50%;
-    transform: translate(-50%, -100%);
-  }
+  @nest [data-popper-placement^='bottom'] > & {
+    top: -15px;
 
-  @nest &[data-placement='bottom-end'] {
-    top: 0;
-    right: 4px;
-    transform: translate(0, -100%);
+    @nest & > svg {
+      transform: rotate(180deg);
+    }
   }
+}
 
-  @nest &[data-placement='bottom-start'] {
-    top: 0;
-    left: 4px;
-    transform: translateY(-100%);
-  }
+.border {
+  fill: var(--hairline-color);
 }
 
-.outlineGroup {
-  & > path {
-    fill: var(--hairline-color);
+.shape {
+  fill: var(--component-bg);
+
+  @nest .root[data-tone='navbar'] & {
+    fill: var(--main-navigation-color);
   }
 }