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-281] Add VStack and HStack components #241

Merged
merged 5 commits into from
Apr 9, 2024

Conversation

dmnplb
Copy link
Collaborator

@dmnplb dmnplb commented Apr 8, 2024

Note

The new VStack and HStack components are only compatible with RN 0.71 and higher. The io-app repository currently uses the 0.70 version, so these components don't work yet.

Short description

This PR adds the new VStack and HStack components, useful when you need a uniform spacing between other components.

List of changes proposed in this pull request

  • Add VStack and HStack components
  • Update Layout screen in the example to show the new components

Preview

How to test

  1. Launch the example app
  2. Go to the Layout page

@dmnplb dmnplb requested review from a team as code owners April 8, 2024 12:06
Copy link
Contributor

@CrisTofani CrisTofani left a comment

Choose a reason for hiding this comment

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

What about adding a storybook page as we did for VSpacer/Hspacer components?

@dmnplb
Copy link
Collaborator Author

dmnplb commented Apr 8, 2024

What about adding a storybook page as we did for VSpacer/Hspacer components?

@CrisTofani Addressed in this commit → 53d4e5d

@dmnplb dmnplb requested a review from CrisTofani April 9, 2024 07:31
@dmnplb dmnplb merged commit feffdd0 into main Apr 9, 2024
6 checks passed
@dmnplb dmnplb deleted the IOAPPX-281-add-hstack-vstack branch April 9, 2024 11:57
dmnplb added a commit that referenced this pull request Aug 26, 2024
… the new `HStack` and `VStack` components (#303)

>[!caution]
> This PR depends on the following PR. **Do not merge the PR beforehand,
otherwise it might break part of the UI**.
> * pagopa/io-app#5864

## Short description
This PR refactors `Modules…` and `NumberPad` components to take
advantage of the new `HStack` and `VStack` components.

## List of changes proposed in this pull request
- Update `NumberPad` and `CodeInput` to replace the logic using
`VSpacer` and `HSpacer`
- Update all the `Modules…` components (both interactive and skeleton
states) using `HStack` and `VStack`
- Refactor `HStack` and `VStack` to apply some specific style properties
(`alignItems`, `flexShrink`, etc…)

### Related PRs
* #241
* #297

## How to test
1. Launch the example app
2. First, check **Numberpad** screen
3. Second, check **Modules** screen
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants