@workday/canvas-kit-css-modal

Canvas Kit Modal

A Modal component that allows you to render a Popup with a translucent overlay.

Installation

yarn add @workday/canvas-kit-css

or

yarn add @workday/canvas-kit-css-modal

Add your node_modules directory to your SASS includePaths. You will then be able to import index.scss.

@import '~@workday/canvas-kit-css-modal/index.scss';

Usage

Use .wdc-modal-bg to create the background overlay and .wdc-modal to create the modal itself. The title and body content can be styled using .wdc-modal-heading and .wdc-modal-body, respectively.

<div class="wdc-modal-bg">
  <div class="wdc-modal" role="dialog" aria-labelledby="modal-heading">
    <div class="wdc-modal-heading" id="modal-heading">Modal Title</div>
    <div class="wdc-modal-body">Modal content</div>
  </div>
</div>

With Close Button

<div class="wdc-modal-bg">
  <div class="wdc-modal" role="dialog" aria-labelledby="modal-heading">
    <div class="wdc-modal-close">
      <button onClick="{this.onCloseClick}" class="wdc-btn-icon-plain" aria-label="Close">
        <i class="wdc-icon" data-icon="x" data-category="system" />
      </button>
    </div>
    <div class="wdc-modal-heading" id="modal-heading">Modal Title</div>
    <div class="wdc-modal-body">Modal content</div>
  </div>
</div>

Padding

The default padding for the modal is 32px. Use wdc-modal-padding-s to set the padding to 16px or wdc-modal-no-padding to set the padding to 0.

<div class="wdc-modal wdc-modal-no-padding" role="dialog" aria-labelledby="modal-heading">
  <div class="wdc-modal-heading" id="modal-heading">Modal Title</div>
  <div class="wdc-modal-body">Modal content</div>
</div>