feat(item-sliding): added velocity validation for open options

Author: os-davidlourenco

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

@@ -102,4 +102,4 @@
 
 :host(.item-option-expand-threshold) {
   filter: brightness(0.92);
-}
+}

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

@@ -2,8 +2,6 @@
 @use "../../themes/ionic/ionic.globals.scss" as globals;
 @import "../../themes/native/native.globals";
 
-
-
 // Transition utility classes
 .item-sliding-transition-open .item {
   transition: transform 250ms cubic-bezier(0.25, 1, 0.5, 1);
@@ -37,4 +35,4 @@ ion-item-option.item-sliding-expandable-width-back {
   z-index: $z-index-item-options + 1;
   pointer-events: none;
   will-change: transform;
-}
+}

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

@@ -10,4 +10,4 @@
   z-index: $z-index-item-options + 1;
   pointer-events: none;
   will-change: transform;
-}
+}

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

@@ -2,12 +2,12 @@
 @import "../../themes/native/native.globals";
 
 .item-sliding-active-slide .item {
-    position: relative;
-  
-    transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
-  
-    opacity: 1;
-    z-index: $z-index-item-options + 1;
-    pointer-events: none;
-    will-change: transform;
-  }
+  position: relative;
+
+  transition: transform 500ms cubic-bezier(0.36, 0.66, 0.04, 1);
+
+  opacity: 1;
+  z-index: $z-index-item-options + 1;
+  pointer-events: none;
+  will-change: transform;
+}

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

@@ -14,7 +14,8 @@ const ELASTIC_FACTOR = 0.55;
 const IONIC_ELASTIC_FACTOR = 0.15;
 const IONIC_SNAP_OPEN_RATIO = 0.4;
 const IONIC_EXPAND_TRIGGER = 40;
-const IONIC_VELOCITY_THRESHOLD = 400;
+const IONIC_FULL_SWIPE_VELOCITY_THRESHOLD = 400;
+const IONIC_OPEN_VELOCITY_THRESHOLD = 200;
 const IONIC_ACTION_BASE_WIDTH = 64;
 const IONIC_CONFIRM_PAUSE = 300;
 const FULL_SWIPE_TRANSITION_MS = 250;
@@ -499,11 +500,7 @@ export class ItemSliding implements ComponentInterface {
         ITEM_OPTION_EXPAND_THRESHOLD_CLASS
       );
 
-      this.setIonicExpandableWidth(
-        previousDirection,
-        this.getExpandableBaseWidth(previousDirection),
-        false
-      );
+      this.setIonicExpandableWidth(previousDirection, this.getExpandableBaseWidth(previousDirection), false);
       return;
     }
 
