box

A box that can be used to build Dialogs or Popovers. It comes in a default and a modal variant, which has a API for extension.

Box components do not have a minimum width, but will derive their dimensions from their contents. In these examples, fixed dimensions have been added to make the boxes more visible.
The frontend-kit-example_… classes throughout this documentation are not part of the element in question and serve only demonstrative purposes.
For accessibility reasons, a keyboard trap is highly recommended in this component. However, to prevent some unpredictable side effects (the page freezing, the user is stuck in an infinite loop, etc.), the keyboard trap was not set for this page to work correctly. Therefore it needs to be set by the developer.
table of content

component variations

box

Open on blank page
<div class="a-box -floating-shadow-s" style="width:50vw;height:200px"></div>

modal box

A modal box will cover the whole screen and dim the background, so the content is the only thing remaining in the user's focus. Find the code for this example below.

On page load, modal box components will move to the end of the DOM automatically. This is needed to ensure the fullscreen display.
This component is only meant to be used in a full page and won't render / behave correctly here. Please use the button below (Open on blank page) to see the component in action.
Open on blank page
<div class="frontend-kit-example_modal-box" data-frok-show-modal="modal-demo">
  <button
    type="button"
    class="a-button a-button--primary -without-icon"
    data-frok-action="show"
  >
    <span class="a-button__label">click here</span>
  </button>
  <div class="a-box--modal" id="frontend-kit-modal-modal-demo">
    <div class="a-box -floating-shadow-s" style="width:50vw;height:50vh">
      <div
        style="width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--background)"
      >
        click anywhere to close
      </div>
    </div>
  </div>
</div>

additional content

Static API

The static API is available under window.boschFrontendKit.Box.

Method description
Box.modalId(id: string): string Will return the corresponding DOM id for the given modal id, i.e. frontend-kit-modal-${id}
Box.findModal(id: string): string Will find a modal element with the DOM id as returned by Box.modalId and return the element, if found.
Box.showModal(id) Will show the modal identified by the given modal id, if found.
Box.hideModal(id) Will hide the modal identified by the given modal id, if found.

Instance API

The instance API can be accessed by the component property of the modal element.

Method description
show() Will show this modal.
hide() Will hide this modal.
isModal() Will return true if this a modal box, false otherwise.

Event API

Event Handlers can be registered by calling component.addEventListener(name, callback). They can be removed by calling component.removeEventListener(name, callback) with the same arguments. Also, addEventListener returns an unsubscription function that, once called, achieves the same.

Event Name parameters description
backgroundClicked none Will be triggered when the dimmed background (but not the box) is clicked.

demo

import WindowWithFrontendKit from '../../WindowWithFrontendKit';

export default (): void => {
  const { boschFrontendKit } = (window as unknown) as WindowWithFrontendKit;

  // every button with the right class will show the "demo" modal on click
  const modalShowButtons = document.getElementsByClassName(
    'frontend-kit-example_modal-box',
  );
  [...modalShowButtons].forEach(container => {
    const showTrigger = container.querySelector(
      '.a-button[data-frok-action="show"]',
    );

    const modalId = container.getAttribute('data-frok-show-modal');

    const modalElement = boschFrontendKit.Box.findModal(modalId);

    const modal = modalElement.component;

    // close the modal when the background is clicked
    modal.addEventListener('backgroundClicked', () => modal.hide());

    modalElement.addEventListener('click', () =>
      boschFrontendKit.Box.hideModal(modalId),
    );

    if (showTrigger) {
      showTrigger.addEventListener('click', () =>
        boschFrontendKit.Box.showModal(modalId),
      );
    }
  });
};

styles SCSS

.a-box {

  @include floating-outline;

  display: inline-block;
}

.a-box--modal {

  @include background-dimmed;

  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  display: none;

  &.-show {
    display: flex;
  }
}

/* stylelint-disable-next-line selector-no-qualifying-type */
body.-unscrollable {
  overflow: hidden;
}