Skip to content

Toggle Specification

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

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

Clone this wiki locally