@lightspeed/cirrus-dialog

Cirrus Dialog Component

Stats

StarsIssuesVersionUpdatedCreatedSize
@lightspeed/cirrus-dialog
5.0.23 years ago3 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>

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.