Modal

The Modal component allows you to display content in a modal dialog. Three types are currently available: a version for showing content, a version for handling tasks and forms, and a lightbox version for galleries and video content.

Usage

import {
  Modal,
  TaskModal,
  ModalA11Description,
  ModalA11Title,
  ModalContent,
  ModalIconClose,
  ModalTrigger,
  ModalHeader,
  ModalFooter,
} from '@ef-global/backpack/Modal'

Content modal (default)

This modal should be used to show text content. variant="content" prop is passed by default inside the component.

<Modal modal={true}>
  <ModalTrigger asChild={true}>
    <Button as={'button'} variant='primary'>Trigger modal example</Button>
  </ModalTrigger>
  <ModalContent>
    <ModalA11Title>Demo</ModalA11Title>
    <ModalA11Description>
      This is amazing A11 Description
    </ModalA11Description>
    <p>
      Pellentesque habitant morbi tristique senectus et netus et malesuada
      fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
      ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
      egestas semper. Aenean ultricies mi vitae est. Mauris placerat
      eleifend leo.
    </p>
    <p>
      Pellentesque habitant morbi tristique senectus et netus et malesuada
      fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
      ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
      egestas semper. Aenean ultricies mi vitae est. Mauris placerat
      eleifend leo.
    </p>
  </ModalContent>
</Modal>

Lightbox Modal

Adding the variant="lightbox" prop gives you a transparent modal better suited to image and video galleries

 <Modal modal={true} variant={"lightbox"}>
  <ModalTrigger asChild={true}>
    <Button as={'button'} variant='primary'>Trigger Lightbox Modal</Button>
  </ModalTrigger>
  <ModalContent>
    <img
      src='https://source.unsplash.com/1600x900/?beach'
      alt='This is image'
    />
  </ModalContent>
</Modal>

Content modal with Form inside

We can also easily show forms inside modal. As modal is extending radix primitives it is fully accessible.

<Modal modal={true}>
  <ModalTrigger asChild={true}>
    <Button as={'button'} variant='primary'>Trigger modal withForm</Button>
  </ModalTrigger>
  <ModalContent>
    <h2>Demo With Form</h2>
    <form onSubmit={(e) => e.preventDefault()}>
      <FormGroup
        style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}
      >
        <FormInput type='text' placeholder='Input text' />
        <FormInput type='password' placeholder='Enter password' />
        <Button as={'button'} variant='primary'>Submit</Button>
      </FormGroup>
    </form>
  </ModalContent>
</Modal>

Content modal triggered from outside

Modal could be also triggered from outside as showed below

const WithTriggerOutside = () => {
  const [isOpen, setIsOpen] = useState(false);
  const openModal = () => {
    setIsOpen(true);
  };
  const closeModal = () => {
    setIsOpen(false);
  };
  return (
    <>
      <Button as={'button'} variant='primary' onClick={openModal}>
        Trigger modal (with trigger outside)
      </Button>
      <Modal open={isOpen} onOpenChange={setIsOpen} modal={true}>
        <ModalContent
          onEscapeKeyDown={closeModal}
          onPointerDownOutside={closeModal}
          onInteractOutside={closeModal}
          onCloseAutoFocus={closeModal}
        >
          <h2>Demo</h2>
          <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada
            fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
            ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
            egestas semper. Aenean ultricies mi vitae est. Mauris placerat
            eleifend leo.
          </p>
          <p>
            Pellentesque habitant morbi tristique senectus et netus et malesuada
            fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae,
            ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam
            egestas semper. Aenean ultricies mi vitae est. Mauris placerat
            eleifend leo.
          </p>
        </ModalContent>
      </Modal>
    </>
  );
};

Task Modal

The task modal is slightly different to the others. We can pass ModalHeader component with title prop which is a fixed header and an optional ModalFooter components which stays fixed to the bottom when present. Is up to you what will be the content of ModalFooter.

CustomModal.tsx

<TaskModal modal={true}>
  <ModalTrigger asChild={true}>
    <Button as={'button'} variant='primary'>Trigger TaskModal Default</Button>
  </ModalTrigger>
  <ModalHeader title='This is modal header' />
  <ModalContent>
    <h2 className='ef-h6'>Participate in our competition</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Senectus
      pulvinar tortor maecenas ornare egestas. Urna sed hendrerit ac dapibus
      amet felis cursus. Leo proin blandit consectetur morbi. Dapibus
      aliquam, pharetra nunc convallis iaculis. Adipiscing sit aenean mauris
      fames nec enim lectus iaculis volutpat. Commodo lobortis id purus, est
      tristique ullamcorper. Tellus nisl, eget nisi orci, donec.
    </p>
    <form onSubmit={(e) => e.preventDefault()}>
      <FormGroup
        style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}
      >
        <FormInput label='Email' type='text' placeholder='Input email' />
      </FormGroup>
    </form>
  </ModalContent>
  <ModalFooter className='myModalHeaderStyles'>
    <Button as={'button'} variant='link'>
      <IconChevronLeft />
    </Button>
    <Button as={'button'} variant='secondary' modifier='square'>
      Next
    </Button>
  </ModalFooter>
</TaskModal>

customModal.scss

.myModalHeaderStyles {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
}

Task Modal without footer

<TaskModal modal={true}>
  <ModalTrigger asChild={true}>
    <Button as={'button'} variant='primary'>Trigger TaskModal Without Footer</Button>
  </ModalTrigger>
  <ModalHeader title='This is modal header' />
  <ModalContent>
    <h2 className='ef-h6'>Participate in our competition</h2>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Senectus
      pulvinar tortor maecenas ornare egestas. Urna sed hendrerit ac dapibus
      amet felis cursus. Leo proin blandit consectetur morbi. Dapibus
      aliquam, pharetra nunc convallis iaculis. Adipiscing sit aenean mauris
      fames nec enim lectus iaculis volutpat. Commodo lobortis id purus, est
      tristique ullamcorper. Tellus nisl, eget nisi orci, donec.
    </p>
    <form onSubmit={(e) => e.preventDefault()}>
      <FormGroup
        style={{ display: 'flex', flexDirection: 'column', gap: '24px' }}
      >
        <FormInput label='Email' type='text' placeholder='Input email' />
      </FormGroup>
    </form>
  </ModalContent>
</TaskModal>

Lottie Player Pagination