fix: disable touch actions when pointer-events are disabled

salte-io · Aug 30, 2021 · 84f4e5e · 84f4e5e
1 parent cf60483
commit 84f4e5e
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 10 deletions.
diff --git a/stories/Dropdown.scss b/stories/Dropdown.scss
@@ -67,7 +67,7 @@
   }
 
   &:not(.visible) .list {
-    pointer-events: none;
+    @include interaction(false);
   }
 
   &.visible .list {

diff --git a/stories/Favorite.scss b/stories/Favorite.scss
@@ -17,14 +17,14 @@
   }
 
   > * {
-    pointer-events: none;
+    @include interaction(false);
   }
 
   .pseudoHover {
     @include absolute();
     @include transition(color);
+    @include interaction(false);
 
-    pointer-events: none;
     color: transparent;
   }
 
@@ -33,11 +33,12 @@
   }
 
   .fanfare {
+    @include interaction(false);
+
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%) scale(0.8);
-    pointer-events: none;
 
     width: 100px;
     height: 100px;

diff --git a/stories/Modal.scss b/stories/Modal.scss
@@ -11,13 +11,13 @@
 .modalContainer {
   @include fixed();
   @include transition(background-color);
+  @include interaction(false);
 
   z-index: 9999;
   display: flex;
   align-items: flex-start;
   justify-content: center;
   font-family: $font-family;
-  pointer-events: none;
   background-color: transparent;
 
   > .modal {
@@ -33,7 +33,8 @@
   }
 
   &.opened {
-    pointer-events: all;
+    @include interaction(true);
+
     background-color: $backdrop;
   }
 

diff --git a/stories/Spinner.scss b/stories/Spinner.scss
@@ -10,6 +10,7 @@
 
 .spinner {
   @include loading(true);
+  @include interaction(false);
 
   &.fit {
     @include absolute();
@@ -18,7 +19,6 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  pointer-events: none;
 
   &:after {
     content: '';

diff --git a/stories/Tooltip.scss b/stories/Tooltip.scss
@@ -3,13 +3,13 @@
 
 .tooltip {
   @include transition(opacity);
+  @include interaction(false);
 
   display: inline-flex;
   align-items: center;
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
-  pointer-events: none;
   white-space: nowrap;
   padding: 0 $padding;
   height: $min-component-size;

diff --git a/stories/_mixins.scss b/stories/_mixins.scss
@@ -1,5 +1,15 @@
 @use './variables' as *;
 
+@mixin interaction($enabled) {
+  @if $enabled {
+    pointer-events: all;
+    touch-action: auto;
+  } @else {
+    pointer-events: none;
+    touch-action: none;
+  }
+}
+
 @function fallback($values...) {
   @each $value in $values {
     @if $value != null {
@@ -35,9 +45,9 @@
   &::before {
     @include absolute(0);
     @include transition(opacity);
+    @include interaction(false);
 
     border-radius: inherit;
-    pointer-events: none;
     content: '';
     background-color: $hover;
     opacity: 0;
@@ -50,9 +60,10 @@
 }
 
 @mixin disabled() {
+  @include interaction(false);
+
   color: $primary-accent;
   background-color: $disabled;
-  pointer-events: none;
 }
 
 @mixin transition($properties...) {