Skip to content

Switch Specification

Jump to bottom
Silvia Ivanova edited this page Jul 19, 2021 · 9 revisions

Switch Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility
  6. Assumptions and Limitations
  7. References

Owned by

Team Name: Design and Web Development (DnD)

Developer: Silvia Ivanova

Designer: Stefan Ivanov

Requires approval from

  • Simeon Simeonov | Date:

Signed off by

  • Product Owner: Radoslav Mirchev | Date:
  • Radoslav Karaivanov | Date:

Revision History

Version Users Date Notes
1 Silvia Ivanova Date 16 July 2021 Update specification

1. Overview

The <igc-switch> component is used to provide a capability for making a binary choice of a single settings option.

Objectives

It is providing API for the most common use cases when it comes to a binary choice for a certain condition. Switch takes on common visual properties of the radio button.

Acceptance criteria

  1. The switch component should have a toggle visual representation.
  2. The switch component should have a clickable button.
  3. The switch component should be identifiable via a property, like name.
  4. The switch component should represent a unit of information, like value.
  5. The switch component should provide a way to be disabled.
  6. The switch component should have the ability to add a corresponding label (before or after).
  7. The switch component should be interacted via mouse and/or keyboard.
  8. The switch component should be accessible.
  9. The switch component should emit an event when it gains focus.
  10. The switch component should emit an event when it loses focus.
  11. The switch component should emit an event when its checked status changes.
  12. The switch component should be able to report validation errors in the context of web forms.

2. User Stories

Developer stories:

  • Story 1: As a developer, I want to be able to provide a way to display a binary choice - true or false.
  • Story 2: As a developer, I want to be able to name the switch, so that I can easily identify it when used with other selection controls of the same type.
  • Story 3: As a developer, I want to be able to set the value of the switch, so that I can associate a piece of information with it.
  • Story 4: As a developer, I want to be able to specify the default state of the switch - checked or unchecked.
  • Story 5: As a developer, I want to be able to disable the switch, so that the user cannot change its state.
  • Story 6: As a developer, I want to be able to place content between the opening and closing brackets of the switch component, so that it can be used as a corresponding label.
  • Story 7: As a developer, I want to be able to position the label of the switch either before or after the control, so that it better suits the design.
  • Story 8: As a developer, I want to be able to programmatically click the switch, so that I can interact with it via means other than a computer mouse.
  • Story 9: As a developer, I want to be able to programmatically focus the switch, so that I can manually trigger the focus event.
  • Story 10: As a developer, I want to be able to programmatically blur the switch, so that I can manually trigger the blur event.
  • Story 11: As a developer, I want to be able to listen to blur, focus, and change events, so that I can better manage the state of the switch component.
  • Story 12: As a developer, I want to be able to check the validity of the switch, so that I can handle form errors and/or warnings.
  • Story 13: As a developer, I want to be able to set a custom validation message, so that the users can easily identify and fix form errors and/or warnings.
  • Story 14: As a developer, I want to be able to customize the appearance of the switch component, so that it better fits the design language of my application.
<igc-switch checked="true" disabled="true" labelPosition="before">
Checked Switch
</igc-switch>

End-user stories:

  • Story 1: As an end-user, I want to be shown a visual representation of certain state changes.
  • Story 2: As an end-user, I want to be able to identify if a switch is disabled or not.

3. Functionality

3.1. End-User Experience

The switch component should display a toggle changing the state of a single settings option. It comes with 3 different states (checked, unchecked, and disabled) and a corresponding label.

3.2. Developer Experience

checked: Determines the initial state of the switch to checked="true".

disabled: Determines whether the switch is enabled or disabled.

3.5. API

Properties

You should be able to configure the igc-switch by setting properties on it.

Name Description Type Default value Reflected
checked Determines the initial state of the switch boolean false false
disabled Determines the accessibility state of the switch boolean false false

Events

Slots

Name Description
(default)

CSS Parts

Name Description
base The base wrapper of the switch.

4. Test Scenarios

Automation

  • Scenario 1:

5. Accessibility

Clone this wiki locally