Code

Props

Props	Data Type	Required
children	-HTML tags -Custom Components (ModalBody, ModalFooter)	✅
className	string	❌
commland	boolean	❌
title	string	❌
show	boolean	❌
cancelAction	Function	❌

commland prop is used to adjust the Alert component to the Commland UI-Shell automatically.

Where to Insert This Component?

This component is supposed to overlay all the content inside the application. Knowing that it can be inserted wherever the developer wants, it should not be affected by the rest of content structure.

To keep a better order, it is recommended to insert this component at the beginning or at the end of the HTML structure in the React componen.

CancelAction

This is a prop made to allow to users the action of canceling or closing a modal at pressing the Esc key, clicking on the exit button or in the overlayed backgorund.

If this prop is not facilitated by the developers, then the modal is going to be blocked, forcing the users to interact only with the Buttons in the Modal footer to close the modal.

Children

To generate the structure required for the component, the developer is able to insert the following components as children elements:

ModalBody

In here, the developer can insert all the HTML tags and Components needed.

Props	Data Type	Required
children	HTML tags and Custom Components	✅
className	string	❌
paddingDisabled	boolean	❌

paddingDisabled prop removes the default padding applied to the ModalBody. This can be useful when the internal structure of the modal is using its own column system or if it requires something more customized.

ModalFooter

Props	Data Type	Required
children	SDS Button Components	✅

Example

import React, {useState} from 'react';
import {
    Modal, 
    ModalBody, 
    ModalFooter, 
    Text,
    Button} from '@2600hz/sds-react-components';

const Example = ()=>{
    //STATE
    const [show, setShow] = useState(false);
    
    //ACTIONS
    const closeModal = ()=>{
        setShow(false);
    }
    
    const openModal = ()=>{
        setShow(true);
    }
    
    const customAction = ()=>{
        console.log('Do something');
        closeModal();
    }

    //CONTENT
    return(
        <>
            <Modal title='Lorem Ipsum' show={show} cancelAction={closeModal}>
                <ModalBody>
                    <Text.p>Some random text...</Text.p>
                </ModalBody>
                <ModalFooter>
                    <Button type='Ghost' onClick={closeModal}>Cancel</Button>
                    <Button type='Primary' onClick={customAction}>Action</Button>
                </ModalFooter>
            </Modal>
            <div className='content'>
                <Button onClick={openModal}>Open Modal</Button>
            </div>
        </>
    )
}

Components Dependency

For this component elaboration there were used the following internal components:

• ModalBody

• ModalFooter

• Telicon

• Button

Live Demo

For detailed code usage documentation, see the Storybooks for each framework below.​

React

General Components / Modal - Modal ⋅ Storybooksipster-react-component-storybook.netlify.app