@eteg/react-modals

@garden/components

This package includes several varieties of modals within the Garden Design System.

Installation

npm install @garden/components

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

Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Modal } from '@garden/components';
import { useState } from 'react';

/**
 * Place a `ThemeProvider` at the root of your React application
 */

const modalButtons: PropsButtonModal[] = [
  {
    text: 'Loading',
    function: () => console.log('Loading'),
    isPrimary: true,
    isLoading: true
  },
  {
    text: 'Delete',
    function: () => console.log('Delete'),
    isPrimary: true,
    isDanger: true
  },
  {
    text: 'Confirm',
    function: () => console.log('Confirm'),
    isPrimary: true
  }
];

export function App() {
  const [buttonsModal, setButtonsModal] = useState < boolean > false;

  return (
    <ThemeProvider>
      <Button onClick={() => setButtonsModal(true)}>Open Buttons Modal</Button>
      <Modal
        modalClose={() => setButtonsModal(false)}
        isOpen={buttonsModal}
        title="Lorem ipsum dolor sit amet"
        buttons={modalButtons}
      >
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ullamcorper lacus.
          Nunc tempor aliquet quam id ullamcorper. Nunc a ex velit. Etiam commodo a eros eget
          posuere.
        </p>
      </Modal>
    </ThemeProvider>
  );
}

Modal Component

Extends HTMLAttributes

The Modal Component applies appropriate styles based on its usage and the props provided.

Prop name	Type	Default	Description	Required
modalClose	function		Function that closes the Modal	yes
isOpen	boolean		If true, the modal will be opened.	yes
title	string		Title that will appear in the header	yes
modalWidth	string	'60%'	Modal width on Screen	no
alignButtons	string	'space-between'	Distribution of buttons along the main-axis of a flex container	no
isScrolling	boolean	false	If true, modal body has overflow-y: scroll	no
modalIsDanger	boolean	false	If true, applies danger styling	no
maxMenuHeight	string	'150px'	Maximum height of a Select input inside the Modal body	no
buttons	Buttons[]		Array with the Buttons that will appear in the modal, check the section below (Modal Buttons) for the properties of each button	no

Modal Buttons

Extends ButtonHTMLAttributes

The Modal Buttons applies appropriate styles based on its usage and the props provided.

Prop name	Type	Default	Description	Required
text	string		Button Text	yes
function	function		Button onClick function	yes
isPrimary	boolean	false	If true, applies primary button styling	no
isBasic	boolean	false	If true, applies basic button styling	no
isDanger	boolean	false	If true, applies danger button styling	no
isLoading	boolean	false	If true, applies loading button styling	no
disabled	boolean	false	If true, disable the button and applies disabled button styling	no
marginButto	string	0	Used when the buttons are aligned left or right, to leave a space between them	no