Skip to content

Snackbar Specification

Jump to bottom
Stefan Ivanov edited this page Jan 27, 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.
  7. The snackbar component should be able to prevent auto-hiding.
  8. Only one snackbar can be visible at a time.
  9. 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 provide a way to inform a user about an application operation.
  • Story 2: As a developer, I want to be able to customize the snackbar message.
  • Story 3: As a developer, I want to be able to place an action button inside the snackbar content.
  • Story 4: As a developer, I want to be able to specify if the snackbar should hide automatically or not.
  • Story 5: As a developer, I want to be able to specify the display time of the snackbar.
  • Story 6: As a developer, I want to be able to place content between the opening and closing brackets of the snackbar component, so that it can be used as a corresponding message.
  • Story 7: As a developer, I want to be able to listen to action events, so that I can better manage the state of the snackbar component.
  • Story 8: As a developer, I want to be able to customize the appearance of the snackbar component, so that it better fits the design language of my application.

End-user stories:

  • Story 1: As an end-user, I want to be shown a message notification about a certain operation, so that I can understand its implications.
  • Story 2: As an end-user, I expect that the snackbar does not hide other critical information, so that I have context about the message it displays.
  • Story 3: As an end-user, I want to be able to perform an action by pressing a button inside the snackbar, so that I can react to it e.g. undo something I deleted by mistake.

3. Functionality

3.1. End-User Experience

The snackbar 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 and an optional action text. Only one snackbar should be displayed at a time and it should be above all other screen elements but without interfering with the navigation. The component can be hidden automatically or by pressing a button.

3.2. Developer Experience

<igc-snackbar keepOpen="true" actionText="Dismiss">
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
open Determines if the snackbar is opened. boolean false true
displayTime Sets the duration of time span in ms in which the snackbar will be visible. number 4000 false
keepOpen Sets whether the snackbar should close after the displayTime is over. boolean false true
actionText Sets the actionText attribute, which will be displayed in the action button. string - false

Events

The igc-snackbar should emit the following events:

Name Description Type
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: Should change the snackbar display time correctly.
  • Scenario 2: Should change the snackbar keepOpen option correctly.
  • Scenario 3: Should perform an action when the snackbar action button is clicked.
  • Scenario 4: Should emit event when a user action is executed.

5. Accessibility

Roles:

Clone this wiki locally