Melhorando experiência do usuário nos formulários #1691
Conversation
|
@lwfe is attempting to deploy a commit to the TabNews Team on Vercel. A member of the Team first needs to authorize it. |
lwfe
changed the title
There was a problem hiding this comment.
Show @lwfe, obrigado pelo PR! 💪💪💪
Por favor, analisem os comentários que fiz no código 🤝
|
Opa @aprendendofelipe, obrigado pelo review! Modifiquei o que foi solicitado, ficamos agora na pendência desse nome para o campo de usuário na tela de cadastro. Até o momento também não consegui pensar em algo melhor. Frase atual: "Assim que os outros verão você na plataforma." |
|
@aprendendofelipe, mandei mais essas alterações que discutimos anteriormente! Modifiquei o campo de "Nome de usuário" em E também adicionei as mensagens de erro customizadas, para que não haja a necessidade ser utilizada um Caption e um Validation, a mensagem comprimida "Nome de usuário deve conter apenas letras e números. (ex: nomeSobrenome4)" está somente em um Validation. Gravei um vídeo rápido mostrando como ficou: Obs: é minha primeira contribuição em um projeto open source na vida, então me desculpem se deixei passar algo, tudo é muito novo ainda 😅. |
There was a problem hiding this comment.
Modifiquei o campo de "Nome de usuário" em
/perfilpara mostrar a mensagem "Alterar o nome de usuário irá quebrar todas as URLs das suas publicações e comentários." somente se o nome de usuário digitado é diferente do usuário atual.
Se o usuário digitar qualquer coisa, o username já será diferente da original, então não tem necessidade dessa verificação de igualdade. Fiz novas sugestões no código para deixar conforme sugerido antes, ou seja, se digitar qualquer coisa, já aparece o Caption e ele não some mais.
E também adicionei as mensagens de erro customizadas, para que não haja a necessidade ser utilizada um Caption e um Validation, a mensagem comprimida "Nome de usuário deve conter apenas letras e números. (ex: nomeSobrenome4)" está somente em um Validation.
Show, só precisa ajustar um pouco a mensagem, pois o ponto (.) precisa estar após os parênteses, e a abreviação da palavra "exemplo" também exige um ponto (ex.:), então ficaria algo assim:
Nome de usuário deve conter apenas letras e números (ex.: nomeSobrenome4).
Mas também pode deixar mais parecido com a dica original:
Nome de usuário deve conter apenas letras e números, por exemplo: "nomeSobrenome4"
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Parabéns por essa primeira contribuição, @lwfe! Pode fazer um squash dos commits antes do merge? Se não sabe como o squash funciona, pode ler essa resposta do Stack Overflow.
|
Obrigado @Rafatcb! 😀 Definitivamente anotei algumas coisas para melhorar nas minhas futuras contribuições, desde já agradeço os reviews e a paciência 😅 Creio que não será mais necessário fazer o squash, acabei de ver aqui e parece que o @aprendendofelipe já fez. Muito obrigado pelo apoio de vocês pessoal! |
|
Em produção! 🚀🚀🚀
Isso @lwfe, fiz o squash por aqui, mesmo isso não sendo o ideal. Bem vindo à Turma de Contribuidores do TabNews! 👏👏👏 |
|
@lwfe, você foi citado na publicação sobre as últimas melhorias do TabNews: https://www.tabnews.com.br/FelipeBarso/tabnews-as-primeiras-melhorias-da-milestone-7-revenue-share 🎉 |
Mudanças realizadas
Essa PR conta com algumas modificações na interface para melhorar o entendimento do usuário nos formulários de
cadastroe deperfil.Para evitar o excesso de componentes que tirariam o foco do usuário, o @Rafatcb sugeriu a utilização de um componente que já está presente no
primer/react, sendo ele o Caption (mais especificamente o FormControl.Caption).Alterações
/cadastroAntes
Depois
/perfilAntes
Depois
Observação
Decidi manter o "e comentários" na confirmação e na caption da página de perfil, pois como um usuário eu não estava conseguindo visualizar os comentários lendo apenas "conteúdos". Mas, claro, essa é minha visão de usuário e gostaria que discutíssemos sobre caso haja alguma opinião diferente.
Resolve #1529
Tipo de mudança
Checklist: