fix(popup): ref error and make sure that all .popup-container .popup …

…get their position fixed

- also ensure position is updated when placement is changed so that storybook example
  functions correctly when interacting with the position controls

src/ui/Popup/Popup.jsx

@@ -54,6 +54,18 @@ class Popup extends React.Component {
     this.popper && this.popper.destroy();
   }
 
+  componentWillUpdate(nextProps, nextState, nextContext) {
+    const position = nextProps.position;
+    if (
+      position &&
+      this.popper.state.placement !== positionsMapping[position]
+    ) {
+      this.popper.setOptions({
+        placement: positionsMapping[position] || 'bottom-end',
+      });
+    }
+  }
+
   togglePopup() {
     this.setState(
       (state) => {
@@ -82,11 +94,14 @@ class Popup extends React.Component {
     const onEvent = 'on' + event.charAt(0).toUpperCase() + event.slice(1);
     return (
       <React.Fragment>
-        {trigger &&
-          React.cloneElement(trigger, {
-            [onEvent]: this.togglePopup,
-            ref: this.triggerRef,
-          })}
+        {trigger && (
+          <div className="popup-trigger" ref={this.triggerRef}>
+            {React.cloneElement(trigger, {
+              [onEvent]: this.togglePopup,
+              ref: this.triggerRef,
+            })}
+          </div>
+        )}
 
         <div className="popup-container" ref={this.popupRef}>
           {this.state.isOpen && (

src/ui/Popup/Popup.stories.jsx

@@ -59,7 +59,7 @@ export default {
 };
 
 export const ButtonPopup = (args) => (
-  <Segment placeholder>
+  <Segment placeholder className={'flex-row flex-items-center'}>
     <Popup
       {...args}
       trigger={

theme/themes/eea/extras/banner.less

@@ -110,7 +110,6 @@
 /*Share Popup*/
 
 .ui.popup.share-popup {
-  position: initial; // without position initial popper cannot correctly place popup
   min-width: @sharePopupMinWidth;
   padding: @sharePopupPadding;
   filter: @sharePopupFilter;

theme/themes/eea/globals/utilities.less

@@ -27,12 +27,21 @@ h1, h2, h3, h4, h5, h6, p, span, .header {
   z-index: 0;
 }
 
+/* Layout */
 // Flexbox
 .d-flex { display: flex !important; }
+.flex-row { flex-direction: row !important; }
 .flex-items-start { align-items: flex-start !important; }
 .flex-items-end { align-items: flex-end !important; }
 .flex-items-center { align-items: center !important; }
 
+// Columns
+each(range(2, 6), {
+  .has--@{value}--columns {
+    columns: @value;
+  }
+});
+
 // Text
 .text-left,
 .has--text--left,

theme/themes/eea/modules/popup.overrides

@@ -81,3 +81,7 @@
 .with-popup {
   cursor: @cursor;
 }
+
+.popup-container .popup {
+  position: initial; // without position initial popper cannot correctly place popup
+}