From 013179eebc92d7309722b809572f0898e6c8b3f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Siatka?= <lukasz.siatka@grafana.com>
Date: Thu, 17 Oct 2019 01:34:15 +0200
Subject: [PATCH] Explore: fixes explore responsive button ref

---
 .../app/features/explore/ResponsiveButton.tsx | 40 ++++++++++++-------
 1 file changed, 26 insertions(+), 14 deletions(-)

diff --git a/public/app/features/explore/ResponsiveButton.tsx b/public/app/features/explore/ResponsiveButton.tsx
index 2d11e5adc76..078dfc5cdfa 100644
--- a/public/app/features/explore/ResponsiveButton.tsx
+++ b/public/app/features/explore/ResponsiveButton.tsx
@@ -5,7 +5,7 @@ export enum IconSide {
   right = 'right',
 }
 
-type Props = {
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
   splitted: boolean;
   title: string;
   onClick: () => void;
@@ -13,29 +13,41 @@ type Props = {
   iconClassName?: string;
   iconSide?: IconSide;
   disabled?: boolean;
-};
+}
 
 function formatBtnTitle(title: string, iconSide?: string): string {
   return iconSide === IconSide.left ? '\xA0' + title : iconSide === IconSide.right ? title + '\xA0' : title;
 }
 
-export const ResponsiveButton = forwardRef<HTMLButtonElement, Props>((props, ref) => {
+export const ResponsiveButton = forwardRef<HTMLDivElement, Props>((props, ref) => {
   const defaultProps = {
     iconSide: IconSide.left,
   };
+
   props = { ...defaultProps, ...props };
-  const { title, onClick, buttonClassName, iconClassName, splitted, iconSide, disabled } = props;
+  const {
+    title,
+    onClick,
+    buttonClassName,
+    iconClassName,
+    splitted,
+    iconSide,
+    disabled,
+    onMouseEnter,
+    onMouseLeave,
+  } = props;
 
   return (
-    <button
-      className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`}
-      onClick={onClick}
-      disabled={disabled || false}
-      ref={ref}
-    >
-      {iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName}`} /> : null}
-      <span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
-      {iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName}`} /> : null}
-    </button>
+    <div ref={ref} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <button
+        className={`btn navbar-button ${buttonClassName ? buttonClassName : ''}`}
+        onClick={onClick}
+        disabled={disabled || false}
+      >
+        {iconClassName && iconSide === IconSide.left ? <i className={`${iconClassName}`} /> : null}
+        <span className="btn-title">{!splitted ? formatBtnTitle(title, iconSide) : ''}</span>
+        {iconClassName && iconSide === IconSide.right ? <i className={`${iconClassName}`} /> : null}
+      </button>
+    </div>
   );
 });