From 9696796d6b166df3ac9bc145fe61868419651d49 Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Mon, 2 Dec 2019 09:47:44 +0200
Subject: [PATCH] popup compatible with native data props

---
 src/common/Popup/Popup.js           | 3 ++-
 storybook/stories/Popup/Popup.js    | 9 +++++++--
 storybook/stories/Popup/styles.less | 4 ++--
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/common/Popup/Popup.js b/src/common/Popup/Popup.js
index d7830965e..a9498f4d9 100644
--- a/src/common/Popup/Popup.js
+++ b/src/common/Popup/Popup.js
@@ -4,7 +4,7 @@ const classnames = require('classnames');
 const FocusLock = require('react-focus-lock').default;
 const styles = require('./styles');
 
-const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseRequest }) => {
+const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseRequest, ...props }) => {
     const labelRef = React.useRef(null);
     const [autoDirection, setAutoDirection] = React.useState(null);
     const menuOnMouseDown = React.useCallback((event) => {
@@ -59,6 +59,7 @@ const Popup = ({ open, direction, renderLabel, renderMenu, dataset, onCloseReque
         }
     }, [open]);
     return renderLabel({
+        ...props,
         ref: labelRef,
         className: styles['label-container'],
         children: open ?
diff --git a/storybook/stories/Popup/Popup.js b/storybook/stories/Popup/Popup.js
index 8e1f99515..66d0a27a3 100644
--- a/storybook/stories/Popup/Popup.js
+++ b/storybook/stories/Popup/Popup.js
@@ -22,12 +22,15 @@ storiesOf('Popup', module).add('Popup', () => {
         action('onCloseRequest')(event);
         closeMenu();
     }, []);
+    const domEventHandler = React.useCallback((event) => {
+        action('domEventHandler')(event.currentTarget.dataset);
+    }, []);
     return (
         <Popup
             open={menuOpen}
             direction={'bottom'}
-            renderLabel={({ ref, className, children }) => (
-                <Button ref={ref} className={classnames(className, styles['popup-label-container'])} onClick={popupLabelOnClick}>
+            renderLabel={({ className, children, ...props }) => (
+                <Button {...props} className={classnames(className, styles['popup-label-container'])} onClick={popupLabelOnClick}>
                     POPUP LABEL
                     {children}
                 </Button>
@@ -41,6 +44,8 @@ storiesOf('Popup', module).add('Popup', () => {
             )}
             dataset={{ prop: 'value' }}
             onCloseRequest={onCloseRequest}
+            data-prop={'data-value'}
+            onMouseEnter={domEventHandler}
         />
     );
 });
diff --git a/storybook/stories/Popup/styles.less b/storybook/stories/Popup/styles.less
index 82d1d09e2..2853b7210 100644
--- a/storybook/stories/Popup/styles.less
+++ b/storybook/stories/Popup/styles.less
@@ -13,7 +13,7 @@
     margin: 2rem;
     padding: 0 1.2rem;
     color: var(--color-surfacelighter);
-    background: var(--color-backgroundlight);
+    background: var(--color-secondarylight);
 
     .popup-menu-container {
         right: initial;
@@ -22,11 +22,11 @@
         .menu-container {
             width: 20rem;
             height: 20rem;
-            padding: 2rem;
             background: var(--color-surface);
             overflow-y: auto;
 
             .random-button {
+                margin: 2rem;
                 padding: 0.8rem;
                 background: var(--color-primary);
                 text-align: center;