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

chore(Cross): [IOAPPX-300] Add FooterActions that replaces FooterWithButtons #5787

Merged
merged 21 commits into from
May 27, 2024

Conversation

dmnplb
Copy link
Contributor

@dmnplb dmnplb commented May 21, 2024

Description

This PR adds the new FooterActions component which completely replaces the legacy FooterWithButtons. The new component is designed to work flawlessly in different scenarios:

  • Fixed behaviour (at the bottom of the screen)
  • Without fixed behaviour (through fixed prop set to false)
  • Sticky behaviour (as required by the new MessageDetail template)
  • Without additional safe margins (as required in special scenarios, such as the BottomSheet component)

Important

The component also returns two values: actionBlockHeight (the height of the block containing actions) and safeBottomAreaHeight (the height of the entire block, including the bottom content margin). The latter must be applied to the ScrollView as bottomPadding value to ensure that the content is not hidden underneath it. Based on the button configuration, this value is dynamically adjusted.

Last but not least, the component also accepts two different animatedStyles (main component and relative background) if you need to set custom transitions using the reanimated library (advanced use). If you want to see an example, check out the Sticky behaviour

Note

After an initial testing period, the component will be removed from this codebase and included in the io-app-design-system package.

List of changes proposed in this pull request

  • Add the new FooterActions component
  • Add different example screens in the Debug section (DS)
  • Add debugMode that shows opaque red background and total height of the component
  • Move IOScrollView screens from Screens to Debug (DS)
  • Make some DS screens dark mode compliant
  • [extra] Set myself (@dmnplb) as code owner for ui components folder
  • [extra] Fix prop configuration in the IOScrollView component

Preview

Default Not fixed Sticky
footer-actions-default.mp4
footer-actions-not-fixed.mp4
footer-actions-sticky.mp4

How to test

  1. Launch the app in the local environment
  2. Go to the Design System → Footer Actions … (under Debug section)
  3. Check all the different examples

@dmnplb dmnplb added Design System New visual language and reduction of previous UI clutter Dark mode 🌝 labels May 21, 2024
@pagopa-github-bot pagopa-github-bot changed the title [IOAPPX-300] Add FooterActions that replaces FooterWithButtons chore(Cross): [IOAPPX-300] Add FooterActions that replaces FooterWithButtons May 21, 2024
@pagopa-github-bot
Copy link
Collaborator

pagopa-github-bot commented May 21, 2024

Affected stories

  • ⚙️ IOAPPX-300: FooterActions, sostituto di FooterWithButtons
    subtask of

Generated by 🚫 dangerJS against d91737c

Copy link

codecov bot commented May 21, 2024

Codecov Report

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

Project coverage is 49.40%. Comparing base (4f204b4) to head (d91737c).
Report is 102 commits behind head on master.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #5787      +/-   ##
==========================================
+ Coverage   48.42%   49.40%   +0.98%     
==========================================
  Files        1488     1627     +139     
  Lines       31617    32427     +810     
  Branches     7669     7795     +126     
==========================================
+ Hits        15311    16022     +711     
- Misses      16238    16351     +113     
+ Partials       68       54      -14     
Files Coverage Δ
ts/components/ui/IOScrollView.tsx 10.25% <ø> (ø)
ts/features/design-system/navigation/navigator.tsx 18.75% <ø> (-4.11%) ⬇️
ts/features/design-system/navigation/routes.ts 100.00% <ø> (ø)
ts/screens/profile/DeveloperModeSection.tsx 4.37% <0.00%> (-0.10%) ⬇️
...res/design-system/core/DSFooterActionsNotFixed.tsx 42.85% <42.85%> (ø)
ts/features/design-system/core/DSFooterActions.tsx 27.27% <27.27%> (ø)
...tures/design-system/core/DSFooterActionsSticky.tsx 11.53% <11.11%> (ø)
ts/components/ui/FooterActions.tsx 10.00% <10.00%> (ø)

... and 545 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 98aa311...d91737c. Read the comment docs.

@dmnplb dmnplb marked this pull request as ready for review May 21, 2024 14:01
@dmnplb dmnplb requested a review from a team as a code owner May 21, 2024 14:01
Copy link
Contributor

@mastro993 mastro993 left a comment

Choose a reason for hiding this comment

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

LGTM! Works great on both iOS and Android devices

@dmnplb dmnplb merged commit 0fc4041 into master May 27, 2024
13 checks passed
@dmnplb dmnplb deleted the IOAPPX-300-add-footer-actions branch May 27, 2024 15:40
dmnplb added a commit to pagopa/io-app-design-system that referenced this pull request Jun 4, 2024
## Short description
This PR removes the `VDivider` and `EndOfPage` components. The former
because it wasn't used. The latter because it's replaced by the
`useScreenEndMargin` hook or space already managed by `FooterActions` or
`IOScrollView`.

## List of changes proposed in this pull request
- Remove mentioned components
- Update example app and Storybook docs accordingly

## Related PRs
Here are the PRs for the components listed above:
- pagopa/io-app#5808
- pagopa/io-app#5787
- pagopa/io-app#5704
dmnplb added a commit that referenced this pull request Jun 6, 2024
…5811)

## Short description
This PR adds the new `useFooterActionsMeasurements` hook to avoid code
repetition when using the `FooterActions` component, introduced by the
following PR:
- #5787

## List of changes proposed in this pull request
- Add the new `useFooterActionsMeasurements` hook
- Update code in `DSFooterActions` and `TransactionSummaryScreen` to
delete repeated code

## How to test
N/A
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Cross Dark mode 🌝 Design System New visual language and reduction of previous UI clutter
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants