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 and switch between panels (app screens/modes). 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 contains an icon and/or a label. A badge can be placed on the igx-bottom-nav-header e.g. to indicate changes/update/notifications related to its respective screen/mode. 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

The igx-bottom-nav should follow a 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 etc.
Indication of bottom nav item update via a badge component (using header template)
Setting the number of bottom nav items
Customizing the animation for the transition of the content of the items (Not supported)

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.

2. User Stories

Elaborate more on the multi-facetted use cases

Developer stories:

Story 1: As a developer, I want to display multiple bottom nav items (3-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 panels upon clicking on the header of a bottom nav item.
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 clarity about which panel each bottom nav header would lead me to e.g. clear labeling with icon and/or text.
Story 4: As an end-user, I want to be notified of updates related to one or more of the panels in the bottom nav via its headers.

3. Functionality

3.1. End-User Experience

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.
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.