• Snackbar Specification
  • Owned by
  • Requires approval from
  • Signed off by
  • Revision History
  • Overview
    • Acceptance criteria
  • User stories
  • Functionality
    • End-user experience
    • Developer experience
      • Initialization
      • Additional notes
    • Localization
    • Keyboard navigation
  • API
    • Properties
    • Methods
    • Events
      • Slots
      • CSS Shadow Parts
  • Test Scenarios
  • Accessibility
    • ARIA
      • Animations
    • RTL
  • Assumptions and limitations

Team Name: Design and Web Development (DnD)

Developer: Silvia Ivanova

Designer: Stefan Ivanov

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

• Product Owner: Radoslav Mirchev | Date:
• Radoslav Karaivanov | 2 November 2023

A snackbar component is used to provide feedback about an operation by showing a brief message on the screen. It is usually non-interruptive to the user experience, thus it us displayed temporarily and closed without compulsory user action.

1. The snackbar must support slotting user provided content.
2. The snackbar should support slotting additional action parts provided by the user.
3. The snackbar must be placed above all other viewport elements.
4. The snackbar should be positioned at the bottom of the viewport by default, unless configured otherwise.
5. The snackbar should disappear automatically by default.
6. The snackbar should support disabling auto-hide behavior when configured by the user.
7. The snackbar must emit an event, informing when an user has interacted with the default/slotted action part(s).
8. The snackbar must follow the design/theming guidelines imposed by the package.
9. It must follow the WAI-ARIA guidelines as closely as possible.

Developer stories:

As a developer I expect to be able to:

• to inform an end user about an application operation being executed/done by using the snackbar
• initialize a snackbar
• customize the content of the snackbar message through a slot
• show an interactive element if needed, either through the default snackbar action button or by providing my own through a slot
• react to end-user interaction with the action element by listening for an event
• control the snackbar visibility state, either through an attribute/property or through a method call
• adjust the auto hide duration of the snackbar
• control whether the snackbar will hide automatically
• control where the snackbar will position itself on the viewport when displayed
• customize the appearance of the snackbar component

The snackbar component displays a rectangular container with a solid background and a shadow. By default it is positioned at the bottom of the viewport. It usually contains a single-line text message and an optional action element(s). The snackbar should be above all other screen elements and should be non-intrusive by default (non-modal and non-focus stealing). By default the component is hidden automatically after a certain time period passes or if configured, until the end-user interacts with it.

Design hand-off

Default with slotted content

<igc-snackbar>...</igc-snackbar>

With default action button

<igc-snackbar action-text="OK">...</igc-snackbar>

With custom action slot

<igc-snackbar>
  ...
  <custom-button slot="action">...</custom-button>
</igc-snackbar>

• When showing/hiding the visibility state of the component through the open attribute, the default animations will not be triggered.
• Contrary, calling any of show/hide/toggle methods will trigger the respective animation.
• Setting a new value for displayTime while the component is being shown, will clear any auto-hide timers and start a new timeout with the passed value.
• When actionText is set, the default action button of the snackbar will be shown.
• When both actionText is set and the action slot has user provided content, the slotted content will take precedence.

No specific points are applicable for localization.

No intrinsic implementation is required.

1. Should have correct DOM structure with no action(s) present.
2. Should have correct DOM structure with action(s) present.
3. Should project slotted content in the default slot.
4. Should project slotted content in the action slot.
5. Should abide by the value of displayTime before auto hiding.
6. Setting keepOpen should override any displayTime value.
7. Should control the visibility by setting open attribute.
8. Should control the visibility by calling show()/hide().
9. Should toggle the visibility by calling toggle().
10. Should emit igcAction event when clicking the default action button.
11. Should emit igcAction event when clicking a slotted action component.

As the snackbar is non-intrusive by design, it is non-focusable by default and it does not steal focus for itself or its children when shown. If that is a desired behavior, it is up to the developer to move focus after the snackbar is shown.

role: status

aria-live: polite

These should cover the majority of use cases. Developers may override them by setting the appropriate ARIA attributes on the snackbar component.

The default snackbar animations take into account the prefers-reduced-motion media query, and when present, will complete immediately (duration of 0).

The component should work in a Right-To-Left context without additional setup or configuration.

None applicable.