From f71d4490794c7fba5aae2cf95183f6fa65d8f781 Mon Sep 17 00:00:00 2001
From: Chi Vinh Le <vinh@wikiwi.io>
Date: Mon, 16 Jul 2018 18:05:19 -0300
Subject: [PATCH] Disable hover styling for touches

---
 .../client/ui/components/BaseButton/BaseButton.tsx  | 13 ++++++++++---
 src/core/client/ui/components/Button/Button.tsx     |  2 +-
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/core/client/ui/components/BaseButton/BaseButton.tsx b/src/core/client/ui/components/BaseButton/BaseButton.tsx
index 1d97a9d0c..eb12d9826 100644
--- a/src/core/client/ui/components/BaseButton/BaseButton.tsx
+++ b/src/core/client/ui/components/BaseButton/BaseButton.tsx
@@ -2,7 +2,7 @@ import cn from "classnames";
 import React from "react";
 import { ButtonHTMLAttributes, StatelessComponent } from "react";
 
-import { withKeyboardFocus, withStyles } from "talk-ui/hocs";
+import { withKeyboardFocus, withMouseHover, withStyles } from "talk-ui/hocs";
 import { PropTypesOf } from "talk-ui/types";
 
 import * as styles from "./BaseButton.css";
@@ -18,7 +18,10 @@ interface InnerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   classes: typeof styles;
 
   /** This is passed by the `withKeyboardFocus` HOC */
-  keyboardFocus: boolean;
+  keyboardFocus?: boolean;
+
+  /** This is passed by the `withMouseHover` HOC */
+  mouseHover?: boolean;
 }
 
 /**
@@ -30,6 +33,7 @@ const BaseButton: StatelessComponent<InnerProps> = ({
   className,
   classes,
   keyboardFocus,
+  mouseHover,
   type: typeProp,
   ...rest
 }) => {
@@ -51,11 +55,14 @@ const BaseButton: StatelessComponent<InnerProps> = ({
 
   const rootClassName = cn(classes.root, className, {
     [classes.keyboardFocus]: keyboardFocus,
+    [classes.mouseHover]: mouseHover,
   });
 
   return <Element {...rest} className={rootClassName} />;
 };
 
-const enhanced = withStyles(styles)(withKeyboardFocus(BaseButton));
+const enhanced = withStyles(styles)(
+  withMouseHover(withKeyboardFocus(BaseButton))
+);
 export type BaseButtonProps = PropTypesOf<typeof enhanced>;
 export default enhanced;
diff --git a/src/core/client/ui/components/Button/Button.tsx b/src/core/client/ui/components/Button/Button.tsx
index dadb7a35d..7e905583e 100644
--- a/src/core/client/ui/components/Button/Button.tsx
+++ b/src/core/client/ui/components/Button/Button.tsx
@@ -52,7 +52,7 @@ class Button extends React.Component<InnerProps> {
     return (
       <BaseButton
         className={rootClassName}
-        classes={pick(classes, "keyboardFocus")}
+        classes={pick(classes, "keyboardFocus", "mouseHover")}
         {...rest}
       />
     );