Skip to content

Expansion Panel

Jump to bottom
Damyan Petev edited this page May 26, 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 subtitle 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