[EuiAvatar] Added isDisabled Property to the EuiAvatar tag

src-docs/src/views/avatar/avatar_initials.js

@@ -33,5 +33,18 @@ export default () => (
       initials="En"
       initialsLength={2}
     />
+    <EuiSpacer />
+    <EuiTitle size="xs">
+      <h4>Disabled Type</h4>
+    </EuiTitle>
+    <EuiSpacer />
+    <EuiAvatar
+      size="m"
+      type="space"
+      name="Disabled Button"
+      initials="Di"
+      initialsLength={2}
+      isDisabled={true}
+    />
   </div>
 );

src/components/avatar/_avatar.scss

@@ -18,6 +18,11 @@
   border-radius: $euiBorderRadius;
 }
 
+.euiAvatar--disabled {
+  cursor: not-allowed;
+  filter: grayscale(100%);
+}
+
 // Modifiers for sizing.
 $avatarSizing: (
   s: (

src/components/avatar/avatar.tsx

@@ -73,6 +73,7 @@ export type EuiAvatarProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'> &
     type?: EuiAvatarType;
     imageUrl?: string;
     size?: EuiAvatarSize;
+    isDisabled?: boolean;
   };
 
 export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
@@ -84,6 +85,7 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
   name,
   size = 'm',
   type = 'user',
+  isDisabled = false,
   ...rest
 }) => {
   const visColors = euiPaletteColorBlindBehindText();
@@ -92,7 +94,8 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
     'euiAvatar',
     sizeToClassNameMap[size],
     typeToClassNameMap[type],
-    className
+    className,
+    isDisabled ? 'euiAvatar--disabled' : ''
   );
 
   checkValidColor(color);