feat(item-sliding): add automatic full expand animation of items by OS-pedrolourenco · Pull Request #31036 · ionic-team/ionic-framework

OS-pedrolourenco · 2026-03-25T14:01:54Z

Issue number: internal

What is the current behavior?

Dragging an ion-item with an expandable option would cause a full swipe event to be triggered but also cause the item to return to a position just after the item options once the mouse button was released.

What is the new behavior?

Now, once the new threshold is passed and the mouse button is released, a full expand animation will take place and, after it is finished, only then is the full swipe event triggered and the item returns to its initial state where no options are visible.

Does this introduce a breaking change?

Yes
No

Other information

Preview

vercel · 2026-03-25T14:02:07Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
ionic-framework	Ready	Preview, Comment	Mar 26, 2026 5:17pm

brandyscarney

The functionality is working well. 🎉 Requested some changes related to the tests!

brandyscarney · 2026-03-26T17:29:44Z

core/src/components/item-sliding/test/full-swipe/index.html

There is some weirdness going on with the headings in ios:

brandyscarney · 2026-03-26T17:33:06Z

core/src/components/item-sliding/test/full-swipe/index.html

+
+      <ion-content>
+        <div class="ion-padding-start" style="padding-top: 30px">
+          <ion-title>Full Swipe - Expandable Options</ion-title>


You shouldn't use ion-title outside of a toolbar, this is what's causing ios to look strange. Either use an h2 like this:

