refactor(input): remove legacy property and support for legacy syntax (#29017)

Issue number: internal

---------

## What is the current behavior?

In Ionic Framework v7, we [simplified the input
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-input></ion-input>
</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/input#migrating-from-legacy-input-syntax)
in the input documentation to update their apps. The new syntax requires
a `label` or `aria-label` on `ion-input`:
    ```html
    <ion-item>
      <ion-input label="Label"></ion-input>
    </ion-item>
    ```
- Removes the legacy tests under under `input/test/legacy/` and all
related screenshots
- Removes the input usage from `item/test/a11y`, `item/test/counter`,
`item/test/disabled`, `item/test/highlight`,
`item/test/legacy/alignment`, `item/test/legacy/disabled`,
`item/test/legacy/fill`, and `item/test/legacy/form` and all related
screenshots if the test was removed

## 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 input syntax is
outlined in the [Input
documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-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-input` inside of an `ion-item` with an `ion-label`, have
been removed from input. For more information on migrating from the
legacy input syntax, refer to the [Input
documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax).

---------

Co-authored-by: ionitron <[email protected]>

Author: brandyscarney

BREAKING.md

@@ -154,6 +154,7 @@ For more information on the dynamic font, refer to the [Dynamic Font Scaling doc
 
 - `size` has been removed from the `ion-input` component. Developers should use CSS to specify the visible width of the input.
 - `accept` has been removed from the `ion-input` component. This was previously used in conjunction with the `type="file"`. However, the `file` value for `type` is not a valid value in Ionic Framework.
+- The `legacy` property and support for the legacy syntax, which involved placing an `ion-input` inside of an `ion-item` with an `ion-label`, have been removed. For more information on migrating from the legacy input syntax, refer to the [Input documentation](https://ionicframework.com/docs/api/input#migrating-from-legacy-input-syntax).
 
 <h4 id="version-8x-nav">Nav</h4>
 

core/api.txt

@@ -566,7 +566,6 @@ ion-input,prop,helperText,string | undefined,undefined,false,false
 ion-input,prop,inputmode,"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined,undefined,false,false
 ion-input,prop,label,string | undefined,undefined,false,false
 ion-input,prop,labelPlacement,"end" | "fixed" | "floating" | "stacked" | "start",'start',false,false
-ion-input,prop,legacy,boolean | undefined,undefined,false,false
 ion-input,prop,max,number | string | undefined,undefined,false,false
 ion-input,prop,maxlength,number | undefined,undefined,false,false
 ion-input,prop,min,number | string | undefined,undefined,false,false

core/src/components.d.ts

@@ -1220,10 +1220,6 @@ export namespace Components {
           * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input 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 `label` property. 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;
         /**
           * The maximum value, which must not be less than its minimum (min attribute) value.
          */
@@ -5951,10 +5947,6 @@ declare namespace LocalJSX {
           * Where to place the label relative to the input. `"start"`: The label will appear to the left of the input in LTR and to the right in RTL. `"end"`: The label will appear to the right of the input in LTR and to the left in RTL. `"floating"`: The label will appear smaller and above the input when the input is focused or it has a value. Otherwise it will appear on top of the input. `"stacked"`: The label will appear smaller and above the input regardless even when the input 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 `label` property. 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;
         /**
           * The maximum value, which must not be less than its minimum (min attribute) value.
          */

core/src/components/input/input.ios.scss

@@ -8,21 +8,6 @@
   font-size: $input-ios-font-size;
 }
 
-// TODO FW-2764 Remove this
-:host(.legacy-input) {
-  --padding-top: #{$input-ios-padding-top};
-  --padding-end: #{$input-ios-padding-end};
-  --padding-bottom: #{$input-ios-padding-bottom};
-  --padding-start: #{$input-ios-padding-start};
-}
-
-:host-context(.item-label-stacked),
-:host-context(.item-label-floating) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0px;
-}
-
 .input-clear-icon ion-icon {
   width: 18px;
   height: 18px;
@@ -33,7 +18,6 @@
 // The input, label, helper text, char counter and placeholder
 // should use the same opacity and match the other form controls
 
-:host(.legacy-input) .native-input[disabled],
 :host(.input-disabled) {
   opacity: #{$input-ios-disabled-opacity};
 }

core/src/components/input/input.ios.vars.scss

@@ -7,17 +7,5 @@
 /// @prop - Font size of the input
 $input-ios-font-size:                     inherit !default;
 
-/// @prop - Margin top of the input
-$input-ios-padding-top:                    $item-ios-padding-top !default;
-
-/// @prop - Margin end of the input
-$input-ios-padding-end:                    ($item-ios-padding-end * 0.5) !default;
-
-/// @prop - Margin bottom of the input
-$input-ios-padding-bottom:                 $item-ios-padding-bottom !default;
-
-/// @prop - Margin start of the input
-$input-ios-padding-start:                  0 !default;
-
 /// @prop - The opacity of the input text, label, helper text, char counter and placeholder of a disabled input
 $input-ios-disabled-opacity: $form-control-ios-disabled-opacity !default;

core/src/components/input/input.md.scss

@@ -14,21 +14,6 @@
   font-size: $input-md-font-size;
 }
 
-// TODO FW-2764 Remove this
-:host(.legacy-input) {
-  --padding-top: #{$input-md-padding-top};
-  --padding-end: #{$input-md-padding-end};
-  --padding-bottom: #{$input-md-padding-bottom};
-  --padding-start: #{$input-md-padding-start};
-}
-
-:host-context(.item-label-stacked),
-:host-context(.item-label-floating) {
-  --padding-top: 8px;
-  --padding-bottom: 8px;
-  --padding-start: 0;
-}
-
 .input-clear-icon ion-icon {
   width: 22px;
   height: 22px;
@@ -39,7 +24,6 @@
 // The input, label, helper text, char counter and placeholder
 // should use the same opacity and match the other form controls
 
-:host(.legacy-input) .native-input[disabled],
 :host(.input-disabled) {
   opacity: #{$input-md-disabled-opacity};
 }

core/src/components/input/input.md.vars.scss

@@ -7,18 +7,6 @@
 /// @prop - Font size of the input
 $input-md-font-size: inherit !default;
 
-/// @prop - Margin top of the input
-$input-md-padding-top: 10px !default;
-
-/// @prop - Margin end of the input
-$input-md-padding-end: 0 !default;
-
-/// @prop - Margin bottom of the input
-$input-md-padding-bottom: 10px !default;
-
-/// @prop - Margin start of the input
-$input-md-padding-start: ($item-md-padding-start * 0.5) !default;
-
 /// @prop - The amount of whitespace to display on either side of the floating label
 $input-md-floating-label-padding: 4px !default;
 

core/src/components/input/input.scss

@@ -57,6 +57,8 @@
 
   width: 100%;
 
+  min-height: 44px;
+
   /* stylelint-disable-next-line all */
   padding: 0 !important;
 
@@ -67,47 +69,18 @@
   z-index: $z-index-item-input;
 }
 
-// TODO FW-2764 Remove this
-:host(.legacy-input) {
-  display: flex;
-
-  flex: 1;
-  align-items: center;
-
-  background: var(--background);
-}
-
-// TODO FW-2764 Remove this
-:host(.legacy-input) .native-input {
-  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
-  @include border-radius(var(--border-radius));
-}
-
-:host-context(ion-item:not(.item-label):not(.item-has-modern-input)) {
-  --padding-start: 0;
-}
-
 :host-context(ion-item)[slot="start"],
 :host-context(ion-item)[slot="end"] {
   width: auto;
 }
 
-// TODO FW-2764 Remove this
-:host(.legacy-input.ion-color) {
-  color: current-color(base);
-}
-
 :host(.ion-color) {
   --highlight-color-focused: #{current-color(base)};
 }
 
 // Input Wrapper
 // ----------------------------------------------------------------
 
-:host(:not(.legacy-input)) {
-  min-height: 44px;
-}
-
 /**
  * Since the label sits on top of the element,
  * the component needs to be taller otherwise the
@@ -206,11 +179,6 @@
 // Clear Input Icon
 // --------------------------------------------------
 
-// TODO FW-2764 Remove this
-:host(.legacy-input) .input-clear-icon {
-  @include margin(0);
-}
-
 .input-clear-icon {
   @include margin(auto);
   @include padding(0);
@@ -256,37 +224,6 @@
   visibility: visible;
 }
 
-
-// Input Has focus
-// --------------------------------------------------
-
-// TODO FW-2764 Remove this
-:host(.has-focus.legacy-input) {
-  pointer-events: none;
-}
-
-// TODO FW-2764 Remove this
-:host(.has-focus.legacy-input) input,
-:host(.has-focus.legacy-input) a,
-:host(.has-focus.legacy-input) button {
-  pointer-events: auto;
-}
-
-
-// Item Floating: Placeholder
-// ----------------------------------------------------------------
-// When used with a floating item the placeholder should hide
-
-:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value)) {
-  opacity: 0;
-}
-
-:host-context(.item-label-floating.item-has-placeholder:not(.item-has-value).item-has-focus) {
-  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-
-  opacity: 1;
-}
-
 // Input Wrapper
 // ----------------------------------------------------------------