diff --git a/BREAKING.md b/BREAKING.md index 70d0febb151..f75b27540cc 100644 --- a/BREAKING.md +++ b/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). +

Range

+ +- 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). +

Select

- 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). diff --git a/core/api.txt b/core/api.txt index 1a6de552dd9..4dffadf53b1 100644 --- a/core/api.txt +++ b/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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f8368e8e7cd..d72efea136f 100644 --- a/core/src/components.d.ts +++ b/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) => void; - /** - * Emitted when the styles change. - */ - "onIonStyle"?: (event: IonRangeCustomEvent) => void; /** * If `true`, a pin with integer value is shown when the knob is pressed. */ diff --git a/core/src/components/item/test/disabled/index.html b/core/src/components/item/test/disabled/index.html index 7cd6ed872a2..4299e3adbb5 100644 --- a/core/src/components/item/test/disabled/index.html +++ b/core/src/components/item/test/disabled/index.html @@ -38,12 +38,6 @@ Disabled Item Anchor - - - - Disabled Range - - diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png index d4d6b9a0ef6..bcf5ed99b5f 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png index 5e64de27483..456412237eb 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png index 59ea2144eaa..df85966d58d 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png index 00ad8737ced..4a03aece347 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png index a890f77f7ad..dd329f1bfa0 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png index 8791c29ad2a..8f140e8470c 100644 Binary files a/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/index.html b/core/src/components/item/test/legacy/disabled/index.html index 170b696ade4..4299e3adbb5 100644 --- a/core/src/components/item/test/legacy/disabled/index.html +++ b/core/src/components/item/test/legacy/disabled/index.html @@ -38,11 +38,6 @@ Disabled Item Anchor - - - Disabled Range - - diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png index a735afdaf18..bcf5ed99b5f 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png index 78c44eaad19..456412237eb 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png index f51d86a1b28..df85966d58d 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png index a1ac0740097..60a5993758c 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png index 1a1b79d6738..d7851065759 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png index bba935f6d72..eb70831b2f3 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-ios-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png index cb9381ab75b..4a03aece347 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png index 5aec429a370..dd329f1bfa0 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png index 9152ec0caee..8f140e8470c 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png index 9156cdd7ef5..837b35c14bf 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Chrome-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png index 1a814016d01..b537878189f 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Firefox-linux.png differ diff --git a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png index 2307f2ba4fe..b9277da27f3 100644 Binary files a/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png and b/core/src/components/item/test/legacy/disabled/item.e2e.ts-snapshots/item-disabled-diff-md-rtl-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/range.ios.scss b/core/src/components/range/range.ios.scss index 343fb4b42a4..cb78e1ee043 100644 --- a/core/src/components/range/range.ios.scss +++ b/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); } diff --git a/core/src/components/range/range.ios.vars.scss b/core/src/components/range/range.ios.vars.scss index 30c72b89a81..b51ed489e98 100644 --- a/core/src/components/range/range.ios.vars.scss +++ b/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 diff --git a/core/src/components/range/range.md.scss b/core/src/components/range/range.md.scss index 2c2acb0200f..39315680c0c 100644 --- a/core/src/components/range/range.md.scss +++ b/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; } diff --git a/core/src/components/range/range.md.vars.scss b/core/src/components/range/range.md.vars.scss index b1d72eb3561..c5c0293c8c3 100644 --- a/core/src/components/range/range.md.vars.scss +++ b/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 diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index 1df4ed9c3f5..2360ac56f93 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -1,8 +1,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core'; import { Component, Element, Event, Host, Prop, State, Watch, h } from '@stencil/core'; import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content'; -import type { LegacyFormController } from '@utils/forms'; -import { createLegacyFormController } from '@utils/forms'; import type { Attributes } from '@utils/helpers'; import { inheritAriaAttributes, clamp, debounceEvent, getAriaLabel, renderHiddenInput } from '@utils/helpers'; import { printIonWarning } from '@utils/logging'; @@ -10,7 +8,7 @@ import { isRTL } from '@utils/rtl'; import { createColorClasses, hostContext } from '@utils/theme'; import { getIonMode } from '../../global/ionic-global'; -import type { Color, Gesture, GestureDetail, StyleEventDetail } from '../../interface'; +import type { Color, Gesture, GestureDetail } from '../../interface'; import { roundToMaxDecimalPlaces } from '../../utils/floating-point'; import type { @@ -59,10 +57,6 @@ export class Range implements ComponentInterface { private contentEl: HTMLElement | null = null; private initialContentScrollY = true; private originalIonInput?: EventEmitter; - private legacyFormController!: LegacyFormController; - - // This flag ensures we log the deprecation warning at most once. - private hasLoggedDeprecationWarning = false; @Element() el!: HTMLIonRangeElement; @@ -198,7 +192,6 @@ export class Range implements ComponentInterface { if (this.gesture) { this.gesture.enable(!this.disabled); } - this.emitStyle(); } /** @@ -236,17 +229,6 @@ export class Range implements ComponentInterface { */ @Prop() labelPlacement: 'start' | 'end' | 'fixed' | 'stacked' = 'start'; - /** - * 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. - */ - @Prop() legacy?: boolean; - /** * The `ionChange` event is fired for `` elements when the user * modifies the element's value: @@ -264,12 +246,6 @@ export class Range implements ComponentInterface { */ @Event() ionInput!: EventEmitter; - /** - * Emitted when the styles change. - * @internal - */ - @Event() ionStyle!: EventEmitter; - /** * Emitted when the range has focus. */ @@ -328,10 +304,6 @@ export class Range implements ComponentInterface { } connectedCallback() { - const { el } = this; - - this.legacyFormController = createLegacyFormController(el); - this.updateRatio(); this.debounceChanged(); this.disabledChanged(); @@ -395,18 +367,6 @@ export class Range implements ComponentInterface { } } - // TODO FW-2997 remove this - private emitStyle() { - if (this.legacyFormController.hasLegacyControl()) { - this.ionStyle.emit({ - interactive: true, - 'interactive-disabled': this.disabled, - // TODO(FW-2997): remove this - legacy: !!this.legacy, - }); - } - } - /** * Emits an `ionChange` event. * @@ -553,7 +513,6 @@ export class Range implements ComponentInterface { if (this.hasFocus) { this.hasFocus = false; this.ionBlur.emit(); - this.emitStyle(); } }; @@ -561,62 +520,9 @@ export class Range implements ComponentInterface { if (!this.hasFocus) { this.hasFocus = true; this.ionFocus.emit(); - this.emitStyle(); } }; - // TODO FW-2997 remove this - private renderLegacyRange() { - if (!this.hasLoggedDeprecationWarning) { - printIonWarning( - `ion-range now requires providing a label with either the label slot or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the component or the "aria-label" attribute. - -Example:
Volume
 -Example with aria-label: - -Developers can use the "legacy" property to continue using the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup.`, - this.el - ); - - if (this.legacy) { - printIonWarning( - `ion-range is being used with the "legacy" property enabled which will forcibly enable the legacy form markup. This property will be removed in an upcoming major release of Ionic where this form control will use the modern form markup. - -Developers can dismiss this warning by removing their usage of the "legacy" property and using the new range syntax.`, - this.el - ); - } - - this.hasLoggedDeprecationWarning = true; - } - - const { el, pressedKnob, disabled, pin, rangeId } = this; - - const mode = getIonMode(this); - - renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled); - - return ( - - - {this.renderRangeSlider()} - - - ); - } - /** * Returns true if content was passed to the "start" slot */ @@ -631,68 +537,6 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop return this.el.querySelector('[slot="end"]') !== null; } - private renderRange() { - const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this; - - const inItem = hostContext('ion-item', el); - - /** - * If there is no start content then the knob at - * the min value will be cut off by the item margin. - */ - const hasStartContent = - (hasLabel && (labelPlacement === 'start' || labelPlacement === 'fixed')) || this.hasStartSlotContent; - - const needsStartAdjustment = inItem && !hasStartContent; - - /** - * If there is no end content then the knob at - * the max value will be cut off by the item margin. - */ - const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent; - - const needsEndAdjustment = inItem && !hasEndContent; - - const mode = getIonMode(this); - - renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled); - - return ( - - - - ); - } - private get hasLabel() { return this.label !== undefined || this.el.querySelector('[slot="label"]') !== null; } @@ -794,7 +638,7 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop } let labelledBy: string | undefined; - if (!this.legacyFormController.hasLegacyControl() && this.hasLabel) { + if (this.hasLabel) { labelledBy = 'range-label'; } @@ -861,8 +705,65 @@ Developers can dismiss this warning by removing their usage of the "legacy" prop } render() { - const { legacyFormController } = this; - return legacyFormController.hasLegacyControl() ? this.renderLegacyRange() : this.renderRange(); + const { disabled, el, hasLabel, rangeId, pin, pressedKnob, labelPlacement, label } = this; + + const inItem = hostContext('ion-item', el); + + /** + * If there is no start content then the knob at + * the min value will be cut off by the item margin. + */ + const hasStartContent = + (hasLabel && (labelPlacement === 'start' || labelPlacement === 'fixed')) || this.hasStartSlotContent; + + const needsStartAdjustment = inItem && !hasStartContent; + + /** + * If there is no end content then the knob at + * the max value will be cut off by the item margin. + */ + const hasEndContent = (hasLabel && labelPlacement === 'end') || this.hasEndSlotContent; + + const needsEndAdjustment = inItem && !hasEndContent; + + const mode = getIonMode(this); + + renderHiddenInput(true, el, this.name, JSON.stringify(this.getValue()), disabled); + + return ( + + + + ); } } diff --git a/core/src/components/range/test/a11y/range.e2e.ts b/core/src/components/range/test/a11y/range.e2e.ts index e501e1d9f12..b7219cf5361 100644 --- a/core/src/components/range/test/a11y/range.e2e.ts +++ b/core/src/components/range/test/a11y/range.e2e.ts @@ -33,7 +33,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, co await page.setContent( ` - + `, @@ -67,7 +67,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { await page.setContent( ` - + `, diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png index a3448a8f195..ab24d77d0b7 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png index b950e32883e..b0528a3acdb 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png index 138c6efa405..18e266a561a 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png index 87c7b7a4164..3c0a4f9e834 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png index c7b29846604..d2ea340b92f 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png index bb21cf4afe5..db41eca6eb6 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png index 0d42fb7ce9f..d3829ecf4a4 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png index 2c935efa431..7684a019d9c 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png index 30b773f6318..f82236504b3 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png index 29c655814a5..4ec66ca699d 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png index 1e31dbaaac4..1b46119563c 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png differ diff --git a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png index 23cdc610cd5..f767f744900 100644 Binary files a/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png and b/core/src/components/range/test/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png differ diff --git a/core/src/components/range/test/legacy/a11y/index.html b/core/src/components/range/test/legacy/a11y/index.html deleted file mode 100644 index eacc7b08067..00000000000 --- a/core/src/components/range/test/legacy/a11y/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - Range - a11y - - - - - - - - - - - Range - Basic - - - - - - Volume - - - - - - - - - - diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts b/core/src/components/range/test/legacy/a11y/range.e2e.ts deleted file mode 100644 index bbb06f30eee..00000000000 --- a/core/src/components/range/test/legacy/a11y/range.e2e.ts +++ /dev/null @@ -1,63 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -/** - * iOS mode does not display hover/active/focus styles. - */ -configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - test.describe(title('range: a11y'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.setContent( - ` - - - - - `, - config - ); - - const range = page.locator('ion-range'); - const rangeHandle = range.locator('.range-knob-handle'); - - await rangeHandle.evaluate((el) => el.classList.add('ion-focused')); - await page.waitForChanges(); - - await expect(range).toHaveScreenshot(screenshot(`range-focus`)); - - const box = (await rangeHandle.boundingBox())!; - const centerX = box.x + box.width / 2; - const centerY = box.y + box.height / 2; - - await page.mouse.move(centerX, centerY); - await page.mouse.down(); - await page.waitForChanges(); - - await expect(range).toHaveScreenshot(screenshot(`range-active`)); - }); - }); -}); - -configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { - test.describe(title('with pin'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.setContent( - ` - - - - - `, - config - ); - - const range = page.locator('ion-range'); - const rangeHandle = range.locator('.range-knob-handle'); - - await rangeHandle.evaluate((el) => el.classList.add('ion-focused')); - await page.waitForChanges(); - - await expect(range).toHaveScreenshot(screenshot(`range-focus-with-pin`)); - }); - }); -}); diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index a3448a8f195..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index b950e32883e..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 138c6efa405..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-active-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 87c7b7a4164..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index c7b29846604..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index bb21cf4afe5..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 0d42fb7ce9f..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 2c935efa431..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 30b773f6318..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 29c655814a5..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 1e31dbaaac4..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 23cdc610cd5..00000000000 Binary files a/core/src/components/range/test/legacy/a11y/range.e2e.ts-snapshots/range-focus-with-pin-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/a11y/screen-readers.md b/core/src/components/range/test/legacy/a11y/screen-readers.md deleted file mode 100644 index 9c2ffc36585..00000000000 --- a/core/src/components/range/test/legacy/a11y/screen-readers.md +++ /dev/null @@ -1,14 +0,0 @@ -"native" refers to a native `input[type=range]` element. - -### Selecting Range Knob - -| | native | Ionic | -| ------------------------ | ------------------------ | ---------------------- | -| VoiceOver macOS - Chrome | 0, Volume, slider | 0, Volume, slider | -| VoiceOver macOS - Safari | 0, Volume, slider | 0, Volume, slider | -| VoiceOver iOS | Volume, 0.00, adjustable | Volume, 0%, adjustable | -| Android TalkBack | 0%, Volumn, slider | 0%, Volumn, slider | -| Windows NVDA | Volume slider 0 | Volume slider 0 | - -Note: On TalkBack you can use the volume keys to adjust the range slider. - diff --git a/core/src/components/range/test/legacy/active-bar-start/index.html b/core/src/components/range/test/legacy/active-bar-start/index.html deleted file mode 100644 index 2e6dafb1c01..00000000000 --- a/core/src/components/range/test/legacy/active-bar-start/index.html +++ /dev/null @@ -1,157 +0,0 @@ - - - - - Range - activeBarStart - - - - - - - - - - - - - - - - Range - activeBarStart - - - - - - activeBarStart is 0 and value is 0. - - - - activeBarStart is 0 and value is 70. - - - - activeBarStart is 0 and value is -70. - - - - activeBarStart is -30 and value is 0. - - - - activeBarStart is 30 and value is 0. - - - - activeBarStart is between steps - - - - invalid activeBarStart value (less than min) - - - - invalid activeBarStart value (greater than max) - - - - activeBarStart is ignored with dual knobs enabled. - - - - - - - diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts deleted file mode 100644 index 34116496836..00000000000 --- a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -configs().forEach(({ title, screenshot, config }) => { - test.describe(title('range: activeBarStart'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/range/test/legacy/active-bar-start`, config); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(screenshot(`range-activeBarStart-diff`)); - }); - }); -}); diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 8dd3542e0c0..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 434e9430e2f..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index c83fa662603..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 11e938ad159..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 7e06e598909..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 77759f91124..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 49e5b014ec0..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 46c6185381c..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index a3d685be96d..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index c457a5394e7..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index f772e1d53c6..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 19ec9a8c725..00000000000 Binary files a/core/src/components/range/test/legacy/active-bar-start/range.e2e.ts-snapshots/range-activeBarStart-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/index.html b/core/src/components/range/test/legacy/basic/index.html deleted file mode 100644 index a9b05c86d3c..00000000000 --- a/core/src/components/range/test/legacy/basic/index.html +++ /dev/null @@ -1,333 +0,0 @@ - - - - - Range - Basic - - - - - - - - - - - - - Range - Basic - - - - - - - Range color - - - - - - - - - - - - - - - - - - - - - - Stacked Label - - Start - End - - - - - - - Dynamic Value - - - -
