From e620c1ed7b6d5e847f0ec6e8f66ebcb9a178028c Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Tue, 9 Apr 2019 13:21:58 +0300
Subject: [PATCH 01/15] feat(Popup): add `pointing` prop

---
 .../Types/PopupExamplePointing.shorthand.tsx  |  48 ++++++++
 .../examples/components/Popup/Types/index.tsx |   5 +
 packages/react/src/components/Popup/Popup.tsx |  22 +++-
 .../src/components/Popup/PopupContent.tsx     |  43 ++++++-
 .../components/Popup/popupContentStyles.ts    | 110 ++++++++++++++++--
 .../components/Popup/popupContentVariables.ts |  16 ++-
 .../teams/components/Popup/popupStyles.ts     |   4 +-
 7 files changed, 224 insertions(+), 24 deletions(-)
 create mode 100644 docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx

diff --git a/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx
new file mode 100644
index 0000000000..0825374784
--- /dev/null
+++ b/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx
@@ -0,0 +1,48 @@
+import * as React from 'react'
+import { Button, Grid, Popup } from '@stardust-ui/react'
+
+const PopupWithButton = props => (
+  <Popup
+    align={props.align}
+    content="A popup with a pointer."
+    pointing
+    position={props.position}
+    trigger={
+      <Button
+        icon={props.icon}
+        styles={{ padding: props.padding, height: '38px', minWidth: '64px' }}
+      />
+    }
+  />
+)
+
+const triggers = [
+  { position: 'above', align: 'start', icon: 'arrow circle up', padding: '5px 42px 18px 5px' },
+  { position: 'above', align: 'center', icon: 'arrow circle up', padding: '5px 5px 18px 5px' },
+  { position: 'above', align: 'end', icon: 'arrow circle up', padding: '5px 5px 18px 42px' },
+  { position: 'below', align: 'start', icon: 'arrow circle down', padding: '18px 42px 5px 5px' },
+  { position: 'below', align: 'center', icon: 'arrow circle down', padding: '18px 5px 5px 5px' },
+  { position: 'below', align: 'end', icon: 'arrow circle down', padding: '18px 5px 5px 42px' },
+  { position: 'before', align: 'top', icon: 'arrow circle left', padding: '5px 42px 18px 5px' },
+  { position: 'before', align: 'center', icon: 'arrow circle left', padding: '5px 42px 5px 5px' },
+  { position: 'before', align: 'bottom', icon: 'arrow circle left', padding: '18px 42px 5px 5px' },
+  { position: 'after', align: 'top', icon: 'arrow circle right', padding: '5px 5px 18px 42px' },
+  { position: 'after', align: 'center', icon: 'arrow circle right', padding: '5px 5px 5px 42px' },
+  { position: 'after', align: 'bottom', icon: 'arrow circle right', padding: '18px 5px 5px 42px' },
+]
+
+const PopupExamplePointing = () => (
+  <Grid columns="repeat(3, 30px)" variables={{ padding: '30px', gridGap: '80px' }}>
+    {triggers.map(({ position, align, icon, padding }) => (
+      <PopupWithButton
+        align={align}
+        icon={icon}
+        key={`${position}-${align}`}
+        padding={padding}
+        position={position}
+      />
+    ))}
+  </Grid>
+)
+
+export default PopupExamplePointing
diff --git a/docs/src/examples/components/Popup/Types/index.tsx b/docs/src/examples/components/Popup/Types/index.tsx
index 6639fac9e8..f8b2213edf 100644
--- a/docs/src/examples/components/Popup/Types/index.tsx
+++ b/docs/src/examples/components/Popup/Types/index.tsx
@@ -10,6 +10,11 @@ const Types = () => (
       description="A default popup."
       examplePath="components/Popup/Types/PopupExample"
     />
+    <ComponentExample
+      title="Pointing"
+      description="A popup can have a pointer."
+      examplePath="components/Popup/Types/PopupExamplePointing"
+    />
     <ComponentExample
       title="Controlled"
       description="Note that if Popup is controlled, then its 'open' prop value could be changed either by parent component, or by user actions (e.g. key press) - thus it is necessary to handle 'onOpenChange' event. Try to type some text into popup's input field and press ESC to see the effect."
diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 30f4742680..8f240c0e4f 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -104,6 +104,9 @@ export interface PopupProps
    */
   onOpenChange?: ComponentEventHandler<PopupProps>
 
+  /** A popup can show a pointer to trigger. */
+  pointing?: boolean
+
   /**
    * Position for the popup. Position has higher priority than align. If position is vertical ('above' | 'below')
    * and align is also vertical ('top' | 'bottom') or if both position and align are horizontal ('before' | 'after'
@@ -171,6 +174,7 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
     ]),
     open: PropTypes.bool,
     onOpenChange: PropTypes.func,
+    pointing: PropTypes.bool,
     position: PropTypes.oneOf(POSITIONS),
     renderContent: PropTypes.func,
     target: PropTypes.any,
@@ -438,9 +442,15 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
     rtl: boolean,
     accessibility: AccessibilityBehavior,
     // https://popper.js.org/popper-documentation.html#Popper.scheduleUpdate
-    { ref, scheduleUpdate, style: popupPlacementStyles }: PopperChildrenProps,
+    {
+      arrowProps,
+      ref,
+      scheduleUpdate,
+      placement,
+      style: popupPlacementStyles,
+    }: PopperChildrenProps,
   ) => {
-    const { content: propsContent, renderContent, contentRef } = this.props
+    const { content: propsContent, renderContent, contentRef, pointing } = this.props
     const content = renderContent ? renderContent(scheduleUpdate) : propsContent
 
     const popupWrapperAttributes = {
@@ -448,6 +458,9 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
       ...accessibility.attributes.popup,
       ...accessibility.keyHandlers.popup,
       className: popupPositionClasses,
+      placement,
+      pointing,
+      pointerProps: arrowProps,
       style: popupPlacementStyles,
       ...this.getContentProps(),
     }
@@ -470,10 +483,7 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
       accessibility.focusTrap || accessibility.autoFocus ? {} : popupWrapperAttributes
 
     const popupContent = Popup.Content.create(content, {
-      defaultProps: {
-        className: Popup.slotClassNames.content,
-        ...popupContentAttributes,
-      },
+      defaultProps: popupContentAttributes,
       overrideProps: this.getContentProps,
     })
 
diff --git a/packages/react/src/components/Popup/PopupContent.tsx b/packages/react/src/components/Popup/PopupContent.tsx
index c9dc6376fa..fa29bb8ac6 100644
--- a/packages/react/src/components/Popup/PopupContent.tsx
+++ b/packages/react/src/components/Popup/PopupContent.tsx
@@ -1,4 +1,6 @@
+import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as React from 'react'
+import { PopperChildrenProps } from 'react-popper'
 import * as PropTypes from 'prop-types'
 import * as _ from 'lodash'
 
@@ -16,6 +18,8 @@ import {
 import { Accessibility } from '../../lib/accessibility/types'
 import { defaultBehavior } from '../../lib/accessibility'
 import { ReactProps, ComponentEventHandler } from '../../types'
+import Box from '../Box/Box'
+import Ref from '../Ref/Ref'
 
 export interface PopupContentProps
   extends UIComponentProps,
@@ -40,6 +44,15 @@ export interface PopupContentProps
    * @param {object} data - All props.
    */
   onMouseLeave?: ComponentEventHandler<PopupContentProps>
+
+  /** An actual placement value from Popper. */
+  placement?: PopperChildrenProps['placement']
+
+  /** A popup can show a pointer to trigger. */
+  pointing?: boolean
+
+  /** A set of Popper props for a pointer. */
+  pointerProps?: PopperChildrenProps['arrowProps']
 }
 
 /**
@@ -55,6 +68,9 @@ class PopupContent extends UIComponent<ReactProps<PopupContentProps>, any> {
 
   public static propTypes = {
     ...commonPropTypes.createCommon(),
+    placement: PropTypes.string,
+    pointing: PropTypes.bool,
+    pointerProps: customPropTypes.itemShorthand,
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
   }
@@ -76,8 +92,9 @@ class PopupContent extends UIComponent<ReactProps<PopupContentProps>, any> {
     ElementType,
     classes,
     unhandledProps,
+    styles,
   }: RenderResultConfig<PopupContentProps>): React.ReactNode {
-    const { children, content } = this.props
+    const { children, content, pointerProps, pointing } = this.props
 
     return (
       <ElementType
@@ -88,7 +105,29 @@ class PopupContent extends UIComponent<ReactProps<PopupContentProps>, any> {
         onMouseEnter={this.handleMouseEnter}
         onMouseLeave={this.handleMouseLeave}
       >
-        {childrenExist(children) ? children : content}
+        {pointing && (
+          <Ref innerRef={pointerProps.ref}>
+            {Box.create(
+              {},
+              {
+                defaultProps: {
+                  style: pointerProps.style,
+                  styles: styles.pointer,
+                },
+              },
+            )}
+          </Ref>
+        )}
+
+        {Box.create(
+          {},
+          {
+            defaultProps: {
+              children: childrenExist(children) ? children : content,
+              styles: styles.content,
+            },
+          },
+        )}
       </ElementType>
     )
   }
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index 81bb28319f..e622b32696 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -1,20 +1,108 @@
+import { PopperChildrenProps } from 'react-popper'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { pxToRem } from '../../../../lib'
 import { PopupContentProps } from '../../../../components/Popup/PopupContent'
 import { PopupContentVariables } from './popupContentVariables'
 
+const getStyles = (
+  v: PopupContentVariables,
+  popperPlacement?: PopperChildrenProps['placement'],
+) => {
+  const placement = (popperPlacement || '').split('-', 1).pop()
+
+  const rootStyles = {
+    top: {
+      paddingBottom: pxToRem(v.pointerHeight),
+    },
+    right: {
+      paddingLeft: pxToRem(v.pointerHeight),
+    },
+    bottom: {
+      paddingTop: pxToRem(v.pointerHeight),
+    },
+    left: {
+      paddingRight: pxToRem(v.pointerHeight),
+    },
+  }
+
+  const pointerStyles = {
+    top: {
+      bottom: `${pxToRem(v.pointerHeight / 2 + v.borderSize)}`,
+      transform: 'rotate(45deg)',
+    },
+    right: {
+      left: `${pxToRem(v.pointerHeight / 2 + v.borderSize)}`,
+      transform: 'rotate(135deg)',
+    },
+    bottom: {
+      top: `${pxToRem(v.pointerHeight / 2 + v.borderSize)}`,
+      transform: 'rotate(-135deg)',
+    },
+    left: {
+      right: `${pxToRem(v.pointerHeight / 2 + v.borderSize)}`,
+      transform: 'rotate(-45deg)',
+    },
+  }
+
+  const pointerBeforeStyles = {
+    top: {
+      top: 0,
+    },
+    right: {
+      right: 0,
+    },
+    bottom: {
+      bottom: 0,
+    },
+    left: {
+      left: 0,
+    },
+  }
+
+  return {
+    root: rootStyles[placement],
+    pointer: pointerStyles[placement],
+    pointerBefore: pointerBeforeStyles[placement],
+  }
+}
+
 const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupContentVariables> = {
-  root: ({ variables }): ICSSInJSStyle => {
-    const { borderColor, padding } = variables
-
-    return {
-      display: 'block',
-      padding,
-      border: `1px solid ${borderColor}`,
-      borderRadius: pxToRem(3),
-      boxShadow: `0 2px 4px 0 ${borderColor}, 0 2px 10px 0 ${borderColor}`,
-    }
-  },
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    display: 'block',
+    ...getStyles(v, p.placement).root,
+  }),
+  pointer: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    display: 'block',
+    position: 'absolute',
+
+    background: v.contentBackgroundColor,
+    boxShadow: `1px 1px 0 0 ${v.borderColor}`,
+    color: v.contentColor,
+
+    height: pxToRem(v.pointerHeight),
+    width: pxToRem(v.pointerWidth),
+
+    ...getStyles(v, p.placement).pointer,
+
+    ':before': {
+      borderColor: 'transparent',
+      borderStyle: 'solid',
+      content: '""',
+      position: 'absolute',
+
+      ...getStyles(v, p.placement).pointerBefore,
+    },
+  }),
+  content: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    display: 'block',
+    padding: v.padding,
+
+    background: v.contentBackgroundColor,
+    border: `${v.borderSize} solid ${v.borderColor}`,
+    borderRadius: pxToRem(3),
+    boxShadow: `0 2px 4px 0 ${v.borderColor}, 0 2px 10px 0 ${v.borderColor}`,
+    color: v.contentColor,
+  }),
 }
 
 export default popupContentStyles
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index 3ac193dd3e..74c8d49f29 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -1,15 +1,27 @@
 import { pxToRem } from '../../../../lib'
 
 export interface PopupContentVariables {
-  [key: string]: string | number
-
   borderColor: string
+  borderSize: number
   padding: string
+
+  contentColor: string
+  contentBackgroundColor: string
+
+  pointerHeight: number
+  pointerWidth: number
 }
 
 export default (siteVars: any): PopupContentVariables => {
   return {
     borderColor: siteVars.gray06,
+    borderSize: 1,
     padding: `${pxToRem(10)} ${pxToRem(14)}`,
+
+    contentColor: siteVars.bodyColor,
+    contentBackgroundColor: siteVars.bodyBackground,
+
+    pointerHeight: 10,
+    pointerWidth: 10,
   }
 }
diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
index 5dbf049625..296a7cdda7 100644
--- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
@@ -6,11 +6,9 @@ const popupStyles: ComponentSlotStylesInput<PopupProps, PopupVariables> = {
   root: (): ICSSInJSStyle => ({}),
 
   popup: ({ variables }): ICSSInJSStyle => ({
-    zIndex: variables.zIndex,
     position: 'absolute',
     textAlign: 'left',
-    color: variables.contentColor,
-    background: variables.contentBackgroundColor,
+    zIndex: variables.zIndex,
   }),
 }
 

From 89e267e47398c83de305a86da9b3782f54b33558 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Wed, 10 Apr 2019 12:38:12 +0300
Subject: [PATCH 02/15] simplify styles

---
 packages/react/src/components/Popup/Popup.tsx |  2 +-
 .../components/Popup/popupContentStyles.ts    | 39 ++++---------------
 2 files changed, 8 insertions(+), 33 deletions(-)

diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 8f240c0e4f..9f3b3184ca 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -444,9 +444,9 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
     // https://popper.js.org/popper-documentation.html#Popper.scheduleUpdate
     {
       arrowProps,
+      placement,
       ref,
       scheduleUpdate,
-      placement,
       style: popupPlacementStyles,
     }: PopperChildrenProps,
   ) => {
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index e622b32696..a219527dfa 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -24,45 +24,28 @@ const getStyles = (
       paddingRight: pxToRem(v.pointerHeight),
     },
   }
-
   const pointerStyles = {
     top: {
-      bottom: `${pxToRem(v.pointerHeight / 2 + v.borderSize)}`,
+      bottom: `${pxToRem(v.pointerHeight / 2)}`,
       transform: 'rotate(45deg)',
     },
     right: {
-      left: `${pxToRem(v.pointerHeight / 2 + v.borderSize)}`,
+      left: `${pxToRem(v.pointerHeight / 2)}`,
       transform: 'rotate(135deg)',
     },
     bottom: {
-      top: `${pxToRem(v.pointerHeight / 2 + v.borderSize)}`,
+      top: `${pxToRem(v.pointerHeight / 2)}`,
       transform: 'rotate(-135deg)',
     },
     left: {
-      right: `${pxToRem(v.pointerHeight / 2 + v.borderSize)}`,
+      right: `${pxToRem(v.pointerHeight / 2)}`,
       transform: 'rotate(-45deg)',
     },
   }
 
-  const pointerBeforeStyles = {
-    top: {
-      top: 0,
-    },
-    right: {
-      right: 0,
-    },
-    bottom: {
-      bottom: 0,
-    },
-    left: {
-      left: 0,
-    },
-  }
-
   return {
     root: rootStyles[placement],
     pointer: pointerStyles[placement],
-    pointerBefore: pointerBeforeStyles[placement],
   }
 }
 
@@ -76,29 +59,21 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
     position: 'absolute',
 
     background: v.contentBackgroundColor,
-    boxShadow: `1px 1px 0 0 ${v.borderColor}`,
+    borderBottom: `${pxToRem(v.borderSize)} solid ${v.borderColor}`,
+    borderRight: `${pxToRem(v.borderSize)} solid ${v.borderColor}`,
     color: v.contentColor,
 
     height: pxToRem(v.pointerHeight),
     width: pxToRem(v.pointerWidth),
 
     ...getStyles(v, p.placement).pointer,
-
-    ':before': {
-      borderColor: 'transparent',
-      borderStyle: 'solid',
-      content: '""',
-      position: 'absolute',
-
-      ...getStyles(v, p.placement).pointerBefore,
-    },
   }),
   content: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
     padding: v.padding,
 
     background: v.contentBackgroundColor,
-    border: `${v.borderSize} solid ${v.borderColor}`,
+    border: `${pxToRem(v.borderSize)} solid ${v.borderColor}`,
     borderRadius: pxToRem(3),
     boxShadow: `0 2px 4px 0 ${v.borderColor}, 0 2px 10px 0 ${v.borderColor}`,
     color: v.contentColor,

From 7c2811ff2b0684198f66d20da1ddedf72e06dee0 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Wed, 10 Apr 2019 12:54:10 +0300
Subject: [PATCH 03/15] polish styles

---
 .../src/themes/teams/components/Popup/popupContentStyles.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index a219527dfa..b45e018804 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -4,7 +4,7 @@ import { pxToRem } from '../../../../lib'
 import { PopupContentProps } from '../../../../components/Popup/PopupContent'
 import { PopupContentVariables } from './popupContentVariables'
 
-const getStyles = (
+const getPointerStyles = (
   v: PopupContentVariables,
   popperPlacement?: PopperChildrenProps['placement'],
 ) => {
@@ -52,7 +52,7 @@ const getStyles = (
 const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupContentVariables> = {
   root: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
-    ...getStyles(v, p.placement).root,
+    ...(p.pointing && getPointerStyles(v, p.placement).root),
   }),
   pointer: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
@@ -66,7 +66,7 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
     height: pxToRem(v.pointerHeight),
     width: pxToRem(v.pointerWidth),
 
-    ...getStyles(v, p.placement).pointer,
+    ...getPointerStyles(v, p.placement).pointer,
   }),
   content: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',

From 7a3439f68ad412a9c8404370cdcf92f9a2b699ae Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 11 Apr 2019 12:34:36 +0300
Subject: [PATCH 04/15] wip

---
 .../components/Popup/popupContentStyles.ts     | 18 ++++++++++--------
 .../components/Popup/popupContentVariables.ts  | 10 ++++++----
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index b45e018804..4e38c0e200 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -8,37 +8,39 @@ const getPointerStyles = (
   v: PopupContentVariables,
   popperPlacement?: PopperChildrenProps['placement'],
 ) => {
+  const offset = pxToRem(v.pointerHeight / 2)
+  const padding = pxToRem(v.pointerHeight)
   const placement = (popperPlacement || '').split('-', 1).pop()
 
   const rootStyles = {
     top: {
-      paddingBottom: pxToRem(v.pointerHeight),
+      paddingBottom: v.contentPointerPadding,
     },
     right: {
-      paddingLeft: pxToRem(v.pointerHeight),
+      paddingLeft: v.contentPointerPadding,
     },
     bottom: {
-      paddingTop: pxToRem(v.pointerHeight),
+      paddingTop: v.contentPointerPadding,
     },
     left: {
-      paddingRight: pxToRem(v.pointerHeight),
+      paddingRight: v.contentPointerPadding,
     },
   }
   const pointerStyles = {
     top: {
-      bottom: `${pxToRem(v.pointerHeight / 2)}`,
+      bottom: offset,
       transform: 'rotate(45deg)',
     },
     right: {
-      left: `${pxToRem(v.pointerHeight / 2)}`,
+      left: offset,
       transform: 'rotate(135deg)',
     },
     bottom: {
-      top: `${pxToRem(v.pointerHeight / 2)}`,
+      top: offset,
       transform: 'rotate(-135deg)',
     },
     left: {
-      right: `${pxToRem(v.pointerHeight / 2)}`,
+      right: offset,
       transform: 'rotate(-45deg)',
     },
   }
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index 74c8d49f29..e7acde1722 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -7,9 +7,10 @@ export interface PopupContentVariables {
 
   contentColor: string
   contentBackgroundColor: string
+  contentPointerPadding: string
 
-  pointerHeight: number
-  pointerWidth: number
+  pointerHeight: string
+  pointerWidth: string
 }
 
 export default (siteVars: any): PopupContentVariables => {
@@ -20,8 +21,9 @@ export default (siteVars: any): PopupContentVariables => {
 
     contentColor: siteVars.bodyColor,
     contentBackgroundColor: siteVars.bodyBackground,
+    contentPointerPadding: pxToRem(10),
 
-    pointerHeight: 10,
-    pointerWidth: 10,
+    pointerHeight: pxToRem(10),
+    pointerWidth: pxToRem(10),
   }
 }

From 35761cfeeaa0e253df34a9939171f1a62848b193 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 11 Apr 2019 15:20:09 +0300
Subject: [PATCH 05/15] rework variables and fix RTL

---
 packages/react/src/components/Popup/Popup.tsx |  4 +-
 .../components/Popup/popupContentStyles.ts    | 40 ++++++++++---------
 .../components/Popup/popupContentVariables.ts |  8 +++-
 3 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 9f3b3184ca..05281720d5 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -424,7 +424,7 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
         keepTogether: { enabled: false },
       }),
     }
-
+    console.log('PROPOSED', placement)
     return (
       target && (
         <Popper
@@ -464,7 +464,7 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
       style: popupPlacementStyles,
       ...this.getContentProps(),
     }
-
+    console.log('REAL', placement)
     const focusTrapProps = {
       ...(typeof accessibility.focusTrap === 'boolean' ? {} : accessibility.focusTrap),
       ...popupWrapperAttributes,
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index 4e38c0e200..edb5565e86 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -1,16 +1,20 @@
 import { PopperChildrenProps } from 'react-popper'
 import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
-import { pxToRem } from '../../../../lib'
 import { PopupContentProps } from '../../../../components/Popup/PopupContent'
 import { PopupContentVariables } from './popupContentVariables'
 
+const rtlMapping = {
+  left: 'right',
+  right: 'left',
+}
+
 const getPointerStyles = (
   v: PopupContentVariables,
+  rtl: boolean,
   popperPlacement?: PopperChildrenProps['placement'],
 ) => {
-  const offset = pxToRem(v.pointerHeight / 2)
-  const padding = pxToRem(v.pointerHeight)
-  const placement = (popperPlacement || '').split('-', 1).pop()
+  const placementValue = (popperPlacement || '').split('-', 1).pop()
+  const placement = (rtl && rtlMapping[placementValue]) || placementValue
 
   const rootStyles = {
     top: {
@@ -28,19 +32,19 @@ const getPointerStyles = (
   }
   const pointerStyles = {
     top: {
-      bottom: offset,
+      bottom: v.pointerOffset,
       transform: 'rotate(45deg)',
     },
     right: {
-      left: offset,
+      left: v.pointerOffset,
       transform: 'rotate(135deg)',
     },
     bottom: {
-      top: offset,
+      top: v.pointerOffset,
       transform: 'rotate(-135deg)',
     },
     left: {
-      right: offset,
+      right: v.pointerOffset,
       transform: 'rotate(-45deg)',
     },
   }
@@ -52,31 +56,31 @@ const getPointerStyles = (
 }
 
 const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupContentVariables> = {
-  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+  root: ({ props: p, theme: t, variables: v }): ICSSInJSStyle => ({
     display: 'block',
-    ...(p.pointing && getPointerStyles(v, p.placement).root),
+    ...(p.pointing && getPointerStyles(v, t.rtl, p.placement).root),
   }),
-  pointer: ({ props: p, variables: v }): ICSSInJSStyle => ({
+  pointer: ({ props: p, theme: t, variables: v }): ICSSInJSStyle => ({
     display: 'block',
     position: 'absolute',
 
     background: v.contentBackgroundColor,
-    borderBottom: `${pxToRem(v.borderSize)} solid ${v.borderColor}`,
-    borderRight: `${pxToRem(v.borderSize)} solid ${v.borderColor}`,
+    borderBottom: `${v.borderSize} solid ${v.borderColor}`,
+    borderRight: `${v.borderSize} solid ${v.borderColor}`,
     color: v.contentColor,
 
-    height: pxToRem(v.pointerHeight),
-    width: pxToRem(v.pointerWidth),
+    height: v.pointerHeight,
+    width: v.pointerWidth,
 
-    ...getPointerStyles(v, p.placement).pointer,
+    ...getPointerStyles(v, t.rtl, p.placement).pointer,
   }),
   content: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
     padding: v.padding,
 
     background: v.contentBackgroundColor,
-    border: `${pxToRem(v.borderSize)} solid ${v.borderColor}`,
-    borderRadius: pxToRem(3),
+    border: `${v.borderSize} solid ${v.borderColor}`,
+    borderRadius: v.borderRadius,
     boxShadow: `0 2px 4px 0 ${v.borderColor}, 0 2px 10px 0 ${v.borderColor}`,
     color: v.contentColor,
   }),
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index e7acde1722..3368c6ef6f 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -2,13 +2,15 @@ import { pxToRem } from '../../../../lib'
 
 export interface PopupContentVariables {
   borderColor: string
-  borderSize: number
+  borderRadius: string
+  borderSize: string
   padding: string
 
   contentColor: string
   contentBackgroundColor: string
   contentPointerPadding: string
 
+  pointerOffset: string
   pointerHeight: string
   pointerWidth: string
 }
@@ -16,13 +18,15 @@ export interface PopupContentVariables {
 export default (siteVars: any): PopupContentVariables => {
   return {
     borderColor: siteVars.gray06,
-    borderSize: 1,
+    borderRadius: pxToRem(3),
+    borderSize: '1px',
     padding: `${pxToRem(10)} ${pxToRem(14)}`,
 
     contentColor: siteVars.bodyColor,
     contentBackgroundColor: siteVars.bodyBackground,
     contentPointerPadding: pxToRem(10),
 
+    pointerOffset: pxToRem(5),
     pointerHeight: pxToRem(10),
     pointerWidth: pxToRem(10),
   }

From 58f4fe0fc29aabeb77bf98a3e2ef4a14774945cf Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 11 Apr 2019 15:51:38 +0300
Subject: [PATCH 06/15] fix UTs

---
 packages/react/src/components/Popup/Popup.tsx   | 15 +++++++++------
 .../react/src/components/Popup/PopupContent.tsx | 17 ++++++++++-------
 .../test/specs/components/Popup/Popup-test.tsx  | 10 +++++-----
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/packages/react/src/components/Popup/Popup.tsx b/packages/react/src/components/Popup/Popup.tsx
index 05281720d5..abc1dfbe1f 100644
--- a/packages/react/src/components/Popup/Popup.tsx
+++ b/packages/react/src/components/Popup/Popup.tsx
@@ -424,7 +424,7 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
         keepTogether: { enabled: false },
       }),
     }
-    console.log('PROPOSED', placement)
+
     return (
       target && (
         <Popper
@@ -458,13 +458,10 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
       ...accessibility.attributes.popup,
       ...accessibility.keyHandlers.popup,
       className: popupPositionClasses,
-      placement,
-      pointing,
-      pointerProps: arrowProps,
       style: popupPlacementStyles,
       ...this.getContentProps(),
     }
-    console.log('REAL', placement)
+
     const focusTrapProps = {
       ...(typeof accessibility.focusTrap === 'boolean' ? {} : accessibility.focusTrap),
       ...popupWrapperAttributes,
@@ -483,7 +480,13 @@ export default class Popup extends AutoControlledComponent<ReactProps<PopupProps
       accessibility.focusTrap || accessibility.autoFocus ? {} : popupWrapperAttributes
 
     const popupContent = Popup.Content.create(content, {
-      defaultProps: popupContentAttributes,
+      defaultProps: {
+        ...popupContentAttributes,
+        placement,
+        pointing,
+        pointerRef: arrowProps.ref,
+        pointerStyle: arrowProps.style,
+      },
       overrideProps: this.getContentProps,
     })
 
diff --git a/packages/react/src/components/Popup/PopupContent.tsx b/packages/react/src/components/Popup/PopupContent.tsx
index fa29bb8ac6..1e5469dd12 100644
--- a/packages/react/src/components/Popup/PopupContent.tsx
+++ b/packages/react/src/components/Popup/PopupContent.tsx
@@ -1,4 +1,3 @@
-import * as customPropTypes from '@stardust-ui/react-proptypes'
 import * as React from 'react'
 import { PopperChildrenProps } from 'react-popper'
 import * as PropTypes from 'prop-types'
@@ -51,8 +50,11 @@ export interface PopupContentProps
   /** A popup can show a pointer to trigger. */
   pointing?: boolean
 
