Merge pull request #187 from Shopify/touch-sensor

Touch sensor scrolling bug
Shopify · Apr 2, 2018 · 8f672b4 · 8f672b4
2 parents 65a53c2 + eb4d73e
commit 8f672b4
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 51 deletions.
diff --git a/examples/src/components/StackedList/variants.scss b/examples/src/components/StackedList/variants.scss
@@ -45,32 +45,6 @@
       opacity: 0.1;
     }
   }
-
-  // Size variants
-
-  .StackedListWrapper--sizeMedium & {
-    @include stacked-list-scroll-height(
-      stacked-list-item(medium), 3
-    );
-
-    @media screen and (min-width: get-breakpoint(desktop)) {
-      @include stacked-list-scroll-height(
-        stacked-list-item(medium, desktop), 3
-      );
-    }
-  }
-
-  .StackedListWrapper--sizeLarge & {
-    @include stacked-list-scroll-height(
-      stacked-list-item(large), 3
-    );
-
-    @media screen and (min-width: get-breakpoint(desktop)) {
-      @include stacked-list-scroll-height(
-        stacked-list-item(large, desktop), 3
-      );
-    }
-  }
 }
 
 .StackedList--hasScroll {

diff --git a/examples/src/content/Sortable/SimpleList/SimpleList.html b/examples/src/content/Sortable/SimpleList/SimpleList.html
@@ -2,18 +2,24 @@
 
 {% macro render(id) %}
   <section id="{{ id }}" class="{{ id }}">
-    <article class="StackedListWrapper">
+    <article class="StackedListWrapper StackedListWrapper--hasScrollIndicator">
       <header class="StackedListHeader">
         <h3 class="Heading Heading--size3 Heading--colorWhite">Simple list</h3>
       </header>
 
-      <ul class="StackedList">
-        {{ StackedListItem.render('item one',   {index: 1, draggable: true}) }}
-        {{ StackedListItem.render('item two',   {index: 2, draggable: true}) }}
-        {{ StackedListItem.render('item three', {index: 3, draggable: true}) }}
-        {{ StackedListItem.render('item four',  {index: 4, draggable: true}) }}
-        {{ StackedListItem.render('item five',  {index: 5}) }}
-        {{ StackedListItem.render('item six',   {index: 6, draggable: true}) }}
+      <ul class="StackedList StackedList--hasScroll">
+        {{ StackedListItem.render('item one',    {index: 1, draggable: true}) }}
+        {{ StackedListItem.render('item two',    {index: 2, draggable: true}) }}
+        {{ StackedListItem.render('item three',  {index: 3, draggable: true}) }}
+        {{ StackedListItem.render('item four',   {index: 4, draggable: true}) }}
+        {{ StackedListItem.render('item five',   {index: 5}) }}
+        {{ StackedListItem.render('item six',    {index: 6, draggable: true}) }}
+        {{ StackedListItem.render('item seven',  {index: 7, draggable: true}) }}
+        {{ StackedListItem.render('item eight',  {index: 8}) }}
+        {{ StackedListItem.render('item nine',   {index: 9}) }}
+        {{ StackedListItem.render('item ten',    {index: 10, draggable: true}) }}
+        {{ StackedListItem.render('item eleven', {index: 11}) }}
+        {{ StackedListItem.render('item twelve', {index: 12, draggable: true}) }}
       </ul>
     </article>
   </section>

diff --git a/examples/src/content/Sortable/SimpleList/SimpleList.scss b/examples/src/content/Sortable/SimpleList/SimpleList.scss
@@ -8,20 +8,4 @@
 
 .SimpleList {
   @include centered-width(columns(5));
-
-  .StackedListWrapper {
-    .StackedListHeader {
-      @media screen and (min-width: get-breakpoint(desktop)) {
-        display: flex;
-        align-items: center;
-        height: stacked-list-item(medium);
-      }
-    }
-
-    .StackedListContent {
-      @media screen and (min-width: get-breakpoint(desktop)) {
-        height: stacked-list-item(medium);
-      }
-    }
-  }
 }
diff --git a/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js b/src/Draggable/Sensors/TouchSensor/tests/TouchSensor.test.js
@@ -94,7 +94,7 @@ describe('TouchSensor', () => {
     expect(dragFlow).toHaveTriggeredSensorEvent('drag:stop');
   });
 
-  it('prevents `drag:start` when holding finger on none draggable element', () => {
+  it('prevents `drag:start` when trying to drag a none draggable element', () => {
     function dragFlow() {
       touchStart(document.body);
       waitForDragDelay();