Banner Specification

Overview

igx-banner supports banner component that is shown at the full width of the screen above the app content but below a Navigation Bar if available.

Objectives

Provide means for developers to implement a mechanism that is less transient than a Snackbar and less obtrusive than a Dialog to display context-specific information with minimal efforts.

Simpler Layout

More Complex Layout

User Stories

Developer

As a developer, I want to be able to add a Banner to my application, so that I can inform or “ask” the end user.
As a developer, I want to add a message to the Banner, so that I clarify my Banner better for the end user.
As a developer, I want to have at least one button, so that I can enable the end user confirm that he had been notified.
As a developer, I want to add second button, so that I can enable the end user make a choice.
As a developer, I want to customize the Banner template using ng-content, so that I would provide the end user with a custom Banner that suits the functions of the app. (various height, add more content, add inputs, checkboxes, radio button and etc)

End user

As an end user, I want to get informed about events that are not critical in a less obtrusive way.
As an end user, I want to get message in the Banner, so that I read more details and have a better understanding of my current situation.
As an end user, I want to get an Icon that help me understand better the message shown.
As an end user, I want to be able to take actions that are relevant to the information that is displayed.

Acceptance criteria

As a developer I can add a Banner to the application.
As a developer I can add a message to the Banner.
As a developer I can add an optional Avatar with icon to the Banner.
As a developer I can add one button to the Banner.
As a developer I can add a second button to the Banner.
As a developer I can customize the Banner content if needed.
As a developer I can assign events to actions occurring on the Banner.
The end user sees the Banner inline with other app content and may ignore or dismiss it.
The end user could interact with the Banner through the actions triggered by the provided action buttons.
The citizen developer has all ARIA tags that apply.

Test Scenarios

Automation

Banner can contain an informative text message and optionally supplement it using a supporting illustration (icon or image).
Banner contains at least one button with the dismissive action.
Buttons are placed under the banner message or on the same line if there is enough room to fit both.
Banner spans the entire width of the parent element.
In case a banner appears after a screen loads it animates from the top of the parent element layout pushing the content downwards.
Banner persists until the user acts on it or dismisses it. Any other user interaction with the app content (button clicking, key navigation, scrolling, form submission, etc.) should not dismiss the banner.
Banner dismissal/confirmation calls open()/close() method, triggers proper events and hides the banner
onOpening and onClosing events are fired on banner opening/closing.
onOpened and onClosed events are fired when banner has been opened/closed.
onOpening and onClosing events are cancelable, which prevents banner from opening/closing .
In case multiple banners are opened each banner pops up not affecting the others.

Functionality

End User Experience

The Banner must follow the material design guidelines, i.e. less transient information container that the Snackbar and less obtrusive than a Dialog, which pushes the rest of the application interface as it appears from the bottom or the top. The Banner appears to be inlined with the rest of the content and lies on the same plain as the main app content (no elevation is ever applied).

Developer Experience

User Interface

The end user interface consists of:

Content - the Banner content is typically a text paragraph and optionally an icon avatar may precede it. However, the content presents a template where custom layouts can be accomplished too.
Actions - Banners present a focused and limited set of actions, which are generally affirmative or dismissive, but may also be specific to the content message