Dialog

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.
Dialogs are purposefully interruptive, so they should be used sparingly.

Sonnat's Dialogs are fully customizable. We have implemented the basic features so you can add your own features without any problem / overriding hells.

Dialogs have a maxHeight of 70vh. If the height exceeds the maxHeight value it will automatically make the UI scrollable and also will add some elevation to the Header and the ActionBar.

Basic Dialog

import AccountPlusO from "@sonnat/icons/AccountPlusO";
import {
  Button,
  Dialog,
  DialogActionBar,
  DialogBody,
  DialogHeader,
  Text
} from "@sonnat/ui";
import makeStyles from "@sonnat/ui/styles/makeStyles";
import * as React from "react";

const useStyles = makeStyles(theme => {
  const {
    colors,
    typography: { pxToRem }
  } = theme;

  return {
    description: { marginBottom: pxToRem(16) },
    accounts: { display: "flex", flexDirection: "column" },
    accountRow: {
      display: "flex",
      alignItems: "center",
      height: pxToRem(48),
      boxShadow: `0 1px 0 0 ${colors.divider.dark}`,
      cursor: "pointer",
      backgroundColor: colors.transparent,
      transition: "background-color 180ms ease",
      "&:hover": {
        backgroundColor: "rgba(0, 0, 0, 0.04)"
      }
    },
    avatar: {
      width: pxToRem(32),
      height: pxToRem(32),
      borderRadius: "50%",
      marginRight: pxToRem(16),
      backgroundColor: colors.text.dark.secondary
    },
    accountName: { display: "flex", flexDirection: "column" },
    addBtn: { marginTop: pxToRem(8), alignSelf: "flex-start" }
  };
});

const Demo= () => {
  const classes = useStyles();

  const [isDialogOpen, setDialogOpen] = React.useState(false);

  return (
    <React.Fragment>
      <Button
        label="Toggle the Dialog"
        onClick={() => void setDialogOpen(o => !o)}
      />
      <Dialog
        onBackdropClick={() => void setDialogOpen(false)}
        onEscapeKeyUp={() => void setDialogOpen(false)}
        open={isDialogOpen}
        aria-labelledby="dialog-header-0"
        aria-describedby="dialog-body-0"
      >
        <DialogHeader id="dialog-header-0" title="Choose your google account" />
        <DialogBody>
          <Text
            as="p"
            variant="body"
            color="textSecondary"
            className={classes.description}
            id="dialog-body-0"
          >
            Choose one of the accounts below or add a new account:
          </Text>
          <div className={classes.accounts}>
            <div className={classes.accountRow} role="button" tabIndex={0}>
              <div className={classes.avatar}></div>
              <div className={classes.accountName}>
                <Text variant="subtitleSmall" as="strong">
                  Mostafa Shamsitabar
                </Text>
                <Text variant="caption" as="strong" color="textSecondary">
                  mostafa.sh.coderino@gmail.com
                </Text>
              </div>
            </div>
            <div className={classes.accountRow} role="button" tabIndex={0}>
              <div className={classes.avatar}></div>
              <div className={classes.accountName}>
                <Text variant="subtitleSmall" as="strong">
                  Mostafa Shamsitabar
                </Text>
                <Text variant="caption" as="strong" color="textSecondary">
                  mostafa.sh.jobs@gmail.com
                </Text>
              </div>
            </div>
            <Button
              className={classes.addBtn}
              leadingIcon={<AccountPlusO />}
              label="Add another account"
              variant="inlined"
            />
          </div>
        </DialogBody>
        <DialogActionBar>
          <Button
            label="Close"
            variant="inlined"
            onClick={() => void setDialogOpen(false)}
          />
        </DialogActionBar>
      </Dialog>
    </React.Fragment>
  );
};

export default Demo;

Fullscreen Dialog

To have a fullscreen dialog, use the fullScreen property.

import { CloseLarge, AccountPlusO } from "@sonnat/icons";
import {
  Button,
  Dialog,
  DialogBody,
  DialogHeader,
  IconButton,
  Text
} from "@sonnat/ui";
import makeStyles from "@sonnat/ui/styles/makeStyles";
import * as React from "react";

