[Component Implementation: Forms]: TextField

[ernestoresende]

Description

A complete form control component with a label, input and validation elements.

Implementation checklist

• [x] The component was tested and is fully working in web environments, without any observable bugs and/or unexpected behavior.
• [x] The component was tested and is fully working in native environments, without any observable bugs and/or unexpected behavior.
• [ ] The component API is fully documented in both the internal Storybook documentation and in-code.

Implementation notes

• Fork the react-maked-text package used for the input mask on the web and correct underlining issues for internal use.
• Documentation needs to have detailed notes to the differences of masked and unmasked inputs with Formik.

[tryvin]

@ernestoresende Dois pequenos detalhes:

• Borda verde no caso do validationSuccess tá faltando no native
• Suporte a Máscaras

[ernestoresende]

@tryvin

• Implementada funcionalidade de máscara no native.
• Código da versão web refatorado para um componente funcional, seguindo o padrão de construção e tipagem definido para o restante do sistema.
• Estilos normalizados/sincronizados para ambas as plataformas.
• Mudanças estilísticas nas bordas e cores que tornam o componente mais acessível e distinguível.

Após refatoração, o componente foi testado em integração com o Formik em um projeto CRA, e funciona como esperado para um input controlado.

O spinner foi substituído pelo componente #52 já presente no projeto.

As funcionalidades que dependem do funcionamento do componente #49 continuarão quebradas até que esse componente também seja normalizado.

[ernestoresende]

@tryvin

• Corrigida a implementação de máscaras.
• API para aplicação estabilizada entre as versões nativa e web.

Para componentes sem máscara:

<TextField
  name="firstName"
  placeholder="First Name"
  label="First Name"
  onChange={handleChange}
  onBlur={handleBlur}
  value={values.firstName}
  validationError={errors.firstName && touched.firstName}
  validationMessage={errors.firstName ? errors.firstName : ""}
  masked={false}
/>

Para componentes com máscara:

<TextField
  name="date"
  placeholder="dd/mm/aaaa"
  label="Date"
  onChange={handleChange("date")}
  onBlur={handleBlur}
  value={values.date}
  validationError={errors.date && touched.date}
  validationMessage={errors.date ? errors.date : ""}
  masked="true"
  type={"datetime"}
  options={{
    format: "DD/MM/YYYY",
  }}
/>

Descrição foi atualizada com as pendências de implementação.

[tryvin]

@ernestoresende Atualizei a documentação pra usar esse formato de mascara. Também corrigi uns detalhes, como por exemplo o estado de disabled, e cia limitada.

Notei um bug no storybook em que ao digitar algo, ele transformava o valor para [object Object], todavia funcionou no native-docs, não entendi porquê deu erro no storybook web.

[ernestoresende]

@tryvin Também notei esse erro no Storybook em algumas iterações passadas, mas decidi ignorar uma vez que ambos os componentes funcionaram (controlled & uncontrolled) em um projetos CRA e RN respectivamente.

Acho que o problema do Storybook tem haver com a prop value não estar sendo parseada como um dos props controláveis pelo add-on, mas eu também não sei exatamente o que o Storybook usa/faz pra parsear os props de um determinado componente internamente.

[github-actions[bot]]

:tada: This issue has been resolved in version 0.6.0-alpha.1 :tada:

The release is available on:

• npm package (@alpha dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[github-actions[bot]]

:tada: This issue has been resolved in version 0.6.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: