Idea: Investigate HTML Dialog Element for Modals

[sbussard]

Benefits:

• Less styling and markup required
• Semantic Support
• Less react implementation overhead
• More fine grained control
• Automatic esc to close

Read more:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

[sbussard]

The approach I found valuable

Each component gets its own modals, and

1. remove default styling for dialog

dialog {
  padding: 0;
  border: none;
  outline: none;
  background-color: transparent;
}

2. add custom styling

.SomeComponent {
  &-modal {
    padding: 2rem;
    border-radius: 1rem;
    background-color: var(--theme-bg-alt);

    &::backdrop {
      backdrop-filter: blur(1rem);
      background-color: var(--black);
    }
  }
}

3. useRef to access the dom

const modalRef = useRef<HTMLDialogElement>(null);

<dialog ref={modalRef} ... >

4. add a click handler to close when user clicks the backdrop

function handleModalClick(event: MouseEvent<HTMLDialogElement>) {
  if (event.target === event.currentTarget) {
    event.currentTarget.close();
  }
}

<dialog onClick={handleModalClick} ... >

5. trigger modal programmatically

function handleSomethingClicked() {
  modalRef.current?.showModal();
}

There are two options for what to do from here

1. Use the return value of the modal (I'm not compelled)
2. Add a button inside the modal and use regular click handlers to do whatever action needs done