From 45731b61e53d62ae9de62aa4df9a176ee87ec06c Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Mon, 18 Sep 2023 16:13:44 +0400
Subject: [PATCH] feat(kit): `CheckboxBlock`/`RadioBlock` add new size (#5390)

---
 .../checkbox-block.component.ts               |  6 ++--
 .../checkbox-block.template.html              | 12 ++++----
 .../checkbox-block/examples/1/index.html      | 15 ++++++++--
 .../checkbox-block/examples/1/index.ts        |  1 +
 .../components/filter/filter.component.ts     |  6 ++--
 .../radio-block/examples/1/index.html         | 12 +++++++-
 .../radio-block/radio-block.component.ts      |  6 ++--
 .../radio-block/radio-block.template.html     | 12 ++++----
 .../checkbox-block.component.ts               |  4 +--
 .../checkbox-block/checkbox-block.style.less  | 29 +++++++++++++++++++
 .../kit/components/filter/filter.component.ts |  4 +--
 .../kit/components/filter/filter.style.less   | 14 ++++-----
 .../radio-block/radio-block.component.ts      |  4 +--
 13 files changed, 86 insertions(+), 39 deletions(-)

diff --git a/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts b/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts
index cf3fbaf6ac15..f3afd4da24e2 100644
--- a/projects/demo/src/modules/components/checkbox-block/checkbox-block.component.ts
+++ b/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),
diff --git a/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html b/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html
index fe2a72bb23c5..61bac36c52c7 100644
--- a/projects/demo/src/modules/components/checkbox-block/checkbox-block.template.html
+++ b/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>
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/1/index.html b/projects/demo/src/modules/components/checkbox-block/examples/1/index.html
index 5721d6e0cd12..27931d1bbbb9 100644
--- a/projects/demo/src/modules/components/checkbox-block/examples/1/index.html
+++ b/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>
diff --git a/projects/demo/src/modules/components/checkbox-block/examples/1/index.ts b/projects/demo/src/modules/components/checkbox-block/examples/1/index.ts
index e568cb95be02..92079a32ced7 100644
--- a/projects/demo/src/modules/components/checkbox-block/examples/1/index.ts
+++ b/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),
     });
 }
diff --git a/projects/demo/src/modules/components/filter/filter.component.ts b/projects/demo/src/modules/components/filter/filter.component.ts
index 7404d9185f3c..2ae3579076f6 100644
--- a/projects/demo/src/modules/components/filter/filter.component.ts
+++ b/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)
diff --git a/projects/demo/src/modules/components/radio-block/examples/1/index.html b/projects/demo/src/modules/components/radio-block/examples/1/index.html
index 51c99aee81c4..33777759fa52 100644
--- a/projects/demo/src/modules/components/radio-block/examples/1/index.html
+++ b/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>
diff --git a/projects/demo/src/modules/components/radio-block/radio-block.component.ts b/projects/demo/src/modules/components/radio-block/radio-block.component.ts
index 78fe72162358..970f8918190c 100644
--- a/projects/demo/src/modules/components/radio-block/radio-block.component.ts
+++ b/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;
 
diff --git a/projects/demo/src/modules/components/radio-block/radio-block.template.html b/projects/demo/src/modules/components/radio-block/radio-block.template.html
index 08c44304e95b..9aeefa0aacd7 100644
--- a/projects/demo/src/modules/components/radio-block/radio-block.template.html
+++ b/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>
diff --git a/projects/kit/components/checkbox-block/checkbox-block.component.ts b/projects/kit/components/checkbox-block/checkbox-block.component.ts
index 14b96b21f650..39c75435afcc 100644
--- a/projects/kit/components/checkbox-block/checkbox-block.component.ts
+++ b/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()
diff --git a/projects/kit/components/checkbox-block/checkbox-block.style.less b/projects/kit/components/checkbox-block/checkbox-block.style.less
index f5d65a2a7492..69b2c2467395 100644
--- a/projects/kit/components/checkbox-block/checkbox-block.style.less
+++ b/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);
     }
diff --git a/projects/kit/components/filter/filter.component.ts b/projects/kit/components/filter/filter.component.ts
index 2ec3f01b36bb..100f65787b8a 100644
--- a/projects/kit/components/filter/filter.component.ts
+++ b/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;
diff --git a/projects/kit/components/filter/filter.style.less b/projects/kit/components/filter/filter.style.less
index eae9e6db1b2f..5990241cc140 100644
--- a/projects/kit/components/filter/filter.style.less
+++ b/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,8 +9,8 @@
 }
 
 .t-item {
-    margin-right: @space;
-    margin-bottom: @space;
+    margin-right: 0.25rem;
+    margin-bottom: 0.25rem;
 
     &:last-child,
     :host[data-size='l'] &:last-child {
@@ -20,13 +18,13 @@
     }
 
     :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);
diff --git a/projects/kit/components/radio-block/radio-block.component.ts b/projects/kit/components/radio-block/radio-block.component.ts
index 93304f80025a..698852bce867 100644
--- a/projects/kit/components/radio-block/radio-block.component.ts
+++ b/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')