- - - -
- - - -
- - Increase Values - - - - - Mode - - - - - - - - - - - - Options - - - - - - - - - - - - - - - - - - - - - - - - - Test - - - - Coupled sliders - - - - - - - - - - - - - - - Custom pin label - - - - - - - - - - - diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts b/core/src/components/range/test/legacy/basic/range.e2e.ts deleted file mode 100644 index caa8ced600e..00000000000 --- a/core/src/components/range/test/legacy/basic/range.e2e.ts +++ /dev/null @@ -1,94 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, dragElementBy, test } from '@utils/test/playwright'; - -configs().forEach(({ title, screenshot, config }) => { - test.describe(title('range: rendering'), () => { - test('should not have visual regressions', async ({ page }) => { - await page.goto(`/src/components/range/test/legacy/basic`, config); - - await page.setIonViewport(); - - await expect(page).toHaveScreenshot(screenshot(`range-diff`)); - }); - }); -}); - -/** - * This behavior does not vary across modes/directions. - */ -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('range: behavior'), () => { - /** - * The mouse events are flaky on CI - * TODO FW-2873 - */ - test.fixme('should emit start/end events', async ({ page }) => { - await page.setContent(``, config); - - const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); - const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); - - const rangeEl = page.locator('ion-range'); - - await dragElementBy(rangeEl, page, 300, 0); - await page.waitForChanges(); - - /** - * dragElementBy defaults to starting the drag from the middle of the el, - * so the start value should jump to 50 despite the range defaulting to 20. - */ - expect(rangeStart).toHaveReceivedEventDetail({ value: 50 }); - expect(rangeEnd).toHaveReceivedEventDetail({ value: 100 }); - - /** - * Verify both events fire if range is clicked without dragging. - */ - await dragElementBy(rangeEl, page, 0, 0); - await page.waitForChanges(); - - expect(rangeStart).toHaveReceivedEventDetail({ value: 50 }); - expect(rangeEnd).toHaveReceivedEventDetail({ value: 50 }); - }); - - test('should emit start/end events, keyboard', async ({ page }) => { - await page.setContent(``, config); - - const rangeStart = await page.spyOnEvent('ionKnobMoveStart'); - const rangeEnd = await page.spyOnEvent('ionKnobMoveEnd'); - - await page.keyboard.press('Tab'); // focus first range - await page.keyboard.press('ArrowRight'); - - await rangeStart.next(); - await rangeEnd.next(); - - expect(rangeStart).toHaveReceivedEventDetail({ value: 20 }); - expect(rangeEnd).toHaveReceivedEventDetail({ value: 21 }); - }); - - // TODO FW-2873 - test.skip('should not scroll when the knob is swiped', async ({ page, skip }) => { - skip.browser('webkit', 'mouse.wheel is not available in WebKit'); - - await page.goto(`/src/components/range/test/legacy/basic`, config); - - const knobEl = page.locator('ion-range#stacked-range .range-knob-handle'); - const scrollEl = page.locator('ion-content .inner-scroll'); - - expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); - - await dragElementBy(knobEl, page, 30, 0, undefined, undefined, false); - - /** - * Do not use scrollToBottom() or other scrolling methods - * on ion-content as those will update the scroll position. - * Setting scrollTop still works even with overflow-y: hidden. - * However, simulating a user gesture should not scroll the content. - */ - await page.mouse.wheel(0, 100); - await page.waitForChanges(); - - expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); - }); - }); -}); diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index e5e0dc704d8..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index 71b9a61bd31..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 2af5bb849ba..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 4fc2b04a73e..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 4d50bd2b376..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 3809d22f5e2..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-ios-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png deleted file mode 100644 index 3b635ececfd..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png deleted file mode 100644 index a9ca395b793..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png deleted file mode 100644 index 3ecdbda20eb..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-ltr-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png deleted file mode 100644 index 10ea322bf65..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Chrome-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png deleted file mode 100644 index 0d4132dfef0..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Firefox-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png b/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png deleted file mode 100644 index 315eebf5678..00000000000 Binary files a/core/src/components/range/test/legacy/basic/range.e2e.ts-snapshots/range-diff-md-rtl-Mobile-Safari-linux.png and /dev/null differ diff --git a/core/src/components/range/test/legacy/range-events.e2e.ts b/core/src/components/range/test/legacy/range-events.e2e.ts deleted file mode 100644 index 3db8c3bc608..00000000000 --- a/core/src/components/range/test/legacy/range-events.e2e.ts +++ /dev/null @@ -1,130 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe(title('range: events:'), () => { - test.describe(' ionChange', () => { - test('should not emit if the value is set programmatically', async ({ page }) => { - await page.setContent(``, config); - - const range = page.locator('ion-range'); - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - await range.evaluate((el: HTMLIonRangeElement) => { - el.value = 50; - }); - - await page.waitForChanges(); - - expect(ionChangeSpy).toHaveReceivedEventTimes(0); - - // Update the value again to make sure it doesn't emit a second time - await range.evaluate((el: HTMLIonRangeElement) => { - el.value = 60; - }); - - await page.waitForChanges(); - - expect(ionChangeSpy).toHaveReceivedEventTimes(0); - }); - - // TODO(FW-2873) - test.skip('should emit when the knob is released', async ({ page }) => { - await page.setContent(``, config); - - const rangeHandle = page.locator('ion-range .range-knob-handle'); - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - const boundingBox = await rangeHandle.boundingBox(); - - await rangeHandle.hover(); - await page.mouse.down(); - await page.mouse.move(boundingBox!.x + 100, boundingBox!.y); - - await page.mouse.up(); - - await ionChangeSpy.next(); - - expect(ionChangeSpy).toHaveReceivedEventTimes(1); - }); - - test('should emit when the knob is moved with the keyboard', async ({ page }) => { - await page.setContent(``, config); - - const rangeHandle = page.locator('ion-range .range-knob-handle'); - const ionChangeSpy = await page.spyOnEvent('ionChange'); - - await rangeHandle.click(); - - await page.keyboard.press('ArrowLeft'); - await ionChangeSpy.next(); - - expect(ionChangeSpy).toHaveReceivedEventDetail({ value: 49 }); - - await page.keyboard.press('ArrowRight'); - await ionChangeSpy.next(); - - expect(ionChangeSpy).toHaveReceivedEventDetail({ value: 50 }); - - await page.keyboard.press('ArrowUp'); - await ionChangeSpy.next(); - - expect(ionChangeSpy).toHaveReceivedEventDetail({ value: 51 }); - - await page.keyboard.press('ArrowDown'); - await ionChangeSpy.next(); - - expect(ionChangeSpy).toHaveReceivedEventDetail({ value: 50 }); - }); - }); - - test.describe('ionInput', () => { - // TODO(FW-2873) Enable this test when touch events/gestures are better supported in Playwright - test.skip('should emit when the knob is dragged', async ({ page }) => { - await page.setContent(``, config); - - const rangeHandle = page.locator('ion-range .range-knob-handle'); - const ionInputSpy = await page.spyOnEvent('ionInput'); - - const boundingBox = await rangeHandle.boundingBox(); - - await rangeHandle.hover(); - await page.mouse.down(); - await page.mouse.move(boundingBox!.x + 100, boundingBox!.y); - - await ionInputSpy.next(); - - expect(ionInputSpy).toHaveReceivedEvent(); - }); - - test('should emit when the knob is moved with the keyboard', async ({ page }) => { - await page.setContent(``, config); - - const rangeHandle = page.locator('ion-range .range-knob-handle'); - const ionInputSpy = await page.spyOnEvent('ionInput'); - - await rangeHandle.click(); - - await page.keyboard.press('ArrowLeft'); - await ionInputSpy.next(); - - expect(ionInputSpy).toHaveReceivedEventDetail({ value: 49 }); - - await page.keyboard.press('ArrowRight'); - await ionInputSpy.next(); - - expect(ionInputSpy).toHaveReceivedEventDetail({ value: 50 }); - - await page.keyboard.press('ArrowUp'); - await ionInputSpy.next(); - - expect(ionInputSpy).toHaveReceivedEventDetail({ value: 51 }); - - await page.keyboard.press('ArrowDown'); - await ionInputSpy.next(); - - expect(ionInputSpy).toHaveReceivedEventDetail({ value: 50 }); - }); - }); - }); -}); diff --git a/core/src/components/range/test/legacy/scroll-target/index.html b/core/src/components/range/test/legacy/scroll-target/index.html deleted file mode 100644 index fa06d0cdf33..00000000000 --- a/core/src/components/range/test/legacy/scroll-target/index.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - Range - Scroll Target - - - - - - - - - - - - - Range - Scroll Target - - - - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper. - Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat - libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl - convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget - lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus. -

- - - Stacked Label - - Start - End - - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper. - Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat - libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl - convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget - lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus. -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper. - Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat - libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl - convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget - lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus. -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper. - Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat - libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl - convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget - lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus. -

- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur faucibus nulla a nunc tincidunt semper. - Nam nibh lorem, pharetra ac ex ac, tempus fringilla est. Aenean tincidunt ipsum pellentesque, consequat - libero id, feugiat leo. In vestibulum faucibus velit, non tincidunt erat tincidunt in. Donec a diam sed nisl - convallis maximus. Aenean cursus sagittis lorem vitae tristique. Pellentesque pellentesque, quam eget - lobortis finibus, lectus lorem maximus purus, quis sagittis tortor sem sed tellus. -

-
- - - - diff --git a/core/src/components/range/test/legacy/scroll-target/range.e2e.ts b/core/src/components/range/test/legacy/scroll-target/range.e2e.ts deleted file mode 100644 index d1240a6a88b..00000000000 --- a/core/src/components/range/test/legacy/scroll-target/range.e2e.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { expect } from '@playwright/test'; -import { configs, test } from '@utils/test/playwright'; - -// TODO FW-2873 -configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => { - test.describe.skip(title('range: scroll-target'), () => { - test('should not scroll when the knob is swiped in custom scroll target', async ({ page, skip }) => { - skip.browser('webkit', 'mouse.wheel is not available in WebKit'); - - await page.goto(`/src/components/range/test/legacy/scroll-target`, config); - - const knobEl = page.locator('ion-range .range-knob-handle'); - const scrollEl = page.locator('.ion-content-scroll-host'); - - expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); - - const box = (await knobEl.boundingBox())!; - const centerX = box.x + box.width / 2; - const centerY = box.y + box.height / 2; - - await page.mouse.move(centerX, centerY); - await page.mouse.down(); - await page.mouse.move(centerX + 30, centerY); - - /** - * Do not use scrollToBottom() or other scrolling methods - * on ion-content as those will update the scroll position. - * Setting scrollTop still works even with overflow-y: hidden. - * However, simulating a user gesture should not scroll the content. - */ - await page.mouse.wheel(0, 100); - await page.waitForChanges(); - - expect(await scrollEl.evaluate((el: HTMLElement) => el.scrollTop)).toEqual(0); - }); - }); -}); diff --git a/core/src/components/range/test/range-events.e2e.ts b/core/src/components/range/test/range-events.e2e.ts index bc019628e12..fd0bfa71c78 100644 --- a/core/src/components/range/test/range-events.e2e.ts +++ b/core/src/components/range/test/range-events.e2e.ts @@ -71,7 +71,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => test.skip('should not scroll when the knob is swiped', async ({ page, skip }) => { skip.browser('webkit', 'mouse.wheel is not available in WebKit'); - await page.goto(`/src/components/range/test/legacy/basic`, config); + await page.goto(`/src/components/range/test/basic`, config); const knobEl = page.locator('ion-range#stacked-range .range-knob-handle'); const scrollEl = page.locator('ion-content .inner-scroll'); diff --git a/core/src/components/range/test/range.spec.ts b/core/src/components/range/test/range.spec.ts index 0307b45438f..8698f9bbf06 100644 --- a/core/src/components/range/test/range.spec.ts +++ b/core/src/components/range/test/range.spec.ts @@ -186,20 +186,6 @@ describe('range: item adjustments', () => { expect(range.classList.contains('range-item-end-adjustment')).toBe(false); }); - // TODO FW-2997 remove this - it('should not add adjustment with legacy syntax', async () => { - const page = await newSpecPage({ - components: [Item, Range], - html: ` - - `, - }); - - const range = page.body.querySelector('ion-range')!; - expect(range.classList.contains('range-item-start-adjustment')).toBe(false); - expect(range.classList.contains('range-item-end-adjustment')).toBe(false); - }); - it('should not add start adjustment when with start adornment', async () => { const page = await newSpecPage({ components: [Item, Range], diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index a3b93c5a20d..cd26d7360c7 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -1640,14 +1640,14 @@ export declare interface IonRadioGroup extends Components.IonRadioGroup { @ProxyCmp({ - inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'] + inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'] }) @Component({ selector: 'ion-range', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'legacy', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'], + inputs: ['activeBarStart', 'color', 'debounce', 'disabled', 'dualKnobs', 'label', 'labelPlacement', 'max', 'min', 'mode', 'name', 'pin', 'pinFormatter', 'snaps', 'step', 'ticks', 'value'], }) export class IonRange { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/range.ts b/packages/angular/standalone/src/directives/range.ts index 76561f838e6..e1502ebcf03 100644 --- a/packages/angular/standalone/src/directives/range.ts +++ b/packages/angular/standalone/src/directives/range.ts @@ -29,7 +29,6 @@ const RANGE_INPUTS = [ 'dualKnobs', 'label', 'labelPlacement', - 'legacy', 'max', 'min', 'mode', diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 9c439017220..1960e1ffab0 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -639,10 +639,8 @@ export const IonRange = /*@__PURE__*/ defineContainer