Skip to content

Tabs Specification

Jump to bottom
Martin edited this page Mar 17, 2023 · 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: Radoslav Karaivanov | Date: 3-June-2022
  • Design Manager: Svilen Dimchevski | Date: 30-May-2022

Signed off by

  • Radoslav Mirchev | Date: 20-May-2022
  • Radoslav Karaivanov | Date: 3-June-2022

Revision History

Version Users Date Notes
1 Maria Tsvyatkova 5-Mar-2022
1.01 Radoslav Mirchev 20-May-2022 Update of the User Stories
1.02 Teodosia Hristodorova 22-Feb-2023 Refactor the Tabs Spec

1. Overview

The igc-tabs component is used to organize or switch between similar data sets. It has a default slot that wraps igc-tab components. The igc-tab component exposes label, prefix, suffix and a default slot that represents the tab's content. The label slot may contain text and/or icon or other custom content.

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

Objectives

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

Acceptance criteria

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

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.

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

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

  • Story 6: 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.
  • Story 4: As an end-user, I want to have customized tab headers e.g. with a label, an icon, both, close button.

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. It has an arrow in disabled state pointing to the start and an arrow in enabled state pointing to the end. After scrolling by pressing the enabled arrow at the end, once you have tabs that are not fully visible in the left of the container the left arrow becomes enabled as well. After scrolling to the end of the container, the arrow at the end of the tabs container becomes disabled.

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

The scroll's range is done based on the next/prev tab which end/start is not within the visible container.

Icons

Text and icon stacked vertically

Content-fit Type - text and icon stacked horizontally

Tabs with a suffix - for example a close button

Wrapped long label to a second line

** Prepared design files for styling e.g. interplay with features and light/dark variants design hand-off

3.2. Developer Experience

<igc-tabs>    
    <igc-tab .label="Item 1">Content 1</igc-tab>
    <igc-tab .label="Item 2">Content 2</igc-tab>
    <igc-tab .label="Item 3" disabled>Content 3</igc-tab>
</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 the selected tab. The first not-disabled tab is selected by default when no other selection is specified. string tab[0].panel false
alignment Gets/sets the tab header alignment. By default, it is start and the tab 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 new tab is selected when pressing Left/Right/Home/End keys (the default behavior), or only focused - selection happens when pressing Enter/Space. auto | manual auto 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 components.

CSS Parts

Name Description
start-scroll-button The start scroll button is displayed when the tabs overflow.
end-scroll-button The end scroll button is displayed when the tabs overflow.
selected-indicator The indicator that shows which tab is selected, it's visible for all themes except bootstrap.

IgcTabComponent

Properties

Name Description Type Default value Reflected
selected Gets/sets whether the tab is selected. boolean false true
disabled Gets/sets whether the tab is disabled. boolean false true
label Gets/sets whether the tab header label. string undefined true

Slots

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

CSS Parts

Name Description
header The header of a single tab.
prefix Holds the header's label prefix.
content Holds the header's label.
suffix Holds the header's label suffix.
body Holds the body content of a single tab, only the body of the selected tab is visible.

4. Test Scenarios

Automation

  • Tabs should select the first enabled tab by default.
  • Tabs should select tab on click if it is not disabled.
  • Tabs should select/deselect tab using select() method.
  • Tabs should select next/previous tab when pressing Right/Left Arrow.
  • Tabs should select first/last enabled tab when pressing Home/End button.
  • Tabs should focus next/previous tab when pressing Right/Left Arrow and activation is set to manual.
  • Tabs should select the focused tab when Enter/Space is pressed and activation is set to manual.
  • Tabs should scroll tab headers area when clicking left/right scroll buttons.
  • Tabs should not select disabled tabs on Left/Right/Home/End key down or click.
  • Tabs should hide the selected indicator when no tab is selected.
  • The change event is fired when selected tab changes.
  • Tabs should show prefix and suffix properly.
  • TabAlignment should be set to start by default.
  • Tabs should align tab headers properly when tabAlignment is set to start/end/center/justify.
  • Scroll buttons should be hidden when tabAlignment is justify.
  • Selected indicator should align with the selected tab.

5. Accessibility

ARIA Support

  • the element that contains the tab headers has role="tablist";
  • the tab header has role="tab";
  • the tab header has aria-controls linking it to the panel id;
  • 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