diff --git a/core/api.txt b/core/api.txt index f3fdbbd60a7..5371c36ecb8 100644 --- a/core/api.txt +++ b/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 diff --git a/core/src/components.d.ts b/core/src/components.d.ts index eec75790d3c..12a505f40f2 100644 --- a/core/src/components.d.ts +++ b/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; + /** + * Set to `"small"` for a checkbox with less height and padding. + */ + "size"?: 'small'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/checkbox/checkbox.ionic.scss b/core/src/components/checkbox/checkbox.ionic.scss index 36750fed934..24a841806d2 100644 --- a/core/src/components/checkbox/checkbox.ionic.scss +++ b/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}; +} \ No newline at end of file diff --git a/core/src/components/checkbox/checkbox.ionic.vars.scss b/core/src/components/checkbox/checkbox.ionic.vars.scss index cf922d32cbb..8866af7bc4b 100644 --- a/core/src/components/checkbox/checkbox.ionic.vars.scss +++ b/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; diff --git a/core/src/components/checkbox/checkbox.tsx b/core/src/components/checkbox/checkbox.tsx index c61bcf75dc7..9b294cb843f 100644 --- a/core/src/components/checkbox/checkbox.tsx +++ b/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 { ) : ( ); + } else if (theme === 'ionic') { + path = indeterminate ? ( + + ) : ( + + ); } return path; diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts b/core/src/components/checkbox/test/basic/checkbox.e2e.ts index d6a304393c2..46722b316be 100644 --- a/core/src/components/checkbox/test/basic/checkbox.e2e.ts +++ b/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( + ` +
+ Small + Small - Checked +
+ `, + config + ); + + const checkboxes = page.locator('#checkboxes'); + await expect(checkboxes).toHaveScreenshot(screenshot(`checkbox-small`)); + }); + }); +}); diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png index 8d85254c775..966124e362d 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png index 213673db5ba..34ba2215ca1 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png index 07194b2506e..9e2fe5fbf75 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png index 2690550559d..e63e996eecc 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png index a8c4bef2260..fc0623a285e 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png index 307ccd0ef4e..fc4424fb20c 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-basic-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png index 849e4700770..d27f41dde3d 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png index e6ade1a1746..9654dc2bfbd 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png index c938750aa21..dce3d2d0acb 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png index 8d53b18cdba..3c1726e5c45 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png index b34f4e9d745..c3eacdbdebe 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png index 2a16c739d30..ed92cd423c2 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-checkmark-width-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png index f3871091d1f..6cd3b23e149 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png index 02e8e27dec6..f9dfb12005e 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png index 029ea9e5bfc..354f0605d02 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png index b580a75318b..de6e47320cd 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png index 7277ab9b425..f4ba1ad88b4 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png index 1ecf579ca77..d1994b0b648 100644 Binary files a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-size-ionic-md-rtl-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 00000000000..ed4a9a27f51 Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 00000000000..17c28bc54ae Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 00000000000..153f347bff6 Binary files /dev/null and b/core/src/components/checkbox/test/basic/checkbox.e2e.ts-snapshots/checkbox-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index acec987bcf1..a00dad1b672 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/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: '', // 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; diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 30d640d44f2..c3348339535 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -217,6 +217,7 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer