@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.12 (2024-05-23)

:rocket: New Feature

• tags
  • #1809 feat(tags): new light/dark mode colors (@jzempel)
• modals
  • #1808 feat(Modal): new light/dark mode colors (@ze-flo)

:bug: Bug Fix

• buttons
  • #1815 fix(buttons): update IconButton foreground color (@jzempel)
• modals
  • #1813 fix(modals): increase box-shadow opacity in dark mode (@ze-flo)

:seedling: Internal

• buttons, colorpickers, dropdowns, grid, notifications
  • #1804 fix(Buttons): correctly support overriding default data-garden-id attribute (@ze-flo)