refactor(textarea): remove legacy property and support for legacy syn…

…tax (#28993)

Issue number: internal

---------

## What is the current behavior?

In Ionic Framework v7, we [simplified the textarea
syntax](https://ionic.io/blog/ionic-7-is-here#simplified-form-control-syntax)
so that it was no longer required to be placed inside of an `ion-item`.
We maintained backwards compatibility by adding a `legacy` property
which allowed it to continue to be styled properly when written in the
following way:

```html
<ion-item>
  <ion-label>Label</ion-label>
  <ion-textarea></ion-textarea>
</ion-item>
```

While this was supported in v7, console warnings were logged to notify
developers that they needed to update this syntax for the best
accessibility experience.

## What is the new behavior?

- Removes the `legacy` property and support for the legacy syntax.
Developers should follow the [migration
guide](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax)
in the textarea documentation to update their apps. The new syntax
requires a `label` or `aria-label` on `ion-textarea`:
    ```html
    <ion-item>
      <ion-textarea label="Label"></ion-textarea>
    </ion-item>
    ```
- Removes the legacy tests under `textarea/test/legacy/` and all related
screenshots
- Removes the textarea usage in `input/test/legacy/spec`,
`item/test/disabled`, `item/test/legacy/disabled` and
`item/test/legacy/fill`

## Does this introduce a breaking change?

- [x] Yes
- [ ] No

1. Developers have had console warnings when using the legacy syntax
since the v7 release. The migration guide for the new textarea syntax is
outlined in the [Textarea
documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax).
2. This change has been documented in the Breaking Changes document with
a link to the migration guide.

BREAKING CHANGE:

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

---------

Co-authored-by: ionitron <hi@ionicframework.com>

BREAKING.md

@@ -24,6 +24,7 @@ This is a comprehensive list of the breaking changes introduced in the major ver
   - [Nav](#version-8x-nav)
   - [Picker](#version-8x-picker)
   - [Progress bar](#version-8x-progress-bar)
+  - [Textarea](#version-8x-textarea)
 
 <h2 id="version-8x-browser-platform-support">Browser and Platform Support</h2>
 
@@ -162,7 +163,7 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc
 
 - `ion-picker` and `ion-picker-column` have been renamed to `ion-picker-legacy` and `ion-picker-legacy-column`, respectively. This change was made to accommodate the new inline picker component while allowing developers to continue to use the legacy picker during this migration period.
   - Only the component names have been changed. Usages such as `ion-picker` or `IonPicker` should be changed to `ion-picker-legacy` and `IonPickerLegacy`, respectively.
-  - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages. 
+  - Non-component usages such as `pickerController` or `useIonPicker` remain unchanged. The new picker displays inline with your page content and does not have equivalents for these non-component usages.
 
 <h4 id="version-8x-progress-bar">Progress bar</h4>
 
@@ -172,4 +173,8 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc
 
 - `cssClass` has been removed from the `ToastButton` interface. This was previously used to apply a custom class to the toast buttons. Developers can use the "button" shadow part to style the buttons.
 
-For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming).
+For more information on styling toast buttons, refer to the [Toast Theming documentation](https://ionicframework.com/docs/api/toast#theming).
+
+<h4 id="version-8x-textarea">Textarea</h4>
+
+- The `legacy` property and support for the legacy syntax, which involved placing an `ion-textarea` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy textarea syntax, refer to the [Textarea documentation](https://ionicframework.com/docs/api/textarea#migrating-from-legacy-textarea-syntax).

core/api.txt

@@ -1406,7 +1406,6 @@ 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,legacy,boolean | undefined,undefined,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

core/src/components.d.ts

@@ -3034,10 +3034,6 @@ export namespace Components {
           * 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';
-        /**
-          * 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 default slot that contains the label text. 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;
         /**
           * This attribute specifies the maximum number of characters that the user can enter.
          */
@@ -7821,10 +7817,6 @@ declare namespace LocalJSX {
           * 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';
-        /**
-          * 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 default slot that contains the label text. 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;
         /**
           * This attribute specifies the maximum number of characters that the user can enter.
          */

core/src/components/input/test/legacy/spec/index.html

@@ -160,26 +160,6 @@ <h2>Stacked Div</h2>
           <ion-label position="stacked">Align items: center</ion-label>
           <div class="ion-align-self-end">A div: align self right</div>
         </ion-item>
-        <ion-item>
-          <ion-label position="floating">Floating: textarea</ion-label>
-          <ion-textarea></ion-textarea>
-        </ion-item>
-        <ion-item>
-          <ion-label position="floating">Floating: textarea value</ion-label>
-          <ion-textarea value="value"></ion-textarea>
-        </ion-item>
-        <ion-item>
-          <ion-label position="stacked">Stacked: textarea</ion-label>
-          <ion-textarea></ion-textarea>
-        </ion-item>
-        <ion-item class="item-has-focus">
-          <ion-label position="stacked">Stacked: textarea focused value</ion-label>
-          <ion-textarea value="value"></ion-textarea>
-        </ion-item>
-        <ion-item class="custom item-has-focus">
-          <ion-label position="stacked">Stacked: textarea focus</ion-label>
-          <ion-textarea></ion-textarea>
-        </ion-item>
       </ion-content>
 
       <style>

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

@@ -55,10 +55,6 @@
             <ion-input label="Disabled Input" placeholder="Disabled" disabled></ion-input>
           </ion-item>
 
-          <ion-item>
-            <ion-textarea label="Disabled Textarea" placeholder="Disabled" disabled></ion-textarea>
-          </ion-item>
-
           <ion-item>
             <ion-toggle disabled checked> Disabled Toggle </ion-toggle>
           </ion-item>

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

@@ -57,11 +57,6 @@
             <ion-input placeholder="Disabled" disabled legacy="true"></ion-input>
           </ion-item>
 
-          <ion-item>
-            <ion-label>Disabled Textarea</ion-label>
-            <ion-textarea placeholder="Disabled" disabled legacy="true"></ion-textarea>
-          </ion-item>
-
           <ion-item>
             <ion-label>Disabled Toggle</ion-label>
             <ion-toggle disabled checked slot="end" legacy="true"></ion-toggle>

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

@@ -502,111 +502,6 @@
               </ion-item>
             </ion-col>
           </ion-row>
-          <ion-row>
-            <ion-col>
-              <ion-item disabled fill="solid" counter="true">
-                <ion-label position="floating">Standard</ion-label>
-                <ion-textarea maxlength="100"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-            <ion-col>
-              <ion-item disabled fill="outline" counter="true">
-                <ion-label position="floating">Standard</ion-label>
-                <ion-textarea value="Has Initial Value" maxlength="100"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-            <ion-col>
-              <ion-item disabled fill="outline" shape="round" counter="true">
-                <ion-label position="floating">Standard</ion-label>
-                <ion-textarea maxlength="100"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-
-        <p>Textarea</p>
-        <ion-grid>
-          <ion-row>
-            <ion-col>
-              <ion-item fill="solid">
-                <ion-textarea legacy="true"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-            <ion-col>
-              <ion-item fill="outline">
-                <ion-textarea value="Has Initial Value" legacy="true"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-            <ion-col>
-              <ion-item fill="outline" shape="round">
-                <ion-textarea legacy="true"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col>
-              <ion-item fill="solid" counter="true">
-                <ion-label position="floating">Standard</ion-label>
-                <ion-textarea maxlength="100"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-            <ion-col>
-              <ion-item fill="outline" counter="true">
-                <ion-label position="floating">Standard</ion-label>
-                <ion-textarea maxlength="100" value="Has Initial Value"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-            <ion-col>
-              <ion-item fill="outline" shape="round" counter="true">
-                <ion-label position="floating">Standard</ion-label>
-                <ion-textarea maxlength="100"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-          </ion-row>
-          <ion-row>
-            <ion-col>
-              <ion-item class="ion-invalid" fill="solid" counter="true">
-                <ion-label position="floating">Standard</ion-label>
-                <ion-textarea maxlength="100"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-            <ion-col>
-              <ion-item class="ion-invalid" fill="outline" counter="true">
-                <ion-label position="floating">Standard</ion-label>
-                <ion-textarea maxlength="100" value="Has Initial Value"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-            <ion-col>
-              <ion-item class="ion-invalid" fill="outline" shape="round" counter="true">
-                <ion-label position="floating">Standard</ion-label>
-                <ion-textarea maxlength="100"></ion-textarea>
-                <ion-note slot="helper">Helper Text</ion-note>
-                <ion-note slot="error">Error Text</ion-note>
-              </ion-item>
-            </ion-col>
-          </ion-row>
         </ion-grid>
 
         <p>Custom Styles</p>