@ionic/core 7.5.7-dev.11701273756.1eb73d4c → 7.5.7-dev.11701896424.13d40ac9

package/dist/collection/components/item/item.ios.css

@@ -230,7 +230,6 @@
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -242,8 +241,8 @@
   outline: none;
   background: var(--background);
   overflow: inherit;
-  z-index: 1;
   box-sizing: border-box;
+  z-index: 1;
 }
 :host-context([dir=rtl]) .item-native {
   padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
@@ -262,10 +261,6 @@
   }
 }
 
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
-}
-
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -301,12 +296,10 @@ button, a {
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -332,12 +325,6 @@ button, a {
   }
 }
 
-:host(.item-legacy) .item-inner {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
-
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -401,7 +388,6 @@ button, a {
 
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
-  width: min-content;
 }
 
 :host(.item-input) {
@@ -410,23 +396,15 @@ button, a {
 
 .input-wrapper {
   display: flex;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   text-overflow: ellipsis;
   overflow: inherit;
   box-sizing: border-box;
 }
 
-:host(.item-legacy) .input-wrapper {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
-
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;

package/dist/collection/components/item/item.md.css

@@ -230,7 +230,6 @@
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex-wrap: wrap;
   align-items: inherit;
   justify-content: inherit;
   width: 100%;
@@ -242,8 +241,8 @@
   outline: none;
   background: var(--background);
   overflow: inherit;
-  z-index: 1;
   box-sizing: border-box;
+  z-index: 1;
 }
 :host-context([dir=rtl]) .item-native {
   padding-right: calc(var(--padding-start) + var(--ion-safe-area-right, 0px));
@@ -262,10 +261,6 @@
   }
 }
 
-:host(.item-legacy) .item-native {
-  flex-wrap: unset;
-}
-
 .item-native::-moz-focus-inner {
   border: 0;
 }
@@ -301,12 +296,10 @@ button, a {
   /* stylelint-enable */
   display: flex;
   position: relative;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   min-height: inherit;
   border-width: var(--inner-border-width);
   border-style: var(--border-style);
@@ -332,12 +325,6 @@ button, a {
   }
 }
 
-:host(.item-legacy) .item-inner {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
-
 .item-bottom {
   margin-left: 0;
   margin-right: 0;
@@ -401,7 +388,6 @@ button, a {
 
 ::slotted(ion-label:not([slot=end])) {
   flex: 1;
-  width: min-content;
 }
 
 :host(.item-input) {
@@ -410,23 +396,15 @@ button, a {
 
 .input-wrapper {
   display: flex;
-  flex: 1 0 auto;
+  flex: 1;
   flex-direction: inherit;
-  flex-wrap: wrap;
   align-items: inherit;
   align-self: stretch;
-  max-width: 100%;
   text-overflow: ellipsis;
   overflow: inherit;
   box-sizing: border-box;
 }
 
-:host(.item-legacy) .input-wrapper {
-  flex: 1;
-  flex-wrap: unset;
-  max-width: unset;
-}
-
 :host(.item-label-stacked),
 :host(.item-label-floating) {
   align-items: start;

package/dist/collection/components/item/test/basic/item.e2e.js

@@ -29,7 +29,7 @@ configs().forEach(({ title, screenshot, config }) => {
           </ion-item>
 
           <ion-item>
-            <ion-label class="ion-text-nowrap"> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
+            <ion-label> Single line text that should have ellipses when it doesn't all fit in the item</ion-label>
           </ion-item>
         </ion-list>
       `, config);

package/dist/collection/components/item/test/disabled/item.e2e.js

@@ -11,6 +11,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
     test('should not have visual regressions', async ({ page }) => {
       await page.goto(`/src/components/item/test/disabled`, config);
       await page.setIonViewport();
+      // TODO: FW-4037 - Fix label color inconsistency between disabled controls
       await expect(page).toHaveScreenshot(screenshot(`item-disabled-diff`));
     });
   });

package/dist/collection/components/item/test/text/item.e2e.js

@@ -0,0 +1,14 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs().forEach(({ title, screenshot, config }) => {
+  test.describe(title('item: text'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.goto(`/src/components/item/test/text`, config);
+      await page.setIonViewport();
+      await expect(page).toHaveScreenshot(screenshot(`item-text-diff`));
+    });
+  });
+});

package/dist/collection/components/label/label.ios.css

@@ -63,24 +63,17 @@
   font-family: var(--ion-font-family, inherit);
   font-size: inherit;
   text-overflow: ellipsis;
-  box-sizing: border-box;
-}
-
-:host-context(.item-legacy) {
   white-space: nowrap;
   overflow: hidden;
-}
-
-:host-context(.item:not(.item-input):not(.item-legacy)) {
-  flex-grow: 1;
+  box-sizing: border-box;
 }
 
 :host(.ion-color) {
   color: var(--ion-color-base);
 }
 
-:host(.ion-text-nowrap) {
-  overflow: hidden;
+:host(.ion-text-wrap) {
+  white-space: normal;
 }
 
 :host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
@@ -99,10 +92,6 @@
   align-self: baseline;
 }
 
-:host-context(.item-skeleton-text) {
-  overflow: hidden;
-}
-
 :host(.label-fixed) {
   flex: 0 0 100px;
   width: 100px;

package/dist/collection/components/label/label.md.css

@@ -63,24 +63,17 @@
   font-family: var(--ion-font-family, inherit);
   font-size: inherit;
   text-overflow: ellipsis;
-  box-sizing: border-box;
-}
-
-:host-context(.item-legacy) {
   white-space: nowrap;
   overflow: hidden;
-}
-
-:host-context(.item:not(.item-input):not(.item-legacy)) {
-  flex-grow: 1;
+  box-sizing: border-box;
 }
 
 :host(.ion-color) {
   color: var(--ion-color-base);
 }
 
-:host(.ion-text-nowrap) {
-  overflow: hidden;
+:host(.ion-text-wrap) {
+  white-space: normal;
 }
 
 :host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
@@ -99,10 +92,6 @@
   align-self: baseline;
 }
 
-:host-context(.item-skeleton-text) {
-  overflow: hidden;
-}
-
 :host(.label-fixed) {
   flex: 0 0 100px;
   width: 100px;

package/dist/collection/components/modal/gestures/swipe-to-close.js

@@ -5,7 +5,6 @@ import { getTimeGivenProgression } from "../../../utils/animation/cubic-bezier";
 import { isIonContent, findClosestIonContent, disableContentScrollY, resetContentScrollY } from "../../../utils/content/index";
 import { createGesture } from "../../../utils/gesture/index";
 import { clamp, getElementRoot } from "../../../utils/helpers";
-import { OVERLAY_GESTURE_PRIORITY } from "../../../utils/overlays";
 import { setCardStatusBarDark, setCardStatusBarDefault } from "../utils";
 import { calculateSpringStep, handleCanDismiss } from "./utils";
 // Defaults for the card swipe animation
@@ -251,7 +250,7 @@ export const createSwipeToCloseGesture = (el, animation, statusBarStyle, onDismi
   const gesture = createGesture({
     el,
     gestureName: 'modalSwipeToClose',
-    gesturePriority: OVERLAY_GESTURE_PRIORITY,
+    gesturePriority: 39,
     direction: 'y',
     threshold: 10,
     canStart,

package/dist/collection/components/note/test/a11y/note.e2e.js

@@ -48,48 +48,5 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
       const note = page.locator('ion-note');
       await expect(note).toHaveScreenshot(screenshot(`note-item-divider-scale`));
     });
-    test('should wrap label to the next line without truncating', async ({ page }) => {
-      await page.setContent(`
-        <style>
-          html {
-            font-size: 310%;
-          }
-        </style>
-
-        <ion-list>
-          <ion-item>
-            <ion-note slot="start">Really really long note</ion-note>
-            <ion-label>Label</ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Label</ion-label>
-            <ion-note slot="end">Really really long note</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-note slot="start">Note</ion-note>
-            <ion-label>Really really long label</ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">Note</ion-note>
-          </ion-item>
-
-          <ion-item>
-            <ion-note slot="start">Really really long note</ion-note>
-            <ion-label>Really really long label</ion-label>
-          </ion-item>
-
-          <ion-item>
-            <ion-label>Really really long label</ion-label>
-            <ion-note slot="end">Really really long note</ion-note>
-          </ion-item>
-        </ion-list>
-      `, config);
-      const list = page.locator('ion-list');
-      await expect(list).toHaveScreenshot(screenshot(`note-wrapping-label-scale`));
-    });
   });
 });

package/dist/collection/components/picker-column-internal/picker-column-internal.ios.css

@@ -109,20 +109,12 @@
 }
 
 :host .picker-item-empty,
-:host .picker-item[disabled] {
-  cursor: default;
-}
-
-:host .picker-item-empty,
-:host(:not([disabled])) .picker-item[disabled] {
+:host .picker-item.picker-item-disabled {
   scroll-snap-align: none;
+  cursor: default;
 }
 
-:host([disabled]) {
-  overflow-y: hidden;
-}
-
-:host .picker-item[disabled] {
+:host .picker-item.picker-item-disabled {
   opacity: 0.4;
 }
 

package/dist/collection/components/picker-column-internal/picker-column-internal.js

@@ -221,7 +221,6 @@ export class PickerColumnInternal {
       this.el.classList.remove('picker-column-active');
     };
     this.isActive = false;
-    this.disabled = false;
     this.items = [];
     this.value = undefined;
     this.color = 'primary';
@@ -319,13 +318,10 @@ export class PickerColumnInternal {
     }
   }
   get activeItem() {
-    // If the whole picker column is disabled, the current value should appear active
-    // If the current value item is specifically disabled, it should not appear active
-    const selector = `.picker-item[data-value="${this.value}"]${this.disabled ? '' : ':not([disabled])'}`;
-    return getElementRoot(this.el).querySelector(selector);
+    return getElementRoot(this.el).querySelector(`.picker-item[data-value="${this.value}"]:not([disabled])`);
   }
   render() {
-    const { items, color, disabled: pickerDisabled, isActive, numericInput } = this;
+    const { items, color, isActive, numericInput } = this;
     const mode = getIonMode(this);
     /**
      * exportparts is needed so ion-datetime can expose the parts
@@ -333,12 +329,11 @@ export class PickerColumnInternal {
      * the attribute can be moved to datetime.tsx and set on every
      * instance of ion-picker-column-internal there instead.
      */
-    return (h(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, disabled: pickerDisabled, tabindex: pickerDisabled ? null : 0, class: createColorClasses(color, {
+    return (h(Host, { exportparts: `${PICKER_ITEM_PART}, ${PICKER_ITEM_ACTIVE_PART}`, tabindex: 0, class: createColorClasses(color, {
         [mode]: true,
         ['picker-column-active']: isActive,
         ['picker-column-numeric-input']: numericInput,
       }) }, h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), items.map((item, index) => {
-      const isItemDisabled = pickerDisabled || item.disabled || false;
       {
         /*
         Users should be able to tab
@@ -351,9 +346,10 @@ export class PickerColumnInternal {
       }
       return (h("button", { tabindex: "-1", class: {
           'picker-item': true,
+          'picker-item-disabled': item.disabled || false,
         }, "data-value": item.value, "data-index": index, onClick: (ev) => {
           this.centerPickerItemInView(ev.target, true);
-        }, disabled: isItemDisabled, part: PICKER_ITEM_PART }, item.text));
+        }, disabled: item.disabled, part: PICKER_ITEM_PART }, item.text));
     }), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { class: "picker-item picker-item-empty", "aria-hidden": "true" }, "\u00A0")));
   }
   static get is() { return "ion-picker-column-internal"; }
@@ -372,24 +368,6 @@ export class PickerColumnInternal {
   }
   static get properties() {
     return {
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If `true`, the user cannot interact with the picker."
-        },
-        "attribute": "disabled",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "items": {
         "type": "unknown",
         "mutable": false,

package/dist/collection/components/picker-column-internal/picker-column-internal.md.css

@@ -109,20 +109,12 @@
 }
 
 :host .picker-item-empty,
-:host .picker-item[disabled] {
-  cursor: default;
-}
-
-:host .picker-item-empty,
-:host(:not([disabled])) .picker-item[disabled] {
+:host .picker-item.picker-item-disabled {
   scroll-snap-align: none;
+  cursor: default;
 }
 
-:host([disabled]) {
-  overflow-y: hidden;
-}
-
-:host .picker-item[disabled] {
+:host .picker-item.picker-item-disabled {
   opacity: 0.4;
 }
 

package/dist/collection/components/picker-column-internal/test/disabled/picker-column-internal.e2e.js

@@ -32,7 +32,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
  * This behavior does not vary across modes/directions.
  */
 configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('picker-column-internal: disabled items'), () => {
+  test.describe(title('picker-column-internal: disabled'), () => {
     test('all picker items should be enabled by default', async ({ page }) => {
       await page.setContent(`
         <ion-picker-internal>
@@ -48,7 +48,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           ]
         </script>
       `, config);
-      const pickerItems = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty, [disabled])');
+      const pickerItems = page.locator('ion-picker-column-internal .picker-item:not(.picker-item-empty, .picker-item-disabled)');
       expect(await pickerItems.count()).toBe(3);
     });
     test('disabled picker item should not be interactive', async ({ page }) => {
@@ -66,7 +66,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
           ]
         </script>
       `, config);
-      const disabledItem = page.locator('ion-picker-column-internal .picker-item[disabled]');
+      const disabledItem = page.locator('ion-picker-column-internal .picker-item.picker-item-disabled');
       await expect(disabledItem).not.toBeEnabled();
     });
     test('disabled picker item should not be considered active', async ({ page }) => {
@@ -106,7 +106,7 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
       await pickerColumn.evaluate((el) => (el.value = 'b'));
       await page.waitForChanges();
       const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]');
-      await expect(disabledItem).toBeDisabled();
+      await expect(disabledItem).toHaveClass(/picker-item-disabled/);
       await expect(disabledItem).not.toHaveClass(/picker-item-active/);
     });
     test('defaulting the value to a disabled item should not cause that item to be active', async ({ page }) => {
@@ -126,37 +126,8 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
         </script>
       `, config);
       const disabledItem = page.locator('ion-picker-column-internal .picker-item[data-value="b"]');
-      await expect(disabledItem).toBeDisabled();
+      await expect(disabledItem).toHaveClass(/picker-item-disabled/);
       await expect(disabledItem).not.toHaveClass(/picker-item-active/);
     });
   });
 });
-/**
- * This behavior does not vary across directions.
- */
-configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
-  test.describe(title('picker-column-internal: disabled column rendering'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto('/src/components/picker-column-internal/test/disabled', config);
-    });
-    test('disabled column should not have visual regressions', async ({ page }) => {
-      const disabledColumn = page.locator('#column-disabled');
-      await page.waitForChanges();
-      await expect(disabledColumn).toHaveScreenshot(screenshot('picker-internal-disabled-column'));
-    });
-  });
-});
-/**
- * This behavior does not vary across modes/directions.
- */
-configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
-  test.describe(title('picker-column-internal: disabled column'), () => {
-    test.beforeEach(async ({ page }) => {
-      await page.goto('/src/components/picker-column-internal/test/disabled', config);
-    });
-    test('item in disabled column should not be interactive', async ({ page }) => {
-      const secondItem = page.locator('#column-disabled .picker-item:not(.picker-item-empty)').nth(1);
-      await expect(secondItem).toBeDisabled();
-    });
-  });
-});

package/dist/collection/components/radio/radio.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Host, h } from "@stencil/core";
-import { createLegacyFormController, isOptionSelected } from "../../utils/forms/index";
+import { createLegacyFormController } from "../../utils/forms/index";
 import { addEventListener, getAriaLabel, removeEventListener } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -23,8 +23,7 @@ export class Radio {
     this.hasLoggedDeprecationWarning = false;
     this.updateState = () => {
       if (this.radioGroup) {
-        const { compareWith, value: radioGroupValue } = this.radioGroup;
-        this.checked = isOptionSelected(radioGroupValue, this.value, compareWith);
+        this.checked = this.radioGroup.value === this.value;
       }
     };
     this.onClick = () => {
@@ -121,8 +120,6 @@ export class Radio {
   emitStyle() {
     const style = {
       'interactive-disabled': this.disabled,
-      // TODO(FW-3125): remove this
-      legacy: !!this.legacy,
     };
     if (this.legacyFormController.hasLegacyControl()) {
       style['radio-checked'] = this.checked;

package/dist/collection/components/radio-group/radio-group.js

@@ -47,7 +47,6 @@ export class RadioGroup {
       }
     };
     this.allowEmptySelection = false;
-    this.compareWith = undefined;
     this.name = this.inputId;
     this.value = undefined;
   }
@@ -168,29 +167,6 @@ export class RadioGroup {
         "reflect": false,
         "defaultValue": "false"
       },
-      "compareWith": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | RadioGroupCompareFn | null",
-          "resolved": "((currentValue: any, compareValue: any) => boolean) | null | string | undefined",
-          "references": {
-            "RadioGroupCompareFn": {
-              "location": "import",
-              "path": "./radio-group-interface",
-              "id": "src/components/radio-group/radio-group-interface.ts::RadioGroupCompareFn"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "This property allows developers to specify a custom function or property\nname for comparing objects when determining the selected option in the\nion-radio-group. When not specified, the default behavior will use strict\nequality (===) for comparison."
-        },
-        "attribute": "compare-with",
-        "reflect": false
-      },
       "name": {
         "type": "string",
         "mutable": false,

package/dist/collection/components/range/range.js

@@ -226,8 +226,6 @@ export class Range {
       this.ionStyle.emit({
         interactive: true,
         'interactive-disabled': this.disabled,
-        // TODO(FW-2997): remove this
-        legacy: !!this.legacy,
       });
     }
   }