feat(Popup): add vertical offset

src/collections/Message/Message.d.ts

@@ -9,7 +9,7 @@ import { default as MessageList } from './MessageList';
 export interface MessageProps {
   [key: string]: any;
 
-	/** An element type to render as (string or function). */
+  /** An element type to render as (string or function). */
   as?: any;
 
   /** A message can be formatted to attach itself to other content. */

src/modules/Popup/Popup.d.ts

@@ -35,7 +35,7 @@ export interface PopupProps extends PortalProps {
   inverted?: boolean;
 
   /** Horizontal offset in pixels to be applied to the popup. */
-  offset?: number;
+  offset?: number | Array<number>;
 
   /** Event triggering the popup. */
   on?: 'hover' | 'click' | 'focus';

src/modules/Popup/Popup.js

@@ -68,7 +68,10 @@ export default class Popup extends Component {
     inverted: PropTypes.bool,
 
     /** Horizontal offset in pixels to be applied to the Popup. */
-    offset: PropTypes.number,
+    offset: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.number),
+      PropTypes.number,
+    ]),
 
     /** Event triggering the popup. */
     on: PropTypes.oneOf(['hover', 'click', 'focus']),
@@ -126,6 +129,7 @@ export default class Popup extends Component {
 
   static defaultProps = {
     position: 'top left',
+    offset: 0,
     on: 'hover',
   }
 
@@ -139,13 +143,32 @@ export default class Popup extends Component {
 
   state = {}
 
+  computeHorizontalOffset = ({ left, right }, offset) => {
+    if (_.isNumber(right)) return { left, right: right - offset }
+    return { right, left: left - offset }
+  }
+
+  computeVerticalOffset = ({ bottom, top }, offset) => {
+    if (_.isNumber(top)) return { bottom, top: top + offset }
+    return { top, bottom: bottom + offset }
+  }
+
+  computeOffset = style => {
+    const { offset } = this.props
+    const [horizontal, vertical] = _.isNumber(offset) ? [offset, 0] : offset
+
+    return {
+      ...this.computeHorizontalOffset(style, horizontal),
+      ...this.computeVerticalOffset(style, vertical),
+    }
+  }
+
   computePopupStyle(positions) {
     const style = { position: 'absolute' }
 
     // Do not access window/document when server side rendering
     if (!isBrowser) return style
 
-    const { offset } = this.props
     const { pageYOffset, pageXOffset } = window
     const { clientWidth, clientHeight } = document.documentElement
 
@@ -180,15 +203,7 @@ export default class Popup extends Component {
       }
     }
 
-    if (offset) {
-      if (_.isNumber(style.right)) {
-        style.right -= offset
-      } else {
-        style.left -= offset
-      }
-    }
-
-    return style
+    return { ...style, ...this.computeOffset(style) }
   }
 
   // check if the style would display

test/specs/modules/Popup/Popup-test.js

@@ -78,8 +78,8 @@ describe('Popup', () => {
     assertInBody('.ui.popup.visible.some-class')
   })
 
-  describe('offest', () => {
-    it('accepts an offest to the left', () => {
+  describe('offset', () => {
+    it('accepts an offset as number', () => {
       wrapperMount(
         <Popup
           offset={50}
@@ -92,11 +92,12 @@ describe('Popup', () => {
       wrapper.find('button').simulate('click')
       assertInBody('.ui.popup.visible')
     })
-    it('accepts an offest to the right', () => {
+
+    it('accepts an offset as array', () => {
       wrapperMount(
         <Popup
-          offset={50}
-          position='bottom left'
+          offset={[50, 50]}
+          position='bottom right'
           content='foo'
           trigger={<button>foo</button>}
         />