fix(core-button): no hover on touch screens

Author: cianfoley-nearform

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)': {

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;