fix(sliding): fix core gesture logic + priority configuration

fixes #14763

core/src/components/button/button.scss

@@ -123,10 +123,13 @@
 
   transition: var(--transition);
 
+
   border-width: var(--border-width);
   border-style: var(--border-style);
   border-color: var(--border-color);
 
+  outline: none;
+
   background: var(--background);
 
   line-height: 1;
@@ -154,11 +157,6 @@
 //   opacity: var(--opacity-hover);
 // }
 
-.button-native:active,
-.button-native:focus {
-  outline: none;
-}
-
 .button-inner {
   display: flex;
 

core/src/components/item-option/item-option.ios.scss

@@ -5,9 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$item-option-button-ios-background-color};
-  --ion-color-contrast: #{$item-option-button-ios-text-color};
-
   font-size: $item-option-button-ios-font-size;
 }
 

core/src/components/item-option/item-option.md.scss

@@ -5,9 +5,6 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$item-option-button-md-background-color};
-  --ion-color-contrast: #{$item-option-button-md-text-color};
-
   font-size: $item-option-button-md-font-size;
   font-weight: 500;
 

core/src/components/item-option/item-option.scss

@@ -4,10 +4,14 @@
 // --------------------------------------------------
 
 :host {
+  --ion-color-base: #{ion-color(primary, base)};
+  --ion-color-contrast: #{ion-color(primary, contrast)};
+
   color: #{current-color(contrast)};
 }
 
 .item-option-native {
+  @include text-inherit();
   @include padding(0, .7em);
 
   width: 100%;
@@ -18,15 +22,13 @@
   outline: none;
 
   background: #{current-color(base)};
-  color: inherit;
 
-  font-family: inherit;
+  cursor: pointer;
-  font-size: inherit;
-  font-weight: inherit;
-
-  letter-spacing: inherit;
   appearance: none;
+}
 
