feat(avatar): add disabled property

core/api.txt

@@ -185,6 +185,7 @@ ion-app,prop,theme,"ios" | "md" | "ionic",undefined,false,false
 ion-app,method,setFocus,setFocus(elements: HTMLElement[]) => Promise<void>
 
 ion-avatar,shadow
+ion-avatar,prop,disabled,boolean,false,false,false
 ion-avatar,prop,mode,"ios" | "md",undefined,false,false
 ion-avatar,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-avatar,prop,size,"large" | "medium" | "small" | "xlarge" | "xsmall" | "xxsmall" | undefined,undefined,false,false

core/src/components.d.ts

@@ -343,6 +343,10 @@ export namespace Components {
         "theme"?: "ios" | "md" | "ionic";
     }
     interface IonAvatar {
+        /**
+          * If `true`, the user cannot interact with the avatar.
+         */
+        "disabled": boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */
@@ -5759,6 +5763,10 @@ declare namespace LocalJSX {
         "theme"?: "ios" | "md" | "ionic";
     }
     interface IonAvatar {
+        /**
+          * If `true`, the user cannot interact with the avatar.
+         */
+        "disabled"?: boolean;
         /**
           * The mode determines the platform behaviors of the component.
          */

core/src/components/avatar/avatar.common.scss

@@ -25,3 +25,10 @@
 
   overflow: hidden;
 }
+
+// Disabled Checkbox
+// ---------------------------------------------
+
+:host(.avatar-disabled) {
+  pointer-events: none;
+}

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

@@ -171,3 +171,9 @@
 :host(.avatar-xxsmall) ::slotted(ion-badge.badge-vertical-bottom:empty) {
   transform: translate(globals.$ion-scale-100, calc(globals.$ion-scale-100));
 }
+
+// Avatar Disabled
+// --------------------------------------------------
+:host(.avatar-disabled) {
+  opacity: 0.6;
+}

core/src/components/avatar/avatar.tsx

@@ -40,6 +40,11 @@ export class Avatar implements ComponentInterface {
    */
   @Prop() shape?: 'soft' | 'round' | 'rectangular';
 
+  /**
+   * If `true`, the user cannot interact with the avatar.
+   */
+  @Prop() disabled = false;
+
   get hasImage() {
     return !!this.el.querySelector('ion-img') || !!this.el.querySelector('img');
   }
@@ -93,6 +98,7 @@ export class Avatar implements ComponentInterface {
           [`avatar-${shape}`]: shape !== undefined,
           [`avatar-image`]: this.hasImage,
           [`avatar-icon`]: this.hasIcon,
+          [`avatar-disabled`]: this.disabled,
         }}
       >
         <slot></slot>

core/src/components/avatar/test/basic/avatar.e2e.ts

@@ -14,11 +14,15 @@ configs({ directions: ['ltr'] }).forEach(({ config, screenshot, title }) => {
       const avatarChip = page.locator('#avatar-chip');
       const avatarItemStart = page.locator('#avatar-item-start');
       const avatarItemEnd = page.locator('#avatar-item-end');
+      const avatarCharactersDisabled = page.locator('#avatar-characters-disabled');
+      const avatarDisabled = page.locator('#avatar-disabled');
 
       await expect(avatar).toHaveScreenshot(screenshot(`avatar-diff`));
       await expect(avatarChip).toHaveScreenshot(screenshot(`avatar-chip-diff`));
       await expect(avatarItemStart).toHaveScreenshot(screenshot(`avatar-item-start-diff`));
       await expect(avatarItemEnd).toHaveScreenshot(screenshot(`avatar-item-end-diff`));
+      await expect(avatarCharactersDisabled).toHaveScreenshot(screenshot(`avatar-characters-disabled-diff`));
+      await expect(avatarDisabled).toHaveScreenshot(screenshot(`avatar-disabled-diff`));
     });
   });
 });

core/src/components/avatar/test/basic/index.html

@@ -47,6 +47,16 @@
           </ion-avatar>
           <ion-label>Wide Avatar</ion-label>
         </ion-item>
+
+        <ion-item id="avatar-characters-disabled">
+          <ion-avatar disabled> AV </ion-avatar>
+        </ion-item>
+
+        <ion-item id="avatar-disabled">
+          <ion-avatar disabled>
+            <img src="/src/components/avatar/test/avatar.svg" />
+          </ion-avatar>
+        </ion-item>
       </ion-content>
     </ion-app>
   </body>

core/src/components/avatar/test/shape/avatar.e2e.ts

@@ -188,5 +188,188 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
         await expect(container).toHaveScreenshot(screenshot(`avatar-shape-soft-image`));
       });
     });
