Expansion Panel

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 expect that defined components, such as the igx-Navbar, can utilize the expansion/collapsing mechanics internally to offer smart behavior upon user interaction such as scrolling the view

Story 6: As an end user, I would like to be able to customize the expand icon.

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

Story 5: As an end user, I expect that defined components, such as the igx-Navbar, can utilize the expansion/collapsing mechanics internally to offer smart behavior upon user interaction such as scrolling the view EXAMPLE.

** 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
collapsed	Should the contents of the control be hidden. Does not trigger animations.	boolean	true	true
size	Get\Set the size of the tree. Affects all child items	small | medium | large	large	true
label	The title element of the panel header	string	null	true
iconRef	Gets the reference to the element being used as expand/collapse indicator. If iconPosition is NONE - return null	ElementRef		true
iconPosition	Where should the icon be displayed ('left', 'right' or 'none')	left | right | none	left	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 in inaccessible via Tab navigation.

Methods

Name	Description	Return type	Parameters
collapse	Collapses the control	void
expand	Expands the control	void
toggle	Toggles the control	void

Events

Name	Description	Cancelable	Parameters
igcContentCollapsed	Emitted when collapse() finishes	false	{ panel: IgcExpansionPanelComponent }
igcContentExpanded	Emitted when expanded() finishes	false	{ panel: IgcExpansionPanelComponent }
igcContentCollapsing	Emitted when the expansion panel starts collapsing	true	{ panel: IgcExpansionPanelComponent }
igcContentExpanding	Emitted when the expansion panel starts expanding	true	{ panel: IgcExpansionPanelComponent }

Slots

Name	Description
(default)	The default slot.
header	Slot for the label of the panel.
indicator	Slot for the expand/collapsed indicator.
content	Slot for the content area of the panel.

IgcExpansionPanelHeaderComponent

Properties

Name	Description	Type	Default value	Reflected

Methods

Name	Description	Return type	Parameters

Events

Name	Description	Cancelable	Parameters

Slots

Name	Description
(default)	The default slot.

IgcExpansionPanelBodyComponent

Properties

Name	Description	Type	Default value	Reflected

Methods

Name	Description	Return type	Parameters

Events

Name	Description	Cancelable	Parameters

Slots

Name	Description
(default)	The default slot.

4. Test Scenarios

Automation

• Verify panel slots are rendered successfully.
• Verify the elements defined in the slots are displayed.

• Should render the panel correctly depending on size settings

• The component gets expanded/collapsed on
  • header clicking
  • expand/collapse icon 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 collapsed property
• The events are fired properly on collapsing/expanding the panel
• The component is not interactable when disabled
• User can choose if the expand/collapse icon will be displayed
• User can choose the position of the expand/collapse icon (left/right)
• Expansion panel applies all appropriate classes on initialization, on panel expanding and collapsing.
• 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 header
• Should accept custom slot for the panel content

5. Accessibility

IgcExpansionPanel:

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

IgcExpansionPanelHeader @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.

IgcExpansionPanelHeader @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