Skip to content
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

feat: create toggle component #77

Merged
merged 10 commits into from
Mar 18, 2024
Merged

Conversation

nathalia-84
Copy link
Contributor

@nathalia-84 nathalia-84 commented Feb 17, 2024

Closes #71

Feature

Implementação de um componente de alternância (toggle).

Changelog Este componente toggle implementa uma funcionalidade de alternância (toggle). Ele consiste em um elemento `input` do tipo checkbox que é acompanhado por uma etiqueta `label`. Quando o usuário interage com o componente, alternando o estado do checkbox, o visual do componente é atualizado para refletir o estado atual. Além disso, o componente emite um evento de 'toggle' sempre que ocorre uma mudança de estado, permitindo que outras partes da aplicação reajam a essa mudança, se necessário.
Visual evidences: https://github.com/devhatt/pet-dex-frontend/assets/64925426/e7c3af2d-3e6b-4967-90a1-8ed1af0f792a
Checklist
  • Issue linked
  • Build working correctly
  • Tests created
Additional info N/A

Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Precisa preencher o conteúdo do PR com a issue, descrição e etc

Precisa tambem adicionar o componente no storybook!

src/components/Toggle/index.scss Outdated Show resolved Hide resolved
src/components/Toggle/index.scss Outdated Show resolved Hide resolved
src/components/Toggle/index.scss Outdated Show resolved Hide resolved
src/components/Toggle/index.js Outdated Show resolved Hide resolved
src/components/Toggle/index.js Outdated Show resolved Hide resolved
src/components/Toggle/index.js Outdated Show resolved Hide resolved
src/components/Toggle/index.scss Outdated Show resolved Hide resolved
src/components/Toggle/index.js Outdated Show resolved Hide resolved
src/components/Toggle/index.scss Outdated Show resolved Hide resolved
src/components/Toggle/index.scss Outdated Show resolved Hide resolved
@nathalia-84
Copy link
Contributor Author

Precisa preencher o conteúdo do PR com a issue, descrição e etc

Precisa tambem adicionar o componente no storybook!

cmo faço para adicionar ao storybook?

src/components/Toggle/index.js Outdated Show resolved Hide resolved
src/components/Toggle/index.js Outdated Show resolved Hide resolved
src/components/Toggle/index.js Outdated Show resolved Hide resolved
@diogocaronte
Copy link
Contributor

diogocaronte commented Feb 27, 2024

Precisa preencher o conteúdo do PR com a issue, descrição e etc
Precisa tambem adicionar o componente no storybook!

cmo faço para adicionar ao storybook?

Abra o projeto, rode o "pnpm install" e rode o "pnpm storybook".

Acesse o storybook no seu navegador lá terá uma pequena explicação.

Se ainda estiver com dúvidas você pode marcar uma call comigo.

@nathalia-84
Copy link
Contributor Author

Precisa preencher o conteúdo do PR com a issue, descrição e etc
Precisa tambem adicionar o componente no storybook!

cmo faço para adicionar ao storybook?

Abra o projeto, rode o "pnpm install" e rode o "pnpm storybook".

Acesse o storybook no seu navegador lá terá uma pequena explicação.

Se ainda estiver com dúvidas você pode marcar uma call comigo.

Consegui adicionar ao storybook, mas ainda tenho algumas dúvidas a respeito de como adicionar controls, vou tentar falar com você lá no discord sobre isso.

@diogocaronte
Copy link
Contributor

Precisa preencher o conteúdo do PR com a issue, descrição e etc
Precisa tambem adicionar o componente no storybook!

cmo faço para adicionar ao storybook?

Abra o projeto, rode o "pnpm install" e rode o "pnpm storybook".
Acesse o storybook no seu navegador lá terá uma pequena explicação.
Se ainda estiver com dúvidas você pode marcar uma call comigo.

Consegui adicionar ao storybook, mas ainda tenho algumas dúvidas a respeito de como adicionar controls, vou tentar falar com você lá no discord sobre isso.

Pode me chamar quando ver eu em call no discord

src/components/Toggle/index.scss Outdated Show resolved Hide resolved
src/stories/Toggle.stories.js Outdated Show resolved Hide resolved
src/styles/colors.scss Outdated Show resolved Hide resolved
src/components/Toggle/index.js Outdated Show resolved Hide resolved
src/components/Toggle/index.js Outdated Show resolved Hide resolved
src/components/Toggle/index.js Outdated Show resolved Hide resolved
Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ta lindo! Só alguns ajustes!

Sem meme, sua animação ta me dando ansiedade, podemos deixar ela um pouco mais rapidinha? 😁

Seu componente também ta com um problema sério de arquitetura. Ele não está do tamanho que vemos visualmente:
Gravando-2024-03-10-191547

Eu não vou falar qual era o problema, quero que vc descubra! Fica ai o desafio! 😁

src/components/Toggle/index.js Outdated Show resolved Hide resolved
Copy link
Contributor

@Alecell Alecell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BOA!!

src/components/Toggle/index.js Outdated Show resolved Hide resolved
@diogocaronte diogocaronte merged commit 04ede37 into devhatt:main Mar 18, 2024
DominMFD pushed a commit to DominMFD/pet-dex-frontend that referenced this pull request Mar 27, 2024
* feat: Implement toggle component adhering to Material Design with animated switch and external event listeners

fix devhatt#71

* feat: Implement toggle component adhering to Material Design with animated switch and external event listeners

fix devhatt#71

* Made some adjustments according to reviews

* Write modifiers according to BEM

* Adjust Toggle function

* Solved conflicts

* Make adjustments according to reviews

* Made adjustments according to reviews, changed scss file structure

* Create setToggle function

* Adjust scss and setToggle method structure
DominMFD pushed a commit to DominMFD/pet-dex-frontend that referenced this pull request Mar 27, 2024
* feat: Implement toggle component adhering to Material Design with animated switch and external event listeners

fix devhatt#71

* feat: Implement toggle component adhering to Material Design with animated switch and external event listeners

fix devhatt#71

* Made some adjustments according to reviews

* Write modifiers according to BEM

* Adjust Toggle function

* Solved conflicts

* Make adjustments according to reviews

* Made adjustments according to reviews, changed scss file structure

* Create setToggle function

* Adjust scss and setToggle method structure
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Criação do componente de toggle
3 participants