@@ -802,16 +799,20 @@ export class ItemSliding implements ComponentInterface {
     const optionsWidth = this.getOptionsWidthForDirection(activeDirection);
     const extraWidth = Math.max(0, Math.abs(this.openAmount) - optionsWidth);
     const hasExpandable = this.hasExpandableOptions(activeDirection === 'end' ? this.rightOptions : this.leftOptions);
-    const wasRevealed = Math.abs(this.initialOpenAmount) >= optionsWidth;
-
 
     const closeDirection =
-      activeDirection === 'end' ? velocityX > IONIC_VELOCITY_THRESHOLD : velocityX < -IONIC_VELOCITY_THRESHOLD;
+      activeDirection === 'end'
+        ? velocityX > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD
+        : velocityX < -IONIC_FULL_SWIPE_VELOCITY_THRESHOLD;
+
+    if (closeDirection) {
+      this.setOpenAmount(0, true);
+      return;
+    }
 
     if (
-      !closeDirection &&
       hasExpandable &&
-      (extraWidth >= IONIC_EXPAND_TRIGGER || (extraWidth > 0  && (wasRevealed && Math.abs(velocityX) > IONIC_VELOCITY_THRESHOLD)))
+      (extraWidth >= IONIC_EXPAND_TRIGGER || Math.abs(velocityX) > IONIC_FULL_SWIPE_VELOCITY_THRESHOLD)
     ) {
       this.animateIonicFullSwipe(activeDirection).catch(() => {
         if (this.gesture) {
@@ -821,18 +822,15 @@ export class ItemSliding implements ComponentInterface {
       return;
     }
 
-    if (closeDirection) {
-      this.setOpenAmount(0, true);
-      return;
-    }
+    const flickOpen =
+      activeDirection === 'end'
+        ? velocityX < -IONIC_OPEN_VELOCITY_THRESHOLD
+        : velocityX > IONIC_OPEN_VELOCITY_THRESHOLD;
 
+    const fullOpen = activeDirection === 'end' ? this.optsWidthRightSide : -this.optsWidthLeftSide;
     const openThreshold = optionsWidth * IONIC_SNAP_OPEN_RATIO;
-    const shouldSnapOpen = Math.abs(this.openAmount) > openThreshold;
-    const restingPoint = shouldSnapOpen
-      ? activeDirection === 'end'
-        ? this.optsWidthRightSide
-        : -this.optsWidthLeftSide
-      : 0;
+    const shouldSnapOpen = flickOpen || Math.abs(this.openAmount) > openThreshold;
+    const restingPoint = shouldSnapOpen ? fullOpen : 0;
 
     this.setOpenAmount(restingPoint, true);
   }
@@ -876,12 +874,12 @@ export class ItemSliding implements ComponentInterface {
     if (!this.item) {
       return;
     }
-  
+
     const { el } = this;
     const style = this.item.style;
     const previousOpenAmount = this.openAmount;
     this.openAmount = openAmount;
-  
+
     if (this.isIonicTheme()) {
       this.updateIonicExpandableFromOpenAmount(openAmount, isFinal, previousOpenAmount);
     }
@@ -894,7 +892,7 @@ export class ItemSliding implements ComponentInterface {
         this.el.classList.add('item-sliding-transition-open');
       }
     }
-  
+
     if (openAmount > 0) {
       const fullSwipe = !this.isIonicTheme() && openAmount >= this.optsWidthRightSide + SWIPE_MARGIN;
       this.state = fullSwipe ? SlidingState.End | SlidingState.SwipeEnd : SlidingState.End;
@@ -914,12 +912,12 @@ export class ItemSliding implements ComponentInterface {
         }
         el.classList.remove('item-sliding-closing');
       }, 600);
-  
+
       openSlidingItem = undefined;
       style.transform = '';
       return;
     }
-  
+
     style.transform = `translate3d(${-openAmount}px,0,0)`;
     this.ionDrag.emit({
       amount: openAmount,

core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts

@@ -2,10 +2,6 @@ import { expect } from '@playwright/test';
 import { configs, dragElementBy, test } from '@utils/test/playwright';
 
 /**
- * Full swipe animation behavior is mode-independent but
- * child components (ion-item-options, ion-item-option) have
- * mode-specific styling, so we test across all modes.
- *
  * When an item has at least one expandable option and the user swipes
  * beyond the threshold (or with sufficient velocity), the item slides
  * off-screen, fires ionSwipe, and returns to its closed position.
@@ -14,7 +10,7 @@ import { configs, dragElementBy, test } from '@utils/test/playwright';
 // Full animation cycle duration (100ms expand + 250ms off-screen + 300ms delay + 250ms return)
 const FULL_ANIMATION_MS = 1100;
 
-configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {
+configs({ modes: ['ios', 'md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {
   test.describe(title('item-sliding: full swipe'), () => {
     test('should fire ionSwipe when expandable option is swiped fully (end side)', async ({ page }) => {
       await page.setContent(
@@ -58,6 +54,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
 
       const ionSwipe = await page.spyOnEvent('ionSwipe');
       const item = page.locator('ion-item-sliding');
+      await expect(item).toBeVisible();
+      await page.waitForChanges();
       const dragByX = config.direction === 'rtl' ? -190 : 190;
 
       await dragElementBy(item, page, dragByX);
@@ -82,6 +80,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
       );
 
       const item = page.locator('ion-item-sliding');
+      await expect(item).toBeVisible();
+      await page.waitForChanges();
       const dragByX = config.direction === 'rtl' ? 190 : -190;
 
       await dragElementBy(item, page, dragByX);
@@ -108,6 +108,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
 
       const ionSwipe = await page.spyOnEvent('ionSwipe');
       const item = page.locator('ion-item-sliding');
+      await expect(item).toBeVisible();
+      await page.waitForChanges();
       const dragByX = config.direction === 'rtl' ? 180 : -180;
 
       await dragElementBy(item, page, dragByX);
@@ -138,6 +140,8 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
 
       const ionSwipe = await page.spyOnEvent('ionSwipe');
       const item = page.locator('ion-item-sliding');
+      await expect(item).toBeVisible();
+      await page.waitForChanges();
       const dragByX = config.direction === 'rtl' ? 190 : -190;
 
       await dragElementBy(item, page, dragByX);
@@ -148,6 +152,155 @@ configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr', 'rtl'] }).forEac
   });
 });
 
+/**
+ * Test for Ionic theme that has a different full swipe animation behavior.
+ */
+configs({ modes: ['ionic-md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config }) => {
+  test.describe(title('item-sliding: full swipe'), () => {
+    test('should fire ionSwipe when expandable option is swiped fully (end side)', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>Expandable End (Swipe Left)</ion-label>
+            </ion-item>
+            <ion-item-options side="end">
+              <ion-item-option expandable="true">Delete</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+         `,
+        config
+      );
+
+      const ionSwipe = await page.spyOnEvent('ionSwipe');
+      const item = page.locator('ion-item-sliding');
+      await expect(item).toBeVisible();
+      await page.waitForChanges();
+      const box = (await item.boundingBox())!;
+      const y = box.y + box.height / 2;
+
+      // 1) Peek open (distance-based; moderate steps is fine)
+      const peek = config.direction === 'rtl' ? 120 : -120;
+      await dragElementBy(item, page, peek);
+
+      // 2) Fast flick in the same direction as “full swipe”
+      const startX = config.direction === 'rtl' ? box.x + 40 : box.x + box.width - 40;
+      const endX = config.direction === 'rtl' ? box.x + box.width - 40 : box.x + 40;
+      await page.mouse.move(startX, y);
+      await page.mouse.down();
+      await page.mouse.move(endX, y, { steps: 2 }); // try 1–3; lower = faster
+      await page.mouse.up();
+      await ionSwipe.next();
+      expect(ionSwipe).toHaveReceivedEventTimes(1);
+    });
+
+    test('should fire ionSwipe when expandable option is swiped fully (start side)', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>Expandable Start (Swipe Right)</ion-label>
+            </ion-item>
+            <ion-item-options side="start">
+              <ion-item-option expandable="true">Archive</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+         `,
+        config
+      );
+
+      const ionSwipe = await page.spyOnEvent('ionSwipe');
+      const item = page.locator('ion-item-sliding');
+      await expect(item).toBeVisible();
+      await page.waitForChanges();
+      const box = (await item.boundingBox())!;
+      const y = box.y + box.height / 2;
+
+      // 1) Peek open (distance-based; moderate steps is fine)
+      const peek = config.direction === 'rtl' ? -120 : 120;
+      await dragElementBy(item, page, peek);
+
+      // 2) Fast flick in the same direction as “full swipe”
+      const startX = config.direction === 'rtl' ? box.x + box.width - 40 : box.x + 40;
+      const endX = config.direction === 'rtl' ? box.x + 40 : box.x + box.width - 40;
+      await page.mouse.move(startX, y);
+      await page.mouse.down();
+      await page.mouse.move(endX, y, { steps: 2 });
+      await page.mouse.up();
+      await ionSwipe.next();
+      expect(ionSwipe).toHaveReceivedEventTimes(1);
+    });
+
+    test('should return to closed state after full swipe animation completes', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>Expandable End (Swipe Left)</ion-label>
+            </ion-item>
+            <ion-item-options side="end">
+              <ion-item-option expandable="true">Delete</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+         `,
+        config
+      );
+
+      const item = page.locator('ion-item-sliding');
+      await expect(item).toBeVisible();
+      await page.waitForChanges();
+      const box = (await item.boundingBox())!;
+      const y = box.y + box.height / 2;
+
+      // 1) Peek open (distance-based; moderate steps is fine)
+      const peek = config.direction === 'rtl' ? -120 : 120;
+      await dragElementBy(item, page, peek);
+
+      // 2) Fast flick in the same direction as “full swipe”
+      const startX = config.direction === 'rtl' ? box.x + box.width - 40 : box.x + 40;
+      const endX = config.direction === 'rtl' ? box.x + 40 : box.x + box.width - 40;
+      await page.mouse.move(startX, y);
+      await page.mouse.down();
+      await page.mouse.move(endX, y, { steps: 2 });
+      await page.mouse.up();
+      await page.waitForTimeout(FULL_ANIMATION_MS);
+
+      const openAmount = await item.evaluate((el: HTMLIonItemSlidingElement) => el.getOpenAmount());
+      expect(openAmount).toBe(0);
+    });
+
+    test('should NOT trigger full swipe animation for non-expandable options', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-item-sliding>
+            <ion-item>
+              <ion-label>Non-Expandable (Should Show Options)</ion-label>
+            </ion-item>
+            <ion-item-options side="end">
+              <ion-item-option>Edit</ion-item-option>
+            </ion-item-options>
+          </ion-item-sliding>
+        `,
+        config
+      );
+      const ionSwipe = await page.spyOnEvent('ionSwipe');
+      const item = page.locator('ion-item-sliding');
+      await expect(item).toBeVisible();
+      await page.waitForChanges();
+      const dragByX = config.direction === 'rtl' ? 180 : -180;
+
+      await dragElementBy(item, page, dragByX);
+      await page.waitForChanges();
+
+      expect(ionSwipe).toHaveReceivedEventTimes(0);
+
+      const openAmount = await item.evaluate((el: HTMLIonItemSlidingElement) => el.getOpenAmount());
+
+      expect(Math.abs(openAmount)).toBeGreaterThan(0);
+    });
+  });
+});
+
 /**
  * Velocity-based trigger: a fast short swipe should trigger the full animation
  * even if the raw distance alone wouldn't exceed the threshold.
@@ -172,6 +325,8 @@ configs({ modes: ['md'], directions: ['ltr', 'rtl'] }).forEach(({ title, config
 
       const ionSwipe = await page.spyOnEvent('ionSwipe');
       const item = page.locator('ion-item-sliding');
+      await expect(item).toBeVisible();
+      await page.waitForChanges();
       const box = (await item.boundingBox())!;
 
       // Few steps = high velocity gesture