refactor(textarea): remove legacy property and support for legacy syntax (#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>
@ -160,26 +160,6 @@
|
||||
<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>
|
||||
|
||||
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 81 KiB After Width: | Height: | Size: 62 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 47 KiB |
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 61 KiB |
|
Before Width: | Height: | Size: 56 KiB After Width: | Height: | Size: 43 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 49 KiB After Width: | Height: | Size: 38 KiB |
|
Before Width: | Height: | Size: 57 KiB After Width: | Height: | Size: 44 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 53 KiB |
|
Before Width: | Height: | Size: 48 KiB After Width: | Height: | Size: 38 KiB |