Tabs Specification (Old)

Tabs Specification

1. Overview

igx-tabs component is used to organize or switch between similar data sets. It should be a wrapper component for igx-tab-item and igx-tabs-group that will represent respectively the container for the data and the tab header. Tabs component places the tabs at the top and allows scrolling when there are multiple tab items.

Tabs are ordered in a single row above their associated content.

<igx-tabs>
  <igx-tabs-group label="Tab 1">
    <h1>Tab 1 Content</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </igx-tabs-group>
  <igx-tabs-group label="Tab 2">
    <h1>Tab 2 Content</h1>
    <p>Lorem ipsum dolor sit amet...</p>
  </igx-tabs-group>
</igx-tabs>

Objectives

igx-tabs-group should be associated with particular igx-tab-item and the tabs component should synchronize their states. The tabs definition should be achieved by a minimum code.

2. User Stories

Developer:

As a citizen developer, I want to:

display multiple tabs items with their associate groups in a tabs component and scroll them if they don't fit in.
customize each tab with label, icon, both.
have the option to set the currently selected tab item through code.
be able to choose between 2 types of tabs using type:
- fixed size. All tabs are equal size and fit the width of the tabs group.
- content fit. The size of the tab depends on the tab-item content (label, icon, both) and all tabs have equal padding.
have the option to disable and enable the animation of the transition of the tabs' contents.
to have two options when the tabs overflow of their container:
- have scrollable tabs.
- have a dropdown icon that shows the hidden content.

End user:

As an end user, I want to:

navigate between the tabs upon click.
navigate between the invisible tabs using scroll when there are many tabs that don't fit the parent container.
have customized tabs with label, icon or both.

Width minimum and maximum (inclusive of padding)

Maximum (whichever fits and is smaller): 264dp or (the value of view size minus 56dp)
Minimum: 160dp for larger views, 72 dp for smaller views

Height

48dp

Alignment

Centered or aligned with left keyline

Acceptance criteria

The tabs component should calculate its layout based on the Material guidelines.
The tabs should be scrollable in the container through buttons, or "More" tab should be provided to list the not visible tabs and possibility to select specific tab.
The developer should be able to determine whether the tab item is disabled.
The developer should be able to customize the tab item by icon and label or custom template.
The developer should be able to set random HTML content in a group.
The developer should be able to specify explicitly the selected tab item through code.
The end user should be able to select a tab item/group.
The tabs and their content should synchronize their states: selected/disabled.

3. Functionality

3.1. End User Experience

Scrollable Tabs: As the tab items overflow the tabs container, a designated area appears at the start and at the end of the tabs container. The occucance visually pushes the first tab thus causing a "jump" in case of resizing. The area at the start displays a disabled arrow, and at the end it has an arrow pointing to the end. After a scroll the first area is populated with an arrow pointing at the start.

In case of a selection of a partially visible tabs item, the tabs pre-scroll so that the later is seen fully visible.

The scroll's range is done in pixels.

DropDown Menu:

3.2. Developer Experience

The developer should be able to add multiple tab items.
The developer should be able to specify the mechanism for tab positioning (fixed, content fit).
The developer should be able to set enable/disable state to tabs items.
Tabs component should provided its current selected tab item and its index.

3.3. Keyboard navigation

Tabs with Automatic Activation https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html

Key	Function
Tab	When focus moves into the tab list, places focus on the active tab element . When the tab list contains the focus, moves focus to the next element in the tab sequence, which is the tabpanel element
Right Arrow	Moves focus to the next tab. If focus is on the last tab, moves focus to the first tab. Activates the newly focused tab.
Left Arrow	Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Activates the newly focused tab.
Home	Moves focus to the first tab and activates it.
End	Moves focus to the last tab and activates it.
Delete	Removes the tab from the tab list and places focus on the previous tab.

3.4. API

Options

Name	Description	Type	Default value
`selectedIndex`	The index of the selected tab.	number
`selectedTab`	The last selected tab.	IgxTabItemComponent
`icon`	Set an icon of a tab.	string
`label`	Set the label of a tab.	string
`isDisabled`	Set if the tab is enabled/disabled.	boolean
`tabsType`	Set the tab item sizing mode. By default, the sizing type is `fixed` and all tabs have equal size to fit the view port. When `contentfit` is set, the tab item width is sized to its content in the range of min/max width.	TabsType	fixed
`disableAnimation`	Enables/disables the animation for transition of the contents of the tabs.	boolean	`false`

Methods

Name	Description	Return type	Parameters
`select`	Selects tab and its content.

Events

Name	Description	Cancelable	Parameters
`onTabItemSelected`	Emitted when the tab item is selected.
`onTabItemDeselected`	Emitted when the tab item is deselected.

4. ARIA Support

Roles:
- Tabs has tabs role.
- Panel content area has tabspanel role.
- Tabs has tabitem role.
Attributes:
- Include aria-controls to link each tab to its content.
- Maintain aria-selected state between tab item and tab item content.