[components] Add new tooltip and popover components

sanity-io · Oct 6, 2020 · 1f9a64b · 1f9a64b
1 parent d9450b8
commit 1f9a64b
Show file tree

Hide file tree

Showing 58 changed files with 1,047 additions and 556 deletions.
diff --git a/packages/@sanity/components/package.json b/packages/@sanity/components/package.json
@@ -35,14 +35,12 @@
     "lodash": "^4.17.15",
     "nano-pubsub": "^1.0.2",
     "palx": "^1.0.3",
-    "popper.js": "1.16.1",
     "react-animate-height": "^2.0.6",
     "react-click-outside": "^3.0.0",
     "react-motion": "^0.5.2",
-    "react-popper": "1.3.7",
+    "react-popper": "^2.2.3",
     "react-sortable-hoc": "^0.6.3",
     "react-split-pane": "^0.1.84",
-    "react-tippy": "1.4.0",
     "rxjs": "^6.5.3",
     "string-hash": "^1.1.3"
   },

diff --git a/packages/@sanity/components/sanity.json b/packages/@sanity/components/sanity.json
@@ -1108,6 +1108,22 @@
     {
       "implements": "part:@sanity/base/component",
       "path": "portal/story"
+    },
+    {
+      "implements": "part:@sanity/components/popover",
+      "path": "popover"
+    },
+    {
+      "implements": "part:@sanity/base/component",
+      "path": "popover/story"
+    },
+    {
+      "implements": "part:@sanity/components/tooltip",
+      "path": "tooltip"
+    },
+    {
+      "implements": "part:@sanity/base/component",
+      "path": "tooltip/story"
     }
   ]
 }
diff --git a/packages/@sanity/components/src/@types/parts.d.ts b/packages/@sanity/components/src/@types/parts.d.ts
@@ -5,6 +5,17 @@ declare module 'part:@sanity/components/*' {
   }
   export default SanityInputComponent
 }
