diff --git a/core/src/components/select/select.common.scss b/core/src/components/select/select.common.scss index 380f75e1341..ba17af1818b 100644 --- a/core/src/components/select/select.common.scss +++ b/core/src/components/select/select.common.scss @@ -57,16 +57,6 @@ cursor: pointer; } -/** - * Since the label sits on top of the element, - * the component needs to be taller otherwise the - * label will appear too close to the select text. - */ -:host(.select-label-placement-floating), -:host(.select-label-placement-stacked) { - min-height: 56px; -} - :host(.ion-color) { --highlight-color-focused: #{current-color(base)}; } @@ -221,17 +211,6 @@ button { overflow: hidden; } -:host(.select-label-placement-stacked) .select-wrapper-inner, -:host(.select-label-placement-floating) .select-wrapper-inner { - /** - * When using a stacked/floating label, the inner wrapper is - * stacked vertically under the label container. This line - * ensures that the inner wrapper fills all the remaining height - * of the component. - */ - flex-grow: 1; -} - // Select Highlight // ---------------------------------------------------------------- diff --git a/core/src/components/select/select.native.scss b/core/src/components/select/select.native.scss index 8c60a4f7ccb..64002313ad6 100644 --- a/core/src/components/select/select.native.scss +++ b/core/src/components/select/select.native.scss @@ -118,6 +118,27 @@ max-width: calc(100% / #{$form-control-label-stacked-scale}); } +/** + * Since the label sits on top of the element, + * the component needs to be taller otherwise the + * label will appear too close to the select text. + */ +:host(.select-label-placement-floating), +:host(.select-label-placement-stacked) { + min-height: 56px; +} + +/** + * When using a stacked/floating label, the inner wrapper is + * stacked vertically under the label container. This line + * ensures that the inner wrapper fills all the remaining height + * of the component. + */ +:host(.select-label-placement-stacked) .select-wrapper-inner, +:host(.select-label-placement-floating) .select-wrapper-inner { + flex-grow: 1; +} + // Start/End Slots // ---------------------------------------------------------------- diff --git a/core/src/components/select/test/size/index.html b/core/src/components/select/test/size/index.html index 247509cd025..50441caa5bf 100644 --- a/core/src/components/select/test/size/index.html +++ b/core/src/components/select/test/size/index.html @@ -47,6 +47,9 @@

Small

Filled text + + Filled text +
@@ -54,6 +57,9 @@

Medium

Filled text + + Filled text +
@@ -61,6 +67,9 @@

Large

Filled text + + Filled text +
diff --git a/core/src/components/select/test/size/select.e2e.ts b/core/src/components/select/test/size/select.e2e.ts index 927c2298ec1..de33b71c2c2 100644 --- a/core/src/components/select/test/size/select.e2e.ts +++ b/core/src/components/select/test/size/select.e2e.ts @@ -28,6 +28,26 @@ configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ config, screens await expect(select).toHaveScreenshot(screenshot(`select-size-${size}`)); }); + + test(`${size} - should not have visual regressions when label is unset`, async ({ page }) => { + await page.setContent( + ` + + Filled text + + `, + config + ); + + const select = page.locator('ion-select'); + + await expect(select).toHaveScreenshot(screenshot(`select-size-${size}-unset-label`)); + }); }); }); }); diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..e68601a1121 Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..80b0c39499a Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..071c90c5b96 Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-large-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..07791fcc274 Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..5c5ffaca7c6 Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..cf6854ab28c Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-medium-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..a9a4e163221 Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..4cfebbea458 Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..0a1f6326db5 Binary files /dev/null and b/core/src/components/select/test/size/select.e2e.ts-snapshots/select-size-small-unset-label-ionic-md-ltr-light-Mobile-Safari-linux.png differ