New Button by Figma #167
New Button by Figma #167
Conversation
src/components/Button/types.ts
Outdated
| | 'danger' | ||
| | 'success' | ||
| | 'warning' | ||
| | 'info'; |
There was a problem hiding this comment.
essas variants e colors deveriam estar vindo do theme-toolkit 🤔
There was a problem hiding this comment.
acho que não, as variants são do botão, manter na fluid acho que é a melhor opção até para manutenção
assim caso mude como foi o caso, não precisa gerar versão de outra lib para alterar o type
There was a problem hiding this comment.
Sei que é chato, mas entendo que é parte do necessário isso estar vindo do Toolkit para não ficar desalinhado com a estrutura em si do Fluid
There was a problem hiding this comment.
é que eu acho estranho ter um componente na lib que é tipado por outra lib
There was a problem hiding this comment.
@ammichael acha melhor deixar esse type no theme-toolkit mesmo ?
added padding from theme
|
@ammichael esse é o figma do Torra, o pessoal de design ta usando esse tipo de nomenclatura para os botões, por isso alterei as varitants, agora temos filled, ghost, tint e outline, cada uma mudando a cor(primary, danger e etc...) de acordo com o que é passado |
tem mudanças no template tambem, mas so posso abrir o PR depois de gerar a versão aqui |
There was a problem hiding this comment.
A falta das props removidas (rounded, hasBorder..) não poderá fazer outros projetos quebrarem? (breaking change)
Assim como a remoção da variant "primary" por exemplo.
Falando por mim, fica bem complicado aprovar algo que eu não consegui validar. Se o PR do template fosse aberto facilitaria mais as coisas. Seria possível?
|
|
||
| export const Touchable = styled(TouchableComponent)<ButtonWrapperProps>` | ||
| ${getStylesButton} | ||
| ${({ size }) => !!size && sizeButton[size]} | ||
| width: ${({ fullWidth }) => (!!fullWidth ? '100%' : undefined)}; |
There was a problem hiding this comment.
essa linha pode virar width: undefined;, isso pode ser um problema?
There was a problem hiding this comment.
acredito que ele fique vazio e nao seta a propriedade, mas vou testar
| display: flex; | ||
| align-items: center; | ||
| gap: ${spacingMd}px; | ||
| gap: 8px; |
There was a problem hiding this comment.
Esse tamanho fixo não poderá gerar problemas depois?
There was a problem hiding this comment.
não, porque pode ser alterado via css caso mude o projeto, e nao temos um token especifico no tema para isso
| variant={typographyVariant} | ||
| $buttonVariant={variant} | ||
| > | ||
| <TextButton className="text-button" variant={typographyVariant}> |
There was a problem hiding this comment.
Por que usar styled-component com className?
There was a problem hiding this comment.
acho que são coisas distintas, uma não sobrescreve a outra.
usei a classe para ficar facil alterar o estilo do texto do botao com css quando necessário
@fabinppkbuilders |
|
@mdlucas Será que estou fazendo algo errado pra testar ou é preciso algo mais para que essas alterações sejam validadas por completo? @luancurti como vc validou? |
O que foi feito? 📝
Implementação do botão de acordo com o Figma usado pelos Designers
*Removi algumas props que não existem no figma como por exemplo: rounded, hasBorder.
Screenshots ou GIFs 📸
Tipo de mudança 🏗
Checklist 🧐