test(select): use modern form syntax (#27195)

<!-- Please refer to our contributing documentation for any questions on
submitting a pull request, or let us know here if you need any help:
https://ionicframework.com/docs/building/contributing -->

<!-- Some docs updates need to be made in the `ionic-docs` repo, in a
separate PR. See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#modifying-documentation
for details. -->

<!-- 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. -->

There are select controls without a label in the legacy tests, that do
not manually specify `legacy="true"`. These will be automatically
upgraded to the modern form syntax when async labels are merged.

<!-- Issues are required for both bug fixes and features. -->
Issue URL: N/A


## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Adds `legacy="true"` to legacy select tests

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
This commit is contained in:
Sean Perkins
2023-04-14 11:32:56 -04:00
committed by GitHub
parent c896e7fde4
commit dca31f5940
4 changed files with 14 additions and 46 deletions

View File

@ -15,9 +15,9 @@
</head>
<body>
<ion-select id="default" placeholder="Default"></ion-select>
<ion-select id="popover" interface="popover" placeholder="Popover"></ion-select>
<ion-select id="actionSheet" interface="action-sheet" placeholder="Action Sheet"></ion-select>
<ion-select id="default" placeholder="Default" legacy="true"></ion-select>
<ion-select id="popover" interface="popover" placeholder="Popover" legacy="true"></ion-select>
<ion-select id="actionSheet" interface="action-sheet" placeholder="Action Sheet" legacy="true"></ion-select>
<ion-item>
<ion-label position="floating">Label w/o Placeholder</ion-label>

View File

@ -28,21 +28,21 @@
<ion-label> Standalone Select </ion-label>
</ion-list-header>
<ion-select placeholder="Default Select">
<ion-select placeholder="Default Select" legacy="true">
<ion-select-option value="madison">Madison, WI</ion-select-option>
<ion-select-option value="austin">Austin, TX</ion-select-option>
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
</ion-select>
<ion-select placeholder="Placeholder" class="custom-part-colors">
<ion-select placeholder="Placeholder" legacy="true" class="custom-part-colors">
<ion-select-option value="madison">Madison, WI</ion-select-option>
<ion-select-option value="austin">Austin, TX</ion-select-option>
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
</ion-select>
<ion-select value="austin" class="custom-part-colors">
<ion-select value="austin" legacy="true" class="custom-part-colors">
<ion-select-option value="madison">Madison, WI</ion-select-option>
<ion-select-option value="austin">Austin, TX</ion-select-option>
<ion-select-option value="chicago">Chicago, IL</ion-select-option>

View File

@ -15,51 +15,19 @@
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tristique ipsum ipsum, eget hendrerit erat gravida
vitae. Cras condimentum aliquam diam faucibus facilisis. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Suspendisse potenti. Duis libero quam, varius ac quam et, pulvinar pretium
libero. Suspendisse mollis eros a vehicula pellentesque. Sed viverra eros vel lorem lacinia, lobortis congue dolor
dignissim. In congue tincidunt massa, sit amet elementum turpis eleifend in. Nullam laoreet condimentum pharetra.
Donec cursus viverra eros nec lacinia. Sed dapibus nulla vel augue efficitur tincidunt. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce suscipit auctor sem et eleifend.
Nullam vitae magna ex. Quisque dolor arcu, congue in nisi eu, ullamcorper tincidunt sapien. Praesent sed molestie
ante, vitae tincidunt odio.
</p>
<p>
Duis quis rhoncus libero, vitae mollis tortor. Phasellus mollis tellus in auctor ullamcorper. Vivamus eget
sagittis arcu, sed egestas dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Integer mi sapien, pharetra ut sapien vulputate, congue dictum libero. Integer dapibus, arcu at
ullamcorper tempus, nulla dolor vestibulum arcu, sit amet laoreet libero leo eu turpis. Nulla varius maximus
molestie.
</p>
<p>
Phasellus interdum sem ut viverra bibendum. Vivamus vel turpis arcu. Maecenas ultricies pretium dolor id blandit.
In nibh sapien, tristique quis purus vitae, placerat sollicitudin ante. Suspendisse venenatis libero rutrum odio
ultricies blandit. Proin a fringilla sem. Etiam pretium metus sem, eu lacinia tellus blandit id.
</p>
<p>
Vestibulum aliquam sapien elementum hendrerit viverra. Vivamus vulputate ligula id dui accumsan, at pulvinar
mauris lobortis. Integer a ultrices nulla. Cras ultricies sollicitudin erat. Nam nec dolor a enim vestibulum
egestas id non dui. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer
sodales libero congue magna dictum auctor. Duis vitae tellus tempor, tempus dolor semper, dictum eros. Etiam at
suscipit lacus. Proin magna ipsum, pulvinar rhoncus vulputate vel, finibus nec nisi. Praesent felis neque,
porttitor ac pellentesque et, mattis non lorem. Etiam et ex ultrices, posuere purus id, vestibulum massa.
</p>
<ion-select id="gender" placeholder="Select One">
<ion-select id="gender" placeholder="Select One" legacy="true">
<ion-select-option value="f">Female</ion-select-option>
<ion-select-option value="m">Male</ion-select-option>
</ion-select>
<ion-select id="hairColor" ok-text="Okay" value="brown" cancel-text="Dismiss">
<ion-select id="hairColor" ok-text="Okay" value="brown" cancel-text="Dismiss" legacy="true">
<ion-select-option value="brown">Brown</ion-select-option>
<ion-select-option value="blonde">Blonde</ion-select-option>
<ion-select-option value="black">Black</ion-select-option>
<ion-select-option value="red">Red</ion-select-option>
</ion-select>
<ion-select id="gaming" interface="popover" value="popover" ok-text="Okay" cancel-text="Dismiss">
<ion-select id="gaming" interface="popover" value="popover" ok-text="Okay" cancel-text="Dismiss" legacy="true">
<ion-select-option value="popover">Popover</ion-select-option>
<ion-select-option value="nes">NES</ion-select-option>
<ion-select-option value="n64">Nintendo64</ion-select-option>
@ -69,7 +37,7 @@
<ion-select-option value="snes">SNES</ion-select-option>
</ion-select>
<ion-select placeholder="Month" value="03">
<ion-select placeholder="Month" value="03" legacy="true">
<ion-select-option value="01">January</ion-select-option>
<ion-select-option value="02">February</ion-select-option>
<ion-select-option value="03">March</ion-select-option>
@ -84,7 +52,7 @@
<ion-select-option value="12">December</ion-select-option>
</ion-select>
<ion-select placeholder="Year" value="94">
<ion-select placeholder="Year" value="94" legacy="true">
<ion-select-option value="89">1989</ion-select-option>
<ion-select-option value="90">1990</ion-select-option>
<ion-select-option value="91">1991</ion-select-option>
@ -98,7 +66,7 @@
<ion-select-option value="99">1999</ion-select-option>
</ion-select>
<ion-select class="custom" placeholder="Day">
<ion-select class="custom" placeholder="Day" legacy="true">
<ion-select-option>Sunday</ion-select-option>
<ion-select-option>Monday</ion-select-option>
<ion-select-option>Tuesday</ion-select-option>

View File

@ -6,7 +6,7 @@ test.describe('select: wrapping', () => {
skip.rtl();
await page.setContent(`
<ion-select value="nowrap">
<ion-select value="nowrap" legacy="true">
<ion-select-option value="nowrap">Should not wrap when no label exists and no class is added to make the text wrap</ion-select-option>
</ion-select>
`);
@ -19,7 +19,7 @@ test.describe('select: wrapping', () => {
skip.rtl();
await page.setContent(`
<ion-select value="wrap" class="ion-text-wrap">
<ion-select value="wrap" legacy="true" class="ion-text-wrap">
<ion-select-option value="wrap">Should wrap when no label exists and really long text exists to make it wrap the text</ion-select-option>
</ion-select>
`);