fix: include touch-action rule for draggable content

adobe · May 12, 2021 · 3f507e6 · 3f507e6
1 parent 96bd01a
commit 3f507e6
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 2 deletions.
diff --git a/packages/color-area/src/color-area.css b/packages/color-area/src/color-area.css
@@ -12,6 +12,10 @@ governing permissions and limitations under the License.
 
 @import './spectrum-color-area.css';
 
+:host {
+    touch-action: none;
+}
+
 :host:before {
     pointer-events: none;
 }

diff --git a/packages/color-handle/src/color-handle.css b/packages/color-handle/src/color-handle.css
@@ -11,3 +11,7 @@ governing permissions and limitations under the License.
 */
 
 @import './spectrum-color-handle.css';
+
+:host {
+    touch-action: none;
+}
diff --git a/packages/color-slider/src/color-slider.css b/packages/color-slider/src/color-slider.css
@@ -18,6 +18,14 @@ governing permissions and limitations under the License.
         rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%;
 }
 
+:host(:not([vertical])) {
+    touch-action: pan-y;
+}
+
+:host([vertical]) {
+    touch-action: pan-x;
+}
+
 .gradient {
     overflow: hidden;
 }

diff --git a/packages/color-wheel/src/color-wheel.css b/packages/color-wheel/src/color-wheel.css
@@ -11,3 +11,7 @@ governing permissions and limitations under the License.
 */
 
 @import './spectrum-color-wheel.css';
+
+:host {
+    touch-action: none;
+}
diff --git a/packages/slider/src/slider.css b/packages/slider/src/slider.css
@@ -23,8 +23,8 @@ governing permissions and limitations under the License.
     outline-width: 0;
 }
 
-#handle {
-    touch-action: none;
+:host {
+    touch-action: pan-y;
 }
 
 .not-exact.ticks {
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,7 @@ governing permissions and limitations under the License. @@
     */
     @import './spectrum-color-handle.css';
+    :host {
+        touch-action: none;
+    }