ionic-team / ionic-team/ionic-framework

feat(item-sliding): add stacked style for ios when expanding or collapsing

Open
#26,392 1 comment 2 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [ ] v5.x
- [X] v6.x
- [ ] Nightly

### Current Behavior

`ion-item-sliding` does not match IOS specifications:

- `ion-item-option` Elements are side by side instead of on top of each other (stacked)
- if expanded, `ion-item-option` won't stretch on slide before expandable `ion-item-option` will trigger (rubberband effect)
- there is no reverse animation if expanded state is triggered and slide is swiped back again
- sliding to expanded state and back again should trigger haptic feedback
- swiping `ion-item-sliding` doesn't feel that smooth as in native
- expanded `ion-item-option` should stretch to safe-area (e.g. aligned with `ion-title`) and content should align left instead right
- there should be a delete animation, when fully swiping the expandable `ion-item-option`. Since `expandable` does not always mean, that we want to remove the item, we need some further options like in `ion-infinite-scroll` where we can call `event.target.complete()`, which could result in triggering the delete animation.

### Expected Behavior

### `ion-item-option` should be stacked

| Reminder App | Ionic |
|--------------|-------|
| | |

### sliding `ion-item-sliding` further should create rubberband effect for `ion-item-option`

| Reminder App | Ionic |
|--------------|-------|
| | |

### sliding back `ion-item-sliding` on expanded state should show slide-back animation

| Reminder App | Ionic |
|--------------|-------|
| | |

### `ion-item-sliding` sliding to expanded state and back again should trigger haptic feedback

### `ion-item-sliding` should expand to safe area and content of `ion-item-option` has to be aligned left

| Reminder App | Ionic |
|--------------|-------|
| | |

### there should be a delete animation, when fully swiping the expandable `ion-item-option`

| Reminder App | Ionic |
|--------------|-------|
| | not implemented on ionic |

### Steps to Reproduce

Please follow described steps in table

### Code Reproduction URL

https://stackblitz.com/edit/angular-4mvdgd

### Ionic Info

see stackblitz

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the ion-item-sliding and ion-item-option behavior described in the issue and inspect the Angular reproduction at the linked StackBlitz. Compare the current iOS behavior with each supplied reference, including stacking, expansion, animations, safe-area alignment, haptic feedback, and deletion. Done requires a defined and implemented scope for these behaviors, but the issue does not name source files or tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, ios, typescript
Domain
frontend, mobile
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.