@ionic/core 7.7.2-dev.11707932366.16baf005 → 7.7.2-dev.11707941206.120570b8

package/dist/collection/components/textarea/test/legacy/autogrow/textarea.e2e.js

@@ -0,0 +1,58 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+/**
+ * This behavior does not vary across directions
+ */
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+    test.describe(title('textarea: autogrow'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/textarea/test/legacy/autogrow`, config);
+            await page.setIonViewport();
+            await expect(page).toHaveScreenshot(screenshot(`textarea-autogrow-diff`));
+        });
+        test('should grow when typing', async ({ page }) => {
+            await page.setContent(`
+        <ion-app>
+          <ion-content>
+            <ion-list>
+              <ion-item>
+                <ion-textarea auto-grow="true" legacy="true"></ion-textarea>
+              </ion-item>
+            </ion-list>
+          </ion-content>
+        </ion-app>`, config);
+            const textarea = page.locator('ion-textarea');
+            await textarea.click();
+            await page.waitForChanges();
+            await textarea.type('Now, this is a story all about how');
+            await page.setIonViewport();
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-autogrow-initial`));
+            await textarea.type([
+                `\nMy life got flipped-turned upside down`,
+                `And I'd like to take a minute`,
+                `Just sit right there`,
+                `I'll tell you how I became the prince of a town called Bel-Air`,
+            ].join('\n'));
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-autogrow-after`));
+        });
+        test('should break long lines without white space', async ({ page }) => {
+            test.info().annotations.push({
+                type: 'issue',
+                description: 'https://github.com/ionic-team/ionic-framework/issues/25893',
+            });
+            await page.setContent(`<ion-app>
+          <ion-content>
+            <ion-textarea
+              legacy="true"
+              auto-grow="true"
+              value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"></ion-textarea>
+          </ion-content>
+        </ion-app>`, config);
+            const textarea = page.locator('ion-textarea');
+            await expect(textarea).toHaveScreenshot(screenshot(`textarea-autogrow-word-break`));
+        });
+    });
+});

package/dist/collection/components/textarea/test/legacy/basic/textarea.e2e.js

@@ -0,0 +1,43 @@
+/*!
+ * (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('textarea: basic'), () => {
+        test('should not have visual regressions', async ({ page }) => {
+            await page.goto(`/src/components/textarea/test/legacy/basic`, config);
+            /**
+             * The auto grow implementation uses a requestAnimationFrame to append styles to the textarea
+             * on load. We need to wait for changes otherwise the screenshot can be taken before the
+             * styles are applied.
+             */
+            await page.waitForChanges();
+            await page.setIonViewport();
+            await expect(page).toHaveScreenshot(screenshot(`textarea-diff`));
+        });
+        test.describe(title('with floating labels'), () => {
+            /**
+             * Verifies the display of a floating label above an `ion-textarea`.
+             * Captures a screenshot of the initial state (without a value) and verifies
+             * that the label translates correctly after the value is set.
+             */
+            test('should not have visual regressions', async ({ page }) => {
+                await page.setContent(`
+        <ion-item>
+          <ion-label position="floating">Floating Label</ion-label>
+          <ion-textarea></ion-textarea>
+        </ion-item>`, config);
+                const item = page.locator('ion-item');
+                const textarea = page.locator('ion-textarea');
+                await expect(item).toHaveScreenshot(screenshot(`textarea-floating-label-initial`));
+                await textarea.evaluate((el) => {
+                    el.value = 'Updated value';
+                });
+                await page.waitForChanges();
+                await page.setIonViewport();
+                await expect(item).toHaveScreenshot(screenshot(`textarea-floating-label-diff`));
+            });
+        });
+    });
+});

package/dist/collection/components/textarea/test/legacy/clear-on-edit/textarea.e2e.js

@@ -0,0 +1,25 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from "@playwright/test";
+import { configs, test } from "../../../../../utils/test/playwright/index";
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) => {
+    test.describe(title('textarea: clearOnEdit'), () => {
+        test('should clear the textarea on first keystroke of textarea being focused', async ({ page }) => {
+            await page.setContent(`<ion-textarea value="some value" clear-on-edit="true"></ion-textarea>`, config);
+            const textarea = page.locator('ion-textarea');
+            await textarea.click();
+            await textarea.type('h');
+            expect(await textarea.evaluate((el) => el.value)).toBe('h');
+            await textarea.type('ello world');
+            expect(await textarea.evaluate((el) => el.value)).toBe('hello world');
+        });
+        test('should not clear the textarea if it does not have an initial value when typing', async ({ page }) => {
+            await page.setContent(`<ion-textarea value="" clear-on-edit="true"></ion-textarea>`, config);
+            const textarea = page.locator('ion-textarea');
+            await textarea.click();
+            await textarea.type('hello world');
+            expect(await textarea.evaluate((el) => el.value)).toBe('hello world');
+        });
+    });
+});

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

@@ -84,16 +84,16 @@
   --placeholder-color: initial;
   --placeholder-font-style: initial;
   --placeholder-font-weight: initial;
-  --placeholder-opacity: var(--ion-placeholder-opacity, 0.6);
+  --placeholder-opacity: 0.6;
   --padding-top: 0;
   --padding-end: 0;
-  --padding-bottom: 8px;
+  --padding-bottom: 0;
   --padding-start: 0;
   --border-radius: 0;
   --border-style: solid;
-  --highlight-color-focused: var(--ion-color-primary, #0054e9);
-  --highlight-color-valid: var(--ion-color-success, #2dd55b);
-  --highlight-color-invalid: var(--ion-color-danger, #c5000f);
+  --highlight-color-focused: var(--ion-color-primary, #3880ff);
+  --highlight-color-valid: var(--ion-color-success, #2dd36f);
+  --highlight-color-invalid: var(--ion-color-danger, #eb445a);
   /**
    * This is a private API that is used to switch
    * out the highlight color based on the state
@@ -104,13 +104,16 @@
   display: block;
   position: relative;
   width: 100%;
-  min-height: 44px;
   color: var(--color);
   font-family: var(--ion-font-family, inherit);
   z-index: 2;
   box-sizing: border-box;
 }
 
+:host(:not(.legacy-textarea)) {
+  min-height: 44px;
+}
+
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -141,6 +144,20 @@
   width: fit-content;
 }
 
+:host(.legacy-textarea) {
+  flex: 1;
+  background: var(--background);
+  white-space: pre-wrap;
+}
+
+:host(.legacy-textarea.ion-color) {
+  color: var(--ion-color-base);
+}
+
+:host(:not(.legacy-textarea)) {
+  --padding-bottom: 8px;
+}
+
 :host(.ion-color) {
   --highlight-color-focused: var(--ion-color-base);
   background: initial;
@@ -204,6 +221,21 @@
   opacity: var(--placeholder-opacity);
 }
 
+:host(.legacy-textarea) .native-textarea {
+  white-space: inherit;
+}
+
+:host(.legacy-textarea) .native-textarea,
+:host(.legacy-textarea) .textarea-legacy-wrapper::after {
+  -webkit-padding-start: var(--padding-start);
+  padding-inline-start: var(--padding-start);
+  -webkit-padding-end: var(--padding-end);
+  padding-inline-end: var(--padding-end);
+  padding-top: var(--padding-top);
+  padding-bottom: var(--padding-bottom);
+  border-radius: var(--border-radius);
+}
+
 .native-textarea {
   color: inherit;
   font-family: inherit;
@@ -220,14 +252,55 @@
   word-break: break-word;
 }
 
+:host(.legacy-textarea) .textarea-legacy-wrapper::after {
+  font-family: inherit;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  text-decoration: inherit;
+  text-indent: inherit;
+  text-overflow: inherit;
+  text-transform: inherit;
+  text-align: inherit;
+  white-space: inherit;
+  color: inherit;
+  grid-area: 1/1/2/2;
+  word-break: break-word;
+}
+
 .cloned-input {
   top: 0;
   bottom: 0;
   position: absolute;
   pointer-events: none;
 }
-.cloned-input {
-  inset-inline-start: 0;
+@supports (inset-inline-start: 0) {
+  .cloned-input {
+    inset-inline-start: 0;
+  }
+}
+@supports not (inset-inline-start: 0) {
+  .cloned-input {
+    left: 0;
+  }
+  :host-context([dir=rtl]) .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  [dir=rtl] .cloned-input {
+    left: unset;
+    right: unset;
+    right: 0;
+  }
+  @supports selector(:dir(rtl)) {
+    .cloned-input:dir(rtl) {
+      left: unset;
+      right: unset;
+      right: 0;
+    }
+  }
 }
 
 /**
@@ -239,6 +312,13 @@
   opacity: 1;
 }
 
+:host(.legacy-textarea[auto-grow]) .cloned-input {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
 :host([auto-grow]) .cloned-input {
   height: 100%;
 }
@@ -294,7 +374,8 @@
   padding-bottom: var(--padding-bottom);
 }
 
-.native-wrapper {
+.native-wrapper,
+.textarea-legacy-wrapper {
   display: grid;
   min-width: inherit;
   max-width: inherit;
@@ -309,7 +390,8 @@
    */
   grid-auto-rows: 100%;
 }
-.native-wrapper::after {
+.native-wrapper::after,
+.textarea-legacy-wrapper::after {
   white-space: pre-wrap;
   content: attr(data-replicated-value) " ";
   visibility: hidden;
@@ -408,7 +490,7 @@
 
 .textarea-bottom .helper-text {
   display: block;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-550, #737373);
 }
 
 :host(.ion-touched.ion-invalid) .textarea-bottom .error-text {
@@ -427,7 +509,7 @@
    */
   -webkit-margin-start: auto;
   margin-inline-start: auto;
-  color: var(--ion-color-step-550, var(--ion-text-color-step-450, #737373));
+  color: var(--ion-color-step-550, #737373);
   white-space: nowrap;
   padding-inline-start: 16px;
 }
@@ -859,7 +941,7 @@
  */
 :host {
   --border-width: 0.55px;
-  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, var(--ion-background-color-step-250, #c8c7cc))));
+  --border-color: var(--ion-item-border-color, var(--ion-border-color, var(--ion-color-step-250, #c8c7cc)));
   --padding-top: 10px;
   --padding-end: 0px;
   --padding-bottom: 8px;
@@ -867,6 +949,13 @@
   font-size: inherit;
 }
 
+:host(.legacy-textarea) {
+  --padding-top: 10px;
+  --padding-end: 8px;
+  --padding-bottom: 10px;
+  --padding-start: 0;
+}
+
 :host-context(.item-label-stacked),
 :host-context(.item-label-floating) {
   --padding-top: 8px;
@@ -874,6 +963,7 @@
   --padding-start: 0px;
 }
 
+:host(.legacy-textarea) .native-textarea[disabled],
 :host(.textarea-disabled) {
   opacity: 0.3;
 }

package/dist/collection/components/textarea/textarea.js

@@ -2,8 +2,9 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
-import { createNotchController } from "../../utils/forms/index";
-import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
+import { createLegacyFormController, createNotchController } from "../../utils/forms/index";
+import { inheritAriaAttributes, debounceEvent, findItemLabel, inheritAttributes, componentOnReady, } from "../../utils/helpers";
+import { printIonWarning } from "../../utils/logging/index";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
 import { getIonMode } from "../../global/ionic-global";
@@ -26,6 +27,8 @@ export class Textarea {
          */
         this.didTextareaClearOnEdit = false;
         this.inheritedAttributes = {};
+        // This flag ensures we log the deprecation warning at most once.
+        this.hasLoggedDeprecationWarning = false;
         // `Event` type is used instead of `InputEvent`
         // since the types from Stencil are not derived
         // from the element (e.g. textarea and input
@@ -44,10 +47,12 @@ export class Textarea {
         this.onFocus = (ev) => {
             this.hasFocus = true;
             this.focusedValue = this.value;
+            this.focusChange();
             this.ionFocus.emit(ev);
         };
         this.onBlur = (ev) => {
             this.hasFocus = false;
+            this.focusChange();
             if (this.focusedValue !== this.value) {
                 /**
                  * Emits the `ionChange` event when the textarea value
@@ -89,6 +94,7 @@ export class Textarea {
         this.helperText = undefined;
         this.label = undefined;
         this.labelPlacement = 'start';
+        this.legacy = undefined;
         this.shape = undefined;
     }
     debounceChanged() {
@@ -99,6 +105,9 @@ export class Textarea {
          */
         this.ionInput = debounce === undefined ? originalIonInput !== null && originalIonInput !== void 0 ? originalIonInput : ionInput : debounceEvent(ionInput, debounce);
     }
+    disabledChanged() {
+        this.emitStyle();
+    }
     /**
      * Update the native input element when the value changes
      */
@@ -109,11 +118,14 @@ export class Textarea {
             nativeInput.value = value;
         }
         this.runAutoGrow();
+        this.emitStyle();
     }
     connectedCallback() {
         const { el } = this;
+        this.legacyFormController = createLegacyFormController(el);
         this.slotMutationController = createSlotMutationController(el, ['label', 'start', 'end'], () => forceUpdate(this));
         this.notchController = createNotchController(el, () => this.notchSpacerEl, () => this.labelSlot);
+        this.emitStyle();
         this.debounceChanged();
         if (Build.isBrowser) {
             document.dispatchEvent(new CustomEvent('ionInputDidLoad', {
@@ -171,6 +183,21 @@ export class Textarea {
         }
         return Promise.resolve(this.nativeInput);
     }
+    emitStyle() {
+        if (this.legacyFormController.hasLegacyControl()) {
+            this.ionStyle.emit({
+                interactive: true,
+                textarea: true,
+                input: true,
+                'interactive-disabled': this.disabled,
+                'has-placeholder': this.placeholder !== undefined,
+                'has-value': this.hasValue(),
+                'has-focus': this.hasFocus,
+                // TODO(FW-2876): remove this
+                legacy: !!this.legacy,
+            });
+        }
+    }
     /**
      * Emits an `ionChange` event.
      *
@@ -244,12 +271,40 @@ export class Textarea {
             this.didTextareaClearOnEdit = true;
         }
     }
+    focusChange() {
+        this.emitStyle();
+    }
     hasValue() {
         return this.getValue() !== '';
     }
     getValue() {
         return this.value || '';
     }
+    // TODO: FW-2876 - Remove this render function
+    renderLegacyTextarea() {
+        if (!this.hasLoggedDeprecationWarning) {
+            printIonWarning(`ion-textarea now requires providing a label with either the "label" property or the "aria-label" attribute. To migrate, remove any usage of "ion-label" and pass the label text to either the "label" property or the "aria-label" attribute.
+
+Example: <ion-textarea label="Comments"></ion-textarea>
+Example with aria-label: <ion-textarea aria-label="Comments"></ion-textarea>
+
+For textareas that do not render the label immediately next to the input, developers may continue to use "ion-label" but must manually associate the label with the textarea by using "aria-labelledby".
+
+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);
+            this.hasLoggedDeprecationWarning = true;
+        }
+        const mode = getIonMode(this);
+        const value = this.getValue();
+        const labelId = this.inputId + '-lbl';
+        const label = findItemLabel(this.el);
+        if (label) {
+            label.id = labelId;
+        }
+        return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+                [mode]: true,
+                'legacy-textarea': true,
+            }) }, h("div", { class: "textarea-legacy-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ class: "native-textarea", "aria-labelledby": label ? label.id : null, ref: (el) => (this.nativeInput = el), autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, disabled: this.disabled, maxLength: this.maxlength, minLength: this.minlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value))));
+    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
@@ -333,7 +388,7 @@ export class Textarea {
         }
         return (h("div", { class: "textarea-bottom" }, this.renderHintText(), this.renderCounter()));
     }
-    render() {
+    renderTextarea() {
         const { inputId, disabled, fill, shape, labelPlacement, el, hasFocus } = this;
         const mode = getIonMode(this);
         const value = this.getValue();
@@ -359,7 +414,7 @@ export class Textarea {
          * TODO(FW-5592): Remove hasStartEndSlots condition
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || hasStartEndSlots));
-        return (h(Host, { key: '1994b7a16356fc5fcaead042588ceaafcb80a894', class: createColorClasses(this.color, {
+        return (h(Host, { class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -368,7 +423,11 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'e7b8610e92ceebe19fd1d17c80134acb5d4f52d1', class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { key: '522308f0d38c481b56ed99f43fc7c3747f9c1263', class: "textarea-wrapper-inner" }, h("div", { key: '0e65d62e91815cbb954d3a286813ed75b4dc1500', class: "start-slot-wrapper" }, h("slot", { key: 'e88f83ec1c62c7e9d97837dc9fdcc6f30be6dacc', name: "start" })), h("div", { key: '4d26c34c2468acfd962c6a4a73ad6057342aef44', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ key: 'e6135e0a61fb5eb2b4f8f7da70ee49a28567c954', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { key: '1946c844cdbeefb989b1a4033050a851b367084f', class: "end-slot-wrapper" }, h("slot", { key: 'ac34fa1edaddb8b377310a2ce88fa651a6e73d3c', name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { class: "textarea-wrapper", htmlFor: inputId }, this.renderLabelContainer(), h("div", { class: "textarea-wrapper-inner" }, h("div", { class: "start-slot-wrapper" }, h("slot", { name: "start" })), h("div", { class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", Object.assign({ class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value)), h("div", { class: "end-slot-wrapper" }, h("slot", { name: "end" }))), shouldRenderHighlight && h("div", { class: "textarea-highlight" })), this.renderBottomContent()));
+    }
+    render() {
+        const { legacyFormController } = this;
+        return legacyFormController.hasLegacyControl() ? this.renderLegacyTextarea() : this.renderTextarea();
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }
@@ -861,6 +920,23 @@ export class Textarea {
                 "reflect": false,
                 "defaultValue": "'start'"
             },
+            "legacy": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the `legacy` property to `true` to forcibly use the legacy form control markup.\nIonic will only opt components in to the modern form markup when they are\nusing either the `aria-label` attribute or the default slot that contains\nthe label text. As a result, the `legacy` property should only be used as\nan escape hatch when you want to avoid this automatic opt-in behavior.\nNote that this property will be removed in an upcoming major release\nof Ionic, and all form components will be opted-in to using the modern form markup."
+                },
+                "attribute": "legacy",
+                "reflect": false
+            },
             "shape": {
                 "type": "string",
                 "mutable": false,
@@ -1041,6 +1117,9 @@ export class Textarea {
         return [{
                 "propName": "debounce",
                 "methodName": "debounceChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "disabledChanged"
             }, {
                 "propName": "value",
                 "methodName": "valueChanged"