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