From 7ad84cbbc5e9527f4888a12782ca2b65c521fdf4 Mon Sep 17 00:00:00 2001
From: Sean Perkins <sean@ionic.io>
Date: Thu, 13 Apr 2023 12:16:57 -0400
Subject: [PATCH] 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. -->
---
 .../toggle/test/legacy/basic/index.html       |  4 +-
 .../toggle/test/legacy/sizes/index.html       | 66 +++++++++----------
 2 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/core/src/components/toggle/test/legacy/basic/index.html b/core/src/components/toggle/test/legacy/basic/index.html
index e332e2ddfd..d6013e3246 100644
--- a/core/src/components/toggle/test/legacy/basic/index.html
+++ b/core/src/components/toggle/test/legacy/basic/index.html
@@ -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>
diff --git a/core/src/components/toggle/test/legacy/sizes/index.html b/core/src/components/toggle/test/legacy/sizes/index.html
index ae0cb16679..369de5a336 100644
--- a/core/src/components/toggle/test/legacy/sizes/index.html
+++ b/core/src/components/toggle/test/legacy/sizes/index.html
@@ -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>