const useStyles = makeStyles(theme => {
  const {
    colors,
    radius,
    spacings: { spaces },
    typography: { pxToRem }
  } = theme;

  return {
    description: { marginBottom: spaces[7].rem },
    accounts: { display: "flex", flexDirection: "column" },
    accountRow: {
      display: "flex",
      alignItems: "center",
      height: pxToRem(48),
      boxShadow: `0 1px 0 0 ${colors.divider.dark}`,
      cursor: "pointer",
      backgroundColor: colors.transparent,
      transition: "background-color 180ms ease",
      "&:hover": {
        backgroundColor: "rgba(0, 0, 0, 0.04)"
      }
    },
    avatar: {
      width: pxToRem(32),
      height: pxToRem(32),
      borderRadius: radius.rounded,
      marginRight: spaces[7].rem,
      backgroundColor: colors.text.dark.secondary
    },
    accountName: { display: "flex", flexDirection: "column" },
    addBtn: { marginTop: spaces[3].rem, alignSelf: "flex-start" },
    closeBtn: { marginLeft: "auto" }
  };
});

const Demo = () => {
  const classes = useStyles();

  const [isDialogOpen, setDialogOpen] = React.useState(false);

  return (
    <React.Fragment>
      <Button
        label="Toggle the Dialog"
        onClick={() => void setDialogOpen(o => !o)}
      />
      <Button
        label="Toggle the Dialog"
        onClick={() => void setDialogOpen(o => !o)}
      />
      <Dialog
        fullScreen
        onEscapeKeyUp={() => void setDialogOpen(false)}
        open={isDialogOpen}
        aria-labelledby="dialog-header-1"
        aria-describedby="dialog-body-1"
      >
        <DialogHeader id="dialog-header-1" title="Choose your google account">
          <IconButton
            aria-label="Close the Dialog"
            icon={<CloseLarge />}
            variant="inlined"
            className={classes.closeBtn}
            onClick={() => void setDialogOpen(false)}
          />
        </DialogHeader>
        <DialogBody>
          <Text
            as="p"
            variant="body"
            color="textSecondary"
            className={classes.description}
            id="dialog-body-1"
          >
            Choose one of the accounts below or add a new account:
          </Text>
          <div className={classes.accounts}>
            <div className={classes.accountRow} role="button" tabIndex={0}>
              <div className={classes.avatar}></div>
              <div className={classes.accountName}>
                <Text variant="subtitleSmall" as="strong">
                  Mostafa Shamsitabar
                </Text>
                <Text variant="caption" as="strong" color="textSecondary">
                  mostafa.sh.coderino@gmail.com
                </Text>
              </div>
            </div>
            <div className={classes.accountRow} role="button" tabIndex={0}>
              <div className={classes.avatar}></div>
              <div className={classes.accountName}>
                <Text variant="subtitleSmall" as="strong">
                  Mostafa Shamsitabar
                </Text>
                <Text variant="caption" as="strong" color="textSecondary">
                  mostafa.sh.jobs@gmail.com
                </Text>
              </div>
            </div>
            <Button
              className={classes.addBtn}
              leadingIcon={<AccountPlusO />}
              label="Add another account"
              variant="inlined"
            />
          </div>
        </DialogBody>
      </Dialog>
    </React.Fragment>
  );
};

export default Demo;

API

Learn more about the properties and the customization points.

Usage

import Dialog, {
  DialogHeader,
  DialogBody,
  DialogActionBar
} from "@sonnat/ui/Dialog";

//or
import { Dialog, DialogHeader, DialogBody, DialogActionBar } from "@sonnat/ui";

Properties

Note that the documentation avoids mentioning all the native props (there are a lot) in this section of the components.

Dialog Properties

Dialog Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
maxWidth	number	-	A number in pixels which determines the `max-width` of the dialog.
fullScreen	boolean	false	If `true`, the dialog will be full-screen.
open	boolean	false	If `true`, the dialog will be open.
onOpen	function	-	The callback fires when the dialog has opened.
onClose	function	-	The callback fires when the dialog has closed.
onBackdropClick	function	-	Callback fired when the backdrop is clicked. Signature: `function(event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void`
onEscapeKeyUp	function	-	Callback fired when the `Escape` key is released. Signature: `function(event: KeyboardEvent) => void`
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

DialogHeader Properties

DialogHeader Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
title required	string	-	The title to display in the header.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

DialogBody Properties

DialogBody Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.

DialogActionBar Properties

DialogActionBar Properties
Name	Type	Default	Description
children	node	-	The content of the component.
className	string	-	Append to the class names applied to the component so you can override or extend the styles.
The `ref` is forwarded to the root element. Any other properties supplied will be provided to the root element.