Skip to content

feat(item-sliding): added specific animations for ionic#31103

Open
os-davidlourenco wants to merge 9 commits intonextfrom
ROU-12715
Open

feat(item-sliding): added specific animations for ionic#31103
os-davidlourenco wants to merge 9 commits intonextfrom
ROU-12715

Conversation

@os-davidlourenco
Copy link
Copy Markdown
Contributor

@os-davidlourenco os-davidlourenco commented Apr 29, 2026

Issue number: resolves internal


What is the current behavior?

The item-slidinghas the same animations for md, iOS and Ionic

What is the new behavior?

New animations were added for the Ionic theme, including:

  • Animation for opening the item-sliding
  • Animation for closing the item-sliding
  • Animation for expandable options

New conditions were also included to ensure a smoother experience:

  • Closing item-sliding by exceeding velocity
  • Selecting an extendable option by exceeding the velocity when options are visible
  • Rubber effect when selecting the option

Does this introduce a breaking change?

  • Yes
  • No

Other information

@os-davidlourenco os-davidlourenco requested a review from a team as a code owner April 29, 2026 16:43
@os-davidlourenco os-davidlourenco added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Apr 29, 2026
@vercel
Copy link
Copy Markdown

vercel Bot commented Apr 29, 2026

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

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment May 7, 2026 9:14am

Request Review

@github-actions github-actions Bot removed package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Apr 29, 2026
Comment thread core/src/components/item-sliding/item-sliding.ionic.scss Outdated
Comment thread core/src/components/item-sliding/item-sliding.ionic.scss Outdated
Comment thread core/src/components/item-sliding/item-sliding.common.scss Outdated
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update the branch to be up to sync with next. We had to make changes to the item sliding tests that were causing tests that were failing while you were out. I would recommend reviewing the fix in case your tests need to be updated.

Copy link
Copy Markdown
Member

@brandyscarney brandyscarney left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left a comment on the ticket!

Comment thread core/src/components/item-sliding/item-sliding.tsx Outdated
Comment thread core/src/components/item-sliding/item-sliding.common.scss Outdated
Comment thread core/src/components/item-sliding/item-sliding.native.scss
Comment thread core/src/components/item-sliding/item-sliding.md.scss Outdated
Comment thread core/src/components/item-sliding/item-sliding.tsx Outdated
Comment thread core/src/components/item-sliding/item-sliding.tsx
Comment thread core/src/components/item-sliding/item-sliding.tsx Outdated
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I only reviewed the test. I'll leave the rest to the current reviewers.

Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment thread core/src/components/item-sliding/test/full-swipe/item-sliding.e2e.ts Outdated
Comment on lines +183 to +184
const peek = config.direction === 'rtl' ? 120 : -120;
await dragElementBy(item, page, peek);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this check be beneficial to add to ios and md?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure

expect(openAmount).toBe(0);
});

test('should NOT trigger full swipe animation for non-expandable options', async ({ page }) => {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't seem to be any different from the test on ios and md. Let's just merge them together.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tests are very similar but not the same. On the Ionic theme, we will not have any event independently of whether the kind of swipe is expandable is false, but on md and iOS is still possible to have an event:

  • onEndNative() correctly blocks the full-swipe animation when hasExpandable is false.
  • But it still emits ionSwipe based on SwipeEnd/SwipeStart state flags.
  • Those flags are set by distance in setOpenAmount() for native, without checking hasExpandable.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants