From be8cb8566bdee071006ff7b2ee4b2900b0a74832 Mon Sep 17 00:00:00 2001
From: Cian Foley <cian.foley@nearform.com>
Date: Fri, 29 Jan 2021 16:43:37 +0000
Subject: [PATCH] fix(core-button): no hover on touch screens

---
 packages/Button/Button.jsx                    |  7 ++++++
 .../__snapshots__/Button.spec.jsx.snap        | 24 +++++++++++++++++++
 2 files changed, 31 insertions(+)

diff --git a/packages/Button/Button.jsx b/packages/Button/Button.jsx
index 16133be8c8..b3dd930e58 100644
--- a/packages/Button/Button.jsx
+++ b/packages/Button/Button.jsx
@@ -128,6 +128,13 @@ const getVariant = ({ variant, rank }) => {
     border,
     transition,
     '&:hover': hover,
+    '@media (hover: none)': {
+      '&:hover': {
+        boxShadow: 'none',
+        backgroundColor,
+        color,
+      },
+    },
     '&:active': active,
     '&:focus': focus,
     '@media (prefers-reduced-motion: reduce)': {
diff --git a/packages/Button/__tests__/__snapshots__/Button.spec.jsx.snap b/packages/Button/__tests__/__snapshots__/Button.spec.jsx.snap
index 6438b970be..ed5b0854c1 100644
--- a/packages/Button/__tests__/__snapshots__/Button.spec.jsx.snap
+++ b/packages/Button/__tests__/__snapshots__/Button.spec.jsx.snap
@@ -66,6 +66,14 @@ exports[`Button can be presented as one of the allowed variants 1`] = `
   }
 }
 
+@media (hover:none) {
+  .c0:hover {
+    box-shadow: none;
+    background-color: #4b286d;
+    color: #fff;
+  }
+}
+
 @media (prefers-reduced-motion:reduce) {
   .c0 {
     -webkit-transition: none !important;
@@ -164,6 +172,14 @@ exports[`Button can be presented as one of the new allowed variants 1`] = `
   }
 }
 
+@media (hover:none) {
+  .c0:hover {
+    box-shadow: none;
+    background-color: #fff;
+    color: #2B8000;
+  }
+}
+
 @media (prefers-reduced-motion:reduce) {
   .c0 {
     -webkit-transition: none !important;
@@ -249,6 +265,14 @@ exports[`Button renders 1`] = `
   }
 }
 
+@media (hover:none) {
+  .c0:hover {
+    box-shadow: none;
+    background-color: #2B8000;
+    color: #fff;
+  }
+}
+
 @media (prefers-reduced-motion:reduce) {
   .c0 {
     -webkit-transition: none !important;