💡 Proposal - ModalLauncher converted to a hook

Forma 36 contribution proposal

The problem

The modal pattern is frequently used, but the API of the ModalLauncher util is a bit complex to use. This is a very basic example, but if you look for ModalLauncher in Contentful’s webapp you can find very complex ones

import {
  Modal,
  ModalLauncher,
} from '@contentful/forma-36-react-components';

const openMyModal = () => {
  return ModalLauncher.open(({ isShown, onClose }) => (
    <Modal
      isShown={isShown}
      onClose={() => onClose()}>
      {/* ... */}
    </Modal>
  ));
};

function App() {
  return <button onClick={openMyModal}>click me to open the modal</button>
}

The proposed solution

I think we could use some inspiration from the hooks Chakra UI give to their users, specifically the useDisclosure hook which is used for components that “open” and “close” and create a hook that handles the open/close state of the modal and also the callbacks like onClose and then we would only need to do something like this:

import {
  Modal,
  useDisclosure,
} from '@contentful/forma-36-react-components';

function App() {
  const { isShown, onOpen, onClose } = useDisclosure()

  return (
    <>
      {/* onOpen already sets isShown to true */}
      <button onClick={onOpen}>Open Drawer</button>
      
       <Modal
         isShown={isShown}
         onClose={onClose}> {/* onClose already sets isShown to false */}
         {/* ... */}
       </Modal>
    </>
  )
}

Breaking changes

• deprecation of ModalLauncher

[gui-santos]

I would agree to have this as an alternative approach but I would not deprecate ModalLauncher. It’s a widely used pattern and it’s used in a LOT of places and people are quite happy with the API.

@suevalov I would then just reject this Proposal, IMO having two ways of doing the same thing is just increasing the confusion and maintainability of the Library

[suevalov]

Yeah, IMO the cost of upgrading to the new API is extremely high (especially in the field-editors), so I would be really afraid of removing ModalLauncher.

Let’s close the proposal in this case.