[locked] RFC: Switch Standardization

[JoomFX]

Quick Overview

The main concept is described here: #1617

This discussion covers the Switch.

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

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-switch-sm, k-switch-md, k-switch-lg.

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

Note: Have in mind that in the component props, the values will be the whole word, a.k.a [size]="'small'".

Shape

The Switch will not have a shape property but it will have two other properties that will allow for some level of visual customization:

• thumb-rounded
• track-rounded

These properties will render a utility class for setting the border-radius of the respective element. They will be: k-rounded-sm, k-rounded-md, k-rounded-lg, k-rounded-circle (border-radius: 50%;). and k-rounded-pill (border-radius: 9999px;).

Default rendering will add the k-rounded-pill class to both the thumb and the track (and the root element - it needs to have the same rounding class as the track). There will be an option to reset the border-radius (the none value), which won't add the rounding classes.

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 -->
<span class="k-switch k-switch-on k-switch-md k-rounded-pill">
    <span class="k-switch-track k-rounded-pill">
        <span class="k-switch-label-on">On</span>
        <span class="k-switch-label-off">Off</span>
    </span>
    <span class="k-switch-thumb-wrap">
        <span class="k-switch-thumb k-rounded-pill"></span>
    </span>
</span>

<!-- classes variants -->
<span class="
    k-switch
    k-switch-on |  k-switch-on
    k-switch-sm | k-switch-md | k-switch-lg
    k-rounded-sm | k-rounded-md | k-rounded-lg | k-rounded-circle | k-rounded-pill
">
    <span class="
        k-switch-track
        k-rounded-sm | k-rounded-md | k-rounded-lg | k-rounded-circle | k-rounded-pill
    ">
        <span class="k-switch-label-on">On</span>
        <span class="k-switch-label-off">Off</span>
    </span>
    <span class="k-switch-thumb-wrap">
        <span class="
            k-switch-thumb
            k-rounded-sm | k-rounded-md | k-rounded-lg | k-rounded-circle | k-rounded-pill
        "></span>
    </span>
</span>

Docs

TODO

Tests (visual)

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

• switch/switch-${suite}.html

Component API

<kendo-switch
  [size]="'small' | 'medium' (Default) | 'large' | 'none'"
  [thumb-rounded]="'small' | 'medium' | 'large' | 'circle' | 'pill' (Default)"
  [track-rounded]="'small' | 'medium' | 'large' | 'circle' | 'pill' (Default)"
></kendo-switch>

Playground

https://stackblitz.com/edit/angular-dm1zsi-kmkrgf?file=app/app.component.ts

[JoomFX]

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