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

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

@@ -17,4 +17,15 @@
 
         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.getByTestId('open-table-bar-on-top').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,20 @@
+<button
+    automation-id="open-table-bar-on-top"
+    tuiButton
+    type="button"
+    (click)="open.set(true)"
+>
+    Show TableBar on top
+</button>
+
+<tui-action-bar *tuiActionBar="open()">
+    <span>Table bar on top opened</span>
+    <button
+        iconStart="@tui.trash"
+        tuiIconButton
+        type="button"
+        (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;
+}

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'];
 }