diff --git a/core/api.txt b/core/api.txt index 265d97e286..0b514e6580 100644 --- a/core/api.txt +++ b/core/api.txt @@ -578,6 +578,7 @@ ion-chip,prop,disabled,boolean,false,false,false ion-chip,prop,mode,"ios" | "md",undefined,false,false ion-chip,prop,outline,boolean,false,false,false ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false +ion-chip,prop,size,"large" | "small" | undefined,undefined,false,false ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-chip,css-prop,--background,ios ion-chip,css-prop,--background,md diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 71dd452d1b..d9802a3b7c 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -766,6 +766,10 @@ export namespace Components { * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes. */ "shape"?: 'soft' | 'round' | 'rectangular'; + /** + * Set to `"small"` for a chip with less height and padding. Defaults to `"large"` for the ionic theme, and undefined for all other themes. + */ + "size"?: 'small' | 'large'; /** * The theme determines the visual appearance of the component. */ @@ -6026,6 +6030,10 @@ declare namespace LocalJSX { * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes. */ "shape"?: 'soft' | 'round' | 'rectangular'; + /** + * Set to `"small"` for a chip with less height and padding. Defaults to `"large"` for the ionic theme, and undefined for all other themes. + */ + "size"?: 'small' | 'large'; /** * The theme determines the visual appearance of the component. */ diff --git a/core/src/components/chip/chip.ionic.scss b/core/src/components/chip/chip.ionic.scss index c3f4fc5e7b..021e18d42a 100644 --- a/core/src/components/chip/chip.ionic.scss +++ b/core/src/components/chip/chip.ionic.scss @@ -1,4 +1,5 @@ @use "../../themes/ionic/ionic.globals.scss" as globals; +@use "../../foundations/ionic.vars.scss" as tokens; // Ionic Chip // -------------------------------------------------- @@ -9,13 +10,12 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi :host { --background: #{globals.$ionic-color-neutral-10}; - --border-color: transparent; --color: #{globals.$ionic-color-neutral-900}; --focus-ring-color: #{$ionic-states-focus-primary}; --focus-ring-width: #{globals.$ionic-border-size-medium}; @include globals.font-smoothing; - @include globals.padding(globals.$ionic-space-xs, globals.$ionic-space-xxs); + @include globals.padding(globals.$ionic-space-xxs, globals.$ionic-space-xs); @include globals.border-radius(var(--border-radius)); display: inline-flex; @@ -27,18 +27,10 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi gap: globals.$ionic-space-xxxs; - min-height: 32px; - - border-width: globals.$ionic-border-size-small; - border-style: solid; - - border-color: var(--border-color); - background: var(--background); color: var(--color); font-family: globals.$ionic-font-family; - font-size: globals.$ionic-font-size-m; font-weight: globals.$ionic-font-weight-medium; line-height: globals.$ionic-font-line-height-full; @@ -57,6 +49,8 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi :host(.chip-outline) { --background: transparent; + border-width: globals.$ionic-border-size-small; + border-color: globals.$ionic-color-neutral-100; } @@ -105,3 +99,18 @@ $ionic-states-hover: #{rgba(#05080f, 0.16)}; // We should review how to make thi ::slotted(ion-icon) { font-size: globals.$ionic-font-size-l; } + +// Size +// --------------------------------------------- + +:host(.chip-small) { + min-height: 24px; + + font-size: #{tokens.$ionic-font-size-s}; +} + +:host(.chip-large) { + min-height: 32px; + + font-size: globals.$ionic-font-size-m; +} diff --git a/core/src/components/chip/chip.tsx b/core/src/components/chip/chip.tsx index c696faff15..be7c9b218b 100644 --- a/core/src/components/chip/chip.tsx +++ b/core/src/components/chip/chip.tsx @@ -1,5 +1,6 @@ import type { ComponentInterface } from '@stencil/core'; import { Component, Host, Prop, h } from '@stencil/core'; +import { printIonWarning } from '@utils/logging'; import { createColorClasses } from '@utils/theme'; import { getIonTheme } from '../../global/ionic-global'; @@ -57,8 +58,31 @@ export class Chip implements ComponentInterface { return shape; } + /** + * Set to `"small"` for a chip with less height and padding. + * + * Defaults to `"large"` for the ionic theme, and undefined for all other themes. + */ + @Prop() size?: 'small' | 'large'; + + private getSize() { + const theme = getIonTheme(this); + const { size } = this; + + if (theme === 'ionic') { + return size !== undefined ? size : 'large'; + // TODO(ROU-10695): remove the size !== undefined when we add support for + // the `ios` and `md` themes. + } else if (size !== undefined) { + printIonWarning(`The "${size}" size is not supported in the ${theme} theme.`); + } + + return undefined; + } + render() { const theme = getIonTheme(this); + const size = this.getSize(); const shape = this.getShape(); @@ -72,6 +96,7 @@ export class Chip implements ComponentInterface { 'chip-disabled': this.disabled, 'ion-activatable': true, 'ion-focusable': !this.disabled, + [`chip-${size}`]: size !== undefined, })} > diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png index 813f5aac93..59e9ade49e 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png index 62ab028181..1bdd33bb8b 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png index 2e23685601..0eeccf2a8e 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-default-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png index 5871f22c71..56cf5e729a 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png index 39924d24f6..34b2422e83 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png index 0f833b7aec..05d9074fe7 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png index d277c92182..1be0c9b8b7 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png index 8a72b5585b..288c864038 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png index 7a03947599..8ae57a67d6 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png index 6e694b435d..dfa26770af 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png index 6bb996fcd7..288d62071c 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png index ded190b59f..d863875239 100644 Binary files a/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts b/core/src/components/chip/test/size/chip.e2e.ts new file mode 100644 index 0000000000..49240d225d --- /dev/null +++ b/core/src/components/chip/test/size/chip.e2e.ts @@ -0,0 +1,35 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +/** + * This behavior does not vary across modes/directions. + */ +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + test.describe(title('chip: size'), () => { + test('should render small chip', async ({ page }) => { + await page.setContent( + ` + Small + `, + config + ); + + const chip = page.locator('ion-chip'); + + await expect(chip).toHaveScreenshot(screenshot(`chip-size-small`)); + }); + + test('should render large chip', async ({ page }) => { + await page.setContent( + ` + Large + `, + config + ); + + const chip = page.locator('ion-chip'); + + await expect(chip).toHaveScreenshot(screenshot(`chip-size-large`)); + }); + }); +}); diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..4a867ef4de Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..6c1f9ef0f9 Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..fa266edcf4 Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-large-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png new file mode 100644 index 0000000000..89f4cf3248 Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png new file mode 100644 index 0000000000..ae2f612d7a Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png new file mode 100644 index 0000000000..3c30ae4e65 Binary files /dev/null and b/core/src/components/chip/test/size/chip.e2e.ts-snapshots/chip-size-small-ionic-md-ltr-light-Mobile-Safari-linux.png differ diff --git a/core/src/components/chip/test/size/index.html b/core/src/components/chip/test/size/index.html new file mode 100644 index 0000000000..2ca4ff9c64 --- /dev/null +++ b/core/src/components/chip/test/size/index.html @@ -0,0 +1,162 @@ + + + + + Chip - Size + + + + + + + + + + + + + + Chip - Size + + + + +

Default Size

+
+
+ + Default + +
+ +
+ + + With Icon + +
+ +
+ + + + + With Avatar + +
+ +
+ + + + + With Icon and Avatar + + +
+
+ +

Small

+ +
+
+ + Default + +
+ +
+ + + With Icon + +
+ +
+ + + + + With Avatar + +
+ +
+ + + + + With Icon and Avatar + + +
+
+ +

Large

+ +
+
+ + Default + +
+ +
+ + + With Icon + +
+ +
+ + + + + With Avatar + +
+ +
+ + + + + With Icon and Avatar + + +
+
+ + + + diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png index 027ee36151..4d6d35730c 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Chrome-linux.png differ diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png index 0b858bf886..257c9640d2 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Firefox-linux.png differ diff --git a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png index 52f8a29ee5..ef740fa440 100644 Binary files a/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/components/chip/test/states/chip.e2e.ts-snapshots/chip-focused-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 7f2b3e83ea..552e9cecbe 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -549,14 +549,14 @@ setting the `checked` property. @ProxyCmp({ - inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'] + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme'] }) @Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'], + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme'], }) export class IonChip { protected el: HTMLElement; diff --git a/packages/angular/standalone/src/directives/proxies.ts b/packages/angular/standalone/src/directives/proxies.ts index 621703b647..76ae26028a 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -612,14 +612,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {} @ProxyCmp({ defineCustomElementFn: defineIonChip, - inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'] + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme'] }) @Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'], + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'size', 'theme'], standalone: true }) export class IonChip { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 82e8e5a482..b114af9f1a 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -231,7 +231,8 @@ export const IonChip = /*@__PURE__*/ defineContainer('ion-chip', de 'color', 'outline', 'disabled', - 'shape' + 'shape', + 'size' ]);