[Button, Link] Add touch action property (#11845)

Micro optimization: removes the browser delay in waiting for a potential double tap. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action#manipulation
Shopify · Apr 5, 2024 · 8145d73 · 8145d73
1 parent 937c618
commit 8145d73
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/.changeset/wicked-ears-matter.md b/.changeset/wicked-ears-matter.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added `touch-action: manipulation` to `Button` and `Link`
diff --git a/polaris-react/src/components/Button/Button.module.css b/polaris-react/src/components/Button/Button.module.css
@@ -36,6 +36,7 @@
   color: var(--pc-button-color);
   cursor: pointer;
   user-select: none;
+  touch-action: manipulation;
   -webkit-tap-highlight-color: transparent;
 }
 

diff --git a/polaris-react/src/components/Link/Link.module.css b/polaris-react/src/components/Link/Link.module.css
@@ -10,6 +10,7 @@
   color: var(--p-color-text-link);
   text-decoration: underline;
   cursor: pointer;
+  touch-action: manipulation;
 
   &:hover {
     color: var(--p-color-text-link-hover);