Skip to content

Tabs Specification

Jump to bottom
Maria Tsvyatkova edited this page May 9, 2022 · 35 revisions

Tabs Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility
  6. Assumptions and Limitations
  7. References

Owned by

Team Name: CodeX

Developer Name: Maria Tsvyatkova

Designer Name

Requires approval from

  • Peer Developer Name | Date:
  • Design Manager Name | Date:

Signed off by

  • Radoslav Mirchev | Date:
  • Radoslav Karaivanov | Date:

Revision History

Version Users Date Notes
1 Maria Tsvyatkova 5-Mar-2022

1. Overview

The igc-tab component is used to organize or switch between similar data sets. It contains igc-tab-item components. The igc-tab-item component is a wrapper for the content slot and igc-tab-header component that will represent respectively the container for the data and the tab header. The igc-tab-header may contain a label and/or icon or other custom content.

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

Objectives

The tab component provides tab selection and viewing of its content, differentiating between tab items states (active, inactive, disabled)

Acceptance criteria

  1. The tab component should support start (default), end, center and justify tab alignments.
  2. The tab component should allow scrolling when there are multiple tab items which does not fit in view.
  3. The tab component should support keyboard navigation between tab items.
  4. The tab component should wrap long labels in tab headers to a second lines.
  5. The tab component should support disabling of tab items.

2. User Stories

Developer stories:

  • Story 1: As a developer, I want to customize each tab header with a label, an icon, or both, so that header area is fully customizable.

  • Story 2: As a developer, I want to select tab through code, so that its content is visible.

  • Story 3: As a developer, I want to choose between four modes of tab header alignment, so that I can control the headers which are visible:

    • Start - the size of the tab headers depends on their content, all tabs have equal padding and are aligned to start.
    • End - the size of the tab headers depends on their content, all tabs have equal padding and are aligned to end.
    • Center - the size of the tab headers depends on their content, all tabs have equal padding and are aligned to center.
    • Justify - all tab headers are equal in size and fit the width of the tabs component.

    If the alignment is not justify and the tab headers don't fit in the available width for the tabs container it can be scrolled (left and right scroll buttons/left and right swipe/mousewheel) to show the tabs that are not in view.

  • Story 4: As a developer, I want to control the animation of the transition of the tabs' content, so that I can decide whether to have it.

  • Story 5: As a developer, I want to disable certain tabs, so that the end user cannot interact with them.

  • Story 5: As a developer, I want to wrap long labels in the tab header to a second line so that text is fully visible. In case the text is too long it will be truncated and three periods will be displayed at the end.

End-user stories:

  • Story 1: As an end-user, I want to click on tab header, so that I can view the tab content.
  • Story 2: As an end-user, I want to scroll tab headers, so that I can view the ones which are not displayed on load because they are too many to fit the parent container.
  • Story 3: As an end-user, I want to visually differentiate tab states, so that I know if tab is active, inactive, and disabled.

3. Functionality

3.1. End-User Experience The default dimensions of the tabs are as follows:

Width minimum and maximum (inclusive of padding)

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

Height

48dp when content is only icon, only text, or horizontal stack of text and icon
72dp when content is icon and text stacked vertically

Alignment

Centered, start, or end


Justify

Scrollable Tabs: As the tab headers overflow the tabs container, a designated area appears at the start and at the end of the tabs container. This 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 latter is seen fully visible.

The scroll's range is done in pixels.

Icons

Text and icon stacked vertically

Content-fit Type - text and icon stacked horizontally

Tabs with a suffix - close button

Wrapped long label to a second line

3.2. Developer Experience

<igc-tabs selected="second">    
    <igc-tab panel="first">Item 1</igc-tab>
    <igc-tab panel="second">Item 2</igc-tab>
    <igc-tab panel="third" disabled>Item 3</igc-tab>

    <igc-tab-panel slot="panel" name="first">Content 1</igc-tab-panel>
    <igc-tab-panel slot="panel" name="second">Content 2</igc-tab-panel>
    <igc-tab-panel slot="panel" name="third">Content 3</igc-tab-panel>
</igc-tabs>

3.3. Globalization/Localization

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

3.4. Keyboard Navigation

Keys Description
Tab When the focus moves to the tabs component, places focus on the active tab element. When the tabs component contains the focus, moves focus to the next element in the tab sequence, which is the tab panel element or navigation button
Right Arrow Moves focus to the next tab. If focus is on the last tab, moves focus to the first tab. Selects the newly focused tab if activation is set to select (default value)
Left Arrow Moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Selects the newly focused tab if activation is set to select (default value)
Home Moves focus to the first tab. Selects the newly focused tab if activation is set to select (default value)
End Moves focus to the last tab. Selects the newly focused tab if activation is set to select (default value)

3.5. API

IgcTabsComponent

Properties

Name Description Type Default value Reflected
?selected Gets/sets the selected tab. The first tab is selected by default. string tab[0].panel false
alignment Gets/sets the tab header alignment. By default, it is start and the tab item width is sized to its content in the range of min/max width. When justify is set, all tabs have equal size to fit the view port. start | end | center | justify start true
activation Determines whether moving the focus also select the tab and the corresponding panel is displayed (the default behavior), or after selection happens when pressing space/enter. focus | select select false

Events

Name Description Cancelable Parameters
igcChange Emitted when the selected tab is changed. false -

Methods

Method Description Return Type
?select Selects a tab by the value of the panel property or an element reference. (tab: string | HTMLElement): void

Slots

Name Description
(default) Renders the tab's header.
panel Renders the tab's content.

CSS Parts

Name Description
base The base wrapper of the tabs component.
header-container The container for the tab headers and select indicator.
selected-indicator The selected indicator.
content The container for the tab's content.
scroll-button The scroll buttons displayed when the tab headers overflow.

IgcTabComponent

Properties

Name Description Type Default value Reflected
panel The name used to identify the tab header. string undefined false
selected Gets/sets whether the tab item is selected. boolean false false
disabled Gets/sets whether the tab item is disabled. boolean false true

Slots

Name Description
(default) Renders the tab header's content.
prefix Renders the tab header's prefix.
suffix Renders the tab header's suffix.

CSS Parts

Name Description
base The base wrapper of the tab header.
prefix The prefix wrapper.
suffix The suffix wrapper.

IgcTabPanelComponent

Properties

Name Description Type Default value Reflected
name The name used to identify the tab panel and link it to the header. string undefined false

Slots

Name Description
(default) Renders the tab's panel content.

CSS Parts

Name Description
base The base wrapper of the tab panel.

4. Test Scenarios

Automation

  • Scenario 1:
  • scenario 2:

5. Accessibility

ARIA Support

  • the element that contains the tab headers has role="tablist";
  • the tab header has role="tab";
  • the tab panel has role="tabpanel";
  • aria-selected - indicates the tab header is selected and its associated panel is displayed;
  • aria-disabled - indicates the tab header is disabled.

RTL Support

6. Assumptions and Limitations

Assumptions Limitation Notes

7. References

Specify all referenced external sources

Clone this wiki locally