diff --git a/core/api.txt b/core/api.txt index f3fdbbd60a..5d4d862586 100644 --- a/core/api.txt +++ b/core/api.txt @@ -346,6 +346,7 @@ ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "second 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,true ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false ion-chip,css-prop,--background ion-chip,css-prop,--color diff --git a/core/src/components/chip/test/shape/chip.e2e.ts b/core/src/components/chip/test/shape/chip.e2e.ts new file mode 100644 index 0000000000..49c5007d30 --- /dev/null +++ b/core/src/components/chip/test/shape/chip.e2e.ts @@ -0,0 +1,57 @@ +import { expect } from '@playwright/test'; +import { configs, test } from '@utils/test/playwright'; + +configs({ modes: ['ionic-md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => { + /** + * This behavior only applies to Ionic Theme. + */ + test.describe(title('chip: shape'), () => { + test.describe('default', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/chip/test/shape`, config); + + await page.setIonViewport(); + + const container = page.locator('#default'); + + await expect(container).toHaveScreenshot(screenshot(`chip-round`)); + }); + }); + + test.describe('soft', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/chip/test/shape`, config); + + await page.setIonViewport(); + + const container = page.locator('#soft'); + + await expect(container).toHaveScreenshot(screenshot(`chip-soft`)); + }); + }); + + test.describe('round', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/chip/test/shape`, config); + + await page.setIonViewport(); + + const container = page.locator('#round'); + + await expect(container).toHaveScreenshot(screenshot(`chip-round`)); + }); + }); + + test.describe('rectangular', () => { + test('should not have visual regressions', async ({ page }) => { + await page.goto(`/src/components/chip/test/shape`, config); + + await page.setIonViewport(); + + const container = page.locator('#rectangular'); + + await expect(container).toHaveScreenshot(screenshot(`chip-rectangular`)); + }); + }); + }); +}); 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 new file mode 100644 index 0000000000..60ccd54a80 Binary files /dev/null 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 new file mode 100644 index 0000000000..95041531a9 Binary files /dev/null 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 new file mode 100644 index 0000000000..419182f857 Binary files /dev/null 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 new file mode 100644 index 0000000000..ffae743b5f Binary files /dev/null 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 new file mode 100644 index 0000000000..058d6ff4dc Binary files /dev/null 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 new file mode 100644 index 0000000000..bd132a9eab Binary files /dev/null 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 new file mode 100644 index 0000000000..77d97eab80 Binary files /dev/null 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 new file mode 100644 index 0000000000..e6ccea4896 Binary files /dev/null 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 new file mode 100644 index 0000000000..a2abe12966 Binary files /dev/null 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/shape/index.html b/core/src/components/chip/test/shape/index.html new file mode 100644 index 0000000000..59ebedad8e --- /dev/null +++ b/core/src/components/chip/test/shape/index.html @@ -0,0 +1,59 @@ + + + + + Chip - Ionic States + + + + + + + + + + + +

Chip - Shape

+ + +

Shapes

+

+ + Default + + + Soft + + + Round + + + Rectangular + + + + + + + diff --git a/packages/angular/src/directives/proxies.ts b/packages/angular/src/directives/proxies.ts index acec987bcf..c4142fecb0 100644 --- a/packages/angular/src/directives/proxies.ts +++ b/packages/angular/src/directives/proxies.ts @@ -550,14 +550,14 @@ setting the checked property. @ProxyCmp({ - inputs: ['color', 'disabled', 'mode', 'outline', 'theme'] + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'] }) @Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'disabled', 'mode', 'outline', 'theme'], + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', '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 d735d65f0b..2acc29d6c2 100644 --- a/packages/angular/standalone/src/directives/proxies.ts +++ b/packages/angular/standalone/src/directives/proxies.ts @@ -613,14 +613,14 @@ export declare interface IonCardTitle extends Components.IonCardTitle {} @ProxyCmp({ defineCustomElementFn: defineIonChip, - inputs: ['color', 'disabled', 'mode', 'outline', 'theme'] + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'] }) @Component({ selector: 'ion-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: '', // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property - inputs: ['color', 'disabled', 'mode', 'outline', 'theme'], + inputs: ['color', 'disabled', 'mode', 'outline', 'shape', 'theme'], standalone: true }) export class IonChip { diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index 30d640d44f..56fbc533be 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -227,7 +227,8 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer('ion-chip', defineIonChip, [ 'color', 'outline', - 'disabled' + 'disabled', + 'shape' ]);