feat(experimental): add tuiButtonGroup

projects/demo/src/modules/app/app.routes.ts

@@ -361,6 +361,15 @@ export const ROUTES: Routes = [
             title: 'ButtonClose',
         },
     },
+    {
+        path: 'experimental/button-group',
+        loadChildren: async () =>
+            (await import('../experimental/button-group/button-group.module'))
+                .ExampleTuiButtonGroupModule,
+        data: {
+            title: 'ButtonGroup',
+        },
+    },
     {
         path: 'experimental/cell',
         loadChildren: async () =>

projects/demo/src/modules/app/pages.ts

@@ -916,6 +916,12 @@ export const pages: TuiDocPages = [
                 keywords: 'кнопка, button, close, закрыть',
                 route: '/experimental/button-close',
             },
+            {
+                section: 'Experimental',
+                title: 'ButtonGroup',
+                keywords: 'кнопка, button, group, группа',
+                route: '/experimental/button-group',
+            },
         ],
     },
     {

projects/demo/src/modules/experimental/button-group/button-group.component.ts

@@ -0,0 +1,30 @@
+import {Component} from '@angular/core';
+import {changeDetection} from '@demo/emulate/change-detection';
+import {TuiDocExample, TuiRawLoaderContent} from '@taiga-ui/addon-doc';
+
+@Component({
+    selector: 'example-button-group-card',
+    templateUrl: './button-group.template.html',
+    changeDetection,
+})
+export class ExampleTuiButtonGroupComponent {
+    readonly exampleModule: TuiRawLoaderContent = import(
+        './examples/import/import-module.md?raw'
+    );
+
+    readonly exampleHtml: TuiRawLoaderContent = import(
+        './examples/import/insert-template.md?raw'
+    );
+
+    readonly example1: TuiDocExample = {
+        HTML: import('./examples/1/index.html?raw'),
+    };
+
+    readonly example2: TuiDocExample = {
+        HTML: import('./examples/2/index.html?raw'),
+    };
+
+    readonly example3: TuiDocExample = {
+        HTML: import('./examples/3/index.html?raw'),
+    };
+}

projects/demo/src/modules/experimental/button-group/button-group.module.ts

@@ -0,0 +1,35 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {tuiGetDocModules} from '@taiga-ui/addon-doc';
+import {TuiNotificationModule} from '@taiga-ui/core';
+import {
+    TuiBadgedContentModule,
+    TuiButtonGroupModule,
+    TuiIconModule,
+    TuiSurfaceModule,
+} from '@taiga-ui/experimental';
+
+import {ExampleTuiButtonGroupComponent} from './button-group.component';
+import {TuiButtonGroupExample1} from './examples/1';
+import {TuiButtonGroupExample2} from './examples/2';
+import {TuiButtonGroupExample3} from './examples/3';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        TuiNotificationModule,
+        tuiGetDocModules(ExampleTuiButtonGroupComponent),
+        TuiSurfaceModule,
+        TuiButtonGroupModule,
+        TuiBadgedContentModule,
+        TuiIconModule,
+    ],
+    declarations: [
+        ExampleTuiButtonGroupComponent,
+        TuiButtonGroupExample1,
+        TuiButtonGroupExample2,
+        TuiButtonGroupExample3,
+    ],
+    exports: [ExampleTuiButtonGroupComponent],
+})
+export class ExampleTuiButtonGroupModule {}

projects/demo/src/modules/experimental/button-group/button-group.template.html

@@ -0,0 +1,59 @@
+<tui-doc-page
+    header="ButtonGroup"
+    package="EXPERIMENTAL"
+    type="directives"
+>
+    <ng-template pageTab>
+        <tui-notification status="warning">
+            This code is
+            <strong>experimental</strong>
+            and is a subject to change. Expect final solution to be shipped in the next major version
+        </tui-notification>
+
+        <tui-doc-example
+            id="elevated"
+            heading="Elevated"
+            [content]="example1"
+        >
+            <tui-button-group-example-1></tui-button-group-example-1>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="flat"
+            heading="Flat"
+            [content]="example2"
+        >
+            <tui-button-group-example-2></tui-button-group-example-2>
+        </tui-doc-example>
+
+        <tui-doc-example
+            id="dark"
+            heading="Dark"
+            [content]="example3"
+        >
+            <tui-button-group-example-3></tui-button-group-example-3>
+        </tui-doc-example>
+    </ng-template>
+
+    <ng-template pageTab="Setup">
+        <ol class="b-demo-steps">
+            <li>
+                <p>Import module:</p>
+
+                <tui-doc-code
+                    filename="myComponent.module.ts"
+                    [code]="exampleModule"
+                ></tui-doc-code>
+            </li>
+
+            <li>
+                <p>Add to the template:</p>
+
+                <tui-doc-code
+                    filename="myComponent.template.html"
+                    [code]="exampleHtml"
+                ></tui-doc-code>
+            </li>
+        </ol>
+    </ng-template>
+</tui-doc-page>

