mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
test: migrate form control usages to modern syntax (#28897)
Issue number: Internal --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> Several tests were still using the legacy form syntax. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - Migrated tests in `core`, `angular`, and `vue` to use the modern form syntax (`react` did not have form controls). I opted not to migrate `item/test/highlight` and `item/test/counter` because those tests are going to be removed in the future once the deprecate item APIs are removed. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 2. Update the BREAKING.md file with the breaking change. 3. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> --------- Co-authored-by: ionitron <hi@ionicframework.com> Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
This commit is contained in:
Liam DeBeasi
@@ -250,19 +250,16 @@
|
||||
|
||||
<ion-card>
|
||||
<ion-card-content>
|
||||
<ion-item fill="solid">
|
||||
<ion-input fill="solid" label="Standard" label-placement="floating" value="Has Initial Value">
|
||||
<ion-icon slot="start" name="calendar-clear-outline"></ion-icon>
|
||||
<ion-label position="floating">Standard</ion-label>
|
||||
<ion-input value="Has Initial Value"></ion-input>
|
||||
<ion-note slot="error">Error Text</ion-note>
|
||||
</ion-item>
|
||||
</ion-input>
|
||||
|
||||
<ion-item fill="outline">
|
||||
<ion-label position="floating">Standard</ion-label>
|
||||
<br />
|
||||
|
||||
<ion-input fill="outline" helper-text="Helper text" label="Standard" label-placement="floating">
|
||||
<ion-icon slot="end" name="trash"></ion-icon>
|
||||
<ion-input></ion-input>
|
||||
<ion-note slot="error">Helper Text</ion-note>
|
||||
</ion-item>
|
||||
</ion-input>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</section>
|
||||
@@ -354,18 +351,15 @@
|
||||
<ion-label>Fruits</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item>
|
||||
<ion-label>Apple</ion-label>
|
||||
<ion-radio slot="start" value="apple"></ion-radio>
|
||||
<ion-radio value="apple">Apple</ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Grape, checked, disabled</ion-label>
|
||||
<ion-radio slot="start" id="grapeChecked" value="grape" disabled></ion-radio>
|
||||
<ion-radio id="grapeChecked" value="grape" disabled>Grape, checked, disabled</ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Cherry</ion-label>
|
||||
<ion-radio slot="start" color="danger" value="cherry"></ion-radio>
|
||||
<ion-radio color="danger" value="cherry">Cherry</ion-radio>
|
||||
</ion-item>
|
||||
</ion-radio-group>
|
||||
</ion-list>
|
||||
@@ -376,37 +370,34 @@
|
||||
<ion-label>Veggies</ion-label>
|
||||
</ion-item-divider>
|
||||
<ion-item>
|
||||
<ion-label>Celery</ion-label>
|
||||
<ion-radio color="tertiary" slot="start" value="celery"></ion-radio>
|
||||
<ion-radio color="tertiary" value="celery">Celery</ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Lettuce, checked, disabled</ion-label>
|
||||
<ion-radio color="tertiary" slot="start" value="lettuce" disabled></ion-radio>
|
||||
<ion-radio color="tertiary" value="lettuce" disabled>Lettuce, checked, disabled</ion-radio>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-label>Onion</ion-label>
|
||||
<ion-radio color="tertiary" slot="start" value="onion"></ion-radio>
|
||||
<ion-radio color="tertiary" value="onion">Onion</ion-radio>
|
||||
</ion-item>
|
||||
</ion-radio-group>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-range value="20"></ion-range>
|
||||
<ion-range aria-label="Range" value="20"></ion-range>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-range color="success" value="20"></ion-range>
|
||||
<ion-range aria-label="Range" color="success" value="20"></ion-range>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-range color="warning" value="20"></ion-range>
|
||||
<ion-range aria-label="Range" color="warning" value="20"></ion-range>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-range color="danger" value="20"></ion-range>
|
||||
<ion-range aria-label="Range" color="danger" value="20"></ion-range>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</section>
|
||||
@@ -414,65 +405,51 @@
|
||||
<section>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<ion-label>Default</ion-label>
|
||||
<ion-checkbox slot="end" checked></ion-checkbox>
|
||||
<ion-checkbox checked>Default</ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Primary</ion-label>
|
||||
<ion-checkbox slot="end" color="primary" checked></ion-checkbox>
|
||||
<ion-checkbox color="primary" checked>Primary</ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Secondary</ion-label>
|
||||
<ion-checkbox slot="end" color="secondary" checked></ion-checkbox>
|
||||
<ion-checkbox color="secondary" checked>Secondary</ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Warning</ion-label>
|
||||
<ion-checkbox slot="end" color="warning" checked></ion-checkbox>
|
||||
<ion-checkbox color="warning" checked>Warning</ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Danger</ion-label>
|
||||
<ion-checkbox slot="end" color="danger" checked></ion-checkbox>
|
||||
<ion-checkbox color="danger" checked>Danger</ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Light</ion-label>
|
||||
<ion-checkbox slot="end" color="light" checked></ion-checkbox>
|
||||
<ion-checkbox color="light" checked>Light</ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Dark</ion-label>
|
||||
<ion-checkbox slot="end" color="dark" checked></ion-checkbox>
|
||||
<ion-checkbox color="dark" checked>Dark</ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Unchecked by Default</ion-label>
|
||||
<ion-checkbox slot="end"></ion-checkbox>
|
||||
<ion-checkbox>Unchecked by Default</ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Disabled</ion-label>
|
||||
<ion-checkbox slot="end" disabled></ion-checkbox>
|
||||
<ion-checkbox disabled>Disabled</ion-checkbox>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle slot="start"></ion-toggle>
|
||||
<ion-label>Blueberry</ion-label>
|
||||
<ion-toggle>Blueberry</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle color="success" slot="start" checked></ion-toggle>
|
||||
<ion-label>Lettuce</ion-label>
|
||||
<ion-toggle color="success" checked>Lettuce</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle color="danger" slot="start" checked></ion-toggle>
|
||||
<ion-label>Apple</ion-label>
|
||||
<ion-toggle color="danger" checked>Apple</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle color="tertiary" slot="start" checked></ion-toggle>
|
||||
<ion-label>Radish</ion-label>
|
||||
<ion-toggle color="tertiary" checked>Radish</ion-toggle>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-toggle color="dark" slot="start" checked></ion-toggle>
|
||||
<ion-label>Blackberry</ion-label>
|
||||
<ion-toggle color="dark" checked>Blackberry</ion-toggle>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</section>
|
||||
@@ -485,8 +462,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-title>Colors</ion-title>
|
||||
<div slot="end" class="right-container">
|
||||
<ion-label>Select a Theme:</ion-label>
|
||||
<ion-select interface="popover" class="theme-picker">
|
||||
<ion-select label="Select a Theme:" interface="popover" class="theme-picker">
|
||||
<ion-select-option value="default" selected>Default</ion-select-option>
|
||||
<ion-select-option value="oceanic">Oceanic</ion-select-option>
|
||||
<ion-select-option value="vibrant">Vibrant</ion-select-option>
|
||||
@@ -914,8 +890,7 @@
|
||||
<ion-toolbar>
|
||||
<ion-title>Overlays</ion-title>
|
||||
<div slot="end" class="right-container">
|
||||
<ion-label>Select a Theme:</ion-label>
|
||||
<ion-select interface="popover" class="theme-picker">
|
||||
<ion-select label="Select a Theme:" interface="popover" class="theme-picker">
|
||||
<ion-select-option value="default" selected>Default</ion-select-option>
|
||||
<ion-select-option value="oceanic">Oceanic</ion-select-option>
|
||||
<ion-select-option value="vibrant">Vibrant</ion-select-option>
|
||||
@@ -951,8 +926,7 @@
|
||||
<ion-datetime></ion-datetime>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label>Select</ion-label>
|
||||
<ion-select>
|
||||
<ion-select label="Select">
|
||||
<ion-select-option>1</ion-select-option>
|
||||
<ion-select-option>2</ion-select-option>
|
||||
<ion-select-option>3</ion-select-option>
|
||||
|
||||
Reference in New Issue
Block a user