diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss index ef32a431950..fc41917fda4 100644 --- a/core/src/components/select/select.scss +++ b/core/src/components/select/select.scss @@ -227,6 +227,15 @@ button { box-sizing: border-box; } +.select-wrapper .select-placeholder { + /** + * When the floating label appears on top of the + * select, we need to fade the text out so that the + * label does not overlap with the placeholder. + */ + transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + // Select Highlight // ---------------------------------------------------------------- @@ -473,16 +482,17 @@ button { } /** - * The select should be hidden when the label + * The placeholder should be hidden when the label * is on top of the select. This prevents the label * from overlapping any placeholder value. */ -:host(.select-label-placement-floating:not(.has-placeholder)) .native-wrapper .select-text { +:host(.select-label-placement-floating) .native-wrapper .select-placeholder { opacity: 0; } -:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-text, -:host(.has-value.select-label-placement-floating) .native-wrapper .select-text { +:host(.select-expanded.select-label-placement-floating) .native-wrapper .select-placeholder, +:host(.ion-focused.select-label-placement-floating) .native-wrapper .select-placeholder, +:host(.has-value.select-label-placement-floating) .native-wrapper .select-placeholder { opacity: 1; } @@ -492,8 +502,7 @@ button { :host(.select-label-placement-stacked) .label-text-wrapper, :host(.select-expanded.select-label-placement-floating) .label-text-wrapper, :host(.ion-focused.select-label-placement-floating) .label-text-wrapper, -:host(.has-value.select-label-placement-floating) .label-text-wrapper, -:host(.has-placeholder.select-label-placement-floating) .label-text-wrapper { +:host(.has-value.select-label-placement-floating) .label-text-wrapper { @include transform(translateY(50%), scale(#{$select-floating-label-scale})); /** diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png index f306b532cfd..5bc4ca5e612 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Firefox-linux.png index 617eb0bf23c..31f759f96ce 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Safari-linux.png index 368f4a01b4e..a15516c908c 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Chrome-linux.png index 25bba5d4587..34c1f3f868c 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Firefox-linux.png index f49c675ec45..e9be1d2565d 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Safari-linux.png index 72254b24535..2eb0a41838d 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png index e6224ec2310..1a5a1e0b779 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png index 3a083344234..975c5908a3d 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Safari-linux.png index f572baa7ea3..99ef259d9ec 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Chrome-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Chrome-linux.png index 95530f1ba9a..f0c31eb8261 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Firefox-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Firefox-linux.png index 877555db025..0ea6fb55470 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Safari-linux.png b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Safari-linux.png index 8775f957ff4..724b22a9c56 100644 Binary files a/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Safari-linux.png and b/core/src/components/select/test/label/select.e2e.ts-snapshots/select-label-floating-no-value-placeholder-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts b/core/src/components/textarea/test/label-placement/textarea.e2e.ts index 76716f5ee7d..affa8f1489f 100644 --- a/core/src/components/textarea/test/label-placement/textarea.e2e.ts +++ b/core/src/components/textarea/test/label-placement/textarea.e2e.ts @@ -179,6 +179,19 @@ configs().forEach(({ title, screenshot, config }) => { const textarea = page.locator('ion-textarea'); expect(await textarea.screenshot()).toMatchSnapshot(screenshot(`textarea-placement-floating-no-value`)); }); + test('label should appear on top of the textarea when there is a placeholder and no value', async ({ page }) => { + await page.setContent( + ` + + `, + config + ); + + const textarea = page.locator('ion-textarea'); + expect(await textarea.screenshot()).toMatchSnapshot( + screenshot(`textarea-placement-floating-no-value-placeholder`) + ); + }); test('label should appear on top of the textarea when the textarea is focused', async ({ page }) => { await page.setContent( ` diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..31045699d3b Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..e4fed639b7b Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..4d40a863248 Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..f6c73bd3c91 Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..ae6bb74752a Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..1e09e1092b6 Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..21e8871490e Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..27c1f6e727a Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-ltr-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-ltr-Mobile-Safari-linux.png new file mode 100644 index 00000000000..e76472aaa84 Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-rtl-Mobile-Chrome-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-rtl-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..dbbb5b1b2eb Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-rtl-Mobile-Firefox-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-rtl-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..a422fd3d818 Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-rtl-Mobile-Safari-linux.png b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-rtl-Mobile-Safari-linux.png new file mode 100644 index 00000000000..fb005e341d4 Binary files /dev/null and b/core/src/components/textarea/test/label-placement/textarea.e2e.ts-snapshots/textarea-placement-floating-no-value-placeholder-md-rtl-Mobile-Safari-linux.png differ