feat(checkbox, radio, toggle, range): stacked labels for form controls (#28075)

Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Co-authored-by: ionitron <hi@ionicframework.com>

core/src/components/toggle/test/item/index.html

@@ -135,6 +135,27 @@
           </div>
         </div>
 
+        <h1>Placement Stacked</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Align Start</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="stacked" alignment="start">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+
+          <div class="grid-item">
+            <h2>Align Center</h2>
+            <ion-list>
+              <ion-item>
+                <ion-toggle label-placement="stacked" alignment="center">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-list>
+          </div>
+        </div>
+
         <h1>Multiline Label</h1>
         <div class="grid">
           <div class="grid-item">

core/src/components/toggle/test/item/toggle.e2e.ts

@@ -70,4 +70,23 @@ configs({ directions: ['ltr'], modes: ['md'] }).forEach(({ title, screenshot, co
       await expect(list).toHaveScreenshot(screenshot(`toggle-long-label-in-item`));
     });
   });
+
+  test.describe(title('toggle: stacked label in item'), () => {
+    test('should render margins correctly when using stacked label in item', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-list>
+            <ion-radio-group>
+              <ion-item>
+                <ion-toggle label-placement="stacked">Enable Notifications</ion-toggle>
+              </ion-item>
+            </ion-radio-group>
+          </ion-list>
+        `,
+        config
+      );
+      const list = page.locator('ion-list');
+      await expect(list).toHaveScreenshot(screenshot(`toggle-stacked-label-in-item`));
+    });
+  });
 });

core/src/components/toggle/test/label/index.html

@@ -102,6 +102,19 @@
             <ion-toggle label-placement="fixed" justify="space-between">Enable Notifications</ion-toggle>
           </div>
         </div>
+
+        <h1>Placement Stacked</h1>
+        <div class="grid">
+          <div class="grid-item">
+            <h2>Align Start</h2>
+            <ion-toggle label-placement="stacked" alignment="start">Enable Notifications</ion-toggle>
+          </div>
+
+          <div class="grid-item">
+            <h2>Align Center</h2>
+            <ion-toggle label-placement="stacked" alignment="center">Enable Notifications</ion-toggle>
+          </div>
+        </div>
       </ion-content>
     </ion-app>
   </body>

core/src/components/toggle/test/label/toggle.e2e.ts

@@ -126,4 +126,30 @@ configs().forEach(({ title, screenshot, config }) => {
       await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-fixed-justify-space-between`));
     });
   });
+
+  test.describe(title('toggle: stacked placement'), () => {
+    test('should align the label to the start of the container in the stacked position', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-toggle label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-toggle>
+        `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-stacked-align-start`));
+    });
+
+    test('should align the label to the center of the container in the stacked position', async ({ page }) => {
+      await page.setContent(
+        `
+          <ion-toggle label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-toggle>
+        `,
+        config
+      );
+
+      const toggle = page.locator('ion-toggle');
+      await expect(toggle).toHaveScreenshot(screenshot(`toggle-label-stacked-align-center`));
+    });
+  });
 });