Skip to content

Commit 9d2675e

Browse files
OS-martacarlosOS-martacarlos
committed
Merge branch 'next' into ROU-11632
2 parents f2a9b59 + 02c9d64 commit 9d2675e

File tree

57 files changed

+494
-16
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+494
-16
lines changed

‎core/api.txt‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
185185
ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>
186186

187187
ion-avatar,shadow
188+
ion-avatar,prop,disabled,boolean,false,false,false
188189
ion-avatar,prop,mode,"ios" | "md",undefined,false,false
189190
ion-avatar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
190191
ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false

‎core/src/components.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -343,6 +343,10 @@ export namespace Components {
343343
"theme"?: "ios" | "md" | "ionic";
344344
}
345345
interface IonAvatar {
346+
/**
347+
* If `true`, the user cannot interact with the avatar.
348+
*/
349+
"disabled": boolean;
346350
/**
347351
* The mode determines the platform behaviors of the component.
348352
*/
@@ -5776,6 +5780,10 @@ declare namespace LocalJSX {
57765780
"theme"?: "ios" | "md" | "ionic";
57775781
}
57785782
interface IonAvatar {
5783+
/**
5784+
* If `true`, the user cannot interact with the avatar.
5785+
*/
5786+
"disabled"?: boolean;
57795787
/**
57805788
* The mode determines the platform behaviors of the component.
57815789
*/

‎core/src/components/avatar/avatar.ionic.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,3 +171,9 @@
171171
:host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
172172
transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100));
173173
}
174+
175+
// Avatar Disabled
176+
// --------------------------------------------------
177+
:host(.avatar-disabled)::before {
178+
@include globals.disabled-state();
179+
}

‎core/src/components/avatar/avatar.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@ export class Avatar implements ComponentInterface {
4040
*/
4141
@Prop() shape?: 'soft' | 'round' | 'rectangular';
4242

43+
/**
44+
* If `true`, the user cannot interact with the avatar.
45+
*/
46+
@Prop() disabled = false;
47+
4348
get hasImage() {
4449
return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
4550
}
@@ -81,6 +86,7 @@ export class Avatar implements ComponentInterface {
8186
}
8287

8388
render() {
89+
const { hasImage, hasIcon, disabled } = this;
8490
const theme = getIonTheme(this);
8591
const size = this.getSize();
8692
const shape = this.getShape();
@@ -91,8 +97,9 @@ export class Avatar implements ComponentInterface {
9197
[theme]: true,
9298
[`avatar-${size}`]: size !== undefined,
9399
[`avatar-${shape}`]: shape !== undefined,
94-
[`avatar-image`]: this.hasImage,
95-
[`avatar-icon`]: this.hasIcon,
100+
[`avatar-image`]: hasImage,
101+
[`avatar-icon`]: hasIcon,
102+
[`avatar-disabled`]: disabled,
96103
}}
97104
>
98105
<slot></slot>

‎core/src/components/avatar/test/states/avatar.e2e.ts‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { expect } from '@playwright/test';
2+
import { configs, test } from '@utils/test/playwright';
3+
4+
/**
5+
* Avatar does not test RTL behaviors.
6+
* Usages of Avatar in slots are tested in components that use Avatar.
7+
*/
8+
configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screenshot, title }) => {
9+
test.describe(title('avatar: states'), () => {
10+
test('should not have visual regressions', async ({ page }) => {
11+
await page.setContent(
12+
`
13+
<div id="container">
14+
<ion-avatar disabled> AV </ion-avatar>
15+
<ion-avatar disabled>
16+
<img src="/src/components/avatar/test/avatar.svg" />
17+
</ion-avatar>
18+
</div>
19+
`,
20+
config
21+
);
22+
const container = page.locator('#container');
23+
24+
await expect(container).toHaveScreenshot(screenshot(`avatar-disabled`));
25+
});
26+
});
27+
});

‎core/src/components/avatar/test/states/avatar.e2e.ts-snapshots/avatar-disabled-ionic-md-ltr-light-Mobile-Chrome-linux.png‎

2.01 KB
Loading

‎core/src/components/avatar/test/states/avatar.e2e.ts-snapshots/avatar-disabled-ionic-md-ltr-light-Mobile-Firefox-linux.png‎

2.99 KB
Loading

‎core/src/components/avatar/test/states/avatar.e2e.ts-snapshots/avatar-disabled-ionic-md-ltr-light-Mobile-Safari-linux.png‎

2.15 KB
Loading

‎core/src/components/avatar/test/states/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Avatar - States</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
17+
<body>
18+
<ion-app>
19+
<ion-header>
20+
<ion-toolbar>
21+
<ion-title>Avatar - States</ion-title>
22+
</ion-toolbar>
23+
</ion-header>
24+
25+
<ion-content>
26+
<h3>Disabled</h3>
27+
<ion-avatar disabled>AV</ion-avatar>
28+
<ion-avatar disabled>
29+
<img src="/src/components/avatar/test/avatar.svg" />
30+
</ion-avatar>
31+
</ion-content>
32+
</ion-app>
33+
</body>
34+
</html>

‎core/src/components/badge/badge.common.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -51,15 +51,15 @@
5151
// Badge Empty (hint)
5252
// --------------------------------------------------
5353

54-
:host([vertical]) {
54+
:host([vertical]:not(.in-tab-button)) {
5555
@include position(null, 0, null, null);
5656
position: absolute;
5757
}
5858

59-
:host(:empty.badge-vertical-top) {
59+
:host(:not(.in-tab-button):empty.badge-vertical-top) {
6060
top: 0;
6161
}
6262

63-
:host(:empty.badge-vertical-bottom) {
63+
:host(:not(.in-tab-button):empty.badge-vertical-bottom) {
6464
bottom: 0;
6565
}

0 commit comments

Comments
 (0)