+.item-option-native:hover {
+  opacity: 0.8;
 }
 
 .item-option-button-inner {

core/src/components/item-options/item-options.scss

@@ -35,6 +35,7 @@ ion-item-options {
 
   font-size: 14px;
 
+  user-select: none;
   z-index: $z-index-item-options;
 
   &.hydrated {

core/src/components/item-sliding/item-sliding.scss

@@ -14,6 +14,10 @@ ion-item-sliding {
   user-select: none;
 }
 
+ion-item-sliding .item {
+  user-select: none;
+}
+
 .item-sliding-active-slide .item {
   position: relative;
 

core/src/components/item-sliding/item-sliding.tsx

@@ -62,7 +62,7 @@ export class ItemSliding {
       el: this.el,
       queue: this.queue,
       gestureName: 'item-swipe',
-      gesturePriority: -10,
+      gesturePriority: 20,
       threshold: 5,
       canStart: this.canStart.bind(this),
       onStart: this.onDragStart.bind(this),
@@ -152,7 +152,7 @@ export class ItemSliding {
       this.closeOpened();
       return false;
     }
-    return true;
+    return !!(this.rightOptions || this.leftOptions);
   }
 
   private onDragStart() {
@@ -295,7 +295,7 @@ export class ItemSliding {
 }
 
 /** @hidden */
-export function swipeShouldReset(isResetDirection: boolean, isMovingFast: boolean, isOnResetZone: boolean): boolean {
+function swipeShouldReset(isResetDirection: boolean, isMovingFast: boolean, isOnResetZone: boolean): boolean {
   // The logic required to know when the sliding item should close (openAmount=0)
   // depends on three booleans (isCloseDirection, isMovingFast, isOnCloseZone)
   // and it ended up being too complicated to be written manually without errors

core/src/components/item-sliding/test/basic/index.html

@@ -26,6 +26,12 @@
 
     <ion-content>
 
+      <ion-refresher id="refresher">
+        <ion-refresher-content pulling-text="Pull to refresh..." refreshing-spinner="bubbles" refreshing-text="Refreshing...">
+        </ion-refresher-content>
+      </ion-refresher>
+
+
       <div padding>
         <ion-button expand="block" onclick="toggleSliding()">Toggle sliding</ion-button>
         <ion-button expand="block" onclick="toggleDynamicOptions()">Toggle Dynamic Options</ion-button>

core/src/components/item/item.scss

@@ -84,6 +84,9 @@
 
 button, a {
   cursor: pointer;
+  user-select: none;
+
+  -webkit-user-drag: none;
 }
 
 .item-state {

core/src/components/menu/menu.tsx

@@ -179,7 +179,7 @@ export class Menu {
       el: this.doc,
       queue: this.queue,
       gestureName: 'menu-swipe',
-      gesturePriority: 10,
+      gesturePriority: 40,
       threshold: 10,
       canStart: this.canStart.bind(this),
       onWillStart: this.onWillStart.bind(this),

core/src/components/nav/nav.tsx

@@ -114,7 +114,7 @@ export class Nav implements NavOutlet {
       el: this.win.document.body,
       queue: this.queue,
       gestureName: 'goback-swipe',
-      gesturePriority: 10,
+      gesturePriority: 30,
       threshold: 10,
       canStart: this.canSwipeBack.bind(this),
       onStart: this.swipeBackStart.bind(this),

core/src/components/picker-column/picker-column.tsx

@@ -58,7 +58,7 @@ export class PickerColumnCmp {
       el: this.el,
       queue: this.queue,
       gestureName: 'picker-swipe',
-      gesturePriority: 10,
+      gesturePriority: 100,
       threshold: 0,
       onStart: this.onDragStart.bind(this),
       onMove: this.onDragMove.bind(this),

core/src/components/range/range.tsx

@@ -148,7 +148,7 @@ export class Range implements BaseInput {
       el: this.rangeSlider!,
       queue: this.queue,
       gestureName: 'range',
-      gesturePriority: 30,
+      gesturePriority: 100,
       threshold: 0,
       onStart: this.onDragStart.bind(this),
       onMove: this.onDragMove.bind(this),
@@ -391,7 +391,7 @@ export class Range implements BaseInput {
   }
 }
 
-export function ratioToValue(
+function ratioToValue(
   ratio: number,
   min: number,
   max: number,
@@ -404,6 +404,6 @@ export function ratioToValue(
   return clamp(min, value, max);
 }
 
-export function valueToRatio(value: number, min: number, max: number): number {
+function valueToRatio(value: number, min: number, max: number): number {
   return clamp(0, (value - min) / (max - min), 1);
 }

core/src/components/refresher/refresher.tsx

@@ -108,7 +108,7 @@ export class Refresher {
       gestureName: 'refresher',
       gesturePriority: 10,
       direction: 'y',
-      threshold: 5,
+      threshold: 10,
       passive: false,
       canStart: this.canStart.bind(this),
       onStart: this.onStart.bind(this),
@@ -175,6 +175,8 @@ export class Refresher {
   }
 
   private onStart() {
+    console.log('start');
+
     this.progress = 0;
     this.state = RefresherState.Inactive;
   }
@@ -341,6 +343,7 @@ export class Refresher {
 
   hostData() {
     return {
+      slot: 'fixed',
       class: {
         ...createThemedClasses(this.mode, 'refresher'),
 

core/src/components/reorder-group/reorder-group.tsx

@@ -55,7 +55,7 @@ export class ReorderGroup {
       el: this.doc.body,
       queue: this.queue,
       gestureName: 'reorder',
-      gesturePriority: 30,
+      gesturePriority: 90,
       disableScroll: true,
       threshold: 0,
       direction: 'y',

core/src/components/toggle/toggle.tsx

@@ -116,7 +116,7 @@ export class Toggle implements CheckboxInput {
       el: this.el,
       queue: this.queue,
       gestureName: 'toggle',
-      gesturePriority: 30,
+      gesturePriority: 100,
       threshold: 0,
       onStart: this.onDragStart.bind(this),
       onMove: this.onDragMove.bind(this),

core/src/utils/gesture/gesture.ts

@@ -111,13 +111,11 @@ export function createGesture(config: GestureConfig): Gesture {
     // gesture is currently being detected
     calcGestureData(detail, ev);
     if (pan.detect(detail.currentX, detail.currentY)) {
-      if (pan.isGesture()) {
+      if (!pan.isGesture() || !tryToCapturePan()) {
-        if (!tryToCapturePan()) {
         abortGesture();
       }
     }
   }
-  }
 
   function fireOnMove() {
     // Since fireOnMove is called inside a RAF, onEnd() might be called,