feat(checkbox): add small size

core/api.txt

@@ -321,6 +321,7 @@ ion-checkbox,prop,justify,"end" | "space-between" | "start",'space-between',fals
 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
+ion-checkbox,prop,size,"small" | undefined,undefined,false,false
 ion-checkbox,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-checkbox,prop,value,any,'on',false,false
 ion-checkbox,event,ionBlur,void,true

core/src/components.d.ts

@@ -724,6 +724,10 @@ export namespace Components {
           * The name of the control, which is submitted with the form data.
          */
         "name": string;
+        /**
+          * Set to `"small"` for a checkbox with less height and padding.
+         */
+        "size"?: 'small';
         /**
           * The theme determines the visual appearance of the component.
          */
@@ -5952,6 +5956,10 @@ declare namespace LocalJSX {
           * Emitted when the checkbox has focus.
          */
         "onIonFocus"?: (event: IonCheckboxCustomEvent<void>) => void;
+        /**
+          * Set to `"small"` for a checkbox with less height and padding.
+         */
+        "size"?: 'small';
         /**
           * The theme determines the visual appearance of the component.
          */

core/src/components/checkbox/checkbox.ionic.scss

@@ -15,3 +15,14 @@
   // Size
   --size: #{$checkbox-ionic-size};
 }
+
+
+// Ionic Design Checkbox Sizes
+// --------------------------------------------------
+:host(.checkbox-size-small) {
+  --padding-top: #{$checkbox-ionic-small-padding-top};
+  --padding-bottom: #{$checkbox-ionic-small-padding-bottom};
+
+   // Size
+   --size: #{$checkbox-ionic-small-size};
+}

core/src/components/checkbox/checkbox.ionic.vars.scss

@@ -19,3 +19,12 @@ $checkbox-ionic-border-width: 1px !default;
 /// With a default size of 24px, the border radius is calculated as 24px / 4 - 2px = 4px
 /// With a small size of 16px, the border radius is calculated as 16px / 4 - 2px = 2px;
 $checkbox-ionic-border-radius: calc(var(--size) / 4 - 2px) !default;
+
+/// @prop - Icon size of the checkbox for the small size
+$checkbox-ionic-small-size: 16px !default;
+
+/// @prop - Padding top of the checkbox for the small size
+$checkbox-ionic-small-padding-top: 16px !default;
+
+/// @prop - Padding bottom of the button for the small size
+$checkbox-ionic-small-padding-bottom: 16px !default;

core/src/components/checkbox/checkbox.tsx

@@ -98,6 +98,11 @@ export class Checkbox implements ComponentInterface {
    */
   @Prop() alignment: 'start' | 'center' = 'center';
 
+  /**
+   * Set to `"small"` for a checkbox with less height and padding.
+   */
+  @Prop() size?: 'small';
+
   /**
    * Emitted when the checked property has changed
    * as a result of a user action such as a click.
@@ -181,6 +186,7 @@ export class Checkbox implements ComponentInterface {
       name,
       value,
       alignment,
+      size,
     } = this;
     const theme = getIonTheme(this);
 
@@ -201,6 +207,7 @@ export class Checkbox implements ComponentInterface {
           [`checkbox-justify-${justify}`]: true,
           [`checkbox-alignment-${alignment}`]: true,
           [`checkbox-label-placement-${labelPlacement}`]: true,
+          [`checkbox-size-${size}`]: size !== undefined,
         })}
         onClick={this.onClick}
       >
@@ -252,6 +259,12 @@ export class Checkbox implements ComponentInterface {
       ) : (
         <path d="M1.73,12.91 8.1,19.28 22.79,4.59" part="mark" />
       );
+    } else if (theme === 'ionic') {
+      path = indeterminate ? (
+        <path d="M6.5 12H17.5" stroke-linecap="round" part="mark" />
+      ) : (
+        <path d="M6 12.5L10 16.5L18.5 8" stroke-linecap="round" stroke-linejoin="round" part="mark" />
+      );
     }
 
     return path;

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

@@ -123,3 +123,22 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 });
+
+configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: basic visual tests'), () => {
+    test('should have a small size applied correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <div id="checkboxes">
+          <ion-checkbox size="small">Small</ion-checkbox>
+          <ion-checkbox size="small" checked="true">Small - Checked</ion-checkbox>
+        </div>
+      `,
+        config
+      );
+
+      const checkboxes = page.locator('#checkboxes');
+      await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-small`));
+    });
+  });
+});

packages/angular/src/directives/proxies.ts

@@ -509,14 +509,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {}
 
 
 @ProxyCmp({
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'theme', 'value']
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'size', 'theme', 'value']
 })
 @Component({
   selector: 'ion-checkbox',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'theme', 'value'],
+  inputs: ['alignment', 'checked', 'color', 'disabled', 'indeterminate', 'justify', 'labelPlacement', 'mode', 'name', 'size', 'theme', 'value'],
 })
 export class IonCheckbox {
   protected el: HTMLElement;

packages/vue/src/proxies.ts

@@ -217,6 +217,7 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
   'labelPlacement',
   'justify',
   'alignment',
+  'size',
   'ionChange',
   'ionFocus',
   'ionBlur'