refactor(select): remove legacy property and support for legacy syntax (#29024)

Issue number: internal

---------

## What is the current behavior?

In Ionic Framework v7, we [simplified the select
syntax](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax)
so that it was no longer required to be placed inside of an `ion-item`.
We maintained backwards compatibility by adding a `legacy` property
which allowed it to continue to be styled properly when written in the
following way:

```html
<ion-item>
  <ion-label>Label</ion-label>
  <ion-select></ion-select>
</ion-item>
```

While this was supported in v7, console warnings were logged to notify
developers that they needed to update this syntax for the best
accessibility experience.

## What is the new behavior?

- Removes the `legacy` property and support for the legacy syntax.
Developers should follow the [migration
guide](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax)
in the select documentation to update their apps. The new syntax
requires a `label` or `aria-label` on `ion-select`:
    ```html
    <ion-item>
      <ion-select label="Label"></ion-select>
    </ion-item>
    ```
- Removes the legacy tests under under `select/test/legacy/` and all
related screenshots
- Removes the select usage from `item/test/disabled`,
`item/test/legacy/alignment`, and `item/test/legacy/disabled` and all
related screenshots if the test was removed

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

1. Developers have had console warnings when using the legacy syntax
since the v7 release. The migration guide for the new select syntax is
outlined in the [Select
documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).
2. This change has been documented in the Breaking Changes document with
a link to the migration guide.

BREAKING CHANGE:

The `legacy` property and support for the legacy syntax, which involved
placing an `ion-select` inside of an `ion-item` with an `ion-label`,
have been removed from select. For more information on migrating from
the legacy select syntax, refer to the [Select
documentation](https://ionicframework.com/docs/api/select#migrating-from-legacy-select-syntax).

---------

Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/item/item.ios.scss

@@ -213,18 +213,9 @@
   --min-height: 68px;
 }
 
-:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
-:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0px;
-}
-
-
 // iOS Fixed Labels
 // --------------------------------------------------
 
-:host(.item-label-fixed) ::slotted(ion-select.legacy-select),
 :host(.item-label-fixed) ::slotted(ion-datetime) {
   --padding-start: 0;
 }

core/src/components/item/item.md.scss

@@ -319,7 +319,6 @@
 // Material Design Fixed Labels
 // --------------------------------------------------
 
-:host(.item-label-fixed) ::slotted(ion-select.legacy-select),
 :host(.item-label-fixed) ::slotted(ion-datetime) {
   --padding-start: 8px;
 }
@@ -365,13 +364,6 @@
   --min-height: 55px;
 }
 
-:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
-:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0;
-}
-
 :host(.ion-focused:not(.ion-color)) ::slotted(.label-stacked),
 :host(.ion-focused:not(.ion-color)) ::slotted(.label-floating),
 :host(.item-has-focus:not(.ion-color)) ::slotted(.label-stacked),

core/src/components/item/item.scss

@@ -535,29 +535,6 @@ button, a {
   display: block;
 }
 
-// Item Select
-// --------------------------------------------------
-
-:host(:not(.item-label)) ::slotted(ion-select.legacy-select) {
-  --padding-start: 0;
-
-  max-width: none;
-}
-
-:host(.item-label-stacked) ::slotted(ion-select.legacy-select),
-:host(.item-label-floating) ::slotted(ion-select.legacy-select) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0;
-
-  align-self: stretch;
-
-  width: 100%;
-
-  max-width: 100%;
-}
-
-
 // Item Datetime
 // --------------------------------------------------
 
