Toast Specification (Draft) - IgniteUI/igniteui-webcomponents GitHub Wiki

Toast Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility

Owned by

Team Name: Design and Web Development (DnD)

Developer: Dilyana Yarabanova

Designer: Stefan Ivanov

Requires approval from

  • Simeon Simeonov | Date:
  • Stefan Ivanov | Date:

Signed off by

  • Product Owner: Radoslav Mirchev | Date:
  • Radoslav Karaivanov | Date:

Revision History

Version Users Date Notes
1 Dilyana Yarabanova Date 26 January 2022 Update specification

1. Overview

The <igc-toast> component is primarily used for system messaging, push notifications, warning messages, and information. It displays at the bottom of the screen and cannot be dismissed by the user.

Acceptance criteria

  1. The toast component should represent a message or notification.
  2. The toast component should appear above all other screen elements.
  3. The toast component should be placed at the top, middle, bottom of the screen.
  4. The toast component should support a message only.
  5. The toast component should disappear automatically.
  6. The toast component should be able to prevent auto-hiding.

2. User Stories

Developer stories:

  • Story 1: As a developer, I want to be able to provide a way to inform a user about an application operation.
  • Story 2: As a developer, I want to be able to customize the toast message.
  • Story 3: As a developer, I want to be able to specify if the toast should hide automatically or not.
  • Story 4: As a developer, I want to be able to specify the display time of the toast.
  • Story 5: As a developer, I want to be able to customize the appearance of the toast component, so that it better fits the design language of my application.

End-user stories:

  • Story 1: As an end-user, I want to see a message notification about a certain operation, so that I can understand its implications.
  • Story 2: As an end-user, I expect that the toast does not hide other critical information, so that I have context about the message it displays.
  • Story 3: As an end-user, I expect that the toast is styled in accordance to its message, so that I am well aware of the seriousness of the situation.

3. Functionality

3.1. End-User Experience

The toast component displays a rectangular container with a solid background and a shadow positioned at the bottom of the screen. It contains a single-line text message. The toast should be displayed above all other screen elements but without interfering with the navigation. The component should hide automatically.

3.2. Developer Experience

<igc-toast keepOpen="true">
Toast Message
</igc-toast>

3.3. API

Properties

You should be able to configure the igc-toast by setting its properties:

Name Description Type Default value Reflected
open Determines if the toast is opened. boolean false true
displayTime Sets the duration of time span in ms in which the toast will be visible. number 4000 false
keepOpen Sets whether the toast should close after the displayTime is over. boolean false true

Methods

The igc-toast exposes the following methods:

Name Description Arguments
show Displays the toast. -
hide Closes the toast. -

Slots

Name Description
default The default slot for the message

4. Test Scenarios

Automation

  • Scenario 1: Should change the toast display time correctly.
  • Scenario 2: Should change the toast keepOpen option correctly.

5. Accessibility

Roles:

⚠️ **GitHub.com Fallback** ⚠️