fix(ui): prevent variable dropdown from clipping

Closes #14075
influxdata · Jun 19, 2019 · 097867b · 097867b
1 parent 54fba2e
commit 097867b
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,7 @@
 ### UI Improvements
 
 1. [14157](https://github.com/influxdata/influxdb/pull/14157): Remove rendering bottleneck when streaming Flux responses
+1. [14165](https://github.com/influxdata/influxdb/pull/14165): Prevent variable dropdown from clipping
 
 ## v2.0.0-alpha.13 [2019-06-13]
 

diff --git a/ui/src/clockface/components/dropdowns/Dropdown.scss b/ui/src/clockface/components/dropdowns/Dropdown.scss
@@ -29,6 +29,11 @@
   z-index: 500;
   border-radius: $radius;
   box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.7);
+
+  .dropdown--above & {
+    top: 0;
+    transform: translateY(-100%);
+  }
 }
 
 .dropdown--menu {

diff --git a/ui/src/clockface/components/dropdowns/Dropdown.tsx b/ui/src/clockface/components/dropdowns/Dropdown.tsx
@@ -17,7 +17,7 @@ import {
   ComponentSize,
   IconFont,
 } from '@influxdata/clockface'
-import {DropdownMenuColors} from 'src/clockface/types'
+import {DropdownMenuColors, DropdownMenuPosition} from 'src/clockface/types'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
 export enum DropdownMode {
@@ -52,6 +52,7 @@ export interface DefaultProps {
   wrapMenuText?: boolean
   testID?: string
   buttonTestID?: string
+  menuPosition?: DropdownMenuPosition
 }
 
 export type Props = PassedProps & DefaultProps
@@ -73,6 +74,7 @@ class Dropdown extends Component<Props, State> {
     wrapMenuText: false,
     testID: 'dropdown',
     buttonTestID: 'dropdown-button',
+    menuPosition: DropdownMenuPosition.Below,
   }
 
   public static Button = DropdownButton
@@ -119,6 +121,7 @@ class Dropdown extends Component<Props, State> {
       mode,
       wrapMenuText,
       selectedID,
+      menuPosition,
     } = this.props
 
     return classnames(
@@ -130,6 +133,8 @@ class Dropdown extends Component<Props, State> {
         [customClass]: customClass,
         'dropdown--radio': mode === DropdownMode.Radio,
         'dropdown--action': mode === DropdownMode.ActionList && !selectedID,
+        'dropdown--below': menuPosition === DropdownMenuPosition.Below,
+        'dropdown--above': menuPosition === DropdownMenuPosition.Above,
       }
     )
   }

diff --git a/ui/src/clockface/components/dropdowns/DropdownButton.scss b/ui/src/clockface/components/dropdowns/DropdownButton.scss
@@ -32,9 +32,13 @@
   font-size: 0.9em;
   transition: transform 0.25s ease;
 
-  .active & {
+  .dropdown--below .active &, .dropdown--above & {
     transform: translateY(-50%) rotate(-180deg);
   }
+
+  .dropdown--above .active & {
+    transform: translateY(-50%);
+  }
 }
 
 /* Button Size Modifiers */

diff --git a/ui/src/clockface/index.ts b/ui/src/clockface/index.ts
@@ -27,6 +27,7 @@ import {
   ComponentSize,
   ComponentStatus,
   DropdownMenuColors,
+  DropdownMenuPosition,
   DropdownChild,
   ButtonShape,
   Greys,
@@ -54,6 +55,7 @@ export {
   Dropdown,
   DropdownChild,
   DropdownMenuColors,
+  DropdownMenuPosition,
   DropdownMode,
   Form,
   FormElement,

diff --git a/ui/src/clockface/types/index.ts b/ui/src/clockface/types/index.ts
@@ -30,6 +30,11 @@ export enum DropdownMenuColors {
   Onyx = 'onyx',
 }
 
+export enum DropdownMenuPosition {
+  Above = 'above',
+  Below = 'below',
+}
+
 export type DropdownChild =
   | Array<string | JSX.Element | Element>
   | string

diff --git a/ui/src/timeMachine/components/variableToolbar/VariableTooltipContents.tsx b/ui/src/timeMachine/components/variableToolbar/VariableTooltipContents.tsx
@@ -5,7 +5,7 @@ import {get} from 'lodash'
 
 // Components
 import {Form} from '@influxdata/clockface'
-import {Dropdown} from 'src/clockface'
+import {Dropdown, DropdownMenuPosition} from 'src/clockface'
 
 // Actions
 import {
@@ -66,6 +66,7 @@ const VariableTooltipContents: FunctionComponent<Props> = ({
           status={toComponentStatus(valuesStatus)}
           titleText={values ? 'No Results' : 'None Selected'}
           widthPixels={200}
+          menuPosition={DropdownMenuPosition.Above}
           onChange={value => onSelectVariableValue(variableID, value)}
         >
           {dropdownItems.map(value => (