+
+declare module 'part:@sanity/components/popover' {
+  // export const Portal: ComponentType<{}>
+  export const Popover: any
+}
+
+declare module 'part:@sanity/components/tooltip' {
+  // export const Portal: ComponentType<{}>
+  export const Tooltip: any
+}
+
 declare module 'part:@sanity/components/selects/*' {
   class SanitySelectComponent extends React.Component<any> {
     focus() {}
@@ -33,7 +44,6 @@ declare module 'part:@sanity/components/textareas/*' {
   export default SanityTextareaComponent
 }
 
-
 declare module 'config:@sanity/form-builder'
 declare module 'all:part:@sanity/form-builder/input/image/asset-source'
 

diff --git a/packages/@sanity/components/src/panes/DefaultPane.js b/packages/@sanity/components/src/panes/DefaultPane.js
@@ -7,9 +7,9 @@ import IconMoreVert from 'part:@sanity/base/more-vert-icon'
 import {IntentLink} from 'part:@sanity/base/router'
 import Button from 'part:@sanity/components/buttons/default'
 import IntentButton from 'part:@sanity/components/buttons/intent'
+import {Popover} from 'part:@sanity/components/popover'
 import TabPanel from 'part:@sanity/components/tabs/tab-panel'
 import ScrollContainer from 'part:@sanity/components/utilities/scroll-container'
-import {Tooltip} from 'react-tippy'
 import S from '@sanity/base/structure-builder'
 import Styleable from '../utilities/Styleable'
 
@@ -224,36 +224,30 @@ class Pane extends React.PureComponent {
           />
         )}
         {action.action === 'toggleTemplateSelectionMenu' && (
-          <Tooltip
-            arrow
-            className={styles.initialValueMenuTooltip}
-            distance={13}
-            theme="light"
-            trigger="click focus"
-            position="bottom"
-            interactive
+          <Popover
+            placement="bottom"
             open={this.state.isInitialValueMenuOpen}
-            onRequestClose={this.handleToggleInitialValueTemplateMenu}
-            useContext
-            html={
+            content={
               <div className={styles.initialValueTemplateMenu}>
                 {items.map(item => this.renderActionMenuItem(item))}
               </div>
             }
           >
-            <Button
-              aria-label="Menu"
-              aria-haspopup="menu"
-              aria-expanded={this.state.isInitialValueMenuOpen}
-              aria-controls={this.templateMenuId}
-              icon={Icon}
-              kind="simple"
-              onClick={this.handleToggleInitialValueTemplateMenu}
-              padding="small"
-              selected={this.state.isInitialValueMenuOpen}
-              title="Create new document"
-            />
-          </Tooltip>
+            <div>
+              <Button
+                aria-label="Menu"
+                aria-haspopup="menu"
+                aria-expanded={this.state.isInitialValueMenuOpen}
+                aria-controls={this.templateMenuId}
+                icon={Icon}
+                kind="simple"
+                onClick={this.handleToggleInitialValueTemplateMenu}
+                padding="small"
+                selected={this.state.isInitialValueMenuOpen}
+                title="Create new document"
+              />
+            </div>
+          </Popover>
         )}
       </div>
     )
@@ -283,17 +277,10 @@ class Pane extends React.PureComponent {
 
     return (
       <div className={styles.headerToolContainer}>
-        <Tooltip
-          arrow
-          distance={13}
-          theme="light"
-          trigger="click focus"
-          position="bottom"
-          interactive
+        <Popover
+          placement="bottom-end"
           open={isMenuOpen}
-          onRequestClose={this.handleCloseMenu}
-          useContext
-          html={
+          content={
             <Menu
               id={this.paneMenuId}
               items={items}
@@ -305,20 +292,22 @@ class Pane extends React.PureComponent {
             />
           }
         >
-          <Button
-            aria-label="Menu"
-            aria-haspopup="menu"
-            aria-expanded={isMenuOpen}
-            aria-controls={this.paneMenuId}
-            className={styles.menuOverflowButton}
-            icon={IconMoreVert}
-            kind="simple"
-            onClick={this.handleToggleMenu}
-            padding="small"
-            selected={isMenuOpen}
-            title="Show menu"
-          />
-        </Tooltip>
+          <div>
+            <Button
+              aria-label="Menu"
+              aria-haspopup="menu"
+              aria-expanded={isMenuOpen}
+              aria-controls={this.paneMenuId}
+              className={styles.menuOverflowButton}
+              icon={IconMoreVert}
+              kind="simple"
+              onClick={this.handleToggleMenu}
+              padding="small"
+              selected={isMenuOpen}
+              title="Show menu"
+            />
+          </div>
+        </Popover>
       </div>
     )
   }

diff --git a/packages/@sanity/components/src/popover/arrow.css b/packages/@sanity/components/src/popover/arrow.css
@@ -0,0 +1,102 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.root {
+  position: absolute;
+  pointer-events: none;
+  width: 27px;
+  height: 12px;
+  transform-origin: 0 0;
+  color: var(--component-bg);
+
+  @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 &[data-placement='right'] {
+    transform-origin: left bottom;
+    transform: rotate(-90deg) translateX(-50%);
+    bottom: 50%;
+    left: 1px;
+  }
+
+  @nest &[data-placement='right-end'] {
+    transform-origin: left bottom;
+    transform: rotate(-90deg);
+    bottom: 3px;
+    left: 1px;
+  }
+
+  @nest &[data-placement='right-start'] {
+    transform-origin: left bottom;
+    transform: rotate(-90deg) translateX(-50%);
+    top: 3px;
+    left: 1px;
+  }
+
+  @nest &[data-placement='left'] {
+    transform-origin: right bottom;
+    right: 1px;
+    transform: rotate(90deg);
+    top: 50%;
+  }
+
+  @nest &[data-placement='left-start'] {
+    transform-origin: right bottom;
+    right: 1px;
+    transform: rotate(90deg) translateX(50%);
+    top: 3px;
+  }
+
+  @nest &[data-placement='left-end'] {
+    transform-origin: right bottom;
+    right: 1px;
+    transform: rotate(90deg);
+    bottom: 3px;
+  }
+
+  @nest &[data-placement='bottom'] {
+    top: 1px;
+    left: 50%;
+    transform: translate(-50%, -100%);
+  }
+
+  @nest &[data-placement='bottom-end'] {
+    top: 1px;
+    right: 3px;
+    transform: translate(0, -100%);
+  }
+
+  @nest &[data-placement='bottom-start'] {
+    top: 1px;
+    left: 3px;
+    transform: translateY(-100%);
+  }
+}
+
+.arrowBorderGroup {
+  & > path {
+    fill: var(--hairline-color);
+    /* fill: var(--card-shadow-outline-color); */
+  }
+}
diff --git a/packages/@sanity/components/src/popover/arrow.tsx b/packages/@sanity/components/src/popover/arrow.tsx
@@ -0,0 +1,27 @@
+import React, {forwardRef} from 'react'
+
+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>
+        <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"
+        />
+      </svg>
+    </div>
+  )
+})
+
+PopoverArrow.displayName = 'PopoverArrow'
diff --git a/packages/@sanity/components/src/popover/index.ts b/packages/@sanity/components/src/popover/index.ts
@@ -0,0 +1 @@
+export * from './popover'
diff --git a/packages/@sanity/components/src/popover/popover.css b/packages/@sanity/components/src/popover/popover.css
@@ -0,0 +1,12 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.root {
+  z-index: 9999;
+}
+
+.card {
+  background: var(--component-bg);
+  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%));
+}