feat(textarea): component can be used outside of ion-item (#26674)

angular/src/directives/proxies.ts

@@ -2114,14 +2114,14 @@ the user clears the textarea by performing a keydown event.
 
 @ProxyCmp({
   defineCustomElementFn: undefined,
-  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'spellcheck', 'useBase', 'value', 'wrap'],
+  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'useBase', 'value', 'wrap'],
   methods: ['setFocus', 'getInputElement']
 })
 @Component({
   selector: 'ion-textarea',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
-  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'debounce', 'disabled', 'enterkeyhint', 'inputmode', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'spellcheck', 'useBase', 'value', 'wrap']
+  inputs: ['autoGrow', 'autocapitalize', 'autofocus', 'clearOnEdit', 'color', 'cols', 'counter', 'counterFormatter', 'debounce', 'disabled', 'enterkeyhint', 'errorText', 'fill', 'helperText', 'inputmode', 'label', 'labelPlacement', 'maxlength', 'minlength', 'mode', 'name', 'placeholder', 'readonly', 'required', 'rows', 'shape', 'spellcheck', 'useBase', 'value', 'wrap']
 })
 export class IonTextarea {
   protected el: HTMLElement;

core/api.txt

@@ -1413,10 +1413,17 @@ ion-textarea,prop,autofocus,boolean,false,false,false
 ion-textarea,prop,clearOnEdit,boolean,false,false,false
 ion-textarea,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-textarea,prop,cols,number | undefined,undefined,false,false
+ion-textarea,prop,counter,boolean,false,false,false
+ion-textarea,prop,counterFormatter,((inputLength: number, maxLength: number) => string) | undefined,undefined,false,false
 ion-textarea,prop,debounce,number | undefined,undefined,false,false
 ion-textarea,prop,disabled,boolean,false,false,false
 ion-textarea,prop,enterkeyhint,"done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined,undefined,false,false
+ion-textarea,prop,errorText,string | undefined,undefined,false,false
+ion-textarea,prop,fill,"outline" | "solid" | undefined,undefined,false,false
+ion-textarea,prop,helperText,string | undefined,undefined,false,false
 ion-textarea,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
+ion-textarea,prop,label,string | undefined,undefined,false,false
+ion-textarea,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
 ion-textarea,prop,maxlength,number | undefined,undefined,false,false
 ion-textarea,prop,minlength,number | undefined,undefined,false,false
 ion-textarea,prop,mode,"ios" | "md",undefined,false,false
@@ -1425,6 +1432,7 @@ ion-textarea,prop,placeholder,string | undefined,undefined,false,false
 ion-textarea,prop,readonly,boolean,false,false,false
 ion-textarea,prop,required,boolean,false,false,false
 ion-textarea,prop,rows,number | undefined,undefined,false,false
+ion-textarea,prop,shape,"round" | undefined,undefined,false,false
 ion-textarea,prop,spellcheck,boolean,false,false,false
 ion-textarea,prop,useBase,true | false,undefined,false,false
 ion-textarea,prop,value,null | string | undefined,'',false,false
@@ -1436,8 +1444,14 @@ ion-textarea,event,ionChange,TextareaChangeEventDetail,true
 ion-textarea,event,ionFocus,FocusEvent,true
 ion-textarea,event,ionInput,TextareaInputEventDetail,true
 ion-textarea,css-prop,--background
+ion-textarea,css-prop,--border-color
 ion-textarea,css-prop,--border-radius
+ion-textarea,css-prop,--border-style
+ion-textarea,css-prop,--border-width
 ion-textarea,css-prop,--color
+ion-textarea,css-prop,--highlight-color-focused
+ion-textarea,css-prop,--highlight-color-invalid
+ion-textarea,css-prop,--highlight-color-valid
 ion-textarea,css-prop,--padding-bottom
 ion-textarea,css-prop,--padding-end
 ion-textarea,css-prop,--padding-start

core/src/components.d.ts

@@ -3143,6 +3143,14 @@ export namespace Components {
           * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
          */
         "cols"?: number;
+        /**
+          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+         */
+        "counter": boolean;
+        /**
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+         */
+        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
@@ -3155,14 +3163,34 @@ export namespace Components {
           * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
          */
         "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * Text that is placed under the textarea and displayed when an error is detected.
+         */
+        "errorText"?: string;
+        /**
+          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+         */
+        "fill"?: 'outline' | 'solid';
         /**
           * Returns the native `<textarea>` element used under the hood.
          */
         "getInputElement": () => Promise<HTMLTextAreaElement>;
+        /**
+          * Text that is placed under the textarea and displayed when no error is detected.
+         */
+        "helperText"?: string;
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * The visible label associated with the textarea.
+         */
+        "label"?: string;
+        /**
+          * Where to place the label relative to the textarea. `'start'`: The label will appear to the left of the textarea in LTR and to the right in RTL. `'end'`: The label will appear to the right of the textarea in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `'stacked'`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         */
+        "labelPlacement": 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
           * This attribute specifies the maximum number of characters that the user can enter.
          */
@@ -3199,6 +3227,10 @@ export namespace Components {
           * Sets focus on the native `textarea` in `ion-textarea`. Use this method instead of the global `textarea.focus()`.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * The shape of the textarea. If "round" it will have an increased border radius.
+         */
+        "shape"?: 'round';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */
@@ -7481,6 +7513,14 @@ declare namespace LocalJSX {
           * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer.
          */
         "cols"?: number;
+        /**
+          * If `true`, a character counter will display the ratio of characters used and the total character limit. Developers must also set the `maxlength` property for the counter to be calculated correctly.
+         */
+        "counter"?: boolean;
+        /**
+          * A callback used to format the counter text. By default the counter text is set to "itemLength / maxLength".
+         */
+        "counterFormatter"?: (inputLength: number, maxLength: number) => string;
         /**
           * Set the amount of time, in milliseconds, to wait to trigger the `ionInput` event after each keystroke.
          */
@@ -7493,10 +7533,30 @@ declare namespace LocalJSX {
           * A hint to the browser for which enter key to display. Possible values: `"enter"`, `"done"`, `"go"`, `"next"`, `"previous"`, `"search"`, and `"send"`.
          */
         "enterkeyhint"?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
+        /**
+          * Text that is placed under the textarea and displayed when an error is detected.
+         */
+        "errorText"?: string;
+        /**
+          * The fill for the item. If `'solid'` the item will have a background. If `'outline'` the item will be transparent with a border. Only available in `md` mode.
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * Text that is placed under the textarea and displayed when no error is detected.
+         */
+        "helperText"?: string;
         /**
           * A hint to the browser for which keyboard to display. Possible values: `"none"`, `"text"`, `"tel"`, `"url"`, `"email"`, `"numeric"`, `"decimal"`, and `"search"`.
          */
         "inputmode"?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+        /**
+          * The visible label associated with the textarea.
+         */
+        "label"?: string;
+        /**
+          * Where to place the label relative to the textarea. `'start'`: The label will appear to the left of the textarea in LTR and to the right in RTL. `'end'`: The label will appear to the right of the textarea in LTR and to the left in RTL. `'floating'`: The label will appear smaller and above the textarea when the textarea is focused or it has a value. Otherwise it will appear on top of the textarea. `'stacked'`: The label will appear smaller and above the textarea regardless even when the textarea is blurred or has no value. `'fixed'`: The label has the same behavior as `'start'` except it also has a fixed width. Long text will be truncated with ellipses ("...").
+         */
+        "labelPlacement"?: 'start' | 'end' | 'floating' | 'stacked' | 'fixed';
         /**
           * This attribute specifies the maximum number of characters that the user can enter.
          */
@@ -7549,6 +7609,10 @@ declare namespace LocalJSX {
           * The number of visible text lines for the control.
          */
         "rows"?: number;
+        /**
+          * The shape of the textarea. If "round" it will have an increased border radius.
+         */
+        "shape"?: 'round';
         /**
           * If `true`, the element will have its spelling and grammar checked.
          */

core/src/components/select/test/async/select.e2e.ts

@@ -1,7 +1,8 @@
 import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
-test.describe('select: async', () => {
+// TODO: This test is extremely flaky
+test.skip('select: async', () => {
   test('should correctly set the value after a delay', async ({ page, skip }) => {
     skip.rtl('This is checking internal logic. RTL tests are not needed');
 

core/src/components/select/test/legacy/async/select.e2e.ts

@@ -1,7 +1,7 @@
 import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
-test.describe('select: async', () => {
+test.describe.skip('select: async', () => {
   test('should correctly set the value after a delay', async ({ page, skip }) => {
     skip.rtl('This is checking internal logic. RTL tests are not needed');
 

core/src/components/textarea/test/a11y/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Textarea - a11y</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
+    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
+    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
+    <script src="../../../../../scripts/testing/scripts.js"></script>
+    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
+    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+  </head>
+
+  <body>
+    <main>
+      <h1>Textarea - a11y</h1>
+
+      <ion-textarea label="my label"></ion-textarea><br />
+      <ion-textarea aria-label="my aria label"></ion-textarea><br />
+      <ion-textarea label="Email" label-placement="stacked" value="hi@ionic.io"></ion-textarea>
+      <ion-textarea label="Email" label-placement="floating"></ion-textarea>
+      <ion-textarea label="Email" label-placement="floating" fill="outline" value="hi@ionic.io"></ion-textarea> <br />
+      <ion-textarea label="Email" label-placement="floating" fill="solid" value="hi@ionic.io"></ion-textarea>
+    </main>
+  </body>
+</html>

core/src/components/textarea/test/a11y/textarea.e2e.ts

@@ -1,30 +1,16 @@
+import AxeBuilder from '@axe-core/playwright';
 import { expect } from '@playwright/test';
 import { test } from '@utils/test/playwright';
 
 test.describe('textarea: a11y', () => {
-  test('does not set a default aria-labelledby when there is not a neighboring ion-label', async ({ page }) => {
-    await page.setContent(`<ion-textarea></ion-textarea>`);
-
-    await page.setIonViewport();
-
-    const textarea = page.locator('ion-textarea textarea');
-    const ariaLabelledBy = await textarea.getAttribute('aria-labelledby');
-
-    expect(ariaLabelledBy).toBe(null);
+  test.beforeEach(async ({ skip }) => {
+    skip.rtl();
   });
 
-  test('set a default aria-labelledby when a neighboring ion-label exist', async ({ page }) => {
-    await page.setContent(`
-      <ion-item>
-        <ion-label>A11y Test</ion-label>
-        <ion-textarea></ion-textarea>
-      </ion-item>
-    `);
-
-    const label = page.locator('ion-label');
-    const textarea = page.locator('ion-textarea textarea');
-    const ariaLabelledBy = await textarea.getAttribute('aria-labelledby');
+  test('should not have accessibility violations', async ({ page }) => {
+    await page.goto(`/src/components/textarea/test/a11y`);
 
-    expect(ariaLabelledBy).toBe(await label.getAttribute('id'));
+    const results = await new AxeBuilder({ page }).analyze();
+    expect(results.violations).toEqual([]);
   });
 });

core/src/components/textarea/test/autogrow/index.html

@@ -12,6 +12,12 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      ion-list ion-textarea {
+        margin: 20px 0 0 0;
+      }
+    </style>
   </head>
 
   <body>
@@ -24,20 +30,21 @@
 
       <ion-content id="content">
         <ion-list>
-          <ion-item>
-            <ion-label color="primary">Autogrow</ion-label>
-            <ion-textarea auto-grow="true"></ion-textarea>
-          </ion-item>
+          <ion-textarea auto-grow="true" label="Autogrow"></ion-textarea>
 
-          <ion-item fill="outline">
-            <ion-label color="primary" position="stacked">Autogrow w/ stacked label</ion-label>
-            <ion-textarea auto-grow="true" value=""></ion-textarea>
-          </ion-item>
+          <ion-textarea
+            fill="outline"
+            label-placement="stacked"
+            auto-grow="true"
+            label="Autogrow w/ stacked label"
+          ></ion-textarea>
 
-          <ion-item fill="outline">
-            <ion-label color="primary" position="floating">Autogrow w/ floating label</ion-label>
-            <ion-textarea auto-grow="true" value=""></ion-textarea>
-          </ion-item>
+          <ion-textarea
+            fill="outline"
+            label-placement="floating"
+            auto-grow="true"
+            label="Autogrow w/ floating label"
+          ></ion-textarea>
         </ion-list>
       </ion-content>
     </ion-app>

core/src/components/textarea/test/autogrow/textarea.e2e.ts

@@ -11,20 +11,30 @@ test.describe('textarea: autogrow', () => {
   });
 
   test('should grow when typing', async ({ page }) => {
-    await page.setContent(`
-      <ion-textarea auto-grow="true"></ion-textarea>
-    `);
+    await page.setContent(
+      `
+      <ion-app>
+        <ion-content>
+          <ion-list>
+            <ion-textarea auto-grow="true"></ion-textarea>
+          </ion-list>
+        </ion-content>
+      </ion-app>`
+    );
 
-    const ionTextarea = page.locator('ion-textarea');
-    const nativeTextarea = ionTextarea.locator('textarea');
+    const textarea = await page.waitForSelector('ion-textarea');
 
-    await nativeTextarea.type('Now, this is a story all about how');
+    await textarea.click();
 
-    expect(await ionTextarea.screenshot({})).toMatchSnapshot(
-      `textarea-autogrow-initial-${page.getSnapshotSettings()}.png`
-    );
+    await page.waitForChanges();
+
+    await textarea.type('Now, this is a story all about how');
+
+    await page.setIonViewport();
+
+    expect(await textarea.screenshot()).toMatchSnapshot(`textarea-autogrow-initial-${page.getSnapshotSettings()}.png`);
 
-    await nativeTextarea.type(
+    await textarea.type(
       [
         `\nMy life got flipped-turned upside down`,
         `And I'd like to take a minute`,
@@ -33,7 +43,7 @@ test.describe('textarea: autogrow', () => {
       ].join('\n')
     );
 
-    expect(await ionTextarea.screenshot()).toMatchSnapshot(`textarea-autogrow-after-${page.getSnapshotSettings()}.png`);
+    expect(await textarea.screenshot()).toMatchSnapshot(`textarea-autogrow-after-${page.getSnapshotSettings()}.png`);
   });
 
   test('should break long lines without white space', async ({ page }) => {
@@ -43,13 +53,17 @@ test.describe('textarea: autogrow', () => {
     });
 
     await page.setContent(
-      `<ion-textarea
-        auto-grow="true"
-        value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
-      </ion-textarea>`
+      `<ion-app>
+        <ion-content>
+          <ion-textarea
+            auto-grow="true"
+            value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
+          </ion-textarea>
+        </ion-content>
+      </ion-app>`
     );
 
-    const textarea = page.locator('ion-textarea');
+    const textarea = await page.locator('ion-textarea');
 
     expect(await textarea.screenshot()).toMatchSnapshot(
       `textarea-autogrow-word-break-${page.getSnapshotSettings()}.png`