From 1127fe0de80fb2f0f18041eee01ccee4c6f75f33 Mon Sep 17 00:00:00 2001 From: Nikita Barsukov Date: Wed, 22 Jan 2025 14:11:39 +0300 Subject: [PATCH] fix(addon-mobile): `DataList` inside `DropdownMobile` should not have any built-in paddings --- .../dropdown-mobile.style.less | 5 ++ .../components/data-list/data-list.style.less | 25 +++++++- .../demo-playwright/playwright.options.ts | 10 ++++ .../mobile-dropdown-with-textfield.pw.spec.ts | 21 +++++++ .../action-bar/action-bar.mobile.pw.spec.ts | 14 +---- .../dropdown-hover/dropdown-hover.pw.spec.ts | 15 +---- ...phone-i18n-with-mobile-dropdown.pw.spec.ts | 57 +++++++++++++++++++ .../input-date-range.pw.spec.ts | 14 +---- .../legacy/select/select.mobile.pw.spec.ts | 14 +---- .../textfield-with-data-list.po.ts | 4 +- .../sheet-dialog/examples/6/index.less | 1 + 11 files changed, 127 insertions(+), 53 deletions(-) create mode 100644 projects/demo-playwright/tests/addon-mobile/mobile-dropdown/mobile-dropdown-with-textfield.pw.spec.ts create mode 100644 projects/demo-playwright/tests/kit/input-phone-international/phone-i18n-with-mobile-dropdown.pw.spec.ts diff --git a/projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less b/projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less index 2f42d36235e4..f6f58efd5eed 100644 --- a/projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less +++ b/projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less @@ -95,6 +95,11 @@ tui-dropdown-mobile._sheet { overflow: auto; } } + + tui-data-list [tuiOption] { + margin-left: calc(-1 * var(--t-option-padding-inline)); + margin-right: calc(-1 * var(--t-option-padding-inline)); + } } .t-dropdown-mobile { diff --git a/projects/core/components/data-list/data-list.style.less b/projects/core/components/data-list/data-list.style.less index 23d97207200a..f72dad8cdd8a 100644 --- a/projects/core/components/data-list/data-list.style.less +++ b/projects/core/components/data-list/data-list.style.less @@ -26,9 +26,13 @@ tui-data-list { & > .t-empty, [tuiOption] { + --t-option-padding-inline: 0.5rem; + font: var(--tui-font-text-s); min-block-size: 2rem; - padding: 0.3125rem 0.5rem; + // TODO: use padding-block after Safari 14+ + padding-top: 0.3125rem; + padding-bottom: 0.3125rem; &::before { font-size: 1rem; @@ -38,9 +42,13 @@ tui-data-list { &[data-size='m'] > .t-empty, &[data-size='m'] [tuiOption] { + --t-option-padding-inline: 0.5rem; + font: var(--tui-font-text-s); min-block-size: 2.5rem; - padding: 0.375rem 0.5rem; + // TODO: use padding-block after Safari 14+ + padding-top: 0.375rem; + padding-bottom: 0.375rem; } &[data-size='l'] { @@ -49,9 +57,13 @@ tui-data-list { & > .t-empty, [tuiOption] { + --t-option-padding-inline: 0.625rem; + font: var(--tui-font-text-m); min-block-size: 2.75rem; - padding: 0.375rem 0.625rem; + // TODO: use padding-block after Safari 14+ + padding-top: 0.375rem; + padding-bottom: 0.375rem; } } @@ -101,6 +113,13 @@ tui-data-list { border-right: 0.5rem solid; } } + + & > .t-empty, + [tuiOption] { + // TODO: use padding-inline after Safari 14+ + padding-left: var(--t-option-padding-inline); + padding-right: var(--t-option-padding-inline); + } } tui-opt-group { diff --git a/projects/demo-playwright/playwright.options.ts b/projects/demo-playwright/playwright.options.ts index 44993f125d9b..42d92da2a35c 100644 --- a/projects/demo-playwright/playwright.options.ts +++ b/projects/demo-playwright/playwright.options.ts @@ -1,6 +1,16 @@ +import type {test} from '@playwright/test'; + // cspell:disable export const TUI_PLAYWRIGHT_MOBILE_USER_AGENT = 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1'; // Samsung Galaxy Ace GT: export const TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH = 320; export const TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT = 480; + +export const TUI_PLAYWRIGHT_MOBILE: Parameters[0] = { + viewport: { + width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH, + height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT, + }, + userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT, +}; diff --git a/projects/demo-playwright/tests/addon-mobile/mobile-dropdown/mobile-dropdown-with-textfield.pw.spec.ts b/projects/demo-playwright/tests/addon-mobile/mobile-dropdown/mobile-dropdown-with-textfield.pw.spec.ts new file mode 100644 index 000000000000..e9dc52ad11ff --- /dev/null +++ b/projects/demo-playwright/tests/addon-mobile/mobile-dropdown/mobile-dropdown-with-textfield.pw.spec.ts @@ -0,0 +1,21 @@ +import {DemoRoute} from '@demo/routes'; +import {TuiDocumentationPagePO} from '@demo-playwright/utils'; +import {expect, test} from '@playwright/test'; + +import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options'; + +const {describe} = test; + +describe('DropdownMobile for textfields', () => { + test.use(TUI_PLAYWRIGHT_MOBILE); + + test('with select', async ({page}) => { + await page.goto(DemoRoute.Dropdown); + + const example = new TuiDocumentationPagePO(page).getExample('#mobile'); + + await example.locator('tui-select').click(); + + await expect(page).toHaveScreenshot('dropdown-mobile-with-select.png'); + }); +}); diff --git a/projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.pw.spec.ts b/projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.pw.spec.ts index 1c03a14ee586..ed1cf56e12c7 100644 --- a/projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.pw.spec.ts +++ b/projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.pw.spec.ts @@ -2,20 +2,10 @@ import {DemoRoute} from '@demo/routes'; import {TuiDocumentationApiPagePO, tuiGoto} from '@demo-playwright/utils'; import {expect, test} from '@playwright/test'; -import { - TUI_PLAYWRIGHT_MOBILE_USER_AGENT, - TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT, - TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH, -} from '../../../playwright.options'; +import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options'; test.describe('ActionBar', () => { - test.use({ - viewport: { - width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH, - height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT, - }, - userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT, - }); + test.use(TUI_PLAYWRIGHT_MOBILE); test('works', async ({page}) => { await tuiGoto(page, DemoRoute.ActionBar); diff --git a/projects/demo-playwright/tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts b/projects/demo-playwright/tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts index 9ffe99b2d38d..5b4a961d4e0d 100644 --- a/projects/demo-playwright/tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts +++ b/projects/demo-playwright/tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts @@ -7,11 +7,7 @@ import { import type {Locator} from '@playwright/test'; import {expect, test} from '@playwright/test'; -import { - TUI_PLAYWRIGHT_MOBILE_USER_AGENT, - TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT, - TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH, -} from '../../../playwright.options'; +import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options'; const {describe, beforeEach} = test; @@ -25,14 +21,7 @@ test.describe('DropdownHover', () => { let example!: Locator; let mobileCalendar: TuiMobileDropdownPO; - test.use({ - viewport: { - width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH, - height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT, - }, - userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT, - isMobile: true, - }); + test.use(TUI_PLAYWRIGHT_MOBILE); beforeEach(({page}) => { example = new TuiDocumentationPagePO(page).getExample('#dropdown-mobile'); diff --git a/projects/demo-playwright/tests/kit/input-phone-international/phone-i18n-with-mobile-dropdown.pw.spec.ts b/projects/demo-playwright/tests/kit/input-phone-international/phone-i18n-with-mobile-dropdown.pw.spec.ts new file mode 100644 index 000000000000..cd72d0832699 --- /dev/null +++ b/projects/demo-playwright/tests/kit/input-phone-international/phone-i18n-with-mobile-dropdown.pw.spec.ts @@ -0,0 +1,57 @@ +import {DemoRoute} from '@demo/routes'; +import { + TuiDocumentationPagePO, + tuiGoto, + TuiInputPhoneInternationalPO, +} from '@demo-playwright/utils'; +import type {Locator} from '@playwright/test'; +import {expect, test} from '@playwright/test'; + +import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options'; + +const {describe, beforeEach} = test; + +describe('InputPhoneInternational | With [tuiDropdownMobile]', () => { + let example: Locator; + let inputPhoneInternational: TuiInputPhoneInternationalPO; + + test.use(TUI_PLAYWRIGHT_MOBILE); + + beforeEach(async ({page}) => { + await tuiGoto(page, DemoRoute.InputPhoneInternational); + + example = new TuiDocumentationPagePO(page).getExample('#mobile-dropdown'); + inputPhoneInternational = new TuiInputPhoneInternationalPO( + example.locator('tui-textfield:has([tuiInputPhoneInternational])'), + ); + }); + + test('opens mobile dropdown on select click', async ({page}) => { + await inputPhoneInternational.select.click(); + + await expect(page).toHaveScreenshot( + 'input-phone-international-with-mobile-dropdown.png', + ); + }); + + test('textfield inside dropdown is focused on dropdown open', async () => { + await inputPhoneInternational.select.click(); + + await expect( + inputPhoneInternational.dropdown.locator('tui-textfield input'), + ).toBeFocused(); + }); + + test('items is filtered by textfield inside dropdown', async () => { + await inputPhoneInternational.select.click(); + await inputPhoneInternational.dropdown + .locator('tui-textfield input') + .fill('aust'); + + const options = await inputPhoneInternational.getOptions(); + + expect(options).toHaveLength(2); + await expect(options[0]!).toContainText('Australia'); + await expect(options[1]!).toContainText('Austria'); + }); +}); diff --git a/projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts b/projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts index a3daabe16530..360ce4e37e04 100644 --- a/projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts +++ b/projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts @@ -2,11 +2,7 @@ import {DemoRoute} from '@demo/routes'; import type {Locator} from '@playwright/test'; import {expect, test} from '@playwright/test'; -import { - TUI_PLAYWRIGHT_MOBILE_USER_AGENT, - TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT, - TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH, -} from '../../../playwright.options'; +import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options'; import { CHAR_NO_BREAK_SPACE, TuiCalendarPO, @@ -235,13 +231,7 @@ test.describe('InputDateRange', () => { }); test.describe('Mobile emulation', () => { - test.use({ - viewport: { - width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH, - height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT, - }, - userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT, - }); + test.use(TUI_PLAYWRIGHT_MOBILE); let mobileCalendar!: TuiMobileCalendarPO; diff --git a/projects/demo-playwright/tests/legacy/select/select.mobile.pw.spec.ts b/projects/demo-playwright/tests/legacy/select/select.mobile.pw.spec.ts index 3286072004b7..983614605552 100644 --- a/projects/demo-playwright/tests/legacy/select/select.mobile.pw.spec.ts +++ b/projects/demo-playwright/tests/legacy/select/select.mobile.pw.spec.ts @@ -2,20 +2,10 @@ import {DemoRoute} from '@demo/routes'; import {tuiGoto} from '@demo-playwright/utils'; import {expect, test} from '@playwright/test'; -import { - TUI_PLAYWRIGHT_MOBILE_USER_AGENT, - TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT, - TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH, -} from '../../../playwright.options'; +import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options'; test.describe('Select', () => { - test.use({ - viewport: { - width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH, - height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT, - }, - userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT, - }); + test.use(TUI_PLAYWRIGHT_MOBILE); test('native select value', async ({page}) => { await tuiGoto(page, DemoRoute.Select); diff --git a/projects/demo-playwright/utils/page-objects/textfield-with-data-list.po.ts b/projects/demo-playwright/utils/page-objects/textfield-with-data-list.po.ts index c91b61085168..fddcc7522ed4 100644 --- a/projects/demo-playwright/utils/page-objects/textfield-with-data-list.po.ts +++ b/projects/demo-playwright/utils/page-objects/textfield-with-data-list.po.ts @@ -3,7 +3,9 @@ import {expect} from '@playwright/test'; export class TuiTextfieldWithDataListPO { public readonly textfield: Locator = this.host.getByRole('textbox'); - public readonly dropdown = this.host.page().locator('tui-dropdown'); + public readonly dropdown = this.host + .page() + .locator('tui-dropdown,tui-dropdown-mobile'); constructor(protected readonly host: Locator) {} diff --git a/projects/demo/src/modules/components/sheet-dialog/examples/6/index.less b/projects/demo/src/modules/components/sheet-dialog/examples/6/index.less index b65ddc1e6a87..271cb24a108f 100644 --- a/projects/demo/src/modules/components/sheet-dialog/examples/6/index.less +++ b/projects/demo/src/modules/components/sheet-dialog/examples/6/index.less @@ -26,6 +26,7 @@ margin: 0 -1rem; white-space: nowrap; overflow: hidden; + border-radius: 0; } .button {