Amazing

[lfades]

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?

[jaredLunde]

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:

1. did too much
2. had an API I didn't love (Only usable as a controlled component, for example. Also some ambiguous prop names and low flexibility.)
3. wasn't super accessible by default (doesn't focus on anything in the modal by default, just focuses the container which is OK, but not great IMO)
4. was too large for a lot of our bundle budgets (>2x the size of this library after gzipping)

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.

[11111000000]

@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?

[jaredLunde]

@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.

[11111000000]

@jaredLunde any progress with styled-components example?

[jaredLunde]

@11111000000 I haven't in CS yet but here's something quick if you need it. There are a few ways.

With class names

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>

With attributes

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]