Skip to content

Commit

Permalink
[IOAPPX-305] Refine TextInputBase and TextInputValidation + Fix w…
Browse files Browse the repository at this point in the history
…rong visual appearance on Android (#275)

## Short description
This PR refines `TextInputBase` and `TextInputValidation` and fixes a
wrong visual appearance on Android.

## List of changes proposed in this pull request
- Refactor `TextInputBase`:
  - Include visual attributes at the top of the component
  - Change the way the borders are managed
- Add a smooth transition between the initial state and the focused
state using a simulated border to avoid jumps when the border width
changes
  - Slightly improve UI performance, especially on Android devices
  - Add a gradient when the prop `rightElement` is set 
- Apply entering/exiting transition to the feedback icon in the
`TextInputValidation` component
- Add optional `inputAccessoryViewID` as prop for `TextInput`

### Preview
Visual appearance of `TextInputBase` on Android devices before the fix

<img
src="https://github.com/pagopa/io-app-design-system/assets/1255491/e8f065b0-6145-4905-a252-6c56cd48a7b4"
width="320" />



https://github.com/pagopa/io-app-design-system/assets/1255491/077e94ce-6037-4fcf-a0cf-b9894727151b



## How to test
1. Launch the example app
2. Go to the **Text Inputs** screen

---------

Co-authored-by: Alessandro Dell'Oste <[email protected]>
  • Loading branch information
dmnplb and adelloste authored Jun 14, 2024
1 parent 180b422 commit 48135b1
Show file tree
Hide file tree
Showing 4 changed files with 309 additions and 105 deletions.
Loading

0 comments on commit 48135b1

Please sign in to comment.