[locked] RFC: Checkbox / RadioButton Standartization

[PaskalevStoyan]

Quick Overview

The main concept is described here: #1617

This discussion covers the Checkbox and RadioButton.

In this discussion, we will write down the questions that arise during the process of standardizing the Checkbox and RadioButton and the decisions we make.

Checkbox

Sizes

We utilize 3 main sizes that will be used across components - small , medium and large. The CSS classes for the same will be k-checkbox-sm , k-checkbox-md and k-checkbox-lg.

Default rendering will add the k-checkbox-md class. There will be an option to reset the sizing (the none value), which won't add a sizing class.

Rounded

We utilize 3 main sizes that will be used across components - small, medium, and large. The CSS classes for the same will be k-rounded-sm, k-rounded-md, and k-rounded-lg.

Default rendering will add the k-rounded-md class. There will be an option to reset the sizing (the none value), which won't add a rounded class.

RadioButton

Sizes

We utilize 3 main sizes that will be used across components - small, medium and large. The CSS classes for the same will be k-radio-sm , k-radio-md and k-radio-lg.

Default rendering will add the k-radio-md class. There will be an option to reset the sizing (the none value), which won't add a sizing class.

The none concept

As described above, all properties will have a none value which will remove the default CSS class (will not add a class at all).

Rendering

<!-- default rendering -->

<!-- Checkbox -->
<input type="checkbox" class="k-checkbox k-checkbox-md k-rounded-md" />

<!-- Radio Button -->
<input type="radio" class="k-radio k-radio-md" />

<!-- Classes Variants -->

<!-- Checkbox -->
<input type="checkbox" 
       class="
        k-checkbox
        k-checkbox-sm | k-checkbox-md | k-checkbox-lg 
        k-rounded-sm | k-rounded-md | k-rounded-lg 
       "
/>

<!-- Radio Button -->
<input type="radio" 
       class="
        k-radio
        k-radio-sm | k-radio-md | k-radio-lg 
       "
/>

Docs

TODO

Tests (visual)

Tests should be created in tests/visual/src/reference folder as following:

• checkbox/checkbox-${suite}.html
• radio/radio-${suite}.html

Component API

<input
   type="checkbox"
   [size]="'small' | 'medium' (Default) | 'large' | 'none'" 
   [rounded]="'small' | 'medium' (Default) | 'large' | 'none'"
   kendoCheckBox 
/>

<input 
   type="radio"
   [size]="'small' | 'medium' (Default) | 'large' | 'none'" 
   kendoRadioButton 
/>

Playground

https://stackblitz.com/edit/angular-ivy-bu4we3?file=src%2Fapp%2Fapp.component.html

[PaskalevStoyan]

Tagging for visibility, comments, and concerns: @Raisolution @tapopov @zdravkov @jivanova @Xizario @VicTachev @nenchef