Skip to content

Expansion Panel

Jump to bottom
Teodosia Hristodorova edited this page Apr 13, 2022 · 44 revisions

Expansion Panel Specification

Contents

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

Owned by

Astrea

Developer Name

Designer Name

Requires approval from

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

Signed off by

  • Product Owner Name | Date:
  • Platform Architect Name | Date:

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
  • 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 expanded 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 expanded and collapsed indicator areas.

Story 4: As a developer, I want to be able to show, hide the expand/collapse icon.

Story 5: As a developer, I want to be able to determine the position of the expand/collapse icon.

Story 6: As a developer, I want to be able to select an icon glyph for the expand/collapse icon.

Story 7: 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 8: As a developer, I want to be able to cancel the default header interaction behavior, depending on certain conditions

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 expect that the expansion and collapsing happens smoothly (with an animation).

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 would like to be able to customize the expand icon.

Story 6: As an end user, I would like to be able to disable the interaction with the expansion panel.

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 (with a nice animation).

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).

** 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 Should the contents of the control be visible. boolean false true
indicatorAlignment Where should the icon be displayed ('start' or 'end') end | start 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
close Close/Collapses the control void
open Open/Expands the control void
toggle Toggles the control void

Events

Name Description Cancelable Parameters
igcContentClosed Emitted when close() finishes false { panel: IgcExpansionPanelComponent }
igcContentOpeneded Emitted when open() finishes false { panel: IgcExpansionPanelComponent }
igcContentClosing Emitted when the expansion panel starts closing true { panel: IgcExpansionPanelComponent }
igcContentOpening Emitted when the expansion panel starts opening true { panel: IgcExpansionPanelComponent }

Slots

Name Description
(default) The default slot.
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.
content Slot for the content area of the panel.

4. 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 expand()/collapse() 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 accept custom slot for the panel content

5. Accessibility

IgcExpansionPanel Content area:

  • role defaults to region.
  • aria-labelledby attribute contains the element IDs of labels. If the title text is visible on screen, defaults to the expansion panel's title id. If title is not specified, aria-label takes precedence for readers.
  • aria-label attribute to be used by readers if title text(respectively aria-labelledby) are not present.

IgcExpansionPanel Header @Host:

  • role defaults to heading.
  • aria-level attribute defaults to level 3.
  • aria-labelledby attribute is set if the title text is visible on screen, defaults to the expansion panel's title id.

IgcExpansionPanel Header @Content:

  • role defaults to button.
  • aria-expanded attributes indicates 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 id.

RTL Support

6. Assumptions and Limitations

Assumptions Limitation Notes

7. References

Specify all referenced external sources

Clone this wiki locally