diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index 7aed200eb3..507899801a 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -25,6 +25,8 @@ font-family: $font-family-base; + white-space: nowrap; + overflow: hidden; z-index: $z-index-item-input; } @@ -77,7 +79,7 @@ button { text-overflow: ellipsis; - white-space: nowrap; + white-space: inherit; overflow: hidden; } diff --git a/core/src/components/select/test/wrapping/select.e2e.ts b/core/src/components/select/test/wrapping/select.e2e.ts new file mode 100644 index 0000000000..1cf0e62823 --- /dev/null +++ b/core/src/components/select/test/wrapping/select.e2e.ts @@ -0,0 +1,48 @@ +import { expect } from '@playwright/test'; +import { test } from '@utils/test/playwright'; + +test.describe('select: wrapping', () => { + test('should not wrap text by default', async ({ page, skip }) => { + skip.rtl(); + + await page.setContent(` + + Should not wrap when no label exists and no class is added to make the text wrap + + `); + + const select = page.locator('ion-select'); + await expect(select).toHaveScreenshot(`select-nowrap-${page.getSnapshotSettings()}.png`); + }); + + test('should wrap text with class', async ({ page, skip }) => { + skip.rtl(); + + await page.setContent(` + + Should wrap when no label exists and really long text exists to make it wrap the text + + `); + + const select = page.locator('ion-select'); + await expect(select).toHaveScreenshot(`select-wrap-${page.getSnapshotSettings()}.png`); + }); + + test('should not wrap label while wrapping text with class', async ({ page, skip }) => { + skip.rtl(); + + // TODO(FW-3787) Make label a property of select + await page.setContent(` + + Really long label should not wrap + + Should wrap value only when label exists and really long text exists to make it wrap the text + + + + `); + + const select = page.locator('ion-item'); + await expect(select).toHaveScreenshot(`select-wrap-with-label-${page.getSnapshotSettings()}.png`); + }); +}); diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0ef09e1e2e Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..647033f941 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..cfd2d8485f Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..ceed3e44b8 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..f999184100 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..906d13558a Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-nowrap-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..1dc8b245f6 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..207ed76247 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..46dec2feec Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..69ab501d61 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..4aa43561c1 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..5e181e12fc Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..80935380ed Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..048ae1e819 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..ea8e091197 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..0c2150ff92 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6b992c35d4 Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 0000000000..833ba4e69e Binary files /dev/null and b/core/src/components/select/test/wrapping/select.e2e.ts-snapshots/select-wrap-with-label-md-ltr-Mobile-Safari-linux.png differ