PopoverPosition = Position + auto values (#3156)

palantir · Nov 15, 2018 · 20c7897 · 20c7897 · blueprint-bot · Nov 15, 2018
1 parent 8ee44a7
commit 20c7897
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 23 deletions.
diff --git a/packages/core/src/components/popover/popoverMigrationUtils.ts b/packages/core/src/components/popover/popoverMigrationUtils.ts
@@ -6,12 +6,13 @@
 
 import { Placement } from "popper.js";
 import { Position } from "../../common/position";
+import { PopoverPosition } from "./popoverSharedProps";
 
 /**
  * Convert a position to a placement.
  * @param position the position to convert
  */
-export function positionToPlacement(position: Position | "auto" | "auto-start" | "auto-end"): Placement {
+export function positionToPlacement(position: PopoverPosition): Placement {
     /* istanbul ignore next */
     switch (position) {
         case Position.TOP_LEFT:

diff --git a/packages/core/src/components/popover/popoverSharedProps.ts b/packages/core/src/components/popover/popoverSharedProps.ts
@@ -12,6 +12,15 @@ import { IOverlayableProps } from "../overlay/overlay";
 // re-export this symbol for library consumers
 export { PopperModifiers };
 
+/** `Position` with `"auto"` values, used by `Popover` and `Tooltip`. */
+export const PopoverPosition = {
+    ...Position,
+    AUTO: "auto" as "auto",
+    AUTO_END: "auto-end" as "auto-end",
+    AUTO_START: "auto-start" as "auto-start",
+};
+export type PopoverPosition = typeof PopoverPosition[keyof typeof PopoverPosition];
+
 /** Props shared between `Popover` and `Tooltip`. */
 export interface IPopoverSharedProps extends IOverlayableProps, IProps {
     /**
@@ -103,7 +112,7 @@ export interface IPopoverSharedProps extends IOverlayableProps, IProps {
      * user scrolls around.
      * @default "auto"
      */
-    position?: Position | "auto" | "auto-start" | "auto-end";
+    position?: PopoverPosition;
 
     /**
      * Space-delimited string of class names applied to the target element.

diff --git a/packages/docs-app/src/examples/core-examples/popoverExample.tsx b/packages/docs-app/src/examples/core-examples/popoverExample.tsx
@@ -22,7 +22,7 @@ import {
     MenuItem,
     Popover,
     PopoverInteractionKind,
-    Position,
+    PopoverPosition,
     RadioGroup,
     Slider,
     Switch,
@@ -42,22 +42,22 @@ const INTERACTION_KINDS = [
     { label: "Hover (target only)", value: PopoverInteractionKind.HOVER_TARGET_ONLY.toString() },
 ];
 
-const VALID_POSITIONS: Array<Position | "auto" | "auto-start" | "auto-end"> = [
-    "auto",
-    "auto-start",
-    "auto-end",
-    Position.TOP_LEFT,
-    Position.TOP,
-    Position.TOP_RIGHT,
-    Position.RIGHT_TOP,
-    Position.RIGHT,
-    Position.RIGHT_BOTTOM,
-    Position.BOTTOM_LEFT,
-    Position.BOTTOM,
-    Position.BOTTOM_RIGHT,
-    Position.LEFT_TOP,
-    Position.LEFT,
-    Position.LEFT_BOTTOM,
+const VALID_POSITIONS: PopoverPosition[] = [
+    PopoverPosition.AUTO,
+    PopoverPosition.AUTO_START,
+    PopoverPosition.AUTO_END,
+    PopoverPosition.TOP_LEFT,
+    PopoverPosition.TOP,
+    PopoverPosition.TOP_RIGHT,
+    PopoverPosition.RIGHT_TOP,
+    PopoverPosition.RIGHT,
+    PopoverPosition.RIGHT_BOTTOM,
+    PopoverPosition.BOTTOM_LEFT,
+    PopoverPosition.BOTTOM,
+    PopoverPosition.BOTTOM_RIGHT,
+    PopoverPosition.LEFT_TOP,
+    PopoverPosition.LEFT,
+    PopoverPosition.LEFT_BOTTOM,
 ];
 
 const POPPER_DOCS = "https://popper.js.org/popper-documentation.html#modifiers";
@@ -71,7 +71,7 @@ export interface IPopoverExampleState {
     isOpen?: boolean;
     minimal?: boolean;
     modifiers?: PopperJS.Modifiers;
-    position?: Position | "auto" | "auto-start" | "auto-end";
+    position?: PopoverPosition;
     sliderValue?: number;
     usePortal?: boolean;
 }
@@ -101,9 +101,7 @@ export class PopoverExample extends React.PureComponent<IExampleProps, IPopoverE
         const hasBackdrop = this.state.hasBackdrop && interactionKind === PopoverInteractionKind.CLICK;
         this.setState({ interactionKind, hasBackdrop });
     });
-    private handlePositionChange = handleStringChange((position: Position | "auto" | "auto-start" | "auto-end") =>
-        this.setState({ position }),
-    );
+    private handlePositionChange = handleStringChange((position: PopoverPosition) => this.setState({ position }));
     private handleBoundaryChange = handleStringChange((boundary: PopperJS.Boundary) =>
         this.setState({
             modifiers: {