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 <hi@ionicframework.com>
This commit is contained in:
Brandy Carney
2024-02-13 12:43:22 -05:00
committed by GitHub
parent ca61e5061b
commit 76abf2778b
246 changed files with 9 additions and 2868 deletions

View File

@ -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};
}