Modal / Drawer

Description

NB! Modal dialogs interrupt users and demand an action. They are appropriate when user’s attention needs to be directed toward important information.

Behavior

The modal can be triggered from either a button or by using the open_state property. Triggering a modal will activate the opaque overlay and display the contents.

Structure and content

Typically an opaque cover over the main content (fullscreen) and a small centered box containing information and interactive elements (buttons, forms etc.)

What is it

Modal dialogs appear on top of the main content changing the mode of the system into a special mode requiring user interaction. The main content is disabled until the user interacts with the modal dialog.

Disadvantages of modal Dialogs

They require immediate attention
They interrupt users
They cause users to forget what they were doing
They add extra goals - reading, interacting and closing the Modal
They block the content in the background

Guidelines

Use for important warnings as a way to prevent or correct critical errors.
Do not use for unessential information that is not related to the users current workflow.
Use for requesting the user to enter information critical to the current process.

Design Patterns

Image showing Modal with header — Modal with header, text and close button (spacing suggestions in blue and pink)

Modal with header, text, buttons and close button

Root Element

NB: If the wrapper is not set manually, a wrapper is inserted automatically as a child node to the body.

To make sure the HTML structure is decoupled from all the page content, You can optionally define a wrapper div like <div class="dnb-modal-root" />.

Just place this as a sibling of Your App root HTML element. This ensures that we always can stack the modal content above the App Content.

<body>
  <div id="app" />
  <div id="dnb-modal-root" />
</body>

Z-index

The Modal component is using 3000 as the z-index.

:root {
  --modal-z-index: 3000;
}

Sizing and spacing

You have the properties min_width and max_width. But by using these, the width styles get injected inline, which normal circumstances works fine. But in case you want to set it by CSS, you can do so:

/* Change the Modal size  */
.dnb-modal__content__inner {
  min-width: 20vw;
  max-width: 40rem;
}
/* Change the Modal spacing  */
:root {
  /* Defaults to --spacing-large */
  --modal-spacing: var(--spacing-small);
}
/* Change the Modal fullscreen height calculation  */
:root {
  /* Defaults to 0 */
  --modal-height-offset: 3rem;
}

Styles and `dnb-core-style`

The Modal component comes with the dnb-core-style class predefined by default. If you don't want this behavior because of e.g. CSS specificity, you can opt out by setting this property prevent_core_style="true".

/* The CSS class is set by default */
<Modal className="dnb-core-style">...</Modal>
/* You have the option to set it like this as well */
<body>
  <div id="app" />
  <div id="dnb-modal-root" class="dnb-core-style" />
</body>

Demos

Triggered by a icon button

<Modal
  title="Modal Title"
  trigger_title="Click me"
  modal_content={() => (
    <Section spacing style_type="mint-green">
      <P>This is the modal text. Triggered by a icon button.</P>
    </Section>
  )}
/>

<Modal
  title="Modal Title"
  trigger_title="Click me"
  modal_content={() => (
    <Section spacing style_type="mint-green">
      <P>This is the modal text. Triggered by a icon button.</P>
    </Section>
  )}
/>

Drawer mode

With placement on the left side.

<Modal
  mode="drawer"
  container_placement="left"
  align_content="center"
  title={<span className="dnb-sr-only">"Hidden" Drawer title</span>}
  trigger_text="Open Drawer"
>
  <P>This is the left aligned Drawer content.</P>
</Modal>

<Modal
  mode="drawer"
  container_placement="left"
  align_content="center"
  title={<span className="dnb-sr-only">"Hidden" Drawer title</span>}
  trigger_text="Open Drawer"
>
  <P>This is the left aligned Drawer content.</P>
</Modal>

Fullscreen Modal, triggered by a tertiary button

<Modal
  title="Modal Title"
  fullscreen="true"
  trigger_variant="tertiary"
  trigger_text="Click me"
  trigger_icon="bell"
  modal_content="This is the modal text. Triggered by a tertiary button."
/>

<Modal
  title="Modal Title"
  fullscreen="true"
  trigger_variant="tertiary"
  trigger_text="Click me"
  trigger_icon="bell"
  modal_content="This is the modal text. Triggered by a tertiary button."
/>

Hide the Close Button and Prevent Close for 1sec

<Modal
  title="1s close delay"
  trigger_text="Click me"
  prevent_close="true"
  hide_close_button="true"
  on_open={(e) => console.log('on_open', e)}
  on_close={(e) => console.log('on_close', e)}
  on_close_prevent={({ close }) => {
    const timeout = setTimeout(close, 1e3)
    return () => clearTimeout(timeout) // clear timeout on unmount
  }}
>
  <P>This is a Modal Window with no close button.</P>
  <P>Click outside me, and I will be closed within 1 second.</P>
  <Section spacing style_type="divider">
    <Input label="Focus:">Focus me with Tab key</Input>
  </Section>
</Modal>

<Modal
  title="1s close delay"
  trigger_text="Click me"
  prevent_close="true"
  hide_close_button="true"
  on_open={(e) => console.log('on_open', e)}
  on_close={(e) => console.log('on_close', e)}
  on_close_prevent={({ close }) => {
    const timeout = setTimeout(close, 1e3)
    return () => clearTimeout(timeout) // clear timeout on unmount
  }}
>
  <P>This is a Modal Window with no close button.</P>
  <P>Click outside me, and I will be closed within 1 second.</P>
  <Section spacing style_type="divider">
    <Input label="Focus:">Focus me with Tab key</Input>
  </Section>
</Modal>

Triggered by custom trigger button

<Button
  id="custom-triggerer"
  text="Custom trigger Button"
  on_click={() => (
    <Modal
      title="Modal Title"
      trigger_hidden="true"
      open_state="opened"
      labelled_by="custom-triggerer"
    >
      <Section spacing style_type="divider">
        <P>This Modal was opened by a custom trigger button.</P>
      </Section>
    </Modal>
  )}
/>

<Button
  id="custom-triggerer"
  text="Custom trigger Button"
  on_click={() => (
    <Modal
      title="Modal Title"
      trigger_hidden="true"
      open_state="opened"
      labelled_by="custom-triggerer"
    >
      <Section spacing style_type="divider">
        <P>This Modal was opened by a custom trigger button.</P>
      </Section>
    </Modal>
  )}
/>

Close Modal by handlers

<Modal
  title="Auto close"
  trigger_text="Click me"
  align_content="center"
  close_modal={close => {
    const timeout = setTimeout(close, 3e3)
    return () => clearTimeout(timeout) // clear timeout on unmount
  }}
>
  <Section spacing style_type="emerald-green">
    <P>This Modal will close in 3 seconds.</P>
  </Section>
</Modal>

<Modal
  title="Auto close"
  trigger_text="Click me"
  align_content="center"
  close_modal={close => {
    const timeout = setTimeout(close, 3e3)
    return () => clearTimeout(timeout) // clear timeout on unmount
  }}
>
  <Section spacing style_type="emerald-green">
    <P>This Modal will close in 3 seconds.</P>
  </Section>
</Modal>

Modal / Drawer

#Description

#Behavior

#Structure and content

#What is it

#Disadvantages of modal Dialogs

#Guidelines

#Design Patterns

#Root Element

#Z-index

#Sizing and spacing

#Styles and dnb-core-style

#Demos

#Triggered by a icon button

#Drawer mode

#Fullscreen Modal, triggered by a tertiary button

#Hide the Close Button and Prevent Close for 1sec

#Triggered by custom trigger button

#Close Modal by handlers