Modal

Modals are used for single-step create, add, edit, or delete actions. They are also used to display additional metadata about a screen or specific object on the screen.

Usage

import { Modal } from 'nr1';

Examples

Basic

class MyNerdlet extends React.PureComponent {
  constructor() {
    super(...arguments);

    this._onClose = this._onClose.bind(this);

    this.state = {
      hidden: true,
    };
  }

  _onClose() {
    this.setState({ hidden: true });
  }

  render() {
    return (
      <>
        <Button onClick={() => this.setState({ hidden: false })}>
          Open modal
        </Button>

        <Modal hidden={this.state.hidden} onClose={this._onClose}>
          <HeadingText type={HeadingText.TYPE.HEADING_3}>Modal</HeadingText>

          <BlockText
            spacingType={[
              BlockText.SPACING_TYPE.EXTRA_LARGE,
              BlockText.SPACING_TYPE.OMIT,
            ]}
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictumst
            quisque sagittis purus sit amet.
          </BlockText>

          <Button onClick={this._onClose}>Close</Button>
        </Modal>
      </>
    );
  }
}

Unmounting

class MyNerdlet extends React.PureComponent {
  constructor() {
    super(...arguments);

    this._onClick = this._onClick.bind(this);
    this._onClose = this._onClose.bind(this);
    this._onHideEnd = this._onHideEnd.bind(this);

    this.state = {
      hidden: true,
      mounted: false,
    };
  }

  _onClick() {
    this.setState({
      hidden: false,
      mounted: true,
    });
  }

  _onClose() {
    this.setState({ hidden: true });
  }

  _onHideEnd() {
    this.setState({ mounted: false });
  }

  render() {
    return (
      <>
        <Button onClick={this._onClick}>Open modal</Button>

        {this.state.mounted && (
          <Modal
            hidden={this.state.hidden}
            onClose={this._onClose}
            onHideEnd={this._onHideEnd}
          >
            <HeadingText type={HeadingText.TYPE.HEADING_3}>Modal</HeadingText>

            <BlockText
              spacingType={[
                BlockText.SPACING_TYPE.EXTRA_LARGE,
                BlockText.SPACING_TYPE.OMIT,
              ]}
            >
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Dictumst quisque sagittis purus sit amet.
            </BlockText>

            <Button onClick={this._onClose}>Close</Button>
          </Modal>
        )}
      </>
    );
  }
}

Props

ariaLabelledBy

string

Pass the string of the text content which should better describe the purpose of the modal to be correctly announced by screen readers.

const modalLabelId = 'my-nerdlet.my-modal';

<Modal ariaLabelledBy={modalLabelId}>
  <span id={modalLabelId}>
    <HeadingText>My modal</HeadingText>
  </span>
</Modal>;

children

node

Content to render inside the modal.

className

string

Appends class names to the component.

hidden

boolean

If true, the modal is hidden.

onClose

REQUIRED

function

Callback fired when clicking on the Modal's close button.

onHideEnd

function

Callback fired when the Modal finishes the closing animation.Use this to unmount the Modal component. This ensures that the closing animation works properly.

function render() {
  <>
    {this.state.mounted && (
      <Modal
        hidden={this.state.hidden}
        onHideEnd={() => this.setState({ mounted: false })}
        onClose={() => this.setState({ hidden: true })}
      >
        <h1>Modal</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </Modal>
    )}
  </>;
}

onHideStart

function

Callback fired when the Modal starts the closing animation.

onShowEnd

function

Callback fired when the Modal finishes the opening animation.

onShowStart

function

Callback fired when the Modal starts the opening animation.

style

object

Inline style for custom styling.

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

Unmounting

Props

string

node

string

boolean

REQUIRED

function

function

function

function

function

object

string

Usage