[EuiAvatar] Added isDisabled Property to the EuiAvatar tag

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Added support for all `color`s of `EuiPanel` ([#4504](https://github.com/elastic/eui/pull/4504))
 - Added `hasBorder` prop to `EuiPanel` ([#4504](https://github.com/elastic/eui/pull/4504))
 - Added `labelProps` prop to `EuiRadio`, `EuiSwitch` and `EuiCheckbox` ([#4516](https://github.com/elastic/eui/pull/4516))
+- Added `isDisabled` prop to `EuiAvatar` ([#4549](https://github.com/elastic/eui/pull/4549))
 
 **Bug fixes**
 

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

@@ -33,5 +33,34 @@ export default () => (
       initials="En"
       initialsLength={2}
     />
+    <EuiSpacer />
+    <EuiTitle size="xs">
+      <h4>Disabled</h4>
+    </EuiTitle>
+    <EuiSpacer />
+    <EuiAvatar
+      size="m"
+      type="space"
+      name="Disabled"
+      initials="Di"
+      initialsLength={2}
+      isDisabled={true}
+    />
+    &emsp;
+    <EuiAvatar
+      size="m"
+      type="user"
+      name="User"
+      initials="En"
+      initialsLength={2}
+      isDisabled={true}
+    />
+    &emsp;
+    <EuiAvatar
+      size="m"
+      name="Cat"
+      imageUrl="https://source.unsplash.com/64x64/?cat"
+      isDisabled={true}
+    />
   </div>
 );

src/components/avatar/__snapshots__/avatar.test.tsx.snap

@@ -86,6 +86,21 @@ exports[`EuiAvatar props initialsLength is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiAvatar props isDisabled is rendered 1`] = `
+<div
+  aria-label="name"
+  class="euiAvatar euiAvatar--m euiAvatar--user euiAvatar-isDisabled"
+  style="background-image:none;background-color:#e4a6c7;color:#000000"
+  title="name"
+>
+  <span
+    aria-hidden="true"
+  >
+    n
+  </span>
+</div>
+`;
+
 exports[`EuiAvatar props size l is rendered 1`] = `
 <div
   aria-label="name"

src/components/avatar/_avatar.scss

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

src/components/avatar/avatar.test.tsx

@@ -88,6 +88,14 @@ describe('EuiAvatar', () => {
         expect(component).toMatchSnapshot();
       });
     });
+
+    describe('isDisabled', () => {
+      it('is rendered', () => {
+        const component = render(<EuiAvatar name="name" isDisabled={true} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
   });
 
   test('should throw error if color is not a hex', () => {

src/components/avatar/avatar.tsx

@@ -73,6 +73,11 @@ export type EuiAvatarProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'> &
     type?: EuiAvatarType;
     imageUrl?: string;
     size?: EuiAvatarSize;
+
+    /**
+     * Grays out the avatar to simulate being disabled
+     */
+    isDisabled?: boolean;
   };
 
 export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
@@ -84,6 +89,7 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
   name,
   size = 'm',
   type = 'user',
+  isDisabled = false,
   ...rest
 }) => {
   const visColors = euiPaletteColorBlindBehindText();
@@ -92,6 +98,9 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
     'euiAvatar',
     sizeToClassNameMap[size],
     typeToClassNameMap[type],
+    {
+      'euiAvatar-isDisabled': isDisabled,
+    },
     className
   );