Toggle Specification

Toggle Specification

Contents

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

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

1. Overview

The <igc-toggle> component displays some content on top of another. It can be positioned relative to a specified target element or a certain bounding rectangle.

2. User Stories

Developer stories:

• As a developer, I want to specify the toggle's position relative to a target(anchor) element.
• As a developer, I want to display the toggle relative to a certain bounding rectangle without having an actual target element.
• As a developer, I want to be able to control whether the toggle component is modal or not.
• As a developer, I want to control whether the toggle component's position should be automatically addjusted according to the available space.
• As a developer, I want to control the opening and closing of the component via events.

End-user stories:

• As an end-user, I want to be able to open and close the toggle on performing an action like clicking a button.
• As an end-user, I want to close(or keep) the toggle when clicking outside of it.

3. Functionality

3.1. API

3.1.1 Properties

You should be able to configure the igc-toggle by setting its properties:

Name	Description	Type	Default value	Reflected
placement	Sets the position of the toggle.	Placement	bottom-start	false
modal	Whether the toggle is no modal state.	boolean	false	true
flip	Whether to adjust toggle's position based on the available space.	boolean	true	false
closeOnOutsideClick	Whether the toggle should close on clicking outside of it or its target.	boolean	true	false

3.1.2 Methods

Name	Description	Parameters
open	Opens the toggle.	-
close	Closes the toggle.	-
toggle	Toggles between opened and closed.	-

3.1.3 Events

Name	Description	Cancelable	Arguments
igcOpening	Emitted just before opening the toggle.	true
igcOpened	Emitted after opening the toggle.	false
igcClosing	Emitted just before closing the toggle.	true
igcClosed	Emitted after closing the toggle.	false

3.1.4 Slots

Name	Description
default	Toggle's content

4. Accessibility & ARIA Support

5. References