feat(core): Button add padding customization (#2932)

projects/core/components/button/button.style.less

@@ -132,23 +132,27 @@
     cursor: pointer;
 
     :host[data-size='xs'] & {
-        padding: 0 @padding-xs;
+        padding: 0 var(--tui-padding, @padding-xs);
+
+        &:after {
+            border-width: 1px;
+        }
     }
 
     :host[data-size='s'] & {
-        padding: 0 @padding-s;
+        padding: 0 var(--tui-padding, @padding-s);
     }
 
     :host[data-size='m'] & {
-        padding: 0 @padding-m;
+        padding: 0 var(--tui-padding, @padding-m);
     }
 
     :host[data-size='l'] & {
-        padding: 0 @padding-l;
+        padding: 0 var(--tui-padding, @padding-l);
     }
 
     :host[data-size='xl'] & {
-        padding: 0 @padding-xl;
+        padding: 0 var(--tui-padding, @padding-xl);
     }
 
     :host[data-shape='square'] &,

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

@@ -48,6 +48,12 @@ export class ExampleTuiButtonComponent extends AbstractExampleTuiInteractive {
         HTML: import(`./examples/5/index.html?raw`),
     };
 
+    readonly example6: TuiDocExample = {
+        TypeScript: import(`./examples/6/index.ts?raw`),
+        HTML: import(`./examples/6/index.html?raw`),
+        LESS: import(`./examples/6/index.less?raw`),
+    };
+
     readonly exampleModule = import(`./examples/import/import-module.md?raw`);
     readonly exampleHtml = import(`./examples/import/insert-template.md?raw`);
     readonly exampleOptions = import(`./examples/import/define-options.md?raw`);

projects/demo/src/modules/components/button/button.module.ts

@@ -22,6 +22,7 @@ import {TuiButtonExample2} from './examples/2';
 import {TuiButtonExample3} from './examples/3';
 import {TuiButtonExample4} from './examples/4';
 import {TuiButtonExample5} from './examples/5';
+import {TuiButtonExample6} from './examples/6';
 
 @NgModule({
     imports: [
@@ -49,6 +50,7 @@ import {TuiButtonExample5} from './examples/5';
         TuiButtonExample3,
         TuiButtonExample4,
         TuiButtonExample5,
+        TuiButtonExample6,
     ],
     exports: [ExampleTuiButtonComponent],
 })

projects/demo/src/modules/components/button/button.template.html

@@ -74,6 +74,15 @@
         >
             <tui-button-example-5></tui-button-example-5>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="padding"
+            i18n-heading
+            heading="Custom padding"
+            [content]="example6"
+        >
+            <tui-button-example-6></tui-button-example-6>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

projects/demo/src/modules/components/button/examples/5/index.ts

@@ -1,11 +1,13 @@
 import {Component} from '@angular/core';
 import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
 import {TuiAppearance, tuiButtonOptionsProvider} from '@taiga-ui/core';
 
 @Component({
     selector: `tui-button-example-5`,
     templateUrl: `./index.html`,
     changeDetection,
+    encapsulation,
     providers: [
         tuiButtonOptionsProvider({
             shape: `rounded`,

projects/demo/src/modules/components/button/examples/6/index.html

@@ -0,0 +1,30 @@
+<button
+    tuiButton
+    appearance="whiteblock-active"
+    class="tui-space_right-4"
+>
+    Padding
+</button>
+<button
+    tuiButton
+    size="m"
+    appearance="whiteblock-active"
+    class="tui-space_right-4"
+>
+    Padding
+</button>
+<button
+    tuiButton
+    size="s"
+    appearance="whiteblock-active"
+    class="tui-space_right-4"
+>
+    Padding
+</button>
+<button
+    tuiButton
+    size="xs"
+    appearance="whiteblock-active"
+>
+    Padding
+</button>

projects/demo/src/modules/components/button/examples/6/index.less

@@ -0,0 +1,15 @@
+:host {
+    --tui-padding: 1.25rem;
+}
+
+[tuiButton][data-size='m'] {
+    --tui-padding: 1rem;
+}
+
+[tuiButton][data-size='s'] {
+    --tui-padding: 0.75rem;
+}
+
+[tuiButton][data-size='xs'] {
+    --tui-padding: 0.5rem;
+}

projects/demo/src/modules/components/button/examples/6/index.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: `tui-button-example-6`,
+    templateUrl: `./index.html`,
+    styleUrls: [`./index.less`],
+    changeDetection,
+    encapsulation,
+})
+export class TuiButtonExample6 {}

projects/demo/src/modules/components/hosted-dropdown/examples/4/index.html

@@ -0,0 +1,33 @@
+<form [formGroup]="form">
+    <tui-hosted-dropdown
+        [content]="dropdown"
+        [(open)]="open"
+    >
+        <button
+            tuiButton
+            [appearance]="appearance"
+            [iconRight]="length ? cleaner : arrow"
+            [style.--tui-padding.rem]="1.25"
+            (keydown.delete)="form.reset()"
+        >
+            {{ text }}
+        </button>
+        <ng-template #dropdown>
+            <tui-data-list-wrapper
+                tuiMultiSelectGroup
+                formControlName="control"
+                [items]="items"
+            ></tui-data-list-wrapper>
+        </ng-template>
+        <ng-template #cleaner>
+            <button
+                tuiIconButton
+                appearance="icon"
+                size="xs"
+                icon="tuiIconCloseLarge"
+                type="reset"
+                tuiPreventDefault="mousedown"
+            ></button>
+        </ng-template>
+    </tui-hosted-dropdown>
+</form>

projects/demo/src/modules/components/hosted-dropdown/examples/4/index.ts

@@ -0,0 +1,46 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TUI_ARROW} from '@taiga-ui/kit';
+
+@Component({
+    selector: `tui-hosted-dropdown-example-4`,
+    templateUrl: `./index.html`,
+    changeDetection,
+    encapsulation,
+})
+export class TuiHostedDropdownExample4 {
+    readonly form = new FormGroup({
+        control: new FormControl([]),
+    });
+
+    open = false;
+
+    readonly items = [`Drafts`, `In Progress`, `Completed`];
+
+    readonly arrow = TUI_ARROW;
+
+    private get value(): readonly string[] {
+        return this.form.get(`control`)?.value || [];
+    }
+
+    get appearance(): string {
+        return this.length ? `whiteblock-active` : `whiteblock`;
+    }
+
+    get length(): number {
+        return this.value.length || 0;
+    }
+
+    get text(): string {
+        switch (this.length) {
+            case 0:
+                return `Select`;
+            case 1:
+                return this.value[0];
+            default:
+                return `${this.length} selected`;
+        }
+    }
+}

projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.component.ts

@@ -38,6 +38,11 @@ export class ExampleTuiHostedDropdownComponent extends AbstractExampleTuiDropdow
         LESS: import(`./examples/3/index.less?raw`),
     };
 
+    readonly example4: TuiDocExample = {
+        TypeScript: import(`./examples/4/index.ts?raw`),
+        HTML: import(`./examples/4/index.html?raw`),
+    };
+
     open = false;
 
     input = ``;

projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.module.ts

@@ -3,7 +3,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
-import {TuiActiveZoneModule} from '@taiga-ui/cdk';
+import {TuiActiveZoneModule, TuiPreventDefaultModule} from '@taiga-ui/cdk';
 import {
     TuiButtonModule,
     TuiDataListModule,
@@ -17,6 +17,7 @@ import {
 import {
     TuiDataListWrapperModule,
     TuiInputModule,
+    TuiMultiSelectModule,
     TuiSelectModule,
     TuiTabsModule,
     TuiToggleModule,
@@ -27,6 +28,7 @@ import {DropdownDocumentationModule} from '../abstract/dropdown-documentation/dr
 import {TuiHostedDropdownExample1} from './examples/1';
 import {TuiHostedDropdownExample2} from './examples/2';
 import {TuiHostedDropdownExample3} from './examples/3';
+import {TuiHostedDropdownExample4} from './examples/4';
 import {ExampleTuiHostedDropdownComponent} from './hosted-dropdown.component';
 
 @NgModule({
@@ -51,12 +53,15 @@ import {ExampleTuiHostedDropdownComponent} from './hosted-dropdown.component';
         DropdownDocumentationModule,
         TuiAddonDocModule,
         TuiToggleModule,
+        TuiMultiSelectModule,
+        TuiPreventDefaultModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiHostedDropdownComponent)),
     ],
     declarations: [
         TuiHostedDropdownExample1,
         TuiHostedDropdownExample2,
         TuiHostedDropdownExample3,
+        TuiHostedDropdownExample4,
         ExampleTuiHostedDropdownComponent,
     ],
     exports: [ExampleTuiHostedDropdownComponent],

projects/demo/src/modules/components/hosted-dropdown/hosted-dropdown.template.html

@@ -46,6 +46,15 @@
         >
             <tui-hosted-dropdown-example-3></tui-hosted-dropdown-example-3>
         </tui-doc-example>
+
+        <tui-doc-example
+            id="complex"
+            i18n-heading
+            heading="Complex example"
+            [content]="example4"
+        >
+            <tui-hosted-dropdown-example-4></tui-hosted-dropdown-example-4>
+        </tui-doc-example>
     </ng-template>
 
     <ng-template pageTab>

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

@@ -0,0 +1,24 @@
+<form
+    tuiGroup
+    [collapsed]="true"
+    [formGroup]="form"
+>
+    <tui-radio-block
+        *ngFor="let item of items"
+        formControlName="control"
+        class="control"
+        [item]="item"
+        [hideRadio]="true"
+    >
+        {{ item }}
+        <button
+            tuiIconButton
+            appearance="icon"
+            size="xs"
+            icon="tuiIconCloseLarge"
+            type="reset"
+            class="button"
+        ></button>
+    </tui-radio-block>
+</form>
+<pre>{{ form.value | json }}</pre>

projects/demo/src/modules/components/radio-block/examples/4/index.less

@@ -0,0 +1,11 @@
+.control {
+    flex: initial;
+
+    &._active .button {
+        display: inline-block;
+    }
+}
+
+.button {
+    display: none;
+}

projects/demo/src/modules/components/radio-block/examples/4/index.ts

@@ -0,0 +1,18 @@
+import {Component} from '@angular/core';
+import {FormControl, FormGroup} from '@angular/forms';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {encapsulation} from '@demo/emulate/encapsulation';
+
+@Component({
+    selector: `tui-radio-block-example-4`,
+    templateUrl: `./index.html`,
+    styleUrls: [`./index.less`],
+    changeDetection,
+    encapsulation,
+})
+export class TuiRadioBlockExample4 {
+    readonly items = [`Kiwi`, `Orange`, `Apple`];
+    readonly form = new FormGroup({
+        control: new FormControl(this.items[1]),
+    });
+}

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

@@ -39,6 +39,11 @@ export class ExampleTuiRadioBlockComponent extends AbstractExampleTuiControl {
         LESS: import(`./examples/3/index.less?raw`),
     };
 
+    readonly example4: TuiDocExample = {
+        TypeScript: import(`./examples/4/index.ts?raw`),
+        HTML: import(`./examples/4/index.html?raw`),
+    };
+
     readonly contentAlignVariants: readonly TuiHorizontalDirection[] = [`left`, `right`];
 
     contentAlign: TuiHorizontalDirection = this.contentAlignVariants[1];

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

@@ -10,6 +10,7 @@ import {InheritedDocumentationModule} from '../abstract/inherited-documentation/
 import {TuiRadioBlockExample1} from './examples/1';
 import {TuiRadioBlockExample2} from './examples/2';
 import {TuiRadioBlockExample3} from './examples/3';
+import {TuiRadioBlockExample4} from './examples/4';
 import {ExampleTuiRadioBlockComponent} from './radio-block.component';
 
 @NgModule({
@@ -31,6 +32,7 @@ import {ExampleTuiRadioBlockComponent} from './radio-block.component';
         TuiRadioBlockExample1,
         TuiRadioBlockExample2,
         TuiRadioBlockExample3,
+        TuiRadioBlockExample4,
         ExampleTuiRadioBlockComponent,
     ],
     exports: [ExampleTuiRadioBlockComponent],