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

1. Overview

The <igc-toggle> component displays some content on top of another. It can be positioned relative to a specified target DOM element or a virtual area defined by its coordinates.

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 virtual rectangular area without having an actual target DOM 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.
• As a developer, I want to control what happens with the open toggle during scrolling.
• As a developer, I want to have API to show and hide the toggle.

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 hide(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
collapsed	Sets toggle's visibility.	Boolean	true	false
placement	Sets the position of the toggle.	Placement	bottom-start	false
scrollStrategy	Determines the behavior of the toggle while scrolling the container.	absolute | block | close | noop	absolute	false
modal	Whether the toggle is in 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
target	The target element to position the popper.	HTMLElement | VirtualElement		false

3.1.2 Methods

Name	Description	Parameters
show	Shows the toggle.	-
hide	Hides the toggle.	-
toggle	Toggles between open and collapsed.	-
setOffset	Offsets the toggle along the corresponding axis by the provided amount	deltaX: number, deltaY: number

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)	Renders the toggle's content

4. Accessibility & ARIA Support

5. References

6. Dependencies

The igc-toggle component depends on Popper and utilizes its positioning capabilities.