feat(toggle): display as block when justify or alignment properties are defined (#29802)

- Change the toggle's `display` property to `block` when the `justify` or `alignment` property is set. 
- Set the default `justify-content` style to `space-between` so that a toggle with `width: 100%` set without `justify` or `alignment` set will still have the same default 
- Set the default `align-items` style to `center` so that a toggle with `width: 100%` and `label-placement="stacked"` set without `justify` or `alignment` set will still have the same default 
- Modifies the `label` e2e test to remove the explicit width as setting the property will make them full-width 
- Adds two examples to the `label` e2e test of labels that do not have `justify` set but use `width: 100%` to ensure they are working as expected without it 
- Adds one example to the `label` e2e test of a long label that uses `justify` to ensure it still wraps properly

Author: brandyscarney

core/api.txt

@@ -1922,12 +1922,12 @@ ion-toast,part,icon
 ion-toast,part,message
 
 ion-toggle,shadow
-ion-toggle,prop,alignment,"center" | "start",'center',false,false
+ion-toggle,prop,alignment,"center" | "start" | undefined,undefined,false,false
 ion-toggle,prop,checked,boolean,false,false,false
 ion-toggle,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-toggle,prop,disabled,boolean,false,false,false
 ion-toggle,prop,enableOnOffLabels,boolean | undefined,config.get('toggleOnOffLabels'),false,false
-ion-toggle,prop,justify,"end" | "space-between" | "start",'space-between',false,false
+ion-toggle,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
 ion-toggle,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-toggle,prop,mode,"ios" | "md",undefined,false,false
 ion-toggle,prop,name,string,this.inputId,false,false

core/src/components.d.ts

@@ -3214,9 +3214,9 @@ export namespace Components {
     }
     interface IonToggle {
         /**
-          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
          */
-        "alignment": 'start' | 'center';
+        "alignment"?: 'start' | 'center';
         /**
           * If `true`, the toggle is selected.
          */
@@ -3234,9 +3234,9 @@ export namespace Components {
          */
         "enableOnOffLabels": boolean | undefined;
         /**
-          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
          */
-        "justify": 'start' | 'end' | 'space-between';
+        "justify"?: 'start' | 'end' | 'space-between';
         /**
           * Where to place the label relative to the input. `"start"`: The label will appear to the left of the toggle in LTR and to the right in RTL. `"end"`: The label will appear to the right of the toggle in LTR and to the left in RTL. `"fixed"`: The label has the same behavior as `"start"` except it also has a fixed width. Long text will be truncated with ellipses ("..."). `"stacked"`: The label will appear above the toggle regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */
@@ -8020,7 +8020,7 @@ declare namespace LocalJSX {
     }
     interface IonToggle {
         /**
-          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL.
+          * How to control the alignment of the toggle and label on the cross axis. `"start"`: The label and control will appear on the left of the cross axis in LTR, and on the right side in RTL. `"center"`: The label and control will appear at the center of the cross axis in both LTR and RTL. Setting this property will change the toggle `display` to `block`.
          */
         "alignment"?: 'start' | 'center';
         /**
@@ -8040,7 +8040,7 @@ declare namespace LocalJSX {
          */
         "enableOnOffLabels"?: boolean | undefined;
         /**
-          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements.
+          * How to pack the label and toggle within a line. `"start"`: The label and toggle will appear on the left in LTR and on the right in RTL. `"end"`: The label and toggle will appear on the right in LTR and on the left in RTL. `"space-between"`: The label and toggle will appear on opposite ends of the line with space between the two elements. Setting this property will change the toggle `display` to `block`.
          */
         "justify"?: 'start' | 'end' | 'space-between';
         /**

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

@@ -12,25 +12,38 @@
     <script src="../../../../../scripts/testing/scripts.js"></script>
     <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
     <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
+
+    <style>
+      ion-toggle {
+        margin-bottom: 8px;
+      }
+
+      hr {
+        background: #ddd;
+      }
+    </style>
   </head>
 
   <body>
     <ion-app>
       <ion-header>
         <ion-toolbar>
           <ion-title>Toggle - Basic</ion-title>
-          <ion-buttons slot="primary">
-            <ion-toggle aria-label="Enable Notifications"></ion-toggle>
-          </ion-buttons>
         </ion-toolbar>
       </ion-header>
 
       <ion-content class="ion-padding">
-        <ion-toggle
-          >Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications
-          Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable
-          Notifications</ion-toggle
-        >
+        <ion-toggle>Unchecked</ion-toggle><br />
+        <ion-toggle checked>Checked</ion-toggle><br />
+        <ion-toggle disabled>Disabled</ion-toggle><br />
+        <ion-toggle disabled checked>Disabled, Checked</ion-toggle><br />
+
+        <hr />
+
+        <ion-toggle> Default width </ion-toggle><br />
+        <ion-toggle style="width: 200px"> Specified width </ion-toggle><br />
+        <ion-toggle style="width: 100%"> Full-width </ion-toggle><br />
+        <ion-toggle> Long Label Long Label Long Label Long Label Long Label Long Label </ion-toggle><br />
       </ion-content>
     </ion-app>
   </body>

core/src/components/toggle/test/item/toggle.e2e.ts-snapshots/toggle-stacked-label-in-item-md-ltr-Mobile-Chrome-linux.png

@@ -33,10 +33,6 @@
           padding: 0;
         }
       }
-
-      ion-toggle {
-        width: 100%;
-      }
     </style>
   </head>