Dropdown & Popover fixes for dimensions and scrolling (#608)

DropDown: add mask for label Popover: use container boundaries to avoid overflow; add scrolling
aragon · Oct 1, 2019 · 647d6e5 · 647d6e5
1 parent 2e57e69
commit 647d6e5
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 14 deletions.
diff --git a/src/components/DropDown/DropDown.js b/src/components/DropDown/DropDown.js
@@ -112,24 +112,22 @@ const DropDown = React.memo(function DropDown({
   const { width: vw } = useViewport()
 
   const [widthNoPx = MIN_WIDTH] = (width || '').split('px')
-  const [placeholderMinWidth, setPlaceholderMinWidth] = useState(
-    Math.min(widthNoPx, MIN_WIDTH)
-  )
   const [buttonWidth, setButtonWidth] = useState(0)
-  const [getContentWidth, setGetContentWidth] = useState(true)
+  const [measureWidth, setMeasureWidth] = useState(true)
 
   // Adjust the button width if the item widths are larger than declared width
+  const [placeholderMinWidth, setPlaceholderMinWidth] = useState(
+    Math.min(widthNoPx, MIN_WIDTH)
+  )
   const popoverRefCallback = useCallback(el => {
     if (!el) {
       return
     }
-    // Add 4 GU to accomodate for caret spacing
-    setPlaceholderMinWidth(el.clientWidth + 4 * GU)
-    setGetContentWidth(false)
+    setPlaceholderMinWidth(el.clientWidth)
+    setMeasureWidth(false)
   }, [])
-  // Re-adjust if the width or items ever change
   useEffect(() => {
-    setGetContentWidth(true)
+    setMeasureWidth(true)
   }, [vw, items])
 
   // Update the button width every time the reference updates
@@ -187,7 +185,7 @@ const DropDown = React.memo(function DropDown({
           padding-left: ${2 * GU}px;
           padding-right: ${1.5 * GU}px;
           width: ${width || (wide ? '100%' : 'auto')};
-          min-width: ${placeholderMinWidth}px;
+          min-width: ${wide ? 'auto' : `${placeholderMinWidth}px`};
           background: ${disabled ? theme.disabled : theme.surface};
           color: ${disabled ? theme.disabledContent : theme.surfaceContent};
           border: ${disabled ? 0 : 1}px solid
@@ -203,7 +201,9 @@ const DropDown = React.memo(function DropDown({
         `}
         {...props}
       >
-        <Label selectedIndex={selectedIndex} selectedLabel={selectedLabel} />
+        <div css="overflow: hidden;">
+          <Label selectedIndex={selectedIndex} selectedLabel={selectedLabel} />
+        </div>
         <IconDown
           size="tiny"
           css={`
@@ -216,7 +216,7 @@ const DropDown = React.memo(function DropDown({
           `}
         />
       </ButtonBase>
-      {getContentWidth && (
+      {measureWidth && (
         <div
           css={`
             position: absolute;
@@ -280,7 +280,6 @@ const PopoverContent = React.memo(function PopoverContent({
   const theme = useTheme()
   return (
     <div
-      ref={refCallback}
       css={`
         min-width: ${buttonWidth}px;
         color: ${theme.surfaceContentSecondary};
@@ -298,8 +297,10 @@ const PopoverContent = React.memo(function PopoverContent({
         </div>
       )}
       <ul
+        ref={refCallback}
         css={`
           margin: 0;
+          padding: 0;
           list-style: none;
           width: 100%;
         `}

diff --git a/src/components/Popover/Popover.js b/src/components/Popover/Popover.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import Popper from 'popper.js'
 import { Transition, animated } from 'react-spring'
 import { useRoot } from '../../providers'
-import { springs, RADIUS } from '../../style'
+import { springs, GU, RADIUS } from '../../style'
 import { useTheme } from '../../theme'
 import { noop, stylingProps, warn, KEY_ESC } from '../../utils'
 import RootPortal from '../RootPortal/RootPortal'
@@ -162,9 +162,17 @@ class PopoverBase extends React.Component {
     onClose()
   }
 
+  boundaryDimensions() {
+    const { rootBoundary } = this.props
+    return rootBoundary
+      ? [rootBoundary.clientWidth, rootBoundary.clientHeight]
+      : [window.innerWidth, window.innerHeight]
+  }
+
   render() {
     const { children, theme, transitionStyles, zIndex } = this.props
     const { scale, opacity } = transitionStyles
+    const [maxWidth, maxHeight] = this.boundaryDimensions()
     return (
       <animated.div
         css={`
@@ -183,6 +191,8 @@ class PopoverBase extends React.Component {
           style={{
             opacity,
             transform: scale.interpolate(v => `scale3d(${v}, ${v}, 1)`),
+            maxHeight: `${maxHeight - 2 * GU}px`,
+            maxWidth: `${maxWidth - 2 * GU}px`,
           }}
           css={`
             background: ${theme.surface};
@@ -193,6 +203,7 @@ class PopoverBase extends React.Component {
               /* Having the popover visible already means that it focused. */
               outline: 0;
             }
+            overflow-y: auto;
           `}
           {...stylingProps(this)}
         >