Dialog

A Dialog is a section of the application that overlaps all other contents. The background gets darkened and the attention of the user is drawn to the dialog. You only want to use this type of interaction when the user shall be forced to immediately deal with it.

When the dialog is open the user can't interact with any other part of the application. That makes this dialog a "modal" dialog. (A "non-modal" dialog would allow the user to interact with the rest of the page.)

Usage

The dialog can simply be imported from the design system like this:

import Dialog from "@finanzchef24gmbh/design-system/src/Dialog";
import useDialogState from "@finanzchef24gmbh/design-system/src/Dialog/useDialogState";

Props

The closeLabel will not be visible, but it serves as a label to the close button in the upper right corner of the dialog. (This is especially important for users who are using screen readers.)

The position prop

There are different use cases which lead to different ways you would want to position the dialog on the page.

The standard use cases is that you render the app standalone, i.e. it is not embedded in a page. Here the content of the app is scrollable. To display a dialog we disable overflow on the body and display the background with a fixed position relative to the users scroll position. This is what the centered position is doing. (It's also the default.)

Now consider the case that your app is embedded in another page in an iframe which dynamically resized its height to match the height of your apps body. This means that your app itself is not scrollable. (The page where it is embedded is scrollable instead.) If we would position the dialog like before, the dialog would end up in the middle of the page (which could be veeeeery high, depending on its content.) Depending on the scrolling position of the user he might not even see the dialog when it is opened, just the darkened background. To solve this you can set the position prop to relative. Now the dialogs background covers the whole page while keeping the page scrollable. The dialog is positioned at the same height as the button that toggles it. This ensures the user will always see the dialog after opening it.

Example

const DefaultDialogExample: React.FC = () => {
  const dialogState = useDialogState();

  return (
    <div>
      <Button {...dialogState.toggle}>Open Dialog</Button>
      <Dialog
        visible={dialogState.visible}
        onClose={dialogState.close}
        header={
          <Text textStyle="headline3" as="h1">
            A simple dialog
          </Text>
        }
        content={<Text>Let me tell you all about my awesome component!</Text>}
        closeLabel="Close dialog"
      />
    </div>
  );
};