Skip to content

Toggle Specification

Jump to bottom
Galina Edinakova edited this page Sep 8, 2021 · 12 revisions

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 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.
  • As a developer, I want to control what happens with the open toggle during scrolling.

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

3.1.2 Methods

Name Description Parameters
show Shows the toggle. -
hide Hides the toggle. -
toggle Toggles between open and collapsed. -

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.

Clone this wiki locally