Dialog

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

install	version	usage	style
yarn add @ciceksepeti/cui-dialog	0.11.0	import {Dialog} from '@ciceksepeti/cui-dialog'	import '@ciceksepeti/cui-dialog/style.css'

Wai-AriaW3

RepositoryGitHub

PackageNPM

StyleSass

Content

Shows the relevant content in a Dialog in accordance with accessibility rules. Dialog is a polymorphic component. That's why can be rendered as any valid HTML tag

Examples

Default

Example of a default behavior of Dialog component. Renders as 'div' by default.
Default one works as sticky dialog window there is no close option. You should refresh the page in order to clear dialog window or you can use escape.

import React, { useState } from 'react';
import { Dialog } from '@ciceksepeti/cui-dialog';
import '@ciceksepeti/cui-dialog/styles.css';

const Example = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>show 'default' dialog</button>
      <Dialog
        removeScrollBar="false"
        autoFocusToLast="false"
        autoFocusToFirst="false"
        disableFocusTrap="false"
        enableRemoveScroll="false"
        restoreFocusOnUnmount="true"
        open={open}
      >
        I am a dialog
      </Dialog>
    </>
  );
};

PREVIEW

Default Dialog

Escape

Example of when escape is pressed, it should close dialog if onEscapeKey is provided

import React, { useState } from 'react';
import { Dialog } from '@ciceksepeti/cui-dialog';
import '@ciceksepeti/cui-dialog/styles.css';

const Example = () => {
  const [open, setOpen] = useState(false);

  const onEscapeKey = () => {
    setOpen(false);
  };
  const onClickOutside = () => {
    setOpen(false);
  };
  return (
    <>
      <button onClick={() => setOpen(true)}>show 'escape' dialog</button>
      <Dialog
        removeScrollBar="false"
        autoFocusToLast="false"
        autoFocusToFirst="false"
        disableFocusTrap="false"
        enableRemoveScroll="false"
        restoreFocusOnUnmount="true"
        open={open}
        onEscapeKey={onEscapeKey}
        onClickOutside={onClickOutside}
      >
        <p>I am a dialog</p>
      </Dialog>
    </>
  );
};

PREVIEW

Escape Dialog

Trapped

Example of rendering Focus Trapped Dialog component and large height to demonstrate scroll behavior when Dialog is open

import React, { useState } from 'react';
import { Dialog } from '@ciceksepeti/cui-dialog';
import '@ciceksepeti/cui-dialog/styles.css';

const Example = () => {
  const [open, setOpen] = useState(false);

  const dialogStyles = {
    display: 'flex',
    flexDirection: 'column',
  };

  return (
    <div>
      <button>unfocusable button1</button>
      <button onClick={() => setOpen(true)}>show dialog</button>
      <Dialog
        removeScrollBar="true"
        autoFocusToLast="false"
        autoFocusToFirst="true"
        disableFocusTrap="false"
        enableRemoveScroll="true"
        restoreFocusOnUnmount="true"
        style={dialogStyles}
        open={open}
      >
        <p>focusing with tab should not leave the dialog!</p>
        <button>should be auto focused</button>
        <button>second button</button>
        <button onClick={() => setOpen(false)}>close button</button>
      </Dialog>
    </div>
  );
};

PREVIEW

Trapped Dialog

Props

Dialog Props

Dialog Events

Dialog Accessibility

Playground

Styling

Element Selectors

Default Selector Values