[ ] Abstrair o comportamento do Radix UI para que o componente seja mais simples de usar.
Requerimentos:
Componente Modal abstraindo a parte estranha do Radix UI;
Exemplos de modal não controlado (padrão), e controlado estilizados.
O que é importante de se considerar nessa issue?
Realmente vale a pena usar biblioteca comportamental de componentes. É muita coisa a ser considerada para fazer do total zero. Sobre acessibilidade, possível layout shifts em certos navegadores, e outras coisas que podem afetar experiência de usuário ou mesmo do desenvolvedor.
Opções como RadixUI e React Aria podem sempre ser consideradas.
Já foi utilizado algo semelhante nos projetos anteriores?
Foi utilizado no Horta, como modal e toast; no Jeira como alert; no Controle; no Hotel; etc
Idealização rápida:
Talvez o componente possa ser usado assim:
<Modal title="Edit Profile" description="Make changes to your profile here. Click save when you're done.">
<ModalTrigger>
<button>Open Dialog</button>
</ModalTrigger>
<ModalContent>
<form onSubmit={handleSubmit}>
<input type="text" id="username" name="username" />
<label HtmlFor="username">Your username</label>
<button type="submit" className="onclick:close">Salvar</button>
</form>
</ModalContent>
</Modal>
Esse exemplo também está presente na documentação.
O que deve ser feito?
Requerimentos:
O que é importante de se considerar nessa issue?
Realmente vale a pena usar biblioteca comportamental de componentes. É muita coisa a ser considerada para fazer do total zero. Sobre acessibilidade, possível layout shifts em certos navegadores, e outras coisas que podem afetar experiência de usuário ou mesmo do desenvolvedor.
Opções como RadixUI e React Aria podem sempre ser consideradas.
Já foi utilizado algo semelhante nos projetos anteriores?
Foi utilizado no Horta, como modal e toast; no Jeira como alert; no Controle; no Hotel; etc
Idealização rápida:
Talvez o componente possa ser usado assim:
Esse exemplo também está presente na documentação.