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

core/api.txt

@@ -398,7 +398,7 @@ ion-checkbox,prop,checked,boolean,false,false,false
 ion-checkbox,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-checkbox,prop,disabled,boolean,false,false,false
 ion-checkbox,prop,indeterminate,boolean,false,false,false
-ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',false,false
+ion-checkbox,prop,justify,"end" | "space-between" | "start" | undefined,undefined,false,false
 ion-checkbox,prop,labelPlacement,"end" | "fixed" | "stacked" | "start",'start',false,false
 ion-checkbox,prop,mode,"ios" | "md",undefined,false,false
 ion-checkbox,prop,name,string,this.inputId,false,false

core/src/components.d.ts

@@ -623,7 +623,7 @@ export namespace Components {
         /**
           * How to pack the label and checkbox within a line. `"start"`: The label and checkbox will appear on the left in LTR and on the right in RTL. `"end"`: The label and checkbox will appear on the right in LTR and 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.
          */
-        "justify": 'start' | 'end' | 'space-between';
+        "justify"?: 'start' | 'end' | 'space-between';
         /**
           * Where to place the label relative to the checkbox. `"start"`: The label will appear to the left of the checkbox in LTR and to the right in RTL. `"end"`: The label will appear to the right of the checkbox 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 checkbox regardless of the direction. The alignment of the label can be controlled with the `alignment` property.
          */

core/src/components/checkbox/checkbox.scss

@@ -72,7 +72,9 @@
   flex-grow: 1;
 
   align-items: center;
+  justify-content: space-between;
 
+  width: 100%;
   height: inherit;
 
   cursor: inherit;
@@ -147,6 +149,12 @@ input {
 // Justify Content
 // ---------------------------------------------
 
+:host(.checkbox-justify-space-between),
+:host(.checkbox-justify-start),
+:host(.checkbox-justify-end) {
+  display: flex;
+}
+
 :host(.checkbox-justify-space-between) .checkbox-wrapper {
   justify-content: space-between;
 }

core/src/components/checkbox/checkbox.tsx

@@ -87,7 +87,7 @@ export class Checkbox implements ComponentInterface {
    * `"space-between"`: The label and checkbox will appear on opposite
    * ends of the line with space between the two elements.
    */
-  @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.
@@ -194,7 +194,7 @@ export class Checkbox implements ComponentInterface {
           'checkbox-disabled': disabled,
           'checkbox-indeterminate': indeterminate,
           interactive: true,
-          [`checkbox-justify-${justify}`]: true,
+          [`checkbox-justify-${justify}`]: justify !== undefined,
           [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
         })}

core/src/components/checkbox/test/a11y/checkbox.e2e.ts

@@ -36,7 +36,7 @@ configs({ directions: ['ltr'] }).forEach(({ title, config, screenshot }) => {
                 font-size: 310%;
               }
             </style>
-            <ion-checkbox justify="start" checked>Checked</ion-checkbox>
+            <ion-checkbox checked>Checked</ion-checkbox>
           `,
           config
         );

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

@@ -2,20 +2,18 @@ import { expect } from '@playwright/test';
 import { configs, test } from '@utils/test/playwright';
 
 /**
- * By default ion-checkbox only takes up
- * as much space as it needs. Justification is
- * used for when the checkbox takes up the full
- * line (such as in an ion-item). As a result,
- * we set the width of the checkbox so we can
- * see the justification results.
+ * By default ion-checkbox only takes up as much space
+ * as it needs. Justification is used for when the
+ * checkbox should take up the full line (such as in an
+ * ion-item or when it has 100% width).
  */
 configs().forEach(({ title, screenshot, config }) => {
   test.describe(title('checkbox: label'), () => {
     test.describe('checkbox: start placement', () => {
       test('should render a start justification with label in the start position', async ({ page }) => {
         await page.setContent(
           `
-           <ion-checkbox label-placement="start" justify="start" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="start" justify="start">Label</ion-checkbox>
          `,
           config
         );
@@ -27,7 +25,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render an end justification with label in the start position', async ({ page }) => {
         await page.setContent(
           `
-           <ion-checkbox label-placement="start" justify="end" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="start" justify="end">Label</ion-checkbox>
          `,
           config
         );
@@ -39,7 +37,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a space between justification with label in the start position', async ({ page }) => {
         await page.setContent(
           `
-           <ion-checkbox label-placement="start" justify="space-between" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="start" justify="space-between">Label</ion-checkbox>
          `,
           config
         );
@@ -51,23 +49,23 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should truncate long labels with ellipses', async ({ page }) => {
         await page.setContent(
           `
-           <ion-checkbox label-placement="start" justify="start" style="width: 200px">
+           <ion-checkbox label-placement="start" justify="start">
              Long Label Long Label Long Label Long Label Long Label Long Label
            </ion-checkbox>
          `,
           config
         );
 
         const checkbox = page.locator('ion-checkbox');
-        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-long-label`));
+        await expect(checkbox).toHaveScreenshot(screenshot(`checkbox-label-start-justify-start-long-label`));
       });
     });
 
     test.describe('checkbox: end placement', () => {
       test('should render a start justification with label in the end position', async ({ page }) => {
         await page.setContent(
           `
-           <ion-checkbox label-placement="end" justify="start" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="end" justify="start">Label</ion-checkbox>
          `,
           config
         );
@@ -79,7 +77,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render an end justification with label in the end position', async ({ page }) => {
         await page.setContent(
           `
-           <ion-checkbox label-placement="end" justify="end" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="end" justify="end">Label</ion-checkbox>
          `,
           config
         );
@@ -91,7 +89,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a space between justification with label in the end position', async ({ page }) => {
         await page.setContent(
           `
-           <ion-checkbox label-placement="end" justify="space-between" style="width: 200px">Label</ion-checkbox>
+           <ion-checkbox label-placement="end" justify="space-between">Label</ion-checkbox>
          `,
           config
         );
@@ -105,7 +103,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a start justification with label in the fixed position', async ({ page }) => {
         await page.setContent(
           `
-           <ion-checkbox label-placement="fixed" justify="start" style="width: 200px">This is a long label</ion-checkbox>
+           <ion-checkbox label-placement="fixed" justify="start">This is a long label</ion-checkbox>
          `,
           config
         );
@@ -117,7 +115,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render an end justification with label in the fixed position', async ({ page }) => {
         await page.setContent(
           `
-           <ion-checkbox label-placement="fixed" justify="end" style="width: 200px">This is a long label</ion-checkbox>
+           <ion-checkbox label-placement="fixed" justify="end">This is a long label</ion-checkbox>
          `,
           config
         );
@@ -129,7 +127,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should render a space between justification with label in the fixed position', async ({ page }) => {
         await page.setContent(
           `
-           <ion-checkbox label-placement="fixed" justify="space-between" style="width: 200px">This is a long label</ion-checkbox>
+           <ion-checkbox label-placement="fixed" justify="space-between">This is a long label</ion-checkbox>
          `,
           config
         );
@@ -143,7 +141,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should align the label to the start of the container in the stacked position', async ({ page }) => {
         await page.setContent(
           `
-            <ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">This is a long label</ion-checkbox>
+            <ion-checkbox label-placement="stacked" alignment="start">This is a long label</ion-checkbox>
           `,
           config
         );
@@ -155,7 +153,7 @@ configs().forEach(({ title, screenshot, config }) => {
       test('should align the label to the center of the container in the stacked position', async ({ page }) => {
         await page.setContent(
           `
-            <ion-checkbox label-placement="stacked" alignment="center" style="width: 200px">This is a long label</ion-checkbox>
+            <ion-checkbox label-placement="stacked" alignment="center">This is a long label</ion-checkbox>
           `,
           config
         );
@@ -172,7 +170,7 @@ configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, config, screen
     test('long label should truncate', async ({ page }) => {
       await page.setContent(
         `
-          <ion-checkbox label-placement="stacked" alignment="start" style="width: 200px">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
+          <ion-checkbox label-placement="stacked" alignment="start">Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications Enable Notifications</ion-checkbox>
         `,
         config
       );