+
+    test.describe('round-disabled', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="round" disabled>AB</ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-disabled-shape-round-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="round" disabled>
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-disabled-shape-round-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="round" disabled>
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-disabled-shape-round-image`));
+      });
+    });
+
+    test.describe('rectangular-disabled', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="rectangular" disabled>AB</ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-disabled-shape-rectangular-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="rectangular" disabled>
+            <ion-icon name="person-outline"></ion-icon>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-disabled-shape-rectangular-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <ion-avatar shape="rectangular" disabled>
+            <img src="/src/components/avatar/test/avatar.svg"/>
+          </ion-avatar>
+        `,
+          config
+        );
+
+        const avatar = page.locator('ion-avatar');
+
+        await expect(avatar).toHaveScreenshot(screenshot(`avatar-disabled-shape-rectangular-image`));
+      });
+    });
+
+    test.describe('soft-disabled', () => {
+      test('should not have visual regressions when containing text', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            #container {
+              display: flex;
+              gap: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-avatar disabled shape="soft" size="xxsmall">A</ion-avatar>
+            <ion-avatar disabled shape="soft" size="xsmall">AB</ion-avatar>
+            <ion-avatar disabled shape="soft" size="small">AB</ion-avatar>
+            <ion-avatar disabled shape="soft">AB</ion-avatar>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('#container');
+
+        await expect(container).toHaveScreenshot(screenshot(`avatar-disabled-shape-soft-text`));
+      });
+
+      test('should not have visual regressions when containing an icon', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            #container {
+              display: flex;
+              gap: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-avatar disabled shape="soft" size="xxsmall">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
+            <ion-avatar disabled shape="soft" size="xsmall">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
+            <ion-avatar disabled shape="soft" size="small">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
+            <ion-avatar disabled shape="soft">
+              <ion-icon name="person-outline"></ion-icon>
+            </ion-avatar>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('#container');
+
+        await expect(container).toHaveScreenshot(screenshot(`avatar-disabled-shape-soft-icon`));
+      });
+
+      test('should not have visual regressions when containing an image', async ({ page }) => {
+        await page.setContent(
+          `
+          <style>
+            #container {
+              display: flex;
+              gap: 10px;
+            }
+          </style>
+
+          <div id="container">
+            <ion-avatar disabled shape="soft" size="xxsmall">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
+            <ion-avatar disabled shape="soft" size="xsmall">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
+            <ion-avatar disabled shape="soft" size="small">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
+            <ion-avatar disabled shape="soft">
+              <img src="/src/components/avatar/test/avatar.svg"/>
+            </ion-avatar>
+          </div>
+        `,
+          config
+        );
+
+        const container = page.locator('#container');
+
+        await expect(container).toHaveScreenshot(screenshot(`avatar-disabled-shape-soft-image`));
+      });
+    });
   });
 });

core/src/components/avatar/test/shape/index.html

@@ -70,6 +70,36 @@ <h2>Rectangular</h2>
           <ion-avatar shape="rectangular" size="large">AB</ion-avatar>
           <ion-avatar shape="rectangular" size="xlarge">AB</ion-avatar>
         </div>
+
+        <h2>Soft Disabled</h2>
+        <div class="container">
+          <ion-avatar disabled shape="soft" size="xxsmall">A</ion-avatar>
+          <ion-avatar disabled shape="soft" size="xsmall">AB</ion-avatar>
+          <ion-avatar disabled shape="soft" size="small">AB</ion-avatar>
+          <ion-avatar disabled shape="soft" size="medium">AB</ion-avatar>
+          <ion-avatar disabled shape="soft" size="large">AB</ion-avatar>
+          <ion-avatar disabled shape="soft" size="xlarge">AB</ion-avatar>
+        </div>
+
+        <h2>Round Disabled</h2>
+        <div class="container">
+          <ion-avatar disabled shape="round" size="xxsmall">A</ion-avatar>
+          <ion-avatar disabled shape="round" size="xsmall">AB</ion-avatar>
+          <ion-avatar disabled shape="round" size="small">AB</ion-avatar>
+          <ion-avatar disabled shape="round" size="medium">AB</ion-avatar>
+          <ion-avatar disabled shape="round" size="large">AB</ion-avatar>
+          <ion-avatar disabled shape="round" size="xlarge">AB</ion-avatar>
+        </div>
+
+        <h2>Rectangular Disabled</h2>
+        <div class="container">
+          <ion-avatar disabled shape="rectangular" size="xxsmall">A</ion-avatar>
+          <ion-avatar disabled shape="rectangular" size="xsmall">AB</ion-avatar>
+          <ion-avatar disabled shape="rectangular" size="small">AB</ion-avatar>
+          <ion-avatar disabled shape="rectangular" size="medium">AB</ion-avatar>
+          <ion-avatar disabled shape="rectangular" size="large">AB</ion-avatar>
+          <ion-avatar disabled shape="rectangular" size="xlarge">AB</ion-avatar>
+        </div>
       </ion-content>
     </ion-app>
   </body>

packages/angular/src/directives/proxies.ts

@@ -211,14 +211,14 @@ export declare interface IonApp extends Components.IonApp {}
 
 
 @ProxyCmp({
-  inputs: ['mode', 'shape', 'size', 'theme']
+  inputs: ['disabled', 'mode', 'shape', 'size', 'theme']
 })
 @Component({
   selector: 'ion-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['mode', 'shape', 'size', 'theme'],
+  inputs: ['disabled', 'mode', 'shape', 'size', 'theme'],
 })
 export class IonAvatar {
   protected el: HTMLIonAvatarElement;

packages/angular/standalone/src/directives/proxies.ts

@@ -295,14 +295,14 @@ export declare interface IonApp extends Components.IonApp {}
 
 @ProxyCmp({
   defineCustomElementFn: defineIonAvatar,
-  inputs: ['mode', 'shape', 'size', 'theme']
+  inputs: ['disabled', 'mode', 'shape', 'size', 'theme']
 })
 @Component({
   selector: 'ion-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['mode', 'shape', 'size', 'theme'],
+  inputs: ['disabled', 'mode', 'shape', 'size', 'theme'],
   standalone: true
 })
 export class IonAvatar {

packages/vue/src/proxies.ts

@@ -112,7 +112,8 @@ export const IonAccordionGroup: StencilVueComponent<JSX.IonAccordionGroup, JSX.I
 
 export const IonAvatar: StencilVueComponent<JSX.IonAvatar> = /*@__PURE__*/ defineContainer<JSX.IonAvatar>('ion-avatar', defineIonAvatar, [
   'size',
-  'shape'
+  'shape',
+  'disabled'
 ]);