@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 |