-  /** A set of Popper props for a pointer. */
-  pointerProps?: PopperChildrenProps['arrowProps']
+  /** A ref to a pointer element. */
+  pointerRef?: PopperChildrenProps['arrowProps']['ref']
+
+  /** An object with positioning styles fof a pointer. */
+  pointerStyle?: PopperChildrenProps['arrowProps']['style']
 }
 
 /**
@@ -70,9 +72,10 @@ class PopupContent extends UIComponent<ReactProps<PopupContentProps>, any> {
     ...commonPropTypes.createCommon(),
     placement: PropTypes.string,
     pointing: PropTypes.bool,
-    pointerProps: customPropTypes.itemShorthand,
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
+    pointerRef: PropTypes.func,
+    pointerStyle: PropTypes.object,
   }
 
   static defaultProps = {
@@ -94,7 +97,7 @@ class PopupContent extends UIComponent<ReactProps<PopupContentProps>, any> {
     unhandledProps,
     styles,
   }: RenderResultConfig<PopupContentProps>): React.ReactNode {
-    const { children, content, pointerProps, pointing } = this.props
+    const { children, content, pointing, pointerRef, pointerStyle } = this.props
 
     return (
       <ElementType
@@ -106,12 +109,12 @@ class PopupContent extends UIComponent<ReactProps<PopupContentProps>, any> {
         onMouseLeave={this.handleMouseLeave}
       >
         {pointing && (
-          <Ref innerRef={pointerProps.ref}>
+          <Ref innerRef={pointerRef}>
             {Box.create(
               {},
               {
                 defaultProps: {
-                  style: pointerProps.style,
+                  style: pointerStyle,
                   styles: styles.pointer,
                 },
               },
diff --git a/packages/react/test/specs/components/Popup/Popup-test.tsx b/packages/react/test/specs/components/Popup/Popup-test.tsx
index 6e33452428..e392d2f93a 100644
--- a/packages/react/test/specs/components/Popup/Popup-test.tsx
+++ b/packages/react/test/specs/components/Popup/Popup-test.tsx
@@ -44,7 +44,7 @@ describe('Popup', () => {
     testPopupPosition({ align, position, expectedPlacement, rtl: true })
 
   const getPopupContent = (popup: ReactWrapper) => {
-    return popup.find(`#${contentId}`)
+    return popup.find(`div#${contentId}`)
   }
 
   type ExpectPopupToOpenAndCloseParams = {
@@ -61,7 +61,7 @@ describe('Popup', () => {
     const popup = mountWithProvider(
       <Popup
         trigger={<span id={triggerId}> text to trigger popup </span>}
-        content={<span id={contentId} />}
+        content={{ id: contentId }}
         on={onProp}
       />,
     )
@@ -211,12 +211,12 @@ describe('Popup', () => {
         <React.Fragment>
           <Popup
             trigger={<span id={triggerId}>text to trigger popup</span>}
-            content={<span id={contentId} />}
+            content={{ id: contentId }}
             on="click"
           />
           <Popup
             trigger={<span id={triggerId2}>text to trigger popup</span>}
-            content={<span id={contentId2} />}
+            content={{ id: contentId2 }}
             on="click"
           />
         </React.Fragment>,
@@ -270,7 +270,7 @@ describe('Popup', () => {
       const popup = mountWithProvider(
         <Popup
           trigger={<span id={triggerId}> text to trigger popup </span>}
-          content={<span id={contentId} />}
+          content={{ id: contentId }}
           accessibility={behavior}
         />,
       )

From 5d9a56b9d9e31bda37188d2352bd277adfd898cb Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 11 Apr 2019 16:17:40 +0300
Subject: [PATCH 07/15] add changelog entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e14fe8a35e..4423dadf06 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -24,6 +24,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `Embed` and `Video` components @stuartlong ([#1108](https://github.com/stardust-ui/react/pull/1108))
 - Add file video icon on `Icon` component @luzhon  ([#1205](https://github.com/stardust-ui/react/pull/1250))
 - Export `call-missed-line` icon in Teams theme @96andrei ([#1203](https://github.com/stardust-ui/react/pull/1203))
+- Add `pointing` prop to `Popup` ([#1198](https://github.com/stardust-ui/react/pull/1198))
 
 <!--------------------------------[ v0.27.0 ]------------------------------- -->
 ## [v0.27.0](https://github.com/stardust-ui/react/tree/v0.27.0) (2019-04-10)

From 5f603c52a9cfa98d93003acaefa30214f6390fa0 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 11 Apr 2019 17:26:01 +0300
Subject: [PATCH 08/15] rework styles

---
 .../teams/components/Popup/popupContentStyles.ts    | 13 +++++--------
 .../teams/components/Popup/popupContentVariables.ts | 10 ++--------
 .../themes/teams/components/Popup/popupStyles.ts    |  4 +++-
 3 files changed, 10 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index edb5565e86..9c3305b4cb 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -18,16 +18,16 @@ const getPointerStyles = (
 
   const rootStyles = {
     top: {
-      paddingBottom: v.contentPointerPadding,
+      paddingBottom: v.pointerPadding,
     },
     right: {
-      paddingLeft: v.contentPointerPadding,
+      paddingLeft: v.pointerPadding,
     },
     bottom: {
-      paddingTop: v.contentPointerPadding,
+      paddingTop: v.pointerPadding,
     },
     left: {
-      paddingRight: v.contentPointerPadding,
+      paddingRight: v.pointerPadding,
     },
   }
   const pointerStyles = {
@@ -64,10 +64,9 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
     display: 'block',
     position: 'absolute',
 
-    background: v.contentBackgroundColor,
+    background: 'inherit',
     borderBottom: `${v.borderSize} solid ${v.borderColor}`,
     borderRight: `${v.borderSize} solid ${v.borderColor}`,
-    color: v.contentColor,
 
     height: v.pointerHeight,
     width: v.pointerWidth,
@@ -78,11 +77,9 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
     display: 'block',
     padding: v.padding,
 
-    background: v.contentBackgroundColor,
     border: `${v.borderSize} solid ${v.borderColor}`,
     borderRadius: v.borderRadius,
     boxShadow: `0 2px 4px 0 ${v.borderColor}, 0 2px 10px 0 ${v.borderColor}`,
-    color: v.contentColor,
   }),
 }
 
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index 3368c6ef6f..dc2312140c 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -6,10 +6,7 @@ export interface PopupContentVariables {
   borderSize: string
   padding: string
 
-  contentColor: string
-  contentBackgroundColor: string
-  contentPointerPadding: string
-
+  pointerPadding: string
   pointerOffset: string
   pointerHeight: string
   pointerWidth: string
@@ -22,11 +19,8 @@ export default (siteVars: any): PopupContentVariables => {
     borderSize: '1px',
     padding: `${pxToRem(10)} ${pxToRem(14)}`,
 
-    contentColor: siteVars.bodyColor,
-    contentBackgroundColor: siteVars.bodyBackground,
-    contentPointerPadding: pxToRem(10),
-
     pointerOffset: pxToRem(5),
+    pointerPadding: pxToRem(10),
     pointerHeight: pxToRem(10),
     pointerWidth: pxToRem(10),
   }
diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
index 296a7cdda7..5dbf049625 100644
--- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
@@ -6,9 +6,11 @@ const popupStyles: ComponentSlotStylesInput<PopupProps, PopupVariables> = {
   root: (): ICSSInJSStyle => ({}),
 
   popup: ({ variables }): ICSSInJSStyle => ({
+    zIndex: variables.zIndex,
     position: 'absolute',
     textAlign: 'left',
-    zIndex: variables.zIndex,
+    color: variables.contentColor,
+    background: variables.contentBackgroundColor,
   }),
 }
 

From 9a933e25847a4f7a605960fd5ad89b07c1ebc6d0 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 11 Apr 2019 18:47:09 +0300
Subject: [PATCH 09/15] remove cruft variables

---
 .../src/themes/teams-high-contrast/componentVariables.ts     | 1 -
 .../teams-high-contrast/components/Popup/popupVariables.ts   | 5 -----
 2 files changed, 6 deletions(-)
 delete mode 100644 packages/react/src/themes/teams-high-contrast/components/Popup/popupVariables.ts

diff --git a/packages/react/src/themes/teams-high-contrast/componentVariables.ts b/packages/react/src/themes/teams-high-contrast/componentVariables.ts
index e77eeb2f46..c104851ff6 100644
--- a/packages/react/src/themes/teams-high-contrast/componentVariables.ts
+++ b/packages/react/src/themes/teams-high-contrast/componentVariables.ts
@@ -11,5 +11,4 @@ export { default as Menu } from './components/Menu/menuVariables'
 export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables'
 export { default as Text } from './components/Text/textVariables'
 export { default as TreeTitle } from './components/Tree/treeTitleVariables'
-export { default as Popup } from './components/Popup/popupVariables'
 export { default as Reaction } from './components/Reaction/reactionVariables'
diff --git a/packages/react/src/themes/teams-high-contrast/components/Popup/popupVariables.ts b/packages/react/src/themes/teams-high-contrast/components/Popup/popupVariables.ts
deleted file mode 100644
index 1365221bcc..0000000000
--- a/packages/react/src/themes/teams-high-contrast/components/Popup/popupVariables.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PopupVariables } from '../../../teams/components/Popup/popupVariables'
-
-export default (siteVars: any): Partial<PopupVariables> => ({
-  color: siteVars.colors.white,
-})

From 827fc976cdc88ac730282c138ca71ab4ffef5f4b Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 11 Apr 2019 18:57:01 +0300
Subject: [PATCH 10/15] remove cruft, add breaking change for colors

---
 .../react/src/themes/teams-dark/componentVariables.ts     | 1 -
 .../themes/teams-dark/components/Popup/popupVariables.ts  | 5 -----
 .../themes/teams/components/Popup/popupContentStyles.ts   | 5 ++++-
 .../teams/components/Popup/popupContentVariables.ts       | 6 ++++++
 .../src/themes/teams/components/Popup/popupStyles.ts      | 2 --
 .../src/themes/teams/components/Popup/popupVariables.ts   | 8 +-------
 6 files changed, 11 insertions(+), 16 deletions(-)
 delete mode 100644 packages/react/src/themes/teams-dark/components/Popup/popupVariables.ts

diff --git a/packages/react/src/themes/teams-dark/componentVariables.ts b/packages/react/src/themes/teams-dark/componentVariables.ts
index 97256f6d90..a1296799f3 100644
--- a/packages/react/src/themes/teams-dark/componentVariables.ts
+++ b/packages/react/src/themes/teams-dark/componentVariables.ts
@@ -12,5 +12,4 @@ export { default as TreeTitle } from './components/Tree/treeTitleVariables'
 export { default as Menu } from './components/Menu/menuVariables'
 export { default as Reaction } from './components/Reaction/reactionVariables'
 
-export { default as Popup } from './components/Popup/popupVariables'
 export { default as PopupContent } from './components/Popup/popupContentVariables'
diff --git a/packages/react/src/themes/teams-dark/components/Popup/popupVariables.ts b/packages/react/src/themes/teams-dark/components/Popup/popupVariables.ts
deleted file mode 100644
index 1365221bcc..0000000000
--- a/packages/react/src/themes/teams-dark/components/Popup/popupVariables.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { PopupVariables } from '../../../teams/components/Popup/popupVariables'
-
-export default (siteVars: any): Partial<PopupVariables> => ({
-  color: siteVars.colors.white,
-})
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index 9c3305b4cb..8e3435a452 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -64,7 +64,7 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
     display: 'block',
     position: 'absolute',
 
-    background: 'inherit',
+    backgroundColor: v.contentBackgroundColor,
     borderBottom: `${v.borderSize} solid ${v.borderColor}`,
     borderRight: `${v.borderSize} solid ${v.borderColor}`,
 
@@ -77,6 +77,9 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
     display: 'block',
     padding: v.padding,
 
+    backgroundColor: v.contentBackgroundColor,
+    color: v.contentColor,
+
     border: `${v.borderSize} solid ${v.borderColor}`,
     borderRadius: v.borderRadius,
     boxShadow: `0 2px 4px 0 ${v.borderColor}, 0 2px 10px 0 ${v.borderColor}`,
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index dc2312140c..2622e82ad0 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -6,6 +6,9 @@ export interface PopupContentVariables {
   borderSize: string
   padding: string
 
+  contentColor: string
+  contentBackgroundColor: string
+
   pointerPadding: string
   pointerOffset: string
   pointerHeight: string
@@ -19,6 +22,9 @@ export default (siteVars: any): PopupContentVariables => {
     borderSize: '1px',
     padding: `${pxToRem(10)} ${pxToRem(14)}`,
 
+    contentColor: siteVars.bodyColor,
+    contentBackgroundColor: siteVars.bodyBackground,
+
     pointerOffset: pxToRem(5),
     pointerPadding: pxToRem(10),
     pointerHeight: pxToRem(10),
diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
index 5dbf049625..5d8260dfe8 100644
--- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
@@ -9,8 +9,6 @@ const popupStyles: ComponentSlotStylesInput<PopupProps, PopupVariables> = {
     zIndex: variables.zIndex,
     position: 'absolute',
     textAlign: 'left',
-    color: variables.contentColor,
-    background: variables.contentBackgroundColor,
   }),
 }
 
diff --git a/packages/react/src/themes/teams/components/Popup/popupVariables.ts b/packages/react/src/themes/teams/components/Popup/popupVariables.ts
index 7870d18c4f..61913846f2 100644
--- a/packages/react/src/themes/teams/components/Popup/popupVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupVariables.ts
@@ -1,13 +1,7 @@
 export interface PopupVariables {
-  [key: string]: string | number
-
   zIndex: number
-  contentColor: string
-  contentBackgroundColor: string
 }
 
-export default (siteVars: any): PopupVariables => ({
+export default (): PopupVariables => ({
   zIndex: 1000,
-  contentColor: siteVars.bodyColor,
-  contentBackgroundColor: siteVars.bodyBackground,
 })

From ba949d553a1a9936008c727d884a52743b5f244d Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Thu, 11 Apr 2019 19:25:40 +0300
Subject: [PATCH 11/15] reduce to `pointerSize`

---
 .../teams/components/Popup/popupContentStyles.ts     | 12 +++++++++---
 .../teams/components/Popup/popupContentVariables.ts  |  6 ++----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index 8e3435a452..722600c349 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -64,14 +64,20 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
     display: 'block',
     position: 'absolute',
 
-    backgroundColor: v.contentBackgroundColor,
     borderBottom: `${v.borderSize} solid ${v.borderColor}`,
     borderRight: `${v.borderSize} solid ${v.borderColor}`,
 
-    height: v.pointerHeight,
-    width: v.pointerWidth,
+    height: v.pointerSize,
+    width: v.pointerSize,
 
     ...getPointerStyles(v, t.rtl, p.placement).pointer,
+
+    ':before': {
+      content: '" "',
+      display: 'block',
+      borderTop: `${v.pointerSize} solid transparent`,
+      borderRight: `${v.pointerSize} solid ${v.contentBackgroundColor}`,
+    },
   }),
   content: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index 2622e82ad0..95c3f2db1d 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -11,8 +11,7 @@ export interface PopupContentVariables {
 
   pointerPadding: string
   pointerOffset: string
-  pointerHeight: string
-  pointerWidth: string
+  pointerSize: string
 }
 
 export default (siteVars: any): PopupContentVariables => {
@@ -27,7 +26,6 @@ export default (siteVars: any): PopupContentVariables => {
 
     pointerOffset: pxToRem(5),
     pointerPadding: pxToRem(10),
-    pointerHeight: pxToRem(10),
-    pointerWidth: pxToRem(10),
+    pointerSize: pxToRem(10),
   }
 }

From bba2d9e01f3897f5fff95d616876e843685f91c0 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 12 Apr 2019 12:50:02 +0300
Subject: [PATCH 12/15] wip2

---
 .../themes/teams/components/Popup/popupContentStyles.ts   | 8 +++-----
 .../teams/components/Popup/popupContentVariables.ts       | 8 ++------
 .../src/themes/teams/components/Popup/popupStyles.ts      | 7 +++++--
 .../src/themes/teams/components/Popup/popupVariables.ts   | 8 +++++++-
 4 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index 722600c349..b6f6d1951c 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -64,6 +64,7 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
     display: 'block',
     position: 'absolute',
 
+    backgroundColor: 'inherit',
     borderBottom: `${v.borderSize} solid ${v.borderColor}`,
     borderRight: `${v.borderSize} solid ${v.borderColor}`,
 
@@ -76,18 +77,15 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
       content: '" "',
       display: 'block',
       borderTop: `${v.pointerSize} solid transparent`,
-      borderRight: `${v.pointerSize} solid ${v.contentBackgroundColor}`,
+      borderRight: `${v.pointerSize} solid ${v.pointerBackgroundColor}`,
     },
   }),
   content: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
     padding: v.padding,
 
-    backgroundColor: v.contentBackgroundColor,
-    color: v.contentColor,
-
     border: `${v.borderSize} solid ${v.borderColor}`,
-    borderRadius: v.borderRadius,
+    borderRadius: 'inherit',
     boxShadow: `0 2px 4px 0 ${v.borderColor}, 0 2px 10px 0 ${v.borderColor}`,
   }),
 }
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index 95c3f2db1d..8e2655fc74 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -6,9 +6,7 @@ export interface PopupContentVariables {
   borderSize: string
   padding: string
 
-  contentColor: string
-  contentBackgroundColor: string
-
+  pointerBackgroundColor: string
   pointerPadding: string
   pointerOffset: string
   pointerSize: string
@@ -21,9 +19,7 @@ export default (siteVars: any): PopupContentVariables => {
     borderSize: '1px',
     padding: `${pxToRem(10)} ${pxToRem(14)}`,
 
-    contentColor: siteVars.bodyColor,
-    contentBackgroundColor: siteVars.bodyBackground,
-
+    pointerBackgroundColor: siteVars.bodyBackground,
     pointerOffset: pxToRem(5),
     pointerPadding: pxToRem(10),
     pointerSize: pxToRem(10),
diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
index 5d8260dfe8..4a59318bef 100644
--- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
@@ -5,10 +5,13 @@ import { PopupVariables } from './popupVariables'
 const popupStyles: ComponentSlotStylesInput<PopupProps, PopupVariables> = {
   root: (): ICSSInJSStyle => ({}),
 
-  popup: ({ variables }): ICSSInJSStyle => ({
-    zIndex: variables.zIndex,
+  popup: ({ variables: v }): ICSSInJSStyle => ({
+    zIndex: v.zIndex,
     position: 'absolute',
     textAlign: 'left',
+    borderRadius: v.contentBorderRadius,
+    color: v.contentColor,
+    background: v.contentBackgroundColor,
   }),
 }
 
diff --git a/packages/react/src/themes/teams/components/Popup/popupVariables.ts b/packages/react/src/themes/teams/components/Popup/popupVariables.ts
index 61913846f2..6e21ebccc6 100644
--- a/packages/react/src/themes/teams/components/Popup/popupVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupVariables.ts
@@ -1,7 +1,13 @@
 export interface PopupVariables {
   zIndex: number
+  contentBorderRadius: string
+  contentColor: string
+  contentBackgroundColor: string
 }
 
-export default (): PopupVariables => ({
+export default (siteVars: any): PopupVariables => ({
   zIndex: 1000,
+  contentBorderRadius: '3px',
+  contentColor: siteVars.bodyColor,
+  contentBackgroundColor: siteVars.bodyBackground,
 })

From 6be1f248529d71913f8a4f850256b33687609aaa Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 12 Apr 2019 14:51:10 +0300
Subject: [PATCH 13/15] rework border

---
 .../Popup/Types/PopupExamplePointing.shorthand.tsx    | 11 ++++++++++-
 .../teams/components/Popup/popupContentStyles.ts      |  2 ++
 .../src/themes/teams/components/Popup/popupStyles.ts  |  1 -
 .../themes/teams/components/Popup/popupVariables.ts   |  2 --
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx
index 0825374784..9283c99c19 100644
--- a/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx
@@ -4,7 +4,16 @@ import { Button, Grid, Popup } from '@stardust-ui/react'
 const PopupWithButton = props => (
   <Popup
     align={props.align}
-    content="A popup with a pointer."
+    content={{
+      content: (
+        <>
+          <p>A popup with a pointer.</p>
+          <p>
+            Is aligned to <code>{props.align}</code>.
+          </p>
+        </>
+      ),
+    }}
     pointing
     position={props.position}
     trigger={
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index b6f6d1951c..8249c2cf84 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -57,7 +57,9 @@ const getPointerStyles = (
 
 const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupContentVariables> = {
   root: ({ props: p, theme: t, variables: v }): ICSSInJSStyle => ({
+    borderRadius: v.borderRadius,
     display: 'block',
+
     ...(p.pointing && getPointerStyles(v, t.rtl, p.placement).root),
   }),
   pointer: ({ props: p, theme: t, variables: v }): ICSSInJSStyle => ({
diff --git a/packages/react/src/themes/teams/components/Popup/popupStyles.ts b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
index 4a59318bef..1f914b4e4b 100644
--- a/packages/react/src/themes/teams/components/Popup/popupStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupStyles.ts
@@ -9,7 +9,6 @@ const popupStyles: ComponentSlotStylesInput<PopupProps, PopupVariables> = {
     zIndex: v.zIndex,
     position: 'absolute',
     textAlign: 'left',
-    borderRadius: v.contentBorderRadius,
     color: v.contentColor,
     background: v.contentBackgroundColor,
   }),
diff --git a/packages/react/src/themes/teams/components/Popup/popupVariables.ts b/packages/react/src/themes/teams/components/Popup/popupVariables.ts
index 6e21ebccc6..3d4a031aa6 100644
--- a/packages/react/src/themes/teams/components/Popup/popupVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupVariables.ts
@@ -1,13 +1,11 @@
 export interface PopupVariables {
   zIndex: number
-  contentBorderRadius: string
   contentColor: string
   contentBackgroundColor: string
 }
 
 export default (siteVars: any): PopupVariables => ({
   zIndex: 1000,
-  contentBorderRadius: '3px',
   contentColor: siteVars.bodyColor,
   contentBackgroundColor: siteVars.bodyBackground,
 })

From 2cacc2be7eeb14248b1d360634ed79cb8c780da0 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 12 Apr 2019 15:39:21 +0300
Subject: [PATCH 14/15] replace padding with margin

---
 .../teams/components/Popup/popupContentStyles.ts | 16 ++++++++--------
 .../components/Popup/popupContentVariables.ts    |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index 8249c2cf84..fa3505d33b 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -18,33 +18,33 @@ const getPointerStyles = (
 
   const rootStyles = {
     top: {
-      paddingBottom: v.pointerPadding,
+      marginBottom: v.pointerMargin,
     },
     right: {
-      paddingLeft: v.pointerPadding,
+      marginLeft: v.pointerMargin,
     },
     bottom: {
-      paddingTop: v.pointerPadding,
+      marginTop: v.pointerMargin,
     },
     left: {
-      paddingRight: v.pointerPadding,
+      marginRight: v.pointerMargin,
     },
   }
   const pointerStyles = {
     top: {
-      bottom: v.pointerOffset,
+      bottom: `-${v.pointerOffset}`,
       transform: 'rotate(45deg)',
     },
     right: {
-      left: v.pointerOffset,
+      left: `-${v.pointerOffset}`,
       transform: 'rotate(135deg)',
     },
     bottom: {
-      top: v.pointerOffset,
+      top: `-${v.pointerOffset}`,
       transform: 'rotate(-135deg)',
     },
     left: {
-      right: v.pointerOffset,
+      right: `-${v.pointerOffset}`,
       transform: 'rotate(-45deg)',
     },
   }
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index 8e2655fc74..7a9a20641d 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -7,7 +7,7 @@ export interface PopupContentVariables {
   padding: string
 
   pointerBackgroundColor: string
-  pointerPadding: string
+  pointerMargin: string
   pointerOffset: string
   pointerSize: string
 }
@@ -21,7 +21,7 @@ export default (siteVars: any): PopupContentVariables => {
 
     pointerBackgroundColor: siteVars.bodyBackground,
     pointerOffset: pxToRem(5),
-    pointerPadding: pxToRem(10),
+    pointerMargin: pxToRem(10),
     pointerSize: pxToRem(10),
   }
 }

From e89fc092a611e62837fc735bbeee70c2159d7692 Mon Sep 17 00:00:00 2001
From: Oleksandr Fediashov <olfedias@microsoft.com>
Date: Fri, 12 Apr 2019 16:32:46 +0300
Subject: [PATCH 15/15] fix backrground

---
 .../themes/teams/components/Popup/popupContentStyles.ts    | 7 -------
 .../themes/teams/components/Popup/popupContentVariables.ts | 2 --
 2 files changed, 9 deletions(-)

diff --git a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
index fa3505d33b..aee6ef5ea1 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentStyles.ts
@@ -74,13 +74,6 @@ const popupContentStyles: ComponentSlotStylesInput<PopupContentProps, PopupConte
     width: v.pointerSize,
 
     ...getPointerStyles(v, t.rtl, p.placement).pointer,
-
-    ':before': {
-      content: '" "',
-      display: 'block',
-      borderTop: `${v.pointerSize} solid transparent`,
-      borderRight: `${v.pointerSize} solid ${v.pointerBackgroundColor}`,
-    },
   }),
   content: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'block',
diff --git a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
index 7a9a20641d..6cb763ed40 100644
--- a/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
+++ b/packages/react/src/themes/teams/components/Popup/popupContentVariables.ts
@@ -6,7 +6,6 @@ export interface PopupContentVariables {
   borderSize: string
   padding: string
 
-  pointerBackgroundColor: string
   pointerMargin: string
   pointerOffset: string
   pointerSize: string
@@ -19,7 +18,6 @@ export default (siteVars: any): PopupContentVariables => {
     borderSize: '1px',
     padding: `${pxToRem(10)} ${pxToRem(14)}`,
 
-    pointerBackgroundColor: siteVars.bodyBackground,
     pointerOffset: pxToRem(5),
     pointerMargin: pxToRem(10),
     pointerSize: pxToRem(10),