@zendeskgarden/react-modals

@zendeskgarden/react-modals

This package includes components relating to modals in the Garden Design System.

Installation

npm install @zendeskgarden/react-modals

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

Modal

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Modal } from '@zendeskgarden/react-modals';
import { Button } from '@zendeskgarden/react-buttons';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Modal onClose={() => alert('modal closing')}>
    <Modal.Header>Example Header</Modal.Header>
    <Modal.Body>Some content</Modal.Body>
    <Modal.Footer>
      <Modal.FooterItem>
        <Button isBasic>Cancel</Button>
      </Modal.FooterItem>
      <Modal.FooterItem>
        <Button isPrimary>Confirm</Button>
      </Modal.FooterItem>
    </Modal.Footer>
    <Modal.Close aria-label="Close modal" />
  </Modal>
</ThemeProvider>;

Drawer

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Drawer } from '@zendeskgarden/react-modals';
import { Button } from '@zendeskgarden/react-buttons';

const [isOpen, setIsOpen] = useState(false)

<ThemeProvider>
  <Button onClick={() => setIsOpen(true)}>
    Open
  </Button>
  <Drawer isOpen={state.isOpen} onClose={() => setIsOpen(false)}>
    <Drawer.Header>Example Title</Drawer.Header>
    <Drawer.Body>Some content</Drawer.Body>
    <Drawer.Footer>
      <Drawer.FooterItem>
        <Button>Click</Button>
      </Drawer.FooterItem>
    </Drawer.Footer>
    <Drawer.Close aria-Label="Close" />
  </Drawer>
</ThemeProvider>

TooltipModal

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { TooltipModal } from '@zendeskgarden/react-modals';
import { Button } from '@zendeskgarden/react-buttons';

const [isOpen, setIsOpen] = useState(false);
const buttonRef = useRef(null);

<ThemeProvider>
  <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
    Open
  </Button>
  <TooltipModal
    onClose={() => setIsOpen(false)}
    referenceElement={isOpen && buttonRef.current ? buttonRef.current : undefined}
  >
    <TooltipModal.Title>Example Title</TooltipModal.Title>
    <TooltipModal.Body>Some content</TooltipModal.Body>
    <TooltipModal.Footer>
      <TooltipModal.FooterItem>
        <Button>Click</Button>
      </TooltipModal.FooterItem>
    </TooltipModal.Footer>
    <TooltipModal.Close aria-label="Close" />
  </TooltipModal>
</ThemeProvider>;

Changelog

v9.0.0-next.10 (2024-05-02)

:seedling: Internal

• Other
  • #1802 chore(CHANGELOG): remove extra lines (@ze-flo)
• datepickers, forms
  • #1801 chore(next): update from main@8.76.2 (@ze-flo)