From 762d2ca37d3bb55ff60331bb4f04a159a9fd3d87 Mon Sep 17 00:00:00 2001 From: 40oleg Date: Thu, 31 Oct 2024 23:49:51 +0300 Subject: [PATCH 1/6] chore(docs): #9644 added top position example for ActionBar --- .../tests/kit/action-bar/action-bar.spec.ts | 21 +++++++++--- .../action-bar/examples/3/index.html | 34 +++++++++++++++++++ .../action-bar/examples/3/index.less | 4 +++ .../components/action-bar/examples/3/index.ts | 24 +++++++++++++ .../modules/components/action-bar/index.ts | 2 +- 5 files changed, 79 insertions(+), 6 deletions(-) create mode 100644 projects/demo/src/modules/components/action-bar/examples/3/index.html create mode 100644 projects/demo/src/modules/components/action-bar/examples/3/index.less create mode 100644 projects/demo/src/modules/components/action-bar/examples/3/index.ts 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 index c4b7bfc2e941..911030a23df8 100644 --- a/projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts +++ b/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'); + }); }); diff --git a/projects/demo/src/modules/components/action-bar/examples/3/index.html b/projects/demo/src/modules/components/action-bar/examples/3/index.html new file mode 100644 index 000000000000..0c0d6a1a5bb3 --- /dev/null +++ b/projects/demo/src/modules/components/action-bar/examples/3/index.html @@ -0,0 +1,34 @@ + + + + Table bar opened + + + + diff --git a/projects/demo/src/modules/components/action-bar/examples/3/index.less b/projects/demo/src/modules/components/action-bar/examples/3/index.less new file mode 100644 index 000000000000..beebf043d358 --- /dev/null +++ b/projects/demo/src/modules/components/action-bar/examples/3/index.less @@ -0,0 +1,4 @@ +tui-action-bar { + top: 1rem; + bottom: unset !important; +} diff --git a/projects/demo/src/modules/components/action-bar/examples/3/index.ts b/projects/demo/src/modules/components/action-bar/examples/3/index.ts new file mode 100644 index 000000000000..7a90c225f69b --- /dev/null +++ b/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')), + ); +} diff --git a/projects/demo/src/modules/components/action-bar/index.ts b/projects/demo/src/modules/components/action-bar/index.ts index 2759645d6635..b89380ef6d1e 100644 --- a/projects/demo/src/modules/components/action-bar/index.ts +++ b/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']; } From 0a519f31012f41a3992b613e804271ddfffbd240 Mon Sep 17 00:00:00 2001 From: taiga-family-bot Date: Thu, 31 Oct 2024 21:01:21 +0000 Subject: [PATCH 2/6] chore: apply changes after linting [bot] --- .../tests/kit/action-bar/action-bar.spec.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) 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 index 911030a23df8..634e2bb93b8d 100644 --- a/projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts +++ b/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(); @@ -18,7 +18,7 @@ test.describe('ActionBar', () => { await expect(actionBarExample).toHaveScreenshot('01-actions-bar.png'); }); - test('should show on top', async ({ page }) => { + test('should show on top', async ({page}) => { await tuiGoto(page, DemoRoute.ActionBar); const example = page.locator('#top-position'); const showActionBarButton = example.locator('label').first(); From 046fdf9db748c29b8a3c457988c83c9f9c12fae7 Mon Sep 17 00:00:00 2001 From: 40oleg Date: Fri, 1 Nov 2024 00:26:34 +0300 Subject: [PATCH 3/6] fix(demo): #9644 test fix --- .../demo-playwright/tests/kit/action-bar/action-bar.spec.ts | 2 +- .../src/modules/components/action-bar/examples/3/index.html | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) 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 index 634e2bb93b8d..4c294464c93a 100644 --- a/projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts +++ b/projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts @@ -21,7 +21,7 @@ test.describe('ActionBar', () => { test('should show on top', async ({page}) => { await tuiGoto(page, DemoRoute.ActionBar); const example = page.locator('#top-position'); - const showActionBarButton = example.locator('label').first(); + const showActionBarButton = example.getByTestId('open-table-bar-on-top').first(); await showActionBarButton.click(); const actionBarExample = page.locator('tui-action-bar'); diff --git a/projects/demo/src/modules/components/action-bar/examples/3/index.html b/projects/demo/src/modules/components/action-bar/examples/3/index.html index 0c0d6a1a5bb3..6ebd13eacdea 100644 --- a/projects/demo/src/modules/components/action-bar/examples/3/index.html +++ b/projects/demo/src/modules/components/action-bar/examples/3/index.html @@ -1,4 +1,5 @@ -