Toggle Specification

Toggle Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. Accessibility & ARIA Support
5. References
6. Dependencies

Owned by

Team Name: CodeX

Developer Name: Galina Edinakova

Designer Name:

Requires approval from

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

Signed off by

• Radoslav Mirchev| Date:
• Radoslav Karaivanov | Date:

Revision History

Version	Users	Date	Notes
1	Galina Edinakova	7-Sep-2021
2	Galina Edinakova	8-Feb-2022

1. Overview

The igcToggle directive marks content to be displayed on top of all other content. It should be positioned relative to a specified target DOM element or ?a virtual area defined by its coordinates. The IgcToggleController bundles the creation of a toggle directive and handles global events, related to the configuration of togglable components.

2. User Stories

Developer stories:

• As a developer, I want to specify the toggle's position relative to a target element.
• ?As a developer, I want to display the toggle relative to a certain virtual rectangular area without having an actual target DOM element.
• As a developer, I want to be able to pass a set of options to the directive controlling the element's position, open state and behavior based on the available space.
• As a developer, I want to use the controller to update the toggle directive parameters.

End-user stories:

• As an end-user, I want to be able to show and hide the toggle on performing an action like clicking a button.
• As an end-user, I want to be able to position the toggle according to the available space.
• As an end-user, I want to hide(or keep) the toggle when clicking outside of it.

3. Functionality

3.1. IgcToggle directive

The directive is a function that returns a value to render. It takes 3 arguments:

Name	Description	Type	Default value
target	The target element to position the popper.	HTMLElement | VirtualElement
open	The initial open state.	Boolean
options	The options describing the positioning and behavior of the toggle.	IToggleOptions

3.1.1 Usage

<div ${igcToggle(target, open, options)}>Toggle Content</div>

3.2. IgcToggleController API

3.2.1 Properties

Name	Description	Type	Default value	Reflected
open	Sets the open state of the toggle.	Boolean	false	false
target	The target element to position the popper.	HTMLElement | VirtualElement		false
options	The options describing the positioning and behavior of the toggle.	IToggleOptions	false
toggleDirective	The directive that marks the toggle.	DirectiveResult<typeof IgcToggleDirective>

3.2.2 Methods

Name	Description	Parameters
documentClicked	The document's click event handler to override in the host component.	MouseEvent
handleScroll	The document's scroll event handler to override in the host component.	Event

4. Accessibility & ARIA Support

5. References

6. Dependencies

The igcToggle directive uses Popper and utilizes its positioning capabilities.