[IOAPPX-428] Add the new useScaleAnimation and useListItemAnimation hooks + Add support for the reducedMotion a11y setting
#358
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dmnplb
changed the title
dmnplb
changed the title
useScaleAnimation and useListItemAnimation hooks + Add support for the 'Reduce Motion' a11y setting
dmnplb
changed the title
useScaleAnimation and useListItemAnimation hooks + Add support for the 'Reduce Motion' a11y settinguseScaleAnimation and useListItemAnimation hooks + Add support for the reducedMotion a11y setting
mastro993
added a commit
to pagopa/io-app
that referenced
this pull request
Nov 25, 2024
…6447) ## Short description This PR introduces a feature that allows users to view a credential's skeuomorphic card in full-screen mode. This mode can be activated by tapping the card on the credential details screen. ## List of changes proposed in this pull request - Added `useScaleAnimation` hook (to be removed once this PR is merged: pagopa/io-app-design-system#358) - Added `FlipGestureDetector` component, which handles swipe gestures to flip the skeumorphic cards in the credential details screen - Updated `FlippableCard` component in order to handle an optional `orientation` prop, which changes the axis type for the flip animation - Updated `ItwSkeumorphicCard` component in roder to handle an optional `orientation` prop, which rotates the card and adjust its scale to fit the screen correctly. - Refactored `getCredentialStatus` and `itwCredentialStatusSelector`: - Extracted logic from `itwCredentialStatusSelector` and moved it to `getCredentialStatusObject`, `getCredentialStatusObject` can be freely used without relying to the redux store and `itwCredentialStatusSelector` for the memoized value - Moved `getCredentialStatus` and `getCredentialStatusObject` to `itwCredentialStatusUtils.ts` file - Added `ItwPresentationCredentialCardModal` in the IT Wallet navigation stack - Updated IT Wallet playgrounds to test the new feature ## How to test 1. Navigate to the credential details screen or the IT Wallet playground in the settings screen. 2. Tap on a skeuomorphic credential card to view it in full-screen mode. 3. Verify the following: - The card is rendered correctly in full-screen mode. - The screen brightness gently increases when entering full-screen mode. - The screen brightness reverts to its original value upon exiting full-screen mode. ## Preview https://github.com/user-attachments/assets/66743a6f-ea96-4de3-a150-f88ccfa30eea
LeleDallas
reviewed
Dec 6, 2024
LeleDallas
approved these changes
Dec 10, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Short description
This PR improves the overall code quality by removing a lot of repeated code. This change is possible thanks to the new
useScaleAnimationanduseListItemAnimationhooks. This PR also adds support for the Reduce motion a11y setting.useScaleAnimationshould be used when you want a simple scale effect, like the one applied toButton…orModule…componentsuseListItemAnimationshould be used when you want to build anotherListItem…component and you can't usePressableListItemBasefor various reasonsBoth hooks use the
useSpringPressProgressValuehook at their core.List of changes proposed in this pull request
useScaleAnimationanduseListItemAnimationhooksIOScaleValuestoIOScaleEffect, improve naming of its keysuseScaleAnimationhook to the following components:PressableModuleBase, so all theModule…componentsAlert…componentsBannerTabItemNumberButtonuseListItemAnimationhook to all the interactiveListItem…componentsModule…components where it's still applied, but with a less pronounced effectuseListItemSpringAnimationwithuseListItemAnimationuseModuleSpringAnimationwithuseScaleAnimationPreview
When
reducedMotionis enabled, the scale effect won't be applied:disabled-scale-effect.mp4
How to test
Go to all the components that use a scale effect and check that there are no regressions.