Dialog

Dialog Specification

Dialog Specification

Owned by

Team Name: CodeX

Developer: Dimitar Dimitrov

Designer:

Requires approval from

Peer Developer Name | Date:
Svilen Dimchevski | Date: 04-Jul-2022

Signed off by

Radoslav Mirchev | Date: 28-Jul-2022
Radoslav Karaivanov | Date: 31-Aug-2022

Definitions

Matching | Date:

Revision History

Version	Users	Date	Notes
1	Dimitar Dimitrov	xx-Mar-2021
1.1	Radoslav Mirchev	21-Jun-2022	Adding End-user stories
1.2	Dimitar Dimitrov	24-Jun-2022	Update multiple sections
1.3	Stamen Stoychev	29-Jun-2022	Adding ARIA attributes as props
1.4	Svilen Dimchevski	04-Jul-2022	Updated Functionality section
1.5	Radoslav Karaivanov	31-Aug-2022	Finalized specification
1.6	Dimitar Dimitrov	11-Apr-2023	Replaced `closeOnEscape` with `keepOpenOnEscape`

Overview

igc-dialog component informs users of something or asks for their input.

<igc-dialog title="Dialog Title">
  Dialog content goes here
  <div slot="footer">
    <igc-button>OK</igc-button>
  </div>
</igc-dialog>

Objectives

Display some information to the user or collect information using inputs.

Provide igc-dialog component that supports the following features:

trap the focus inside
separate area for title
separate area for content/inputs
separate area for actions
closing the dialog on submitting a form with attribute method="dialog"

User stories

Developer stories:

Story 1: As a developer, I want to be able to add a dialog to my application, so that I can inform or “ask” for input the end user.
Story 2: As a developer, I want to add a title to the dialog.
Story 3: As a developer, I want to add buttons to the dialog.
Story 4: As a developer, I want to disable the rest of the app when a dialog is shown, so that I would make it mandatory for the end user to take action.
Story 5: As a developer, I want to be able to customize the appearance of the dialog, so that it better fits the design language of my application.

End-user stories:

Story 1: As an end user, I want to get a dialog inside my app, so that I can be notified upon important information that must be presented to me.
Story 2: As an end user, I want to get title in the dialog, so that I can read the dialog.
Story 3: As an end user, I want to get message in the dialog, so that I read more details about the dialog.
Story 4: As an end user, I want to be prompted what actions have to take to dismiss the dialog.

Functionality

Dialogs inform users about a task. They can contain important information and require decisions to be taken. A Dialog is a type of modal window that appears on top of all the content to provide valuable information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

End-User Experience

Design hand-off in Figma with all themes

Developer Experience

Globalization/Localization

None applicable.

Keyboard Navigation

None applicable.

API

Represents a Dialog component.

Mixins: EventEmitterMixin

Properties

Property	Attribute	Type	Default	Description
~~`closeOnEscape`~~ `keepOpenOnEscape`	~~`close-on-escape`~~ `keep-open-on-escape`	`boolean`	false	Whether the dialog should be kept open when pressing the 'ESCAPE' button.
`closeOnOutsideClick`	`close-on-outside-click`	`boolean`	false	Whether the dialog should be closed when clicking outside of it.
`hideDefaultAction`	`hide-default-action`	`boolean`	false	Whether to hide the default action button for the dialog. When there is projected content in the `footer` slot this property has no effect.
`open`	`open`	`boolean`	false	Whether the dialog is opened.
`returnValue`		`string`		Sets the return value for the dialog.
`title`	`title`	`string`		Sets the title of the dialog.

Methods

Method	Type	Description
`hide`	`(): void`	Closes the dialog.
`show`	`(): void`	Opens the dialog.
`toggle`	`(): void`	Toggles the open state of the dialog.

Events

Event	Description
`igcClosed`	Emitted after closing the dialog.
`igcClosing`	Emitter just before the dialog is closed.

Slots

Name	Description
	Renders content inside the default slot.
`footer`	Renders the dialog footer.
`title`	Renders the title of the dialog header.

CSS Shadow Parts

Part	Description
`base`	The base wrapper of the dialog.
`footer`	The footer container.
`overlay`	The overlay.
`title`	The title container.

Design

Design Implementation

Test scenarios

Automation

Dialog should have role="dialog" and aria-labelledby
Dialog should have header if title is set via attribute
Dialog should have header if title is set via title slot
Dialog should display contents from footer slot below header and content
Dialog should close with the appropriate returnValue when submitting a form with attribute method="dialog"
Dialog should show, hide, toggle and emit the corresponding events
Dialog should close on clicking outside of it when closeOnOutsideClick="true" and not closed when closeOnOutsideClick="false"
The igcClosing and igcClosed events are fired when the dialog is closed.

Manual

Focus is trapped inside the dialog
If there is an opened dropdown (or other element that should handle ESC internally) in the dialog, pressing ESC once will close the dropdown and pressing it again will close the dialog

Accessibility

ARIA

The aria attributes below should be exposed as properties so that they can be assigned to the actual <dialog> element.

role defaults to dialog.
aria-describedby attribute is not assigned by default
aria-label attribute is not assigned by default

If aria-label is not provided, internally the dialog is labelled by the content of the title slot, i.e. the title property or the projected content of the title slot.

Behavior

By default if nothing is projected in the footer slot, the dialog will render a default action button that closes the dialog. This is done to accommodate for best practices and can be turned off through the hideDefaultAction property.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly