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

telus · Mar 22, 2021 · be8cb85 · be8cb85
1 parent fa71cd1
commit be8cb85
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git 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
@@ -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;