refactor(textarea): remove legacy property, rendering and styles

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/textarea/textarea.ios.scss

@@ -16,14 +16,6 @@
   font-size: $textarea-ios-font-size;
 }
 
-// TODO: FW-2876 - Remove this selector
-:host(.legacy-textarea) {
-  --padding-top: #{$textarea-ios-padding-top};
-  --padding-end: #{$textarea-ios-padding-end};
-  --padding-bottom: #{$textarea-ios-padding-bottom};
-  --padding-start: #{$textarea-ios-padding-start};
-}
-
 :host-context(.item-label-stacked),
 :host-context(.item-label-floating) {
   --padding-top: 8px;

core/src/components/textarea/textarea.md.scss

@@ -18,24 +18,6 @@
   font-size: $textarea-md-font-size;
 }
 
-// TODO: FW-2876 - Remove this selector
-:host(.legacy-textarea) {
-  --padding-top: #{$textarea-md-padding-top};
-  --padding-end: #{$textarea-md-padding-end};
-  --padding-bottom: #{$textarea-md-padding-bottom};
-  --padding-start: #{$textarea-md-padding-start};
-
-  @include margin(8px, 0, 0, 0);
-}
-
-// TODO: FW-2876 - Re-evaluate this selector, it may not be needed
-:host-context(.item-label-stacked),
-:host-context(.item-label-floating) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0;
-}
-
 // Textarea Max Length Counter
 // ----------------------------------------------------------------
 .textarea-bottom .counter {

core/src/components/textarea/textarea.scss

@@ -37,7 +37,7 @@
   --placeholder-opacity: #{$placeholder-opacity};
   --padding-top: 0;
   --padding-end: 0;
-  --padding-bottom: 0;
+  --padding-bottom: #{$textarea-padding-bottom};
   --padding-start: 0;
   --border-radius: 0;
   --border-style: solid;
@@ -58,6 +58,8 @@
 
   width: 100%;
 
+  min-height: 44px;
+
   color: var(--color);
 
   font-family: $font-family-base;
@@ -70,11 +72,6 @@
 // Textarea Wrapper
 // ----------------------------------------------------------------
 
-// TODO: FW-2876 - Make this style a :host style, remove :not selector
-:host(:not(.legacy-textarea)) {
-  min-height: 44px;
-}
-
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -106,25 +103,6 @@
   width: fit-content;
 }
 
-// TODO: FW-2876 - Remove this selector
-:host(.legacy-textarea) {
-  flex: 1;
-
-  background: var(--background);
-
-  white-space: pre-wrap;
-}
-
-// TODO: FW-2876 - Remove this selector
-:host(.legacy-textarea.ion-color) {
-  color: current-color(base);
-}
-
-// TODO: FW-2876 - Remove this selector, move styles to :host
-:host(:not(.legacy-textarea)) {
-  --padding-bottom: #{$textarea-padding-bottom};
-}
-
 :host(.ion-color) {
   --highlight-color-focused: #{current-color(base)};
 
@@ -200,18 +178,6 @@
   }
 }
 
-// TODO: FW-2876 - Remove this selector
-:host(.legacy-textarea) .native-textarea {
-  white-space: inherit;
-}
-
-// TODO: FW-2876 - Remove this selector
-:host(.legacy-textarea) .native-textarea,
-:host(.legacy-textarea) .textarea-legacy-wrapper::after {
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  @include border-radius(var(--border-radius));
-}
-
 .native-textarea {
   color: inherit;
 
@@ -233,15 +199,6 @@
   word-break: break-word;
 }
 
-// TODO: FW-2876 - Remove this selector
-:host(.legacy-textarea) .textarea-legacy-wrapper::after {
-  @include text-inherit();
-
-  grid-area: 1 / 1 / 2 / 2;
-
-  word-break: break-word;
-}
-
 // Input Cover: Unfocused
 // --------------------------------------------------
 // The input cover is the div that actually receives the
@@ -267,11 +224,6 @@
   opacity: 1;
 }
 
-// TODO: FW-2876 - Remove this selector
-:host(.legacy-textarea[auto-grow]) .cloned-input {
-  @include margin(0, 0, 0, 0);
-}
-
 :host([auto-grow]) .cloned-input {
   // Workaround for webkit rendering issue with scroll assist.
   // When cloning the textarea and scrolling into view,
@@ -348,9 +300,7 @@
   @include padding(var(--padding-top), 0px, var(--padding-bottom), 0px);
 }
 
-.native-wrapper,
-// TODO: FW-2876 - Remove this selector, keep .native-wrapper
-.textarea-legacy-wrapper {
+.native-wrapper {
   display: grid;
 
   min-width: inherit;