Skip to content

Snackbar Specification

Jump to bottom
Silvia Ivanova edited this page Jan 20, 2022 · 9 revisions

Snackbar Specification

Contents

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

Owned by

Team Name: Design and Web Development (DnD)

Developer: Silvia Ivanova

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 Silvia Ivanova Date 20 January 2022 Update specification

1. Overview

The <igc-snackbar> component is used to provide feedback about an operation by showing a brief message at the bottom of the screen.

Objectives

The <igc-snackbar> component should inform users about a performed action that is important or could be ‘undone’. It should not interrupt the user experience thus should be displayed temporarily and close without compulsory user action.

Acceptance criteria

  1. The snackbar component should represent an update about a process that has been performed.
  2. The snackbar component should appear above all other screen elements.
  3. The snackbar component should be placed at the bottom of the screen.
  4. The snackbar component should contain only one line of text.
  5. The snackbar component should be able to display an action text.
  6. The snackbar component should disappear automatically (after 4 to 10 seconds).
  7. Only one snackbar can be visible at a time.
  8. The snackbar component should emit an event when it opens.
  9. The snackbar component should emit an event when it closes.
  10. The snackbar component should emit an event when an action is executed.

2. User Stories

Developer stories:

  • Story 1: As a developer, I want to be able to
  • Story 2: As a developer, I want to be able to

End-user stories:

  • Story 1: As an end-user, I want to be
  • Story 2: As an end-user, I want to be

3. Functionality

3.1. End-User Experience

3.2. Developer Experience

<igc-snackbar>
Snackbar Message
</igc-snackbar>

3.3. API

Properties

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

Name Description Type Default value Reflected
displayTime Sets the duration of time span in ms in which the snackbar will be visible. number 4000
autoHide Sets whether the snackbar should close after the displayTime is over. boolean true
actionText Sets the actionText attribute, which will be displayed in the action button. string -

Events

The igc-snackbar should emit the following events:

Name Description Type
igcShow Emitted when the snackbar opens -
igcHide Emitted when the snackbar closes -
igcAction Emitted when the snackbar action is executed -

Methods

The igc-snackbar exposes the following methods:

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

Slots

Name Description
(default) The snackbar content.

CSS Parts

Name Description
base The base wrapper of the snackbar.
message The snackbar message.
action The snackbar action text (button).

4. Test Scenarios

Automation

  • Scenario 1:
  • Scenario 2:

5. Accessibility

Roles:

Clone this wiki locally