Skip to content

Expansion Panel

Jump to bottom
Teodosia Hristodorova edited this page May 18, 2022 · 44 revisions

Expansion Panel Specification

Contents

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

Owned by

Astrea

Developer Name : Monika Kirkova, Bozhidara Pachilova

Designer Name

Requires approval from

  • Martin Evtimov | Date: 29-Apr-2022
  • Svilen Dimchevski | Date: 9-May-2022

Signed off by

  • Radoslav Mirchev | Date: 27-Apr-2022
  • Damyan Petev | Date: 13-May-2022

Revision History

Version Users Date Notes
1 Radoslav Mirchev 01-Apr-2022 Created
1.01 Radoslav Mirchev 07-Apr-2022 End-User Stories are added
1.02 Teodosia Hristodorova 11-Apr-2022 Developer Stories and Functionality are added

1. Overview

The ExpansionPanelComponent provides a way to display information in a toggleable way -

  • compact summary view containing title and description and expand indicator
  • expanded detail view containing additional content in addition to the summary header.

Objectives

The igc-expansion-panel component is useful for reducing vertical space with large amounts of information. It should support the following features:

  • Collapsible body
  • Header Icon Templates
  • Disable user interaction

Provide a base component that can later be used for implementation of igc-accordion

Acceptance criteria

The expansion panel should have the following features out-of-the-box

  1. Expanding
  2. Collapsing
  3. Template Header expand/collapse icon

2. User Stories

Elaborate more on the multi-facetted use cases

Developer stories:

Story 1: As a developer, I want a component that is able to expand its content upon user interaction or collapse it if already expanded to return to the default state i.e. collapsed. I expect that I am able to change this default state to expand if I need to.

Story 2: As a developer, I want to be able to template the expanded and collapsed content areas.

Story 3: As a developer, I want to be able to template the expansion indicator area.

Story 4: As a developer, I want to be able to determine the position of the expansion indicator.

Story 5: As a developer, I expect that the component can be used as an element of a collection i.e. composition of an accordion as a list of instances of this component is easily doable.

Story 6: As a developer, I want to be able to cancel the default header interaction behavior, depending on certain conditions

Story 7: As a developer, I would like to be able to disable the interaction with the expansion panel (header).

End-user stories:

Story 1: As an end user, I want to be able to expand an area in order to reveal more detailed content.

Story 2: As an end user, I want to be able to collapse an area with detailed content to reduce the amount of scrolling I need to perform in order to reach further content.

Story 3: As an end user, I want to expand/collapse a content area using my keyboard e.g. by pressing space, enter, alt + arrow down (to expand) or alt + arrow up (to collapse).

3. Functionality

Describe behavior, design, look and feel of the implemented feature. Always include visual mock-up

3.1. End-User Experience

Story 1: As an end user, I want to be able to expand an area in order to reveal more detailed content.

Story 2: As an end user, I want to be able to collapse an area with detailed content to reduce the amount of scrolling I need to perform in order to reach further content.

Story 3: As an end user, I expect that the expansion and collapsing happens smoothly.

Story 4: As an end user, I want to expand/collapse a content area using my keyboard e.g. by pressing space, enter, alt + arrow down (to expand) or alt + arrow up (to collapse).

Story 5: As an end user, I expect the indicator icon to visually reflect the expanded/collapsed state of the component.

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

3.2. Developer Experience

3.3. Globalization/Localization

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

3.4. Keyboard Navigation

Keys Description
Alt + Arrow Down Expand the focused panel
Alt + Arrow Up Collapse the focused panel
Enter / Space Toggle the expansion state of the focused panel

3.5. API

IgcExpansionPanelComponent

Properties

Name Description Type Default value Reflected
open Get/Set whether the contents of the control be visible. boolean false true
indicatorPosition Where should the icon be displayed ('start' or 'end') end | start| none start true
disabled Get/Set whether the expansion panel is disabled. Disabled panels are ignored for user interactions. boolean false true

Marking a panel as disabled sets its tabindex to -1, making it inaccessible via Tab navigation.

Methods

Name Description Return type Parameters
hide Hide/Collapses the control void
show Show/Expands the control void
toggle Toggles the control void

Events

Name Description Cancelable Parameters
igcClosed Emitted when hide() finishes false { panel: IgcExpansionPanelComponent }
igcOpeneded Emitted when show() finishes false { panel: IgcExpansionPanelComponent }
igcClosing Emitted when the expansion panel starts hiding true { panel: IgcExpansionPanelComponent }
igcOpening Emitted when the expansion panel starts showing true { panel: IgcExpansionPanelComponent }

Slots

Name Description
(default) The default slot. Slot for the content area of the panel.
title Slot for the title of the panel's header.
subTitle Slot for the sub-title of the panel's header.
indicator Slot for the expand/collapsed indicator.

4. Design

Design Implementation

5. Test Scenarios

Automation

  • Verify panel slots are rendered successfully.
  • Verify the elements defined in the slots are displayed.
  • The component gets expanded/collapsed on
    • header clicking
    • expand/collapse indicator clicking
    • using the keyboard (enter/space/alt+arrowdown/alt+arrowup key pressing)
    • using the API toggle() method
    • using the API show()/hide() methods
    • setting component's open property
  • The events are fired properly on opening/closing the panel
  • The component is not interactable when disabled
  • User can choose the position of the expansion indicator (start/end)
  • Expansion panel applies all appropriate classes on initialization, on panel opening and closing.
  • Should be able to prevent the expansion through the ing events.
  • Should render default indicator for expansion properly depending on panel state
  • Should accept custom slot for the panel expansion indicator
  • Should accept custom slot for the panel title
  • Should accept custom slot for the panel sub-title
  • Should render proper role and attributes for the expansion panel header and content

6. Accessibility

IgcExpansionPanel Content area:

  • role defaults to region.
  • aria-labelledby attribute defaults to the expansion panel's header id.

IgcExpansionPanel Header area:

  • role defaults to button.
  • aria-expanded attributes indicate whether the collapsible content below is in the expanded or in the collapsed state.
  • aria-disabled attribute indicates that the collapsible header is perceivable but disabled, so it is not collapsible.
  • aria-controls attribute indicates what element's functionality is governed by this element. Defaults to expansion panel's content id.
  • The indicator container is marked with aria-hidden as it only serves as visual indication equivalent to aria-expanded

RTL Support

7. Assumptions and Limitations

Assumptions Limitation Notes

8. References

Specify all referenced external sources

Clone this wiki locally