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

BREAKING.md

@@ -24,6 +24,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Nav](#version-8x-nav)
   - [Picker](#version-8x-picker)
   - [Progress bar](#version-8x-progress-bar)
+  - [Select](#version-8x-select)
   - [Textarea](#version-8x-textarea)
 
 <h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>
@@ -176,6 +177,10 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc
 
 For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming).
 
+<h4 id="version-8x-select">Select</h4>
+
+- 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. 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).
+
 <h4 id="version-8x-textarea">Textarea</h4>
 
 - The `legacy` property and support for the legacy syntax, which involved placing an `ion-textarea` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy textarea syntax, refer to the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax).

core/api.txt

@@ -1275,7 +1275,6 @@ ion-select,prop,interfaceOptions,any,{},false,false
 ion-select,prop,justify,"end" | "space-between" | "start",'space-between',false,false
 ion-select,prop,label,string | undefined,undefined,false,false
 ion-select,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start" | undefined,'start',false,false
-ion-select,prop,legacy,boolean | undefined,undefined,false,false
 ion-select,prop,mode,"ios" | "md",undefined,false,false
 ion-select,prop,multiple,boolean,false,false,false
 ion-select,prop,name,string,this.inputId,false,false

core/src/components.d.ts

@@ -2739,10 +2739,6 @@ export namespace Components {
           * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
-        /**
-          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
-         */
-        "legacy"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */
@@ -7498,10 +7494,6 @@ declare namespace LocalJSX {
           * Where to place the label relative to the select. `"start"`: The label will appear to the left of the select in LTR and to the right in RTL. `"end"`: The label will appear to the right of the select in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the select when the select is focused or it has a value. Otherwise it will appear on top of the select. `"stacked"`: The label will appear smaller and above the select regardless even when the select is blurred or has no value. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). When using `"floating"` or `"stacked"` we recommend initializing the select with either a `value` or a `placeholder`.
          */
         "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
-        /**
-          * Set the `legacy` property to `true` to forcibly use the legacy form control markup. Ionic will only opt components in to the modern form markup when they are using either the `aria-label` attribute or the `label` property. As a result, the `legacy` property should only be used as an escape hatch when you want to avoid this automatic opt-in behavior. Note that this property will be removed in an upcoming major release of Ionic, and all form components will be opted-in to using the modern form markup.
-         */
-        "legacy"?: boolean;
         /**
           * The mode determines which platform styles to use.
          */

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

core/src/components/select/select.ios.scss

@@ -4,14 +4,6 @@
 // iOS Select
 // --------------------------------------------------
 
-// TODO FW-3194 - Remove this
-:host(.legacy-select) {
-  --padding-top: #{$select-ios-padding-top};
-  --padding-end: #{$select-ios-padding-end};
-  --padding-bottom: #{$select-ios-padding-bottom};
-  --padding-start: #{$select-ios-padding-start};
-}
-
 .select-icon {
   width: $select-ios-icon-size;
   height: $select-ios-icon-size;

core/src/components/select/select.ios.vars.scss

@@ -4,18 +4,6 @@
 // iOS Select
 // --------------------------------------------------
 
-/// @prop - Padding top of the select
-$select-ios-padding-top:            $item-ios-padding-top !default;
-
-/// @prop - Padding end of the select
-$select-ios-padding-end:            ($item-ios-padding-end * 0.5) !default;
-
-/// @prop - Padding bottom of the select
-$select-ios-padding-bottom:         $item-ios-padding-bottom !default;
-
-/// @prop - Padding start of the select
-$select-ios-padding-start:          $item-ios-padding-start !default;
-
 /// @prop - Size of the select icon
 $select-ios-icon-size:              dynamic-font(18px) !default;
 

core/src/components/select/select.md.scss

@@ -11,14 +11,6 @@
   --border-color: #{$item-md-border-color};
 }
 
-// TODO FW-3194 - Remove this
-:host(.legacy-select) {
-  --padding-top: #{$select-md-padding-top};
-  --padding-end: #{$select-md-padding-end};
-  --padding-bottom: #{$select-md-padding-bottom};
-  --padding-start: #{$select-md-padding-start};
-}
-
 .select-icon {
   width: $select-md-icon-size;
 
@@ -89,7 +81,7 @@
  * when the select is activated.
  * This should only happen on MD.
  */
-:host(.select-expanded:not(.legacy-select):not(.has-expanded-icon)) .select-icon {
+:host(.select-expanded:not(.has-expanded-icon)) .select-icon {
   @include transform(rotate(180deg));
 }