projects/demo/src/modules/experimental/button-group/examples/1/index.html

@@ -0,0 +1,44 @@
+<div
+    tuiButtonGroup
+    tuiSurface="elevated"
+>
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Create a payment
+    </button>
+
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Pay the bill
+    </button>
+
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Remove from favorites
+    </button>
+</div>
+
+<div
+    tuiButtonGroup
+    tuiSurface="elevated"
+>
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Top up
+    </button>
+
+    <button>
+        <tui-icon icon="tuiIconArrowRightCircleLarge"></tui-icon>
+        Take out
+    </button>
+</div>
+
+<div
+    tuiSurface
+    class="shadow"
+>
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        To repay
+    </button>
+</div>

projects/demo/src/modules/experimental/button-group/examples/1/index.less

@@ -0,0 +1,28 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+button {
+    color: var(--tui-link);
+}
+
+.shadow {
+    box-shadow: var(--tui-shadow);
+    border-radius: 1rem;
+
+    button {
+        .button-base();
+
+        padding: 1.125rem 0.25rem 1.125rem 0.25rem;
+        font-size: 1.0625rem;
+        font-weight: normal;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        gap: 0.5rem;
+    }
+}

projects/demo/src/modules/experimental/button-group/examples/1/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-group-example-1',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiButtonGroupExample1 {}

projects/demo/src/modules/experimental/button-group/examples/2/index.html

@@ -0,0 +1,44 @@
+<div
+    tuiButtonGroup
+    tuiSurface="flat"
+>
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Create a payment
+    </button>
+
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Pay the bill
+    </button>
+
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Remove from favorites
+    </button>
+</div>
+
+<div
+    tuiButtonGroup
+    tuiSurface="flat"
+>
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Top up
+    </button>
+
+    <button>
+        <tui-icon icon="tuiIconArrowRightCircleLarge"></tui-icon>
+        Take out
+    </button>
+</div>
+
+<div
+    tuiSurface
+    class="shadow"
+>
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        To repay
+    </button>
+</div>

projects/demo/src/modules/experimental/button-group/examples/2/index.less

@@ -0,0 +1,28 @@
+@import '@taiga-ui/core/styles/taiga-ui-local';
+
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+button {
+    color: var(--tui-link);
+}
+
+.shadow {
+    background: var(--tui-clear);
+    border-radius: 1rem;
+
+    button {
+        .button-base();
+
+        padding: 1.125rem 0.25rem 1.125rem 0.25rem;
+        font-size: 1.0625rem;
+        font-weight: normal;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        gap: 0.5rem;
+    }
+}

projects/demo/src/modules/experimental/button-group/examples/2/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-group-example-2',
+    templateUrl: './index.html',
+    styleUrls: ['./index.less'],
+    encapsulation,
+    changeDetection,
+})
+export class TuiButtonGroupExample2 {}

projects/demo/src/modules/experimental/button-group/examples/3/index.html

@@ -0,0 +1,44 @@
+<div
+    tuiButtonGroup
+    tuiSurface="custom"
+>
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Create a payment
+    </button>
+
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Pay the bill
+    </button>
+
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Remove from favorites
+    </button>
+</div>
+
+<div
+    tuiButtonGroup
+    tuiSurface="custom"
+>
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        Top up
+    </button>
+
+    <button>
+        <tui-icon icon="tuiIconArrowRightCircleLarge"></tui-icon>
+        Take out
+    </button>
+</div>
+
+<div
+    tuiSurface
+    class="shadow"
+>
+    <button>
+        <tui-icon icon="tuiIconPlusCircleLarge"></tui-icon>
+        To repay
+    </button>
+</div>