Fixed Input styles for Storybook web

[pablonortiz]

LINK DE TICKET:
https://janiscommerce.atlassian.net/browse/JUIP-118

DESCRIPCIÓN DEL REQUERIMIENTO:

Contexto

Actualmente, al interactuar con el Storybook web del componente Input, se está viendo cómo hay errores de estilos los cuáles hacen que no se vea cómo en el emulador

Necesidad

Se requiere corregir los estilos para que quedé cómo en el emulador

DESCRIPCIÓN DE LA SOLUCIÓN:

Cómo el label se estaba superponiendo al Input al presionarlo, se modificó el mismo para que no se muestre el label cuándo el Input reciba la prop readOnly o disabled, esto debido a que tampoco tenía sentido.

Se modificó la altura del label cuándo esta inactivo, la misma paso de ser de 5 a 0.

A su vez, se modificó el onBlur que se estaba utilizando a un onEndEditing, esto ya que, dentro de la función onBlurHandler que se estaba llamando no se estaba actualizando el valor del Input, mientras que con el actualizado onEndEditingValue si.

También se modificó el componente para mostrar el value cuándo se encuentra en estado disabled o readOnly, a la vez de corregir el color del texto que se muestra en el Input, ya que el mismo se estaba mostrando del mismo color que el status.

Además, se modificó la constante isLabelVisible para que, al haber un mensaje de error, el label continué mostrándose sobre el Input. En este mismo sentido, se realizó un cambio en las utils del Input, ya que incorrectamente se estaba mostrando el mensaje de error con un color celeste, por lo tanto se ajusto para que muestre el color correcto.

CÓMO SE PUEDE PROBAR?
Clonar e instalar el Repo de UI-Native

Correr el comando:
npm run storybook-web

Verificar que los estilos del Input estén correctos

Aclaración: Lo único que no se pudo corregir es que, al presionar un Input editable, apare un recuadro alrededor del Input, esto no puede ser corregido debido a que lo que hace la librería que se utiliza para pasar de Storybook React Native a Storybook React convierte los componentes de React Native a componentes de React, y no se permite un acceso a la propiedad de CSS de :focus del Input de React

[pablodamianberdun]

@pablonortiz

Cuando el input tiene un value , se debe seguir viendo el label elevado. Sin inportar si esta onFocus on no.

efecto esperado cuando esta en onFocus

efecto esperado cuando tiene value pero no esta onFocus

Para el caso del input cuando tiene un error, se debe seguir mostrando el value

actual

esperado

[pablonortiz]

@pablodamianberdun ahí hice los cambios de los estilos

[coveralls]

Pull Request Test Coverage Report for Build 5954834369

• 7 of 7 (100.0%) changed or added relevant lines in 2 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage remained the same at 100.0%

---

Totals
Change from base Build 5954779347:	0.0%
Covered Lines:	153
Relevant Lines:	153

---

💛 - Coveralls

[pablodamianberdun]

@pablonortiz

Actualizar stories del input

Para disabled, podes agregar otro que sea disable with value, para que se muestre un value en el input pero que no se pueda editar.

---

En la del error, falta mostrar un value. Se muestra el mensaje 'invalid name' pero no estamos mostrando cual es ese nombre que no es válido.

Tiene que tener este mismo efecto

el value se debe poder editar desde el input y cuando se haga onBlur() , se muestra nuevamente el error

[pablonortiz]

@pablodamianberdun ahí acabo de subir los cambios