@lightspeed/cirrus-dialog

Cirrus Dialog Component

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
@lightspeed/cirrus-dialog
5.0.23 years ago4 years agoMinified + gzip package size for @lightspeed/cirrus-dialog in KB

Readme

Dialog
Reusable and structured dialog box.

Installation

First, make sure you have been through the Getting Started steps of adding Cirrus in your application.
If using Yarn:
yarn add @lightspeed/cirrus-dialog

Or using npm:
npm i -S @lightspeed/cirrus-dialog

Usage

Import required styles in your .scss:
@import '@lightspeed/cirrus-dialog/Dialog.scss';

React Component

Props

| Prop | Type | Default | Required | Description | | ------------- | ------ | ---------- | -------- | --------------------------------------------------------------------------------------------------- | | type | string | default | no | One of default, primary, secondary, danger | | message | string | | yes | String shown in the ModalBody as the message, required | | title | string | | no | String shown in the ModalHeader as title | | isOpen | bool | false | no | State to determine if <Dialog> should be displayed | | isLoading | bool | false | no | State to determine if the actions buttons should be disabled while some promise is getting resolved | | scroll | bool | false | no | State to determine if the body of the modal should be scrollable or not | | onCancel | func | | yes | Function called when the cancel button is clicked, required | | onConfirm | func | | yes | Function called when the confirm button is clicked, required | | cancelText | string | 'Cancel' | no | String shown on the cancel button | | confirmText | string | 'Ok' | no | String shown on the confirm button | | cancelRest | object | | no | Shape with any object pass to the cancel button, e.g({data-test: 'dialog-cancel-button'}) | | confirmRest | object | | no | Shape with any object pass to the confirm button, e.g({data-test: 'dialog-cancel-button'}) |

Example

import React from 'react';
import Dialog from '@lightspeed/cirrus-dialog';

const MyComponent = () => (
  <Dialog
    title="Title"
    message="Messsage"
    isOpen={this.state.isOpen}
    isLoading={this.state.isLoading}
    onCancel={this.onCancel}
    onConfirm={this.onConfirm}
    cancelText="No"
    confirmText="Yes"
    type="danger"
  />
);

export default MyComponent;

CSS Component

Classes

| Type | Class | | ---- | --------------------- | | base | .cr-dialog | | base | .cr-dialog__actions |

Example

<div class="cr-dialog">
    <div class="cr-modal__header">
        <div class="cr-modal__header__content-wrap">Dialog Prompt ''</div>
        <div class="cr-modal__close-wrap"></div>
    </div>
    <div class="cr-modal__body">
        <p class="cr-text-base cr-text--body">Are you sure, are you really really sure? It's your call. </p>
    </div>
    <div class="cr-modal__footer">
        <div class="cr-group cr-dialog__actions">
            <div class="cr-group__item">
                <button type="button" class="cr-button"><span class="cr-button__content">No</span></button>
            </div>
            <div class="cr-group__item">
                <button type="button" class="cr-button cr-button--fill"><span class="cr-button__content">Yes</span></button>
            </div>
        </div>
    </div>
</div>