<h2>Full Swipe - Expandable Options</h2> <style> h2 { font-size: 12px; font-weight: normal; color: #6f7378; margin-top: 10px; margin-left: 5px; } </style>

Or use an ion-list-header at the top of the list.

brandyscarney · 2026-03-26T17:43:35Z

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts

    });
    test.describe('start options', () => {
-      test('should not have visual regressions', async ({ page }) => {
+      //TODO(FW-7184): remove skip once issue is resolved


Suggested change

//TODO(FW-7184): remove skip once issue is resolved

// TODO(FW-7184): remove skip once issue is resolved

brandyscarney · 2026-03-26T17:43:40Z

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts

  test.describe(title('item-sliding: basic'), () => {
    test.describe('safe area left', () => {
-      test('should have padding on the left only', async ({ page }) => {
+      //TODO(FW-7184): remove skip once issue is resolved


Suggested change

//TODO(FW-7184): remove skip once issue is resolved

// TODO(FW-7184): remove skip once issue is resolved

brandyscarney · 2026-03-26T17:43:45Z

core/src/components/item-sliding/test/basic/item-sliding.e2e.ts


    test.describe('safe area right', () => {
-      test('should have padding on the right only', async ({ page }) => {
+      //TODO(FW-7184): remove skip once issue is resolved


Suggested change

//TODO(FW-7184): remove skip once issue is resolved

// TODO(FW-7184): remove skip once issue is resolved

brandyscarney · 2026-03-26T18:02:07Z

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

+configs({ modes: ['ios', 'md', 'ionic-md'], directions: ['ltr'] }).forEach(({ title, config }) => {
+  test.describe(title('item-sliding: full swipe'), () => {
+    test.beforeEach(async ({ page }) => {
+      await page.goto(`/src/components/item-sliding/test/full-swipe`, config);


Can we break this into individual examples using page.setContent? Like this:

ionic-framework/core/src/components/avatar/test/shape/avatar.e2e.ts

Lines 10 to 36 in abe3b3f

test('should not have visual regressions when containing text', async ({ page }) => {

await page.setContent(

`

<ion-avatar shape="round">AB</ion-avatar>

`,

config

);

const avatar = page.locator('ion-avatar');

await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-text`));

});

test('should not have visual regressions when containing an icon', async ({ page }) => {

await page.setContent(

`

<ion-avatar shape="round">

<ion-icon name="person-outline"></ion-icon>

</ion-avatar>

`,

config

);

const avatar = page.locator('ion-avatar');

await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-icon`));

});

brandyscarney · 2026-03-26T18:33:27Z

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

+      await dragElementBy(item, page, -190);
+      await page.waitForTimeout(FULL_ANIMATION_MS);
+
+      expect(ionSwipe.length).toBeGreaterThan(0);


Suggested change

expect(ionSwipe.length).toBeGreaterThan(0);

expect(ionSwipe.length).toBe(1);

Can we check for exactly once?

brandyscarney · 2026-03-26T18:33:33Z

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

+      await dragElementBy(item, page, 190);
+      await page.waitForTimeout(FULL_ANIMATION_MS);
+
+      expect(ionSwipe.length).toBeGreaterThan(0);


Suggested change

expect(ionSwipe.length).toBeGreaterThan(0);

expect(ionSwipe.length).toBe(1);

Can we check for exactly once?

brandyscarney · 2026-03-26T18:52:55Z

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

+      const item = page.locator('#expandable-end');
+
+      // In RTL the "end" side is on the left, revealed by dragging right
+      const dragByX = config.direction === 'rtl' ? 190 : -190;


Why do we need a separate test for RTL? We should be able to use this on all the other tests.

OS-pedrolourenco added 4 commits March 23, 2026 18:39

First checkpoint

6017570

Second checkpoint

994b969

Add automatic full expand animation to items

a6f271f

Tweaks

63274c0

github-actions bot added the package: core @ionic/core package label Mar 25, 2026

OS-pedrolourenco added 2 commits March 25, 2026 16:39

Fix disabled option bug + add tests

bd8568f

Fix lint issues

87ddc89

vercel bot deployed to Preview March 25, 2026 17:07 View deployment

Merge branch 'refs/heads/next' into ROU-12664

e0736dc

vercel bot deployed to Preview March 26, 2026 10:08 View deployment

Skip flaky tests

258e9df

vercel bot deployed to Preview March 26, 2026 15:46 View deployment

OS-pedrolourenco requested a review from brandyscarney March 26, 2026 16:04

OS-pedrolourenco marked this pull request as ready for review March 26, 2026 16:04

OS-pedrolourenco requested a review from a team as a code owner March 26, 2026 16:04

Merge branch 'next' into ROU-12664

0e9abb2

vercel bot deployed to Preview March 26, 2026 16:08 View deployment

Merge branch 'next' into ROU-12664

7762854

vercel bot deployed to Preview March 26, 2026 17:17 View deployment

brandyscarney requested changes Mar 26, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(item-sliding): add automatic full expand animation of items#31036

feat(item-sliding): add automatic full expand animation of items#31036
OS-pedrolourenco wants to merge 10 commits intonextfrom
ROU-12664

OS-pedrolourenco commented Mar 25, 2026 •

edited by brandyscarney

Loading

Uh oh!

vercel bot commented Mar 25, 2026 •

edited

Loading

Uh oh!

brandyscarney left a comment

Uh oh!

brandyscarney Mar 26, 2026

Uh oh!

brandyscarney Mar 26, 2026

Uh oh!

brandyscarney Mar 26, 2026

Uh oh!

brandyscarney Mar 26, 2026

Uh oh!

brandyscarney Mar 26, 2026

Uh oh!

brandyscarney Mar 26, 2026

Uh oh!

brandyscarney Mar 26, 2026

Uh oh!

brandyscarney Mar 26, 2026

Uh oh!

brandyscarney Mar 26, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	//TODO(FW-7184): remove skip once issue is resolved
	// TODO(FW-7184): remove skip once issue is resolved

	test('should not have visual regressions when containing text', async ({ page }) => {
	await page.setContent(
	`
	<ion-avatar shape="round">AB</ion-avatar>
	`,
	config
	);

	const avatar = page.locator('ion-avatar');

	await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-text`));
	});

	test('should not have visual regressions when containing an icon', async ({ page }) => {
	await page.setContent(
	`
	<ion-avatar shape="round">
	<ion-icon name="person-outline"></ion-icon>
	</ion-avatar>
	`,
	config
	);

	const avatar = page.locator('ion-avatar');

	await expect(avatar).toHaveScreenshot(screenshot(`avatar-shape-round-icon`));
	});

	expect(ionSwipe.length).toBeGreaterThan(0);
	expect(ionSwipe.length).toBe(1);

Conversation

OS-pedrolourenco commented Mar 25, 2026 • edited by brandyscarney Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Mar 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

OS-pedrolourenco commented Mar 25, 2026 •

edited by brandyscarney

Loading

vercel bot commented Mar 25, 2026 •

edited

Loading