From 64c8991476aa56981c012fe1b4bc8d43da5f973d Mon Sep 17 00:00:00 2001
From: Gorka <gorka@aquigorka.com>
Date: Mon, 30 Sep 2019 12:30:35 +0200
Subject: [PATCH 1/9] DropDown: update width calculations

These changes take into consideration if the wide prop is set or not to
compute the min width value for the button, it also refactors the way
the caret spacing is considered for the rendered placeholder (adds a
container with max width) and updates the ref callback to consider the
list items instead of the container (which had spacing applied to it)
---
 src/components/DropDown/DropDown.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/components/DropDown/DropDown.js b/src/components/DropDown/DropDown.js
index 973322fe6..3e75239f0 100644
--- a/src/components/DropDown/DropDown.js
+++ b/src/components/DropDown/DropDown.js
@@ -123,8 +123,7 @@ const DropDown = React.memo(function DropDown({
     if (!el) {
       return
     }
-    // Add 4 GU to accomodate for caret spacing
-    setPlaceholderMinWidth(el.clientWidth + 4 * GU)
+    setPlaceholderMinWidth(el.clientWidth)
     setGetContentWidth(false)
   }, [])
   // Re-adjust if the width or items ever change
@@ -187,7 +186,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 +202,15 @@ const DropDown = React.memo(function DropDown({
         `}
         {...props}
       >
-        <Label selectedIndex={selectedIndex} selectedLabel={selectedLabel} />
+        <div
+          css={`
+            max-width: calc(
+              ${placeholderMinWidth}px - ${4 * GU}px - ${4.5 * GU}px
+            );
+          `}
+        >
+          <Label selectedIndex={selectedIndex} selectedLabel={selectedLabel} />
+        </div>
         <IconDown
           size="tiny"
           css={`
@@ -280,7 +287,6 @@ const PopoverContent = React.memo(function PopoverContent({
   const theme = useTheme()
   return (
     <div
-      ref={refCallback}
       css={`
         min-width: ${buttonWidth}px;
         color: ${theme.surfaceContentSecondary};
@@ -298,8 +304,10 @@ const PopoverContent = React.memo(function PopoverContent({
         </div>
       )}
       <ul
+        ref={refCallback}
         css={`
           margin: 0;
+          padding: 0;
           list-style: none;
           width: 100%;
         `}

From 19661ea45e2ac965eff919fae171e74fef1bde1c Mon Sep 17 00:00:00 2001
From: Gorka <gorka@aquigorka.com>
Date: Mon, 30 Sep 2019 14:32:32 +0200
Subject: [PATCH 2/9] DropDown: update inner logic to get content width

---
 src/components/DropDown/DropDown.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/DropDown/DropDown.js b/src/components/DropDown/DropDown.js
index 3e75239f0..9518e1142 100644
--- a/src/components/DropDown/DropDown.js
+++ b/src/components/DropDown/DropDown.js
@@ -112,21 +112,24 @@ 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)
 
   // Adjust the button width if the item widths are larger than declared width
+  const [ghostElement, setGhostElement] = useState(null)
   const popoverRefCallback = useCallback(el => {
     if (!el) {
       return
     }
-    setPlaceholderMinWidth(el.clientWidth)
-    setGetContentWidth(false)
-  }, [])
-  // Re-adjust if the width or items ever change
+    setGhostElement(el)
+  })
+  const placeholderMinWidth = React.useMemo(() => {
+    if (!ghostElement) {
+      return Math.min(widthNoPx, MIN_WIDTH)
+    }
+    return ghostElement.clientWidth
+  }, [vw, ghostElement])
+
   useEffect(() => {
     setGetContentWidth(true)
   }, [vw, items])
@@ -204,6 +207,7 @@ const DropDown = React.memo(function DropDown({
       >
         <div
           css={`
+            overflow: hidden;
             max-width: calc(
               ${placeholderMinWidth}px - ${4 * GU}px - ${4.5 * GU}px
             );

From 91f8ec051bb753ddf6760f0f572a99ecfd52891e Mon Sep 17 00:00:00 2001
From: Gorka <gorka@aquigorka.com>
Date: Mon, 30 Sep 2019 14:33:01 +0200
Subject: [PATCH 3/9] Popover: set max dimensions to avoid overflow on smaller
 screens

---
 src/components/Popover/Popover.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Popover/Popover.js b/src/components/Popover/Popover.js
index afcf7c5cd..9ffa09b51 100644
--- 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'
@@ -193,6 +193,9 @@ class PopoverBase extends React.Component {
               /* Having the popover visible already means that it focused. */
               outline: 0;
             }
+            max-height: calc(100vh - ${2 * GU}px);
+            max-width: calc(100vw - ${2 * GU}px);
+            overflow-y: auto;
           `}
           {...stylingProps(this)}
         >

From ec765f4b1ca9c92a596768fb2285f7da148e1340 Mon Sep 17 00:00:00 2001
From: Gorka <gorka@aquigorka.com>
Date: Mon, 30 Sep 2019 15:34:15 +0200
Subject: [PATCH 4/9] DropDown: fix lint errors

---
 src/components/DropDown/DropDown.js | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/DropDown/DropDown.js b/src/components/DropDown/DropDown.js
index 9518e1142..6cce0558f 100644
--- a/src/components/DropDown/DropDown.js
+++ b/src/components/DropDown/DropDown.js
@@ -117,18 +117,21 @@ const DropDown = React.memo(function DropDown({
 
   // Adjust the button width if the item widths are larger than declared width
   const [ghostElement, setGhostElement] = useState(null)
-  const popoverRefCallback = useCallback(el => {
-    if (!el) {
-      return
-    }
-    setGhostElement(el)
-  })
-  const placeholderMinWidth = React.useMemo(() => {
+  const popoverRefCallback = useCallback(
+    el => {
+      if (!el) {
+        return
+      }
+      setGhostElement(el)
+    },
+    [setGhostElement]
+  )
+  const placeholderMinWidth = useMemo(() => {
     if (!ghostElement) {
       return Math.min(widthNoPx, MIN_WIDTH)
     }
     return ghostElement.clientWidth
-  }, [vw, ghostElement])
+  }, [ghostElement, widthNoPx])
 
   useEffect(() => {
     setGetContentWidth(true)

From 7c140908772bfc9b259ee488f9f55336c32148bb Mon Sep 17 00:00:00 2001
From: Gorka <gorka@aquigorka.com>
Date: Tue, 1 Oct 2019 08:43:35 +0200
Subject: [PATCH 5/9] DropDown: update label mask rules

---
 src/components/DropDown/DropDown.js | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/src/components/DropDown/DropDown.js b/src/components/DropDown/DropDown.js
index 6cce0558f..1b5dc163d 100644
--- a/src/components/DropDown/DropDown.js
+++ b/src/components/DropDown/DropDown.js
@@ -208,14 +208,7 @@ const DropDown = React.memo(function DropDown({
         `}
         {...props}
       >
-        <div
-          css={`
-            overflow: hidden;
-            max-width: calc(
-              ${placeholderMinWidth}px - ${4 * GU}px - ${4.5 * GU}px
-            );
-          `}
-        >
+        <div css="overflow: hidden;">
           <Label selectedIndex={selectedIndex} selectedLabel={selectedLabel} />
         </div>
         <IconDown

From a81b2fb4137749a0b0a33d35cd52ec10335c4f4c Mon Sep 17 00:00:00 2001
From: Gorka <gorka@aquigorka.com>
Date: Tue, 1 Oct 2019 14:53:59 +0200
Subject: [PATCH 6/9] Popover: use boundary dimensions instead of vw & vh

---
 src/components/Popover/Popover.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/Popover/Popover.js b/src/components/Popover/Popover.js
index 9ffa09b51..ac9ff86c2 100644
--- a/src/components/Popover/Popover.js
+++ b/src/components/Popover/Popover.js
@@ -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={`
@@ -193,8 +201,8 @@ class PopoverBase extends React.Component {
               /* Having the popover visible already means that it focused. */
               outline: 0;
             }
-            max-height: calc(100vh - ${2 * GU}px);
-            max-width: calc(100vw - ${2 * GU}px);
+            max-height: calc(${maxHeight}px - ${2 * GU}px);
+            max-width: calc(${maxWidth}px - ${2 * GU}px);
             overflow-y: auto;
           `}
           {...stylingProps(this)}

From 89fe12b74d52481298f498192f17c00dd7887aaa Mon Sep 17 00:00:00 2001
From: Gorka <gorka@aquigorka.com>
Date: Tue, 1 Oct 2019 14:54:23 +0200
Subject: [PATCH 7/9] DropDown: rename var to avoid confusion

---
 src/components/DropDown/DropDown.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/DropDown/DropDown.js b/src/components/DropDown/DropDown.js
index 1b5dc163d..cfcd4de3f 100644
--- a/src/components/DropDown/DropDown.js
+++ b/src/components/DropDown/DropDown.js
@@ -113,7 +113,7 @@ const DropDown = React.memo(function DropDown({
 
   const [widthNoPx = MIN_WIDTH] = (width || '').split('px')
   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 [ghostElement, setGhostElement] = useState(null)
@@ -134,7 +134,7 @@ const DropDown = React.memo(function DropDown({
   }, [ghostElement, widthNoPx])
 
   useEffect(() => {
-    setGetContentWidth(true)
+    setMeasureWidth(true)
   }, [vw, items])
 
   // Update the button width every time the reference updates
@@ -223,7 +223,7 @@ const DropDown = React.memo(function DropDown({
           `}
         />
       </ButtonBase>
-      {getContentWidth && (
+      {measureWidth && (
         <div
           css={`
             position: absolute;

From 6dd256a69fc4a28131031c8a866736b7a3aaba96 Mon Sep 17 00:00:00 2001
From: Gorka <gorka@aquigorka.com>
Date: Tue, 1 Oct 2019 15:34:23 +0200
Subject: [PATCH 8/9] DropDown: refactor back to simpler callback

---
 src/components/DropDown/DropDown.js | 23 ++++++++---------------
 1 file changed, 8 insertions(+), 15 deletions(-)

diff --git a/src/components/DropDown/DropDown.js b/src/components/DropDown/DropDown.js
index cfcd4de3f..9d8a135f6 100644
--- a/src/components/DropDown/DropDown.js
+++ b/src/components/DropDown/DropDown.js
@@ -116,23 +116,16 @@ const DropDown = React.memo(function DropDown({
   const [measureWidth, setMeasureWidth] = useState(true)
 
   // Adjust the button width if the item widths are larger than declared width
-  const [ghostElement, setGhostElement] = useState(null)
-  const popoverRefCallback = useCallback(
-    el => {
-      if (!el) {
-        return
-      }
-      setGhostElement(el)
-    },
-    [setGhostElement]
+  const [placeholderMinWidth, setPlaceholderMinWidth] = useState(
+    Math.min(widthNoPx, MIN_WIDTH)
   )
-  const placeholderMinWidth = useMemo(() => {
-    if (!ghostElement) {
-      return Math.min(widthNoPx, MIN_WIDTH)
+  const popoverRefCallback = useCallback(el => {
+    if (!el) {
+      return
     }
-    return ghostElement.clientWidth
-  }, [ghostElement, widthNoPx])
-
+    setPlaceholderMinWidth(el.clientWidth)
+    setMeasureWidth(false)
+  }, [])
   useEffect(() => {
     setMeasureWidth(true)
   }, [vw, items])

From 4cc716b950f32e3be476c63970699108082a7349 Mon Sep 17 00:00:00 2001
From: Gorka <gorka@aquigorka.com>
Date: Tue, 1 Oct 2019 15:41:52 +0200
Subject: [PATCH 9/9] Popover: refactor boundaries to be set in style instead
 of css

---
 src/components/Popover/Popover.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Popover/Popover.js b/src/components/Popover/Popover.js
index ac9ff86c2..c9d95b27f 100644
--- a/src/components/Popover/Popover.js
+++ b/src/components/Popover/Popover.js
@@ -191,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};
@@ -201,8 +203,6 @@ class PopoverBase extends React.Component {
               /* Having the popover visible already means that it focused. */
               outline: 0;
             }
-            max-height: calc(${maxHeight}px - ${2 * GU}px);
-            max-width: calc(${maxWidth}px - ${2 * GU}px);
             overflow-y: auto;
           `}
           {...stylingProps(this)}