Docs for a beta Hudl Modal

HudlModalBetaDocs.md

Modal

An modal dialog displayed above an obscuring overlay.

Example

Sandbox

Basic Usage:

<Modal
  isOpen={this.state.isOpen}
  title="Test Modal Title"
  onClose={someFunctionThatSetsStateIsOpn}
  actions={
    <Button onClick={() => {}}>Action</Button>
  }
>
  Hello World Modal Content
</Modal>

Advanced Usage:

<HudlModal
  isOpen={this.state.isOpen}
  title={<TestTitle />}
  width={80}
  height={60}
  onClose={this.onClose}
  onAfterOpen={() => console.log('YEAHH BOY')}
  actions={[
    <button
      key="cancel-button"
      onClick={this.onClose}
      style={testButtonStyles}
    >
      Cancel
    </button>,
    <button
      key="test-button"
      onClick={this.onButtonClick}
      disabled={
        this.state.text.length === 0 || this.state.showLoadingSpinner
      }
    >
      {this.state.showLoadingSpinner && <LoadingSpinner/>}
      Test
    </button>,
  ]}
  shouldCloseOnOverlayClick={false}
  supportingText={<TestSupportingText />}
>
  <div>
    <input
      type="text"
      value={this.state.text}
      onChange={this.setText}
    />
  </div>
</HudlModal>

Prop Values

isOpen

boolean (require)

Determines whether or not the modal is displayed or not.

title

string | ReactComponent

What is to be displayed in the header of the modal as a title.

onClose

Function

Function to be called when the modal is triggered to close. This will be called if and when the modal is closing because of the Esc key has been pressed, the overlay has been clicked, or the X is pressed, triggering the modal to close. This is where you might update the isOpen value that is being passed to the modal to false.

actions

Button | Array<Button>

One or more buttons to be rendered as actions in the footer of the component. These Buttons will be rendered left to right in the order that they are provided.

onAfterOpen

Function

A function to be called once the modal has been opened.

supportingText

string | ReactComponent

Content to be rendered on the left side of the footer.

shouldCloseOnOverlayClick

boolean (true)

Whether or not clicking on the overlay/scrim behind the modal should trigger the modal to close (calling the onClose function)

width

number

The percent of the viewport that the Modal will occupy horizontally

height

number

The max percent of the viewport that the Modal will occupy vertically. If the contents of the modal do not force the modal to meet this height, it will adjust. Once the contents of the Modal force it to reach this height, the contents will be scrollable automatically.

contentLabel

string (Hudl Modal)

Value that will be used for aria-label accessibility tag for the Modal element