Open lfades opened 4 years ago
Using a <details>
element is something I actually considered but unfortunately the browser support is too low for my place of work and I wanted to make things we could use there. Also, details-dialog-element
isn't react-specific, though it will work in React code bases.
react-modal
I thought:
On the contrary, I think the API I selected here is the easiest to grasp and fits with terminology you'll see somewhere like Apple's Human Interface Guildelines. It's also super flexible. One could use any component styling library available with relative ease. It supports modality apart from Alerts/Dialogs because all of the <Dialog>
styles can be overridden/removed. One could quite easily create sheets or fullscreens. Lastly, it doesn't actually do any element creation - just cloning. So one can select the elements most appropriate for their particular modality w/o as
props and other weirdness that may trip people up.
That's basically the extent of my thought process going into this.
@jaredLunde Also, I want to say thank you so much for your work! Very high quality code! One request - could you add examples of how to use your components with styled-system, theme-ui. And I understand that you prefer emotion over styled-components, right?
@11111000000 I don't have a preference - I use styled-components at work and it works for me there. Outside of work I use @dash-ui as opposed to emotion now. I'll add some code sandboxes with theme-ui and styled-system sometime in the next few days.
@jaredLunde any progress with styled-components example?
@11111000000 I haven't in CS yet but here's something quick if you need it. There are a few ways.
SC
const StyledModal = styled.div`
&.open {
/* open styles */
}
&.closed {
/* closed styles*/
}
`
Modal
<Modal>
<Target openClass='open' closedClass='closed'>
<StyledModal>
<Close>
<button>Close me</button>
</Close>
</StyledModal>
</Target>
<Trigger>
<button>Open me</button>
</Trigger>
</Modal>
SC
const StyledModal = styled.div`
&[aria-hidden=false] {
/* open styles */
}
&[aria-hidden=true] {
/* closed styles*/
}
`
Modal
<Modal>
<Target>
<StyledModal>
<Close>
<button>Close me</button>
</Close>
</StyledModal>
</Target>
<Trigger>
<button>Open me</button>
</Trigger>
</Modal>
Same strategy can be applied for <Trigger>
using openClass
, closedClass
, [aria-expanded=true/false]
Just found the project, I'm trying to add an accessible and low size modal for an open source project I'm currently building, How would you compare this project with https://github.com/github/details-dialog-element and https://github.com/reactjs/react-modal?