feat(kit): CheckboxBlock/RadioBlock add new size

projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts

@@ -2,7 +2,7 @@ import {Component, forwardRef} from '@angular/core';
 import {FormControl, FormGroup} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiHorizontalDirection, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {TuiHorizontalDirection, TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
@@ -46,9 +46,9 @@ export class ExampleTuiCheckboxBlockComponent extends AbstractExampleTuiControl
 
     hideCheckbox = false;
 
-    override readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
+    readonly sizes: ReadonlyArray<TuiSizeL | TuiSizeXS> = ['xs', 's', 'm', 'l'];
 
-    override size: TuiSizeL | TuiSizeS = this.sizeVariants[2];
+    currentSize = this.sizes[3];
 
     readonly control = new FormGroup({
         testValue1: new FormControl(false),

projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html

@@ -50,7 +50,7 @@
                         [pseudoHover]="pseudoHovered"
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
-                        [size]="size"
+                        [size]="currentSize"
                     >
                         One option
                     </tui-checkbox-block>
@@ -65,7 +65,7 @@
                         [pseudoHover]="pseudoHovered"
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
-                        [size]="size"
+                        [size]="currentSize"
                     >
                         An alternative one
                     </tui-checkbox-block>
@@ -80,7 +80,7 @@
                         [pseudoHover]="pseudoHovered"
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
-                        [size]="size"
+                        [size]="currentSize"
                     >
                         Other
                     </tui-checkbox-block>
@@ -117,9 +117,9 @@
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="size"
-                documentationPropertyType="TuiSizeS | TuiSizeL"
-                [documentationPropertyValues]="sizeVariants"
-                [(documentationPropertyValue)]="size"
+                documentationPropertyType="TuiSizeXS | TuiSizeL"
+                [documentationPropertyValues]="sizes"
+                [(documentationPropertyValue)]="currentSize"
             >
                 Size
             </ng-template>

projects/demo/src/modules/components/checkbox-block/examples/1/index.html

@@ -3,6 +3,15 @@
         <tui-checkbox-block
             contentAlign="right"
             formControlName="testValue1"
+            size="xs"
+        >
+            Grapes
+        </tui-checkbox-block>
+    </div>
+    <div class="tui-form__row">
+        <tui-checkbox-block
+            contentAlign="right"
+            formControlName="testValue2"
             size="s"
         >
             Qiwi
@@ -11,7 +20,7 @@
     <div class="tui-form__row">
         <tui-checkbox-block
             contentAlign="right"
-            formControlName="testValue2"
+            formControlName="testValue3"
             size="m"
         >
             Oranges
@@ -20,10 +29,10 @@
     <div class="tui-form__row">
         <tui-checkbox-block
             contentAlign="right"
-            formControlName="testValue3"
+            formControlName="testValue4"
             size="l"
         >
-            Apples
+            Watermelons
         </tui-checkbox-block>
     </div>
 </form>

projects/demo/src/modules/components/checkbox-block/examples/1/index.ts

@@ -14,5 +14,6 @@ export class TuiCheckboxBlockExample1 {
         testValue1: new FormControl(false),
         testValue2: new FormControl(false),
         testValue3: new FormControl(false),
+        testValue4: new FormControl(false),
     });
 }

projects/demo/src/modules/components/filter/filter.component.ts

@@ -3,7 +3,7 @@ import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
 import {ALWAYS_FALSE_HANDLER, TuiBooleanHandler, TuiHandler} from '@taiga-ui/cdk';
-import {TuiAlertService, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {TuiAlertService, TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 
 class ItemWithBadge {
     constructor(
@@ -83,9 +83,9 @@ export class ExampleTuiFilterComponent {
 
     control = new FormControl(this.initialItems);
 
-    readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
+    readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeXS> = ['xs', 's', 'm', 'l'];
 
-    size: TuiSizeL | TuiSizeS = this.sizeVariants[1];
+    size = this.sizeVariants[2];
 
     constructor(
         @Inject(TuiAlertService)

projects/demo/src/modules/components/radio-block/examples/1/index.html

@@ -1,4 +1,14 @@
 <form [formGroup]="testForm">
+    <div class="tui-form__row">
+        <tui-radio-block
+            contentAlign="right"
+            formControlName="testValue"
+            item="grapes"
+            size="xs"
+        >
+            Grapes
+        </tui-radio-block>
+    </div>
     <div class="tui-form__row">
         <tui-radio-block
             contentAlign="right"
@@ -26,7 +36,7 @@
             item="apple"
             size="l"
         >
-            Apples
+            Watermelons
         </tui-radio-block>
     </div>
 </form>

projects/demo/src/modules/components/radio-block/radio-block.component.ts

@@ -2,7 +2,7 @@ import {Component, forwardRef} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {TuiDocExample} from '@taiga-ui/addon-doc';
-import {TuiHorizontalDirection, TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {TuiHorizontalDirection, TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 
 import {AbstractExampleTuiControl} from '../abstract/control';
 import {ABSTRACT_PROPS_ACCESSOR} from '../abstract/inherited-documentation/abstract-props-accessor';
@@ -50,9 +50,9 @@ export class ExampleTuiRadioBlockComponent extends AbstractExampleTuiControl {
 
     hideRadio = false;
 
-    override readonly sizeVariants: ReadonlyArray<TuiSizeL | TuiSizeS> = ['s', 'm', 'l'];
+    readonly sizes: ReadonlyArray<TuiSizeL | TuiSizeXS> = ['xs', 's', 'm', 'l'];
 
-    override size: TuiSizeL | TuiSizeS = this.sizeVariants[2];
+    currentSize = this.sizes[3];
 
     pseudoDisabled = false;
 

projects/demo/src/modules/components/radio-block/radio-block.template.html

@@ -59,7 +59,7 @@
                         [pseudoHover]="pseudoHovered"
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
-                        [size]="size"
+                        [size]="currentSize"
                     >
                         Oranges
                     </tui-radio-block>
@@ -75,7 +75,7 @@
                         [pseudoHover]="pseudoHovered"
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
-                        [size]="size"
+                        [size]="currentSize"
                     >
                         Apples
                     </tui-radio-block>
@@ -91,7 +91,7 @@
                         [pseudoHover]="pseudoHovered"
                         [pseudoInvalid]="pseudoInvalid"
                         [readOnly]="readOnly"
-                        [size]="size"
+                        [size]="currentSize"
                     >
                         Pinapples
                     </tui-radio-block>
@@ -147,9 +147,9 @@
             <ng-template
                 documentationPropertyMode="input"
                 documentationPropertyName="size"
-                documentationPropertyType="TuiSizeS | TuiSizeL"
-                [documentationPropertyValues]="sizeVariants"
-                [(documentationPropertyValue)]="size"
+                documentationPropertyType="TuiSizeXS | TuiSizeL"
+                [documentationPropertyValues]="sizes"
+                [(documentationPropertyValue)]="currentSize"
             >
                 Size
             </ng-template>

projects/kit/components/checkbox-block/checkbox-block.component.ts

@@ -23,7 +23,7 @@ import {
     TuiHorizontalDirection,
     TuiModeDirective,
     TuiSizeL,
-    TuiSizeS,
+    TuiSizeXS,
 } from '@taiga-ui/core';
 import {TuiCheckboxComponent} from '@taiga-ui/kit/components/checkbox';
 
@@ -54,7 +54,7 @@ export class TuiCheckboxBlockComponent
 
     @Input()
     @HostBinding('attr.data-size')
-    size: TuiSizeL | TuiSizeS = 'l';
+    size: TuiSizeL | TuiSizeXS = 'l';
 
     constructor(
         @Optional()

projects/kit/components/checkbox-block/checkbox-block.style.less

@@ -7,6 +7,10 @@
     align-items: flex-start;
     border-radius: var(--tui-radius-m);
 
+    &[data-size='xs'] {
+        font: var(--tui-font-text-xs);
+    }
+
     &[data-size='m'],
     &[data-size='l'] {
         font: var(--tui-font-text-m);
@@ -28,11 +32,27 @@
     user-select: none;
     padding: 0 1rem 0 0;
 
+    :host[data-size='xs'] & {
+        padding-right: 0.5rem;
+    }
+
     :host[data-align='right'] & {
         flex-direction: row-reverse;
         padding: 0 0 0 1rem;
     }
 
+    :host[data-align='right'][data-size='xs'] & {
+        padding-left: 0.5rem;
+    }
+
+    :host[data-size='xs']._hidden_input & {
+        padding: 0 0.5rem;
+
+        &:not(._focused):after {
+            border-width: 1px;
+        }
+    }
+
     :host[data-size='s']._hidden_input & {
         padding: 0 1rem;
     }
@@ -47,6 +67,11 @@
 }
 
 .t-view {
+    :host[data-size='xs'] & {
+        margin: calc(var(--tui-height-xs) / 2 - 0.5rem) 0.25rem;
+        transform: scale(0.75);
+    }
+
     :host[data-size='s'] & {
         margin: calc(var(--tui-height-s) / 2 - 0.5rem) 0.5rem;
     }
@@ -71,6 +96,10 @@
     align-items: center;
     overflow: hidden;
 
+    :host[data-size='xs'] & {
+        min-height: var(--tui-height-xs);
+    }
+
     :host[data-size='s'] & {
         min-height: var(--tui-height-s);
     }

projects/kit/components/filter/filter.component.ts

@@ -23,7 +23,7 @@ import {
     TuiIdentityMatcher,
     tuiIsNativeFocusedIn,
 } from '@taiga-ui/cdk';
-import {TuiSizeL, TuiSizeS} from '@taiga-ui/core';
+import {TuiSizeL, TuiSizeXS} from '@taiga-ui/core';
 import {PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 // @bad TODO: Add active zone to track focus
@@ -42,7 +42,7 @@ export class TuiFilterComponent<T> extends AbstractTuiMultipleControl<T> {
 
     @Input()
     @HostBinding('attr.data-size')
-    size: TuiSizeL | TuiSizeS = 'm';
+    size: TuiSizeL | TuiSizeXS = 'm';
 
     @Input()
     disabledItemHandler: TuiBooleanHandler<T> = ALWAYS_FALSE_HANDLER;

projects/kit/components/filter/filter.style.less

@@ -1,8 +1,6 @@
-@import 'taiga-ui-local';
-
 :host {
     display: block;
-    margin-bottom: -@space;
+    margin-bottom: -0.25rem;
 }
 
 .t-content {
@@ -11,22 +9,22 @@
 }
 
 .t-item {
-    margin-right: @space;
-    margin-bottom: @space;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
 
     &:last-child,
     :host[data-size='l'] &:last-child {
         margin-right: 0;
     }
 
     :host[data-size='l'] & {
-        margin-right: @space * 2;
-        margin-bottom: @space * 2;
+        margin-right: 0.5rem;
+        margin-bottom: 0.5rem;
     }
 }
 
 .t-badge {
-    margin-left: @space;
+    margin-left: 0.25rem;
 
     &_disabled {
         opacity: var(--tui-disabled-opacity);

projects/kit/components/radio-block/radio-block.component.ts

@@ -24,7 +24,7 @@ import {
     TuiHorizontalDirection,
     TuiModeDirective,
     TuiSizeL,
-    TuiSizeS,
+    TuiSizeXS,
 } from '@taiga-ui/core';
 import {TuiRadioComponent} from '@taiga-ui/kit/components/radio';
 
@@ -57,7 +57,7 @@ export class TuiRadioBlockComponent<T>
 
     @Input()
     @HostBinding('attr.data-size')
-    size: TuiSizeL | TuiSizeS = 'l';
+    size: TuiSizeL | TuiSizeXS = 'l';
 
     @Input()
     @HostBinding('class._hidden_input')