fix(select): hide notch cutout if no visible label provided (#27649)

Author: liamdebeasi

core/src/components/select/select.scss

@@ -316,7 +316,8 @@ button {
  * then the element should be hidden otherwise
  * there will be additional margins added.
  */
-.label-text-wrapper-hidden {
+.label-text-wrapper-hidden,
+.select-outline-notch-hidden {
   display: none;
 }
 

core/src/components/select/select.tsx

@@ -910,7 +910,12 @@ export class Select implements ComponentInterface {
       return [
         <div class="select-outline-container">
           <div class="select-outline-start"></div>
-          <div class="select-outline-notch">
+          <div
+            class={{
+              'select-outline-notch': true,
+              'select-outline-notch-hidden': !this.hasLabel,
+            }}
+          >
             <div class="notch-spacer" aria-hidden="true" ref={(el) => (this.notchSpacerEl = el)}>
               {this.label}
             </div>

core/src/components/select/test/fill/select.e2e.ts

@@ -224,4 +224,17 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co
       expect(await select.screenshot()).toMatchSnapshot(screenshot(`select-fill-outline-hidden-slotted-label`));
     });
   });
+  test.describe(title('select: notch cutout'), () => {
+    test('notch cutout should be hidden when no label is passed', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-select fill="outline" label-placement="stacked" aria-label="my select"></ion-select>
+      `,
+        config
+      );
+
+      const notchCutout = page.locator('ion-select .select-outline-notch');
+      await expect(notchCutout).toBeHidden();
+    });
+  });
 });