fix(select): ensure select sizes are respected when the label is empty (

#30087)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->
Currently, the experience planned for ionic select has the sizes fixed
and should be respected even when the labels are not presented.
https://stackblitz.com/edit/ku3fqz?file=src%2Fmain.tsx

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- When select is used with Ionic-theme, the select should respect the
height sizes established.
-
https://stackblitz.com/edit/ku3fqz-2vnasdmx?file=package-lock.json,package.json
-
https://ionic-framework-cdtf7hsqy-ionic1.vercel.app/src/components/select/test/size?ionic:theme=ionic

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

---------

Co-authored-by: Maria Hutt <[email protected]>

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
 // ----------------------------------------------------------------
 

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
 // ----------------------------------------------------------------
 

core/src/components/select/test/size/index.html

@@ -47,20 +47,29 @@ <h2>Small</h2>
             <ion-select size="small" fill="outline" label="Label" label-placement="stacked" value="filledText">
               <ion-select-option value="filledText">Filled text</ion-select-option>
             </ion-select>
+            <ion-select size="small" fill="outline" label="" label-placement="stacked" value="filledText2">
+              <ion-select-option value="filledText2">Filled text</ion-select-option>
+            </ion-select>
           </div>
 
           <div class="grid-item">
             <h2>Medium</h2>
             <ion-select size="medium" fill="outline" label="Label" label-placement="stacked" value="filledText">
               <ion-select-option value="filledText">Filled text</ion-select-option>
             </ion-select>
+            <ion-select size="medium" fill="outline" label="" label-placement="stacked" value="filledText2">
+              <ion-select-option value="filledText2">Filled text</ion-select-option>
+            </ion-select>
           </div>
 
           <div class="grid-item">
             <h2>Large</h2>
             <ion-select size="large" fill="outline" label="Label" label-placement="stacked" value="filledText">
               <ion-select-option value="filledText">Filled text</ion-select-option>
             </ion-select>
+            <ion-select size="large" fill="outline" label="" label-placement="stacked" value="filledText2">
+              <ion-select-option value="filledText2">Filled text</ion-select-option>
+            </ion-select>
           </div>
         </div>
       </ion-content>

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(
+          `
+          <ion-select 
+            size="${size}"
+            fill="outline"
+            label-placement="stacked"
+            value="filledText"
+          >
+            <ion-select-option value="filledText">Filled text</ion-select-option>
+          </ion-select>
+      `,
+          config
+        );
+
+        const select = page.locator('ion-select');
+
+        await expect(select).toHaveScreenshot(screenshot(`select-size-${size}-unset-label`));
+      });
     });
   });
 });