javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 06:57:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

Added new chip tests and baselines

Browse Source
This commit is contained in:
Bernardo Cardoso
2024-04-09 10:49:57 +01:00
parent 9238854966
commit 58c0ab8731
15 changed files with 123 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
core/api.txt
View File

@ -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

57
core/src/components/chip/test/shape/chip.e2e.ts Normal file
View File

@ -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`));
});
});
});
});

BIN
core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-rectangular-ionic-md-ltr-light-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-round-ionic-md-ltr-light-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Chrome-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Firefox-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
core/src/components/chip/test/shape/chip.e2e.ts-snapshots/chip-soft-ionic-md-ltr-light-Mobile-Safari-linux.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 893 B

59
core/src/components/chip/test/shape/index.html Normal file
View File

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Chip - Ionic States</title>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
</head>
<body>
<ion-app>
<ion-content>
<h2>Chip - Shape</h2>
<h3>Shapes</h3>
<p>
<ion-chip id="default">
<ion-label>Default</ion-label>
</ion-chip>
<ion-chip id="soft" shape="soft">
<ion-label>Soft</ion-label>
</ion-chip>
<ion-chip id="round" shape="round">
<ion-label>Round</ion-label>
</ion-chip>
<ion-chip id="rectangular" shape="rectangular">
<ion-label>Rectangular</ion-label>
</ion-content>
</ion-app>
<style>
ion-content {
--background: #222;
}
h2,
h3 {
color: #fff;
padding-left: 16px;
}
p {
padding-left: 8px;
}
ion-chip + ion-chip {
margin-inline-start: 16px;
}
</style>
</body>
</html>

4
packages/angular/src/directives/proxies.ts
View File

@ -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: '<ng-content></ng-content>',
// 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;

4
packages/angular/standalone/src/directives/proxies.ts
View File

@ -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: '<ng-content></ng-content>',
// 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 {

3
packages/vue/src/proxies.ts
View File

@ -227,7 +227,8 @@ export const IonCheckbox = /*@__PURE__*/ defineContainer<JSX.IonCheckbox, JSX.Io
export const IonChip = /*@__PURE__*/ defineContainer<JSX.IonChip>('ion-chip', defineIonChip, [
'color',
'outline',
'disabled'
'disabled',
'shape'
]);