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 tab header. The igx-tab-header may contain a label and/or icon or other custom content. The igxBottomNavHeaderIcon and igxBottomNavHeaderLabel directives are exposed for styling the tab 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

igx-bottom-nav should follow the mobile-first approach and should be suitable for hybrid applications.

End-to-end user experience prototype

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 add multiple (2-5) tabs/panels in the bottom-nav
Story 2: As a developer, I want to identify each tab with:
- Label. The label should fit on a single line. If the text is longer than it wraps to a second line before it’s truncated.
- Icon
- Label and icon (label is one line only)
Story 3: As a developer, I want to have the option to set the currently selected tab item through code.
Story 4: As a developer, I want to have the option to enable animation of the transition of the panels.

End-user stories:

Story 1: As an end-user, I want to navigate between the tabs upon tap/click gesture.
Story 2: As an end-user, I want to track the state of the tab/panel - whether it is selected or updated.
Story 3: As an end-user, I want to be notified upon tab updates with 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

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.