Skip to content

Radio Group Component

Jump to bottom
Simeon Simeonoff edited this page Jul 27, 2021 · 7 revisions

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility

Owned by

Team Name: Design and Web Development (DnD)

Developer: Simeon Simeonoff

Designer: Stefan Ivanov

Requires approval from

  • Diyan Dimitrov | Date:
  • Stefan Ivanov | Date: 21 Jul 2021

Signed off by

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

Revision History

Version Users Date Notes
1 Simeon Simeonoff Date 26 Jul 2021 Initial Proposal

1. Overview

The igc-radio-group component unifies one or more igc-radio buttons. Radio buttons aren't useful on their own and are usually a part of a bigger unit or group (see igc-radio-group) of radio buttons.

Objectives

The radio group sets common properties on contained radio buttons. The radio group can also dictate the direction and input navigation of its children elements.

Acceptance criteria

  1. The radio group component should be able to work with elements of type igc-radio.
  2. The radio group component should set the disabled property for all children elements.
  3. The radio group component should set the alignment for all contained radio buttons - horizontal or vertical.
  4. The radio group component should set the label position for all contained radio buttons - before or after
  5. The radio group component should define input navigation and focus for all contained radio buttons.

2. User Stories

Developer stories

  1. As a developer, I want to be able to set a group as disabled so that I can quickly disable all buttons in the group.
  2. As a developer, I want to be able to set the alignment for all radio buttons so that I can quickly change the direction of the group.
  3. As a developer, I want to be able to set the label position for all radio buttons so that I can quickly change the appearance of the labels in the radio group.

End-user stories

  1. As an end-user, I want to be able to navigate between radio buttons in a radio group using my keyboard and/or mouse.
  2. As an end-user, I want to be able to identify the currently focused radio button in a group.

3. Functionality

3.1. End-User Experience

The radio group is only metarepresentational in that it doesn't provide any visual clues as to whether radio buttons are wrapped within one or not. The radio group dictates the end-user behavior of all contained radio buttons.

3.2. Developer Experience

3.2.1 Standalone Usage:

<igc-radio-group alignment="vertical" label-position="before" disabled>
...
</igc-radio-group>

3.3 API

3.3.1 Properties

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

Name Description Type Default value Reflected
labelPosition Sets the label position for all radio buttons. before, after after true
disabled Sets all radio buttons as disabled. Boolean false true
alignment Sets the alignment for all radio buttons within the group. vertical, horizontal vertical true
3.3.4 Slots
Name Description
(default) The default slot.
3.3.5 CSS Parts
Name Description
base The base wrapper containing all igc-radio buttons.

4. Test Scenarios

TBD

5. Accessibility

N/A

Clone this wiki locally