refactor(range): remove legacy property and support for legacy syntax (…

…#29040)

BREAKING CHANGE:

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

BREAKING.md

@@ -27,6 +27,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Picker](#version-8x-picker)
   - [Progress bar](#version-8x-progress-bar)
   - [Radio](#version-8x-radio)
+  - [Range](#version-8x-range)
   - [Select](#version-8x-select)
   - [Textarea](#version-8x-textarea)
   - [Toggle](#version-8x-toggle)
@@ -195,6 +196,10 @@ For more information on styling toast buttons, refer to the [Toast Theming docum
 
 - The `legacy` property and support for the legacy syntax, which involved placing an `ion-radio` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy radio syntax, refer to the [Radio documentation](https://ionicframework.com/docs/api/radio#migrating-from-legacy-radio-syntax).
 
+<h4 id="version-8x-range">Range</h4>
+
+- The `legacy` property and support for the legacy syntax, which involved placing an `ion-range` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy range syntax, refer to the [Range documentation](https://ionicframework.com/docs/api/range#migrating-from-legacy-range-syntax).
+
 <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).

core/api.txt

@@ -1064,7 +1064,6 @@ ion-range,prop,disabled,boolean,false,false,false
 ion-range,prop,dualKnobs,boolean,false,false,false
 ion-range,prop,label,string | undefined,undefined,false,false
 ion-range,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
-ion-range,prop,legacy,boolean | undefined,undefined,false,false
 ion-range,prop,max,number,100,false,false
 ion-range,prop,min,number,0,false,false
 ion-range,prop,mode,"ios" | "md",undefined,false,false

core/src/components.d.ts

@@ -2311,10 +2311,6 @@ export namespace Components {
           * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
          */
         "labelPlacement": 'start' | 'end' | 'fixed' | 'stacked';
-        /**
-          * 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;
         /**
           * Maximum integer value of the range.
          */
@@ -4174,7 +4170,6 @@ declare global {
     interface HTMLIonRangeElementEventMap {
         "ionChange": RangeChangeEventDetail;
         "ionInput": RangeChangeEventDetail;
-        "ionStyle": StyleEventDetail;
         "ionFocus": void;
         "ionBlur": void;
         "ionKnobMoveStart": RangeKnobMoveStartEventDetail;
@@ -6988,10 +6983,6 @@ declare namespace LocalJSX {
           * Where to place the label relative to the range. `"start"`: The label will appear to the left of the range in LTR and to the right in RTL. `"end"`: The label will appear to the right of the range in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the range regardless of the direction.
          */
         "labelPlacement"?: 'start' | 'end' | 'fixed' | 'stacked';
-        /**
-          * 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;
         /**
           * Maximum integer value of the range.
          */
@@ -7032,10 +7023,6 @@ declare namespace LocalJSX {
           * Emitted when the user starts moving the range knob, whether through mouse drag, touch gesture, or keyboard interaction.
          */
         "onIonKnobMoveStart"?: (event: IonRangeCustomEvent<RangeKnobMoveStartEventDetail>) => void;
-        /**
-          * Emitted when the styles change.
-         */
-        "onIonStyle"?: (event: IonRangeCustomEvent<StyleEventDetail>) => void;
         /**
           * If `true`, a pin with integer value is shown when the knob is pressed.
          */

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

@@ -38,12 +38,6 @@
           <ion-item disabled href="#">
             <ion-label>Disabled Item Anchor</ion-label>
           </ion-item>
-
-          <ion-item>
-            <ion-range disabled value="10">
-              <span slot="label">Disabled Range</span>
-            </ion-range>
-          </ion-item>
         </ion-list>
       </ion-content>
 

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

@@ -38,11 +38,6 @@
           <ion-item disabled href="#">
             <ion-label>Disabled Item Anchor</ion-label>
           </ion-item>
-
-          <ion-item>
-            <ion-label>Disabled Range</ion-label>
-            <ion-range disabled value="10" legacy="true"></ion-range>
-          </ion-item>
         </ion-list>
       </ion-content>
 

core/src/components/range/range.ios.scss

@@ -16,11 +16,6 @@
   --height: #{$range-ios-slider-height};
 }
 
-// TODO FW-2997 remove this
-:host(.legacy-range) {
-  @include padding($range-ios-padding-vertical, $range-ios-padding-horizontal);
-}
-
 :host(.range-item-start-adjustment) {
   @include padding(null, null, null, $range-ios-item-padding-horizontal);
 }

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

@@ -6,10 +6,6 @@
 /// @prop - Padding top/bottom of the range
 $range-ios-padding-vertical: 8px !default;
 
-/// @prop - Padding start/end of the range
-// TODO FW-2997 Remove this
-$range-ios-padding-horizontal: 16px !default;
-
 /// @prop - Padding start/end of the range - modern syntax
 /**
  * 24px was chosen so the knob and its

core/src/components/range/range.md.scss

@@ -18,21 +18,9 @@
   --pin-color: #{ion-color(primary, contrast)};
 }
 
-// TODO FW-2997 Remove this
-:host(.legacy-range) ::slotted([slot="label"]) {
-  font-size: initial;
-}
-
-:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot="start"]),
-:host(:not(.legacy-range)) ::slotted(:not(ion-icon)[slot="end"]),
-:host(:not(.legacy-range)) .native-wrapper {
-  font-size: $range-md-pin-font-size;
-}
-
-// TODO FW-2997 remove this
-:host(.legacy-range) {
-  @include padding($range-md-padding-vertical, $range-md-padding-horizontal);
-
+::slotted(:not(ion-icon)[slot="start"]),
+::slotted(:not(ion-icon)[slot="end"]),
+.native-wrapper {
   font-size: $range-md-pin-font-size;
 }
 

core/src/components/range/range.md.vars.scss

@@ -6,10 +6,6 @@
 /// @prop - Padding top/bottom of the range
 $range-md-padding-vertical:                  8px !default;
 
-/// @prop - Padding start/end of the range
-// TODO FW-2997 Remove this
-$range-md-padding-horizontal:                14px !default;
-
 /// @prop - Padding start/end of the range - modern range
 /**
  * 18px was chosen so the knob and its focus/active