-
Notifications
You must be signed in to change notification settings - Fork 45
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
Dropdown component #73
Conversation
Precisa atualizar a branch tambem! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Não especificamos antes mas esse componente vai precisar de um label, algo tipo assim:
IMPORTANTE: Não é necessário que seu componente jogue a label lá pra cima, apenas precisamos do estado inicial da label.
Seu componente visualmente não representa o debug e isso não pode acontecer pois isso leva a comportamentos inesperados do seu componente e facilita o debugging no futuro.
Perceba que vemos o componente ir além do tamanho do container do pai dos elementos.
Outra coisa importante sobre seu componente, preciso saber se ele tem essa funcionalidade. Ele consegue receber uma classe que define um min-width
e baseado nisso ele sempre fica nesse mínimo? Isso é importante
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alguns ajustes que deixei passar antes!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Duas coisinhas
7691925
to
8aa10e3
Compare
Co-authored-by: Alexandre Gomes <[email protected]> feat: create emit event for dropdown component chore: dropdown parameter received fix: dropdown html ajusted chore: change padding value for rem fix: fit: change error message from Portuguese to English BREAKING CHANGE: fit: change error message from Portuguese to English fix devhatt#47 chore: method of adding and removing items implemented fix: fix: implemeted emit in add and remove method refactor: Dropdown component refactor chore: test and storybook for Dropdown component test: tested the dropdwon component fix: message error for english chore: add label and width in props chore: implemented receive css class by props chore: adjusting dropdwon's position property fix: removes unnecessary tests fix: tests names fix: changing component classes to BEM css fix: Dropdown component style ajusted chore: toggleDropdown, openDropdown, closeDropdown, setLabel, getLabel, setValue, getValue, clearOptions, clearDropdown methods implemented fix: closeDropdown fixed reactor: refactor dropdown component fix: setValue and OnSelect methods fixed
8aa10e3
to
24c2ec9
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Uma coisa importante que faltou checar no componente é se a propriedade items existe
Muitos lugares usando comparação simples ==
ou !=
. SEMPRE usar ===
ou !==
.
Outra coisa que me pega aqui é o value ser usado como key
, não sei se é o ideal, se uma pessoa tiver um value: ''
a gente se ferrou. Acho que seria melhor o Map
onde a chave é de fato uma chave e o value é o objeto label, value
pra vc trabalhar com dados mais solidos. Usar o value
como key
é bem ruim
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Só não olhei os testes pq tem bastante alteração no componente
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Marca a box de "tests created"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Do meu lado a batalha acabou!
Closes #47
Feature
Criação do componente Dropdown.
Changelog
Componente Dropdown criado, o componente deverá receber um objeto contendo a propriedade items que deverá ser um array de objetos contendo as propriedades label e value e retornará o value da opção selecionada.Visual evidences 🖼️
Checklist
Additional info
1. Como usar o componente:Um exemplo de objeto válido para o componente:
Além de items, também é possível passar a propriedade label que será como um placeholder e a propriedade width para definir um tamanho para o componente. Essas duas propriedades recebem uma string como valor.
2. Métodos:
O componente possui um total de 2 métodos adicionais:
addItem(): Esse método é responsável por adicionar um único item ao dropdown de forma programática. Ele recebe como parâmetro um objeto contendo as propriedades label e value, juntamente com seus respectivos valores.
removeItem(): Método responsável por remover um item do dropdown, assim como o addItem() ele recebe como parâmetro um um objeto contendo as propriedades 'label' e 'value', juntamente com seus respectivos valores.
3. Pegando o valor selecionado:
Para pegar o valor selecionado do componente você deve estabelecer um ouvinte de eventos, que irá aguardar o evento 'select' ocorrer. Quando esse evento é acionado, a função callback é chamada, recebendo o valor selecionado como parâmetro