chore(Cross): [IOAPPX-283] Add `IOScrollView` (next iteration of `GradientScroll`, now deprecated) + `IOScrollViewWithLargeHeader`

dmnplb commented 3 weeks ago

[!note] This PR is the result of the discussion we had in the PR below:

https://github.com/pagopa/io-app-design-system/pull/243

Short description

This PR add the new IOScrollView, next iteration of the GradientScrollView (now officially deprecated):

Simpler UI logic without unnecessary calculations
Option to add a tertiary button
Dark mode support

It also adds the new IOScrollViewWithLargeHeader screen component that should replace RNavScreenWithLargeHeader.

List of changes proposed in this pull request

Add the new IOScrollView screen component. Compared to the previous GradientScrollView:
- Remove GradientBottomActions because it hasn't added any advantage
- Add the new snapOffset prop to optionally configure the snap point
- Add optional headerConfig prop
- Add optional includeContentMargins boolean value to remove content margins if needed
- Manage everything inside GradientScrollView (now IOScrollView)
- Refactor action related props by adding a single actions config object
- Change opacity transition from discrete to continuous
- Apply the opacity transition just to the gradient, excluding safe background block
- Improve debugMode so you can see the gradient area even when the end is reached
Add the new IOScrollViewWithLargeHeader screen component. Compared to the previous RNavScreenWithLargeHeader:
- Remove fixedBottomSlot because we already manage the actions at the bottom with the IOScrollView component
- Simpler inner component logic

Preview

Three buttons	Debug section

New opacity transition	Dark mode

As you can see from the video above, in the most extreme case you can see all kinds of buttons.

How to test

Launch the app in the local environment
Go to the Design System → Screens → IOScrollView… screens

pagopa-github-bot commented 3 weeks ago

Affected stories

⚙️ IOAPPX-283: Refactor di GradientScrollView per diverse combinazioni di pulsanti subtask of
- ⚡ IOAPPX-32: Design System

Generated by :no_entry_sign: dangerJS against 0486daf08bf99566caf333b92b8c91ae67c5f874

codecov[bot] commented 1 week ago

Codecov Report

Attention: Patch coverage is 10.61947% with 101 lines in your changes are missing coverage. Please review.

Project coverage is 49.46%. Comparing base (4f204b4) to head (0486daf). Report is 72 commits behind head on master.

Additional details and impacted files

[![Impacted file tree graph](https://app.codecov.io/gh/pagopa/io-app/pull/5704/graphs/tree.svg?width=650&height=150&src=pr&token=zsurlZdPFW&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa)](https://app.codecov.io/gh/pagopa/io-app/pull/5704?src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa) ```diff @@ Coverage Diff @@ ## master #5704 +/- ## ========================================== + Coverage 48.42% 49.46% +1.03% ========================================== Files 1488 1601 +113 Lines 31617 31912 +295 Branches 7669 7725 +56 ========================================== + Hits 15311 15785 +474 + Misses 16238 16073 -165 + Partials 68 54 -14 ``` | [Files](https://app.codecov.io/gh/pagopa/io-app/pull/5704?dropdown=coverage&src=pr&el=tree&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa) | Coverage Δ | | |---|---|---| | [ts/components/ui/RNavScreenWithLargeHeader.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/5704?src=pr&el=tree&filepath=ts%2Fcomponents%2Fui%2FRNavScreenWithLargeHeader.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvY29tcG9uZW50cy91aS9STmF2U2NyZWVuV2l0aExhcmdlSGVhZGVyLnRzeA==) | `80.76% <ø> (+3.84%)` | :arrow_up: | | [ts/features/design-system/navigation/navigator.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/5704?src=pr&el=tree&filepath=ts%2Ffeatures%2Fdesign-system%2Fnavigation%2Fnavigator.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvZGVzaWduLXN5c3RlbS9uYXZpZ2F0aW9uL25hdmlnYXRvci50c3g=) | `22.85% <ø> (ø)` | | | [ts/features/design-system/navigation/routes.ts](https://app.codecov.io/gh/pagopa/io-app/pull/5704?src=pr&el=tree&filepath=ts%2Ffeatures%2Fdesign-system%2Fnavigation%2Froutes.ts&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvZGVzaWduLXN5c3RlbS9uYXZpZ2F0aW9uL3JvdXRlcy50cw==) | `100.00% <ø> (ø)` | | | [...esign-system/core/DSIOScrollViewWithoutActions.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/5704?src=pr&el=tree&filepath=ts%2Ffeatures%2Fdesign-system%2Fcore%2FDSIOScrollViewWithoutActions.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvZGVzaWduLXN5c3RlbS9jb3JlL0RTSU9TY3JvbGxWaWV3V2l0aG91dEFjdGlvbnMudHN4) | `25.00% <25.00%> (ø)` | | | [...sign-system/core/DSIOScrollViewWithLargeHeader.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/5704?src=pr&el=tree&filepath=ts%2Ffeatures%2Fdesign-system%2Fcore%2FDSIOScrollViewWithLargeHeader.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvZGVzaWduLXN5c3RlbS9jb3JlL0RTSU9TY3JvbGxWaWV3V2l0aExhcmdlSGVhZGVyLnRzeA==) | `20.00% <20.00%> (ø)` | | | [ts/features/design-system/core/DSIOScrollView.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/5704?src=pr&el=tree&filepath=ts%2Ffeatures%2Fdesign-system%2Fcore%2FDSIOScrollView.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvZmVhdHVyZXMvZGVzaWduLXN5c3RlbS9jb3JlL0RTSU9TY3JvbGxWaWV3LnRzeA==) | `14.28% <14.28%> (ø)` | | | [ts/components/ui/IOScrollViewWithLargeHeader.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/5704?src=pr&el=tree&filepath=ts%2Fcomponents%2Fui%2FIOScrollViewWithLargeHeader.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvY29tcG9uZW50cy91aS9JT1Njcm9sbFZpZXdXaXRoTGFyZ2VIZWFkZXIudHN4) | `5.26% <5.26%> (ø)` | | | [ts/components/ui/IOScrollView.tsx](https://app.codecov.io/gh/pagopa/io-app/pull/5704?src=pr&el=tree&filepath=ts%2Fcomponents%2Fui%2FIOScrollView.tsx&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa#diff-dHMvY29tcG9uZW50cy91aS9JT1Njcm9sbFZpZXcudHN4) | `10.25% <10.25%> (ø)` | | ... and [420 files with indirect coverage changes](https://app.codecov.io/gh/pagopa/io-app/pull/5704/indirect-changes?src=pr&el=tree-more&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa) ------ [Continue to review full report in Codecov by Sentry](https://app.codecov.io/gh/pagopa/io-app/pull/5704?dropdown=coverage&src=pr&el=continue&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa). > **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa) > `Δ = absolute (impact)`, `ø = not affected`, `? = missing data` > Powered by [Codecov](https://app.codecov.io/gh/pagopa/io-app/pull/5704?dropdown=coverage&src=pr&el=footer&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa). Last update [027e1c4...0486daf](https://app.codecov.io/gh/pagopa/io-app/pull/5704?dropdown=coverage&src=pr&el=lastupdated&utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments?utm_medium=referral&utm_source=github&utm_content=comment&utm_campaign=pr+comments&utm_term=pagopa).

pagopa / io-app