Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IOAPPX-283] Deprecate GradientScrollView for IOScrollView #243

Merged
merged 21 commits into from
May 17, 2024

Conversation

dmnplb
Copy link
Collaborator

@dmnplb dmnplb commented Apr 9, 2024

Short description

This PR deprecates the GradientScroll and GradientBottomActions components.

Important

This PR was added as part of the refactoring of the GradientScroll component, but we preferred to move the screen component to the main repo for easier maintenance.
To learn more about the new IOScrollView component, please refer to:

List of changes proposed in this pull request

  • Add deprecation note to the GradientScroll and GradientBottomActions components

How to test

N/A

@dmnplb dmnplb added the enhancement New feature or request label Apr 9, 2024
@dmnplb dmnplb self-assigned this Apr 9, 2024
@dmnplb dmnplb marked this pull request as ready for review April 10, 2024 13:50
@dmnplb dmnplb requested review from a team as code owners April 10, 2024 13:50
src/components/layout/GradientScrollView.tsx Outdated Show resolved Hide resolved
src/components/layout/GradientScrollView.tsx Outdated Show resolved Hide resolved
@dmnplb dmnplb changed the title [IOAPPX-283] Refactor GradientScrollView [IOAPPX-283] Add the new IOScrollView, next iteration of GradientScrollView (now deprecated) Apr 18, 2024
@dmnplb dmnplb changed the title [IOAPPX-283] Add the new IOScrollView, next iteration of GradientScrollView (now deprecated) [IOAPPX-283] Deprecate GradientScrollView for IOScrollView Apr 18, 2024
@dmnplb
Copy link
Collaborator Author

dmnplb commented Apr 18, 2024

@CrisTofani This PR has been re-purposed to deprecate GradientScrollView for IOScrollView. Please continue to discuss the code architecture in the new PR mentioned above.

@dmnplb dmnplb merged commit c541977 into main May 17, 2024
6 checks passed
@dmnplb dmnplb deleted the IOAPPX-283-refactor-gradient-scrollview branch May 17, 2024 10:32
dmnplb added a commit to pagopa/io-app that referenced this pull request May 17, 2024
…dientScroll`, now deprecated) + `IOScrollViewWithLargeHeader` (#5704)

> [!note]
> This PR is the result of the discussion we had in the PR below:
> * pagopa/io-app-design-system#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 |
|--------|--------|
| <video
src="https://github.com/pagopa/io-app-design-system/assets/1255491/9f9e0760-87d6-43ca-bc2c-2e3fd7f117b8">
| <video
src="https://github.com/pagopa/io-app/assets/1255491/930661d8-b205-4818-89c5-dd742e3f4e78">
|

| New opacity transition | Dark mode |
|--------|--------|
| <video
src="https://github.com/pagopa/io-app-design-system/assets/1255491/ba5c0759-cc33-42fc-ac2f-26ffdd3d4293">
| <video
src="https://github.com/pagopa/io-app-design-system/assets/1255491/f7d8cb29-d0a4-42b1-b7df-ed3efe4e8494">
|

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

## How to test
1. Launch the app in the local environment
2. Go to the **Design System → Screens → IOScrollView…** screens

---------

Co-authored-by: Cristiano Tofani <cri.tofani@gmail.com>
Co-authored-by: Alice Di Rico <83651704+Ladirico@users.noreply.github.com>
Co-authored-by: Mario Perrotta <mario.perrotta@pagopa.it>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants