test(toggle): use legacy form syntax for legacy tests (#27197)

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

The legacy toggle tests without a label do not manually specify to
render in legacy mode.

<!-- 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 the `legacy="true"` property to legacy toggle 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-13 12:16:57 -04:00
committed by GitHub
parent e0b2bc5ece
commit 7ad84cbbc5
2 changed files with 35 additions and 35 deletions

View File

@ -20,7 +20,7 @@
<ion-toolbar>
<ion-title>Toggle - Basic</ion-title>
<ion-buttons slot="primary">
<ion-toggle></ion-toggle>
<ion-toggle legacy="true"></ion-toggle>
</ion-buttons>
</ion-toolbar>
</ion-header>
@ -99,7 +99,7 @@
</p>
<p>
<ion-toggle id="standAloneChecked"></ion-toggle>
<ion-toggle id="standAloneChecked" legacy="true"></ion-toggle>
Stand-alone toggle:
<span id="standAloneCheckedSpan"></span>
</p>

View File

@ -27,53 +27,53 @@
<ion-content class="ion-padding-horizontal">
<h1>Default</h1>
<ion-toggle></ion-toggle>
<ion-toggle checked></ion-toggle>
<ion-toggle color="danger"></ion-toggle>
<ion-toggle color="danger" checked></ion-toggle>
<ion-toggle color="tertiary" class="toggle-activated"></ion-toggle>
<ion-toggle color="tertiary" checked class="toggle-activated"></ion-toggle>
<ion-toggle legacy="true"></ion-toggle>
<ion-toggle checked legacy="true"></ion-toggle>
<ion-toggle color="danger" legacy="true"></ion-toggle>
<ion-toggle color="danger" checked legacy="true"></ion-toggle>
<ion-toggle color="tertiary" class="toggle-activated" legacy="true"></ion-toggle>
<ion-toggle color="tertiary" checked class="toggle-activated" legacy="true"></ion-toggle>
<h1>Custom Widths</h1>
<ion-toggle color="secondary" class="width-small"></ion-toggle>
<ion-toggle color="secondary" checked class="width-small"></ion-toggle>
<ion-toggle color="secondary" class="width-large"></ion-toggle>
<ion-toggle color="secondary" checked class="width-large"></ion-toggle>
<ion-toggle color="tertiary" class="width-large toggle-activated"></ion-toggle>
<ion-toggle color="tertiary" checked class="width-large toggle-activated"></ion-toggle>
<ion-toggle color="secondary" class="width-small" legacy="true"></ion-toggle>
<ion-toggle color="secondary" checked class="width-small" legacy="true"></ion-toggle>
<ion-toggle color="secondary" class="width-large" legacy="true"></ion-toggle>
<ion-toggle color="secondary" checked class="width-large" legacy="true"></ion-toggle>
<ion-toggle color="tertiary" class="width-large toggle-activated" legacy="true"></ion-toggle>
<ion-toggle color="tertiary" checked class="width-large toggle-activated" legacy="true"></ion-toggle>
<h1>Custom Heights</h1>
<div style="display: flex; flex-flow: column; float: left">
<ion-toggle class="height-small"></ion-toggle>
<ion-toggle checked class="height-small"></ion-toggle>
<ion-toggle class="height-small" legacy="true"></ion-toggle>
<ion-toggle checked class="height-small" legacy="true"></ion-toggle>
</div>
<ion-toggle class="height-large"></ion-toggle>
<ion-toggle checked class="height-large"></ion-toggle>
<ion-toggle class="handle-height-large"></ion-toggle>
<ion-toggle checked class="handle-height-large"></ion-toggle>
<ion-toggle checked class="handle-height-large toggle-activated"></ion-toggle>
<ion-toggle class="height-large" legacy="true"></ion-toggle>
<ion-toggle checked class="height-large" legacy="true"></ion-toggle>
<ion-toggle class="handle-height-large" legacy="true"></ion-toggle>
<ion-toggle checked class="handle-height-large" legacy="true"></ion-toggle>
<ion-toggle checked class="handle-height-large toggle-activated" legacy="true"></ion-toggle>
<h1>Dynamic Sizes</h1>
<ion-toggle color="tertiary" class="dynamic-small width-small height-small"></ion-toggle>
<ion-toggle color="tertiary" checked class="dynamic-small width-small height-small"></ion-toggle>
<ion-toggle color="tertiary" class="dynamic-large width-large height-large"></ion-toggle>
<ion-toggle color="tertiary" checked class="dynamic-large width-large height-large"></ion-toggle>
<ion-toggle color="tertiary" class="dynamic-small width-small height-small" legacy="true"></ion-toggle>
<ion-toggle color="tertiary" checked class="dynamic-small width-small height-small" legacy="true"></ion-toggle>
<ion-toggle color="tertiary" class="dynamic-large width-large height-large" legacy="true"></ion-toggle>
<ion-toggle color="tertiary" checked class="dynamic-large width-large height-large" legacy="true"></ion-toggle>
<h1>Complex Custom Toggles</h1>
<ion-toggle mode="ios" class="all-custom"></ion-toggle>
<ion-toggle mode="ios" checked class="all-custom"></ion-toggle>
<ion-toggle mode="ios" class="all-custom" legacy="true"></ion-toggle>
<ion-toggle mode="ios" checked class="all-custom" legacy="true"></ion-toggle>
<ion-toggle class="custom-overflow"></ion-toggle>
<ion-toggle checked class="custom-overflow"></ion-toggle>
<ion-toggle class="custom-overflow" legacy="true"></ion-toggle>
<ion-toggle checked class="custom-overflow" legacy="true"></ion-toggle>
<ion-toggle mode="ios" color="dark" class="custom-spacing"></ion-toggle>
<ion-toggle mode="ios" color="dark" checked class="custom-spacing"></ion-toggle>
<ion-toggle mode="ios" color="dark" class="custom-spacing" legacy="true"></ion-toggle>
<ion-toggle mode="ios" color="dark" checked class="custom-spacing" legacy="true"></ion-toggle>
<ion-toggle mode="md" color="dark" class="custom-spacing"></ion-toggle>
<ion-toggle mode="md" color="dark" checked class="custom-spacing"></ion-toggle>
<ion-toggle mode="md" color="dark" class="custom-spacing" legacy="true"></ion-toggle>
<ion-toggle mode="md" color="dark" checked class="custom-spacing" legacy="true"></ion-toggle>
<ion-toggle mode="ios" class="icon-custom"></ion-toggle>
<ion-toggle mode="ios" checked class="icon-custom"></ion-toggle>
<ion-toggle mode="ios" class="icon-custom" legacy="true"></ion-toggle>
<ion-toggle mode="ios" checked class="icon-custom" legacy="true"></ion-toggle>
</ion-content>
</ion-app>