@@ -580,8 +557,7 @@ button, a {
 
 :host(.item-multiple-inputs) ::slotted(ion-checkbox),
 :host(.item-multiple-inputs) ::slotted(ion-datetime),
-:host(.item-multiple-inputs) ::slotted(ion-radio),
-:host(.item-multiple-inputs) ::slotted(ion-select.legacy-select) {
+:host(.item-multiple-inputs) ::slotted(ion-radio) {
   position: relative;
 }
 

core/src/components/item/test/disabled/index.html

@@ -39,18 +39,6 @@
             <ion-label>Disabled Item Anchor</ion-label>
           </ion-item>
 
-          <ion-item>
-            <ion-select label="Disabled Select" disabled value="n64">
-              <ion-select-option value="">No Game Console</ion-select-option>
-              <ion-select-option value="nes">NES</ion-select-option>
-              <ion-select-option value="n64">Nintendo64</ion-select-option>
-              <ion-select-option value="ps">PlayStation</ion-select-option>
-              <ion-select-option value="genesis">Sega Genesis</ion-select-option>
-              <ion-select-option value="saturn">Sega Saturn</ion-select-option>
-              <ion-select-option value="snes">SNES</ion-select-option>
-            </ion-select>
-          </ion-item>
-
           <ion-item>
             <ion-toggle disabled checked> Disabled Toggle </ion-toggle>
           </ion-item>
@@ -89,25 +77,6 @@
             <ion-label>Checkbox + Radio</ion-label>
           </ion-item>
 
-          <ion-item>
-            <ion-label slot="start">Disabled Selects</ion-label>
-            <ion-select aria-label="Month" placeholder="month">
-              <ion-select-option value="1">January</ion-select-option>
-              <ion-select-option value="2">February</ion-select-option>
-              <ion-select-option value="3">March</ion-select-option>
-            </ion-select>
-            <ion-select aria-label="Year" disabled placeholder="year">
-              <ion-select-option value="1990">1990</ion-select-option>
-              <ion-select-option value="1991">1991</ion-select-option>
-              <ion-select-option value="1992">1992</ion-select-option>
-              <ion-select-option value="1993">1993</ion-select-option>
-              <ion-select-option value="1994">1994</ion-select-option>
-              <ion-select-option value="1995">1995</ion-select-option>
-              <ion-select-option value="1996">1996</ion-select-option>
-              <ion-select-option value="1997">1997</ion-select-option>
-            </ion-select>
-          </ion-item>
-
           <ion-item>
             <ion-checkbox slot="start" aria-label="Checkbox"></ion-checkbox>
             <ion-label>Checkbox + Range</ion-label>

core/src/components/item/test/legacy/alignment/index.html

@@ -1,104 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <title>Item - Alignment</title>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
-    />
-    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
-    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
-    <script src="../../../../../scripts/testing/scripts.js"></script>
-    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
-    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Item - Alignment</ion-title>
-        </ion-toolbar>
-      </ion-header>
-
-      <ion-content>
-        <ion-list>
-          <ion-list-header>Leading Icons</ion-list-header>
-          <ion-item>
-            <ion-icon slot="start" name="pin"></ion-icon>
-            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
-              <ion-select-option>Madison, WI</ion-select-option>
-              <ion-select-option>Atlanta, GA</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header>Default Labels</ion-list-header>
-          <ion-item>
-            <ion-label>Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
-              <ion-select-option>Madison, WI</ion-select-option>
-              <ion-select-option>Atlanta, GA</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header>Fixed Labels</ion-list-header>
-          <ion-item>
-            <ion-label position="fixed">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
-              <ion-select-option>Madison, WI</ion-select-option>
-              <ion-select-option>Atlanta, GA</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header>Floating Labels</ion-list-header>
-          <ion-item>
-            <ion-label position="floating">Destination</ion-label>
-            <ion-select legacy="true">
-              <ion-select-option>Madison, WI</ion-select-option>
-              <ion-select-option>Atlanta, GA</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header>Stacked Labels</ion-list-header>
-          <ion-item>
-            <ion-label position="stacked">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
-              <ion-select-option>Madison, WI</ion-select-option>
-              <ion-select-option>Atlanta, GA</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-
-        <ion-list>
-          <ion-list-header>End Labels</ion-list-header>
-          <ion-item>
-            <ion-label slot="end">Destination</ion-label>
-            <ion-select placeholder="Choose Really Really Long Destination Here" legacy="true">
-              <ion-select-option>Madison, WI</ion-select-option>
-              <ion-select-option>Atlanta, GA</ion-select-option>
-            </ion-select>
-          </ion-item>
-        </ion-list>
-      </ion-content>
-    </ion-app>
-
-    <style>
-      ion-item {
-        --border-width: 0;
-        --inner-border-width: 0;
-        --background: #ddd;
-        border-radius: 4px;
-        margin-bottom: 10px;
-      }
-    </style>
-  </body>
-</html>

core/src/components/item/test/legacy/alignment/item.e2e.ts

@@ -1,14 +0,0 @@
-import { expect } from '@playwright/test';
-import { configs, test } from '@utils/test/playwright';
-
-configs().forEach(({ title, screenshot, config }) => {
-  test.describe(title('item: alignment'), () => {
-    test('should not have visual regressions', async ({ page }) => {
-      await page.goto(`/src/components/item/test/legacy/alignment`, config);
-
-      await page.setIonViewport();
-
-      await expect(page).toHaveScreenshot(screenshot(`item-alignment-diff`));
-    });
-  });
-});

core/src/components/item/test/legacy/disabled/index.html

@@ -39,19 +39,6 @@
             <ion-label>Disabled Item Anchor</ion-label>
           </ion-item>
 
-          <ion-item>
-            <ion-label>Disabled Select</ion-label>
-            <ion-select disabled value="n64" legacy="true">
-              <ion-select-option value="">No Game Console</ion-select-option>
-              <ion-select-option value="nes">NES</ion-select-option>
-              <ion-select-option value="n64">Nintendo64</ion-select-option>
-              <ion-select-option value="ps">PlayStation</ion-select-option>
-              <ion-select-option value="genesis">Sega Genesis</ion-select-option>
-              <ion-select-option value="saturn">Sega Saturn</ion-select-option>
-              <ion-select-option value="snes">SNES</ion-select-option>
-            </ion-select>
-          </ion-item>
-
           <ion-item>
             <ion-label>Disabled Toggle</ion-label>
             <ion-toggle disabled checked slot="end" legacy="true"></ion-toggle>
@@ -92,25 +79,6 @@
             <ion-label>Checkbox + Radio</ion-label>
           </ion-item>
 
-          <ion-item>
-            <ion-label>Disabled Selects</ion-label>
-            <ion-select placeholder="month" legacy="true">
-              <ion-select-option value="1">January</ion-select-option>
-              <ion-select-option value="2">February</ion-select-option>
-              <ion-select-option value="3">March</ion-select-option>
-            </ion-select>
-            <ion-select disabled placeholder="year" legacy="true">
-              <ion-select-option value="1990">1990</ion-select-option>
-              <ion-select-option value="1991">1991</ion-select-option>
-              <ion-select-option value="1992">1992</ion-select-option>
-              <ion-select-option value="1993">1993</ion-select-option>
-              <ion-select-option value="1994">1994</ion-select-option>
-              <ion-select-option value="1995">1995</ion-select-option>
-              <ion-select-option value="1996">1996</ion-select-option>
-              <ion-select-option value="1997">1997</ion-select-option>
-            </ion-select>
-          </ion-item>
-
           <ion-item>
             <ion-checkbox slot="start" legacy="true"></ion-checkbox>
             <ion-label>Checkbox + Range</ion-label>