• Dialog Specification
  • Owned by
  • Requires approval from
  • Signed off by
  • Definitions
  • Revision History
  • Overview
    • Objectives
  • User stories
  • Functionality
    • End-User Experience
    • Developer Experience
    • Globalization/Localization
    • Keyboard Navigation
  • API
    • Properties
    • Methods
    • Events
    • Slots
    • CSS Shadow Parts
  • Design
  • Test scenarios
  • Accessibility
    • ARIA
    • Behavior
    • RTL Support
  • Assumptions and Limitations
  • References

Team Name: CodeX

Developer: Dimitar Dimitrov

Designer:

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

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

• Matching | Date:

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>

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"

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.

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.

Design hand-off in Figma with all themes

None applicable.

None applicable.

Represents a Dialog component.

Mixins: EventEmitterMixin

Design Implementation

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

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.

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.

No specific handling is required

None applicable