mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
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:
@ -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};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user