- add disabled attribute to Avatar;

Author: JoaoFerreira-FrontEnd

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) {
+  @include globals.disabled-state();
+}

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>

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'
 ]);