Bottom Nav Specification

Owned by

Team Name: CodeX

Developer Name: Diyan Dimitrov

Designer Name

Requires approval from

Peer Developer Name | Date:
Stefan Ivanov | Date:

Signed off by

Radoslav Mirchev | Date:
Radoslav Karaivanov | Date:

Revision History

Version	Users	Date	Notes
1	Names of Developers and Designers	Date

1. Overview

igx-bottom-nav component is used to organize or switch between similar data sets. It contains igx-bottom-nav-item components. The igx-bottom-nav-item component is a wrapper for igx-bottom-nav-panel and igx-bottom-nav-header components that will represent respectively the container for the data and the header. The igx-bottom-nav-header may contain a label and/or icon with a badge in addition. The igxBottomNavHeaderIcon and igxBottomNavHeaderLabel directives are exposed for styling the header icon and label.

<igx-bottom-nav>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
            <span igxBottomNavHeaderLabel>Tab 1</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-panel>
            <h1>Tab 1 Content</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </igx-bottom-nav-panel>
    <igx-bottom-nav-item>
    <igx-bottom-nav-item>
        <igx-bottom-nav-header>
            <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
            <span igxBottomNavHeaderLabel>Tab 2</span>
        </igx-bottom-nav-header>
        <igx-bottom-nav-panel>
            <h1>Tab 2 Content</h1>
    	    <p>Lorem ipsum dolor sit amet...</p>
        </igx-bottom-nav-panel>
    <igx-bottom-nav-item>
</igx-bottom-nav>

The igx-bottom-nav component could also be used as a tab strip integrated with routing. In this scenario, tab panels are not defined. The component is not tied to any particular router. The following code snippet demonstrates an integration with the Angular router:

<router-outlet></router-outlet>

<igx-bottom-nav>
    <igx-bottom-nav-item
        routerLinkActive
        #rla1="routerLinkActive"
        [selected]="rla1.isActive"
    >
        <igx-bottom-nav-header
            routerLink="/tabs-routing/view1"
        >
            <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
            <span igxBottomNavHeaderLabel>Tab 1</span>
        </igx-bottom-nav-header>
    </igx-bottom-nav-item>

    <igx-bottom-nav-item
        routerLinkActive
        #rla2="routerLinkActive"
        [selected]="rla2.isActive"
    >
        <igx-bottom-nav-header
            routerLink="/tabs-routing/view2"
        >
            <igx-icon igxBottomNavHeaderIcon>folder</igx-icon>
            <span igxBottomNavHeaderLabel>Tab 2</span>
        </igx-bottom-nav-header>
    </igx-bottom-nav-item>
</igx-bottom-nav>

Objectives

End-to-end user experience prototype

igx-bottom-nav should follow the mobile-first approach and should be suitable for hybrid applications
Selecting a bottom nav header and viewing its content
Differentiation between bottom nav items states (active, inactive, disabled)
Templatable bottom nav header - modifying by including icon/label
Indication of bottom nav item update via a badge component
Setting the number of bottom nav items
Customizing the animation for the transition of the content of the items

Acceptance criteria

Must-have before we can consider the feature a sprint candidate

The bottom-nav should calculate its layout only by itself.

Bottom-nav items can be disabled if necessary.
Bottom-nav items are templatable with an icon and label elements.
The bottom-nav panel may contain arbitrary HTML content.
A bottom-nav panel is selectable upon user interaction with the corresponding bottom-nav item.
Items and their respective panels are in sync with regard to their state: selected/disabled.
Updates in a panel are indicated via a badge shown on the respective item.

2. User Stories

Elaborate more on the multi-facetted use cases

Developer stories:

As a developer I want to:

Story 1: As a developer, I want to display multiple bottom nav items (2-5) with their associate panels in a bottom nav component.
Story 2: As a developer, I want to customize each bottom nav header with:
- Label - should fit on a single line. If the text is longer then it wraps to a second line before it’s truncated (three points at the end)
- Icon
- Label and icon - the label is one line only (should fit the width of the respective header container) and is placed just below the icon
Story 3: As a developer, I want to indicate updates in a panel via a badge shown in the header of the respective item (simple badge/badge with the numerical value of the updates).
Story 4: As a developer, I want to have the option to set the currently selected bottom nav item through code.
Story 5: As a developer, I want to enable/disable the animation for the transition of the content of the bottom nav items.
Story 6: As a developer, I want to be able to disable certain bottom nav items.
Story 7: As a developer, I want the header containers to distribute evenly across the bottom nav.

End-user stories:

Story 1: As an end-user, I want to navigate between the bottom nav items upon header click.
Story 2: As an end-user, I want to be able to visually differentiate active, inactive, and disabled items.
Story 3: As an end-user, I want to have customized bottom nav headers e.g. with an icon, a label, both.
Story 4: As an end-user, I want to be notified of item updates via a badge component.

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End-User Experience

2 items with labels only

3 items with icons only

4 items and an item with a badge with a number

An item with a simple badge

5 items with labels and icons and active, inactive, disabled states

An item with a truncated label

3.2. Developer Experience

It should be able to add multiple (2-5) tabs.
Layout - each tab's width equals the available width divided by the number of Tabs applied. Developers can define 2 to 5 Tabs. The bottom-nav should calculate the dimensions by itself.
Synchronization - It should be able to define states of the tabs:
- selected / deselected,
- enabled / disabled,
- updated / not updated.
Bottom-nav should provided its current selected tab and its index.
Badge placed into tab should display the counter of the changes, happened in relative panel.
The component should be hidden/shown as the main content is scrolled.
As a developer I want to automatically scroll to the top of the content on tap on a selected Tab.

3.3. Globalization/Localization

Describe any special localization requirements such as the number of localizable strings, regional formats

3.4. Keyboard Navigation

Keys	Description

3.5. API

IgxBottomNavComponent

Options

Name	Description	Type	Default value
`selectedIndex`	Gets/sets the index of the selected tab.	`number`
`selectedItem`	Gets the selected tab item component.	`IgxTabItemDirective`
`disableAnimation`	Enables/disables the animation for transition of the contents of the tabs.	`boolean`	`true`

Events

Name	Description	Cancelable	Parameters
`selectedIndexChange`	Emitted when the selected index changes.	no	index: number
`selectedIndexChanging`	Emitted when the selected index is about to change.	yes	{ owner: IgxTabsDirective, cancel: boolean, oldIndex: number, newIndex: number }
`selectedItemChange`	Emitted when the selected tab item changes.	no	{ owner: IgxTabsDirective, oldItem: IgxTabItemDirective, newItem: IgxTabItemDirective }

IgxBottomNavItemComponent

Options

Name	Description	Type	Default value	Valid values
`selected`	Gets/sets whether the tab item is selected.	boolean	`false`
`disabled`	Gets/sets whether the tab item is disabled.	boolean	`false`

IgxBottomNavHeaderComponent

(No public API)

IgxBottomNavPanelComponent

(No public API)

4. Test Scenarios

Automation

Scenario 1:
scenario 2:

5. Accessibility

ARIA Support

Roles:
- Bottom-nav has tabs role.
- Panel has tabpanel role.
- Header has tab role.
- Headers container has tablist role.
Attributes:
- Include aria-controls on the header to link it to its panel.
- Include aria-labelledby on the panel to link it to its header.
- Include aria-selected on the header.