chore(docs): #9644 added top position example for ActionBar

projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts

@@ -1,13 +1,13 @@
-import {DemoRoute} from '@demo/routes';
-import {tuiGoto} from '@demo-playwright/utils';
-import {expect, test} from '@playwright/test';
+import { DemoRoute } from '@demo/routes';
+import { tuiGoto } from '@demo-playwright/utils';
+import { expect, test } from '@playwright/test';
 
 test.describe('ActionBar', () => {
     test.use({
-        viewport: {width: 1000, height: 720},
+        viewport: { width: 1000, height: 720 },
     });
 
-    test('works', async ({page}) => {
+    test('works', async ({ page }) => {
         await tuiGoto(page, DemoRoute.ActionBar);
         const example = page.locator('#size--m');
         const showActionBarButton = example.locator('label').first();
@@ -17,4 +17,15 @@ test.describe('ActionBar', () => {
 
         await expect(actionBarExample).toHaveScreenshot('01-actions-bar.png');
     });
+
+    test('should show on top', async ({ page }) => {
+        await tuiGoto(page, DemoRoute.ActionBar);
+        const example = page.locator('#top-position');
+        const showActionBarButton = example.locator('label').first();
+
+        await showActionBarButton.click();
+        const actionBarExample = page.locator('tui-action-bar');
+
+        await expect(actionBarExample).toHaveScreenshot('02-actions-bar.png');
+    });
 });

projects/demo/src/modules/components/action-bar/examples/3/index.html

@@ -0,0 +1,34 @@
+<button
+    size="m"
+    tuiButton
+    type="button"
+    (click)="open.set(true)"
+>
+    Show TableBar on top
+</button>
+
+<tui-action-bar
+    *tuiActionBar="open()"
+    size="s"
+>
+    <span [style.width.%]="isMobile() ? 100 : null">Table bar opened</span>
+
+    <button
+        appearance="glass"
+        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>
+</tui-action-bar>

projects/demo/src/modules/components/action-bar/examples/3/index.less

@@ -0,0 +1,4 @@
+tui-action-bar {
+    top: 1rem;
+    bottom: unset !important;
+}

projects/demo/src/modules/components/action-bar/examples/3/index.ts

@@ -0,0 +1,24 @@
+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 {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: [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')),
+    );
+}

projects/demo/src/modules/components/action-bar/index.ts

@@ -10,5 +10,5 @@ import {TuiDemo} from '@demo/utils';
     changeDetection,
 })
 export default class Page {
-    protected readonly examples = ['Size M', 'Size S'];
+    protected readonly examples = ['Size M', 'Size S', 'Top position'];
 }