feat(checkbox): display as block when justify or alignment properties are defined (#29783)

- Change the checkbox'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 checkbox with `width: 100%` 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

core/src/components/checkbox/checkbox.tsx

@@ -86,15 +86,17 @@ export class Checkbox implements ComponentInterface {
    * on the left in RTL.
    * `"space-between"`: The label and checkbox will appear on opposite
    * ends of the line with space between the two elements.
+   * Setting this property will change the checkbox `display` to `block`.
    */
-  @Prop() justify: 'start' | 'end' | 'space-between' = 'space-between';
+  @Prop() justify?: 'start' | 'end' | 'space-between';
 
   /**
    * How to control the alignment of the checkbox 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 checkbox `display` to `block`.
    */
-  @Prop() alignment: 'start' | 'center' = 'center';
+  @Prop() alignment?: 'start' | 'center';
 
   /**
    * Emitted when the checked property has changed as a result of a user action such as a click.
@@ -194,8 +196,8 @@ export class Checkbox implements ComponentInterface {
           'checkbox-disabled': disabled,
           'checkbox-indeterminate': indeterminate,
           interactive: true,
-          [`checkbox-justify-${justify}`]: true,
-          [`checkbox-alignment-${alignment}`]: true,
+          [`checkbox-justify-${justify}`]: justify !== undefined,
+          [`checkbox-alignment-${alignment}`]: alignment !== undefined,
           [`checkbox-label-placement-${labelPlacement}`]: true,
         })}
         onClick={this.onClick}