feat(kit): ActionBar add s size and update according to spec (#9310)

Co-authored-by: taiga-family-bot <[email protected]>
taiga-family · Oct 3, 2024 · 3cb028b · 3cb028b
1 parent 1ff5e38
commit 3cb028b
Show file tree

Hide file tree

Showing 15 changed files with 178 additions and 65 deletions.
diff --git a/projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.spec.ts b/projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.spec.ts
@@ -19,7 +19,7 @@ test.describe('ActionBar', () => {
 
     test('works', async ({page}) => {
         await tuiGoto(page, DemoRoute.ActionBar);
-        const example = page.locator('#base');
+        const example = page.locator('#size--m');
         const showActionBarButton = example.locator('label').first();
 
         await showActionBarButton.click();

diff --git a/projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts b/projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts
@@ -9,7 +9,7 @@ test.describe('ActionBar', () => {
 
     test('works', async ({page}) => {
         await tuiGoto(page, DemoRoute.ActionBar);
-        const example = page.locator('#base');
+        const example = page.locator('#size--m');
         const showActionBarButton = example.locator('label').first();
 
         await showActionBarButton.click();

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
@@ -891,7 +891,7 @@ export const pages: TuiDocRoutePages = [
     {
         section: 'Navigation',
         title: 'Segmented',
-        keywords: 'tabs, control, radio, navigation, навигация, beaver, вкладки, таб',
+        keywords: 'tabs, control, radio, navigation, навигация, вкладки, таб',
         route: DemoRoute.Segmented,
     },
     {
@@ -934,7 +934,7 @@ export const pages: TuiDocRoutePages = [
     {
         section: 'Layout',
         title: 'Navigation',
-        keywords: 'шапка, header, sidebar, aside, сайдбар, навигация',
+        keywords: 'шапка, header, sidebar, aside, сайдбар, навигация, beaver',
         route: DemoRoute.Navigation,
     },
     {

diff --git a/projects/demo/src/modules/components/action-bar/examples/1/index.html b/projects/demo/src/modules/components/action-bar/examples/1/index.html
@@ -68,52 +68,107 @@
                 </span>
             </button>
         </tui-opt-group>
+        <tui-opt-group>
+            <button
+                *tuiRepeatTimes="let index of 5"
+                role="menuitem"
+                tuiOption
+                type="button"
+            >
+                <span>
+                    <tui-icon
+                        icon="@tui.star"
+                        class="tui-space_right-3"
+                    />
+                    Action {{ index + 1 }}
+                </span>
+            </button>
+        </tui-opt-group>
     </tui-data-list>
 
     <div>
-        Selected: {{ selected }} of {{ items.length }}
-
+        <strong>Selected: {{ selected }} of {{ items.length }}</strong>
         <button
             *ngIf="!isMobile()"
-            appearance="icon"
             tuiLink
             type="button"
             class="tui-space_left-3"
-            [pseudo]="true"
             (click)="toggleSelect()"
         >
             {{ selected < items.length ? 'Select all' : 'Select none' }}
         </button>
     </div>
 
+    <tui-items-with-more>
+        <ng-container *tuiRepeatTimes="let index of 5">
+            <button
+                *tuiItem
+                iconStart="@tui.star"
+                tuiButton
+                type="button"
+            >
+                Action {{ index + 1 }}
+            </button>
+        </ng-container>
+        <ng-template
+            let-lastIndex
+            tuiMore
+        >
+            <button
+                iconStart="@tui.ellipsis"
+                tuiButton
+                tuiDropdownAlign="right"
+                tuiDropdownOpen
+                type="button"
+                [tuiDropdown]="dropdown"
+            >
+                More
+            </button>
+            <ng-template #dropdown>
+                <tui-data-list size="l">
+                    <ng-container *tuiRepeatTimes="let index of 5">
+                        <button
+                            *ngIf="index > lastIndex"
+                            tuiOption
+                            type="button"
+                        >
+                            Action {{ index + 1 }}
+                        </button>
+                    </ng-container>
+                </tui-data-list>
+            </ng-template>
+        </ng-template>
+    </tui-items-with-more>
+
     <button
-        appearance="glass"
+        *ngIf="!isMobile()"
         iconStart="@tui.send"
-        size="m"
         tuiButton
         type="button"
-        [disabled]="expanded"
     >
-        {{ isMobile() ? '' : 'Send' }}
+        Send
     </button>
     <button
         *ngIf="!isMobile()"
-        appearance="glass"
         iconStart="@tui.trash"
-        size="m"
         tuiButton
         type="button"
-        [disabled]="expanded"
         (click)="close()"
     >
         Delete
     </button>
 
     <button
         *ngIf="isMobile()"
-        appearance="glass"
+        iconStart="@tui.send"
+        tuiIconButton
+        type="button"
+    >
+        Send
+    </button>
+    <button
+        *ngIf="isMobile()"
         iconStart="@tui.ellipsis"
-        size="m"
         tuiIconButton
         type="button"
         (click)="expanded = !expanded"
@@ -125,7 +180,6 @@
         *ngIf="!isMobile()"
         appearance="icon"
         iconStart="@tui.x"
-        size="m"
         tuiIconButton
         type="button"
         (click)="close()"

diff --git a/projects/demo/src/modules/components/action-bar/examples/1/index.less b/projects/demo/src/modules/components/action-bar/examples/1/index.less
diff --git a/projects/demo/src/modules/components/action-bar/examples/1/index.ts b/projects/demo/src/modules/components/action-bar/examples/1/index.ts
@@ -1,33 +1,38 @@
-import {NgIf} from '@angular/common';
+import {NgForOf, NgIf} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiRepeatTimes} from '@taiga-ui/cdk';
 import {
     TuiBreakpointService,
     TuiButton,
     TuiDataList,
+    TuiDropdown,
     TuiIcon,
     TuiLink,
 } from '@taiga-ui/core';
-import {TuiActionBar, TuiFilter} from '@taiga-ui/kit';
+import {TuiActionBar, TuiFilter, TuiItemsWithMore} from '@taiga-ui/kit';
 import {map} from 'rxjs';
 
 @Component({
     standalone: true,
     imports: [
+        NgForOf,
         NgIf,
         ReactiveFormsModule,
         TuiActionBar,
         TuiButton,
         TuiDataList,
+        TuiDropdown,
         TuiFilter,
         TuiIcon,
+        TuiItemsWithMore,
         TuiLink,
+        TuiRepeatTimes,
     ],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })

diff --git a/projects/demo/src/modules/components/action-bar/examples/2/index.html b/projects/demo/src/modules/components/action-bar/examples/2/index.html
@@ -7,15 +7,27 @@
     Show TableBar
 </button>
 
-<tui-action-bar *tuiActionBar="open()">
-    <span>Table bar opened</span>
+<tui-action-bar
+    *tuiActionBar="open()"
+    size="s"
+>
+    <span [style.width.%]="isMobile() ? 100 : null">Table bar opened</span>
 
     <button
         appearance="glass"
-        size="m"
+        iconStart="@tui.trash"
         tuiButton
         type="button"
         (click)="open.set(false)"
+    >
+        Remove
+    </button>
+    <button
+        iconStart="@tui.x"
+        tuiIconButton
+        type="button"
+        [appearance]="isMobile() ? 'glass' : 'icon'"
+        (click)="open.set(false)"
     >
         Close
     </button>

diff --git a/projects/demo/src/modules/components/action-bar/examples/2/index.less b/projects/demo/src/modules/components/action-bar/examples/2/index.less
diff --git a/projects/demo/src/modules/components/action-bar/examples/2/index.ts b/projects/demo/src/modules/components/action-bar/examples/2/index.ts
@@ -1,15 +1,23 @@
-import {Component, signal} from '@angular/core';
+import {NgIf} from '@angular/common';
+import {Component, inject, signal} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiButton} from '@taiga-ui/core';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiBreakpointService, TuiButton} from '@taiga-ui/core';
 import {TuiActionBar} from '@taiga-ui/kit';
+import {map} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [TuiActionBar, TuiButton],
+    imports: [NgIf, TuiActionBar, TuiButton],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
+    encapsulation,
     changeDetection,
 })
 export default class Example {
     protected open = signal(false);
+
+    protected readonly isMobile = toSignal(
+        inject(TuiBreakpointService).pipe(map((size) => size === 'mobile')),
+    );
 }
diff --git a/projects/demo/src/modules/components/action-bar/index.html b/projects/demo/src/modules/components/action-bar/index.html
@@ -4,23 +4,15 @@
     type="components"
 >
     <ng-template pageTab>
-        <p>
-            It is an element on the bottom of screen to show actions by multiselect of some items. It works with custom
-            content.
-        </p>
+        It is an element on the bottom of screen to show actions by multiselect of some items. It works with custom
+        content.
 
         <tui-doc-example
-            id="base"
-            heading="Basic"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample"
-        />
-
-        <tui-doc-example
-            id="directive"
-            heading="Customization"
-            [component]="2 | tuiComponent"
-            [content]="2 | tuiExample"
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
         />
     </ng-template>
 

diff --git a/projects/demo/src/modules/components/action-bar/index.ts b/projects/demo/src/modules/components/action-bar/index.ts
@@ -9,4 +9,6 @@ import {TuiDemo} from '@demo/utils';
     styleUrls: ['./index.less'],
     changeDetection,
 })
-export default class Page {}
+export default class Page {
+    protected readonly examples = ['Size M', 'Size S'];
+}
diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts
@@ -19,13 +19,13 @@ export const TUI_USED_ICONS = [
     '@tui.trash',
     '@tui.layout-grid',
     '@tui.x',
+    '@tui.star',
     '@tui.check',
     '@tui.user',
     '@tui.chevron-left',
     '@tui.mastercard',
     '@tui.box',
     '@tui.lock',
-    '@tui.star',
     '@tui.gift',
     '@tui.arrow-right',
     '@tui.users',

diff --git a/projects/kit/components/action-bar/action-bar.component.ts b/projects/kit/components/action-bar/action-bar.component.ts
@@ -1,7 +1,12 @@
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
+import {tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous';
 import {tuiFadeIn, tuiSlideInTop} from '@taiga-ui/core/animations';
+import type {TuiButtonOptions} from '@taiga-ui/core/components/button';
+import {TUI_BUTTON_OPTIONS} from '@taiga-ui/core/components/button';
 import {TuiExpandComponent} from '@taiga-ui/core/components/expand';
+import {tuiLinkOptionsProvider} from '@taiga-ui/core/components/link';
 import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';
+import type {TuiSizeS} from '@taiga-ui/core/types';
 import {tuiToAnimationOptions} from '@taiga-ui/core/utils/miscellaneous';
 
 @Component({
@@ -11,16 +16,26 @@ import {tuiToAnimationOptions} from '@taiga-ui/core/utils/miscellaneous';
     templateUrl: './action-bar.template.html',
     styleUrls: ['./action-bar.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        tuiProvide(TUI_BUTTON_OPTIONS, TuiActionBarComponent),
+        tuiLinkOptionsProvider({appearance: 'icon', pseudo: true}),
+    ],
     animations: [tuiFadeIn, tuiSlideInTop],
     host: {
         tuiTheme: 'dark',
+        '[attr.data-size]': 'size',
         '[@tuiFadeIn]': 'animation',
         '[@tuiSlideInTop]': 'animation',
     },
 })
-export class TuiActionBarComponent {
+export class TuiActionBarComponent implements TuiButtonOptions {
     protected readonly animation = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
 
     @Input()
     public expanded = false;
+
+    @Input()
+    public size: TuiSizeS = 'm';
+
+    public readonly appearance = 'glass';
 }