[EuiAvatar] Adding support for iconType, iconSize, and iconColor

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added `indexRuntime` glyph in `EuiIcon` ([#4650](https://github.com/elastic/eui/pull/4650))
+- Added `iconType`, `iconColor`, and `iconSize` props to `EuiAvatar` ([#4620](https://github.com/elastic/eui/pull/4620))
+- Added `'plain'` and `null` as `color` options of `EuiAvatar` ([#4620](https://github.com/elastic/eui/pull/4620))
 
 ## [`31.11.0`](https://github.com/elastic/eui/tree/v31.11.0)
 

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

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { EuiAvatar } from '../../../../src/components';
+
+export default () => (
+  <div>
+    <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}
+    />
+    &emsp;
+    <EuiAvatar
+      size="m"
+      name="Management"
+      iconType="managementApp"
+      isDisabled={true}
+    />
+  </div>
+);

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

@@ -11,21 +11,50 @@ import Avatar from './avatar';
 const avatarSource = require('!!raw-loader!./avatar');
 const avatarHtml = renderToHtml(Avatar);
 const avatarSnippet = [
-  `<EuiAvatar size="s" name="Raphael" />
+  `<EuiAvatar name="Raphael" />
 `,
   `<EuiAvatar size="s" name="Cat" imageUrl="https://source.unsplash.com/64x64/?cat" />
 `,
+  '<EuiAvatar name="Leonardo" color="#BD10E0" />',
 ];
 
 import AvatarInitials from './avatar_initials';
 const avatarInitialsSource = require('!!raw-loader!./avatar_initials');
 const avatarInitialsHtml = renderToHtml(AvatarInitials);
 const avatarInitialsSnippet = [
-  `<EuiAvatar size="m" type="user" name="Two Words" />
+  `<EuiAvatar name="Kibana" initialsLength={2}/>
 `,
-  `<EuiAvatar size="m" type="space" name="Kibana" initialsLength={2}/>
+  `<EuiAvatar name="Undefined" initials="?" />
 `,
-  `<EuiAvatar size="m" type="space"  name="Engineering Space" initials="En" initialsLength={2} />
+  `<EuiAvatar name="Engineering User" initials="En" initialsLength={2} />
+`,
+];
+
+import AvatarTypes from './avatar_type';
+const avatarTypesSource = require('!!raw-loader!./avatar_type');
+const avatarTypesHtml = renderToHtml(AvatarTypes);
+const avatarTypesSnippet = [
+  `<EuiAvatar type="space" name="Engineering Space" />
+`,
+];
+
+import AvatarIcons from './avatar_icon';
+const avatarIconsSource = require('!!raw-loader!./avatar_icon');
+const avatarIconsHtml = renderToHtml(AvatarIcons);
+const avatarIconsSnippet = [
+  `<EuiAvatar name="Management" iconType="managementApp" />
+`,
+  `<EuiAvatar name="Management" iconType="managementApp" color="#FAFBFD" iconColor={null} />
+`,
+  `<EuiAvatar name="Management" iconType="managementApp" iconSize="l" />
+`,
+];
+
+import AvatarDisabled from './avatar_disabled';
+const avatarDisabledSource = require('!!raw-loader!./avatar_disabled');
+const avatarDisabledHtml = renderToHtml(AvatarDisabled);
+const avatarDisabledSnippet = [
+  `<EuiAvatar isDisabled={true} name="Avatar" />
 `,
 ];
 
@@ -46,8 +75,8 @@ export const AvatarExample = {
       text: (
         <div>
           <p>
-            The <strong>EuiAvatar</strong> component creates a user icon. It
-            will accept <EuiCode>name</EuiCode> (required) and{' '}
+            The <strong>EuiAvatar</strong> component typically creates a user
+            icon. It will accept <EuiCode>name</EuiCode> (required) and{' '}
             <EuiCode>image</EuiCode> props and will configure the display and
             accessibility as needed. By default, the background colors come from
             the set of colors used for visualizations. Otherwise you can pass a
@@ -83,7 +112,26 @@ export const AvatarExample = {
             props. However, the avatar will still always max out at 2
             characters.
           </p>
-          <h3>Types</h3>
+        </div>
+      ),
+      snippet: avatarInitialsSnippet,
+      demo: <AvatarInitials />,
+      props: { EuiAvatar },
+    },
+    {
+      title: 'Types',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: avatarTypesSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: avatarTypesHtml,
+        },
+      ],
+      text: (
+        <div>
           <p>
             The avatar <EuiCode>type</EuiCode>, which primarily defines the
             shape, is keyworded and can be{' '}
@@ -92,8 +140,70 @@ export const AvatarExample = {
           </p>
         </div>
       ),
-      snippet: avatarInitialsSnippet,
-      demo: <AvatarInitials />,
+      snippet: avatarTypesSnippet,
+      demo: <AvatarTypes />,
+      props: { EuiAvatar },
+    },
+    {
+      title: 'Icons',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: avatarIconsSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: avatarIconsHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            Icons can also be displayed instead of initials or images. When
+            simply passing an <EuiCode>iconType</EuiCode>, it will both size and
+            color appropriately based on the other <strong>EuiAvatar</strong>{' '}
+            props. To customize these specifically, pass{' '}
+            <EuiCode>iconSize</EuiCode> and <EuiCode>iconColor</EuiCode>.
+          </p>
+          <p>
+            If your icon has multiples or custom colors like a logo, you can
+            keep the default <EuiCode>iconColor</EuiCode> by passing{' '}
+            <EuiCode>null</EuiCode>. Otherwise it will get the appropriate
+            contrast acceptable variant. Just ensure that you also are providing
+            an accesible background color to match that of the icon&apos;s
+            color.
+          </p>
+        </div>
+      ),
+      snippet: avatarIconsSnippet,
+      demo: <AvatarIcons />,
+      props: { EuiAvatar },
+    },
+    {
+      title: 'Disabled',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: avatarDisabledSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: avatarDisabledHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            While <strong>EuiAvatar</strong> doesn&apos;t accept any interactive
+            behaviors itself, you can create a visually presented disabled
+            avatar by adding <EuiCode>isDisabled</EuiCode> when placed within a
+            disabled element.
+          </p>
+        </div>
+      ),
+      snippet: avatarDisabledSnippet,
+      demo: <AvatarDisabled />,
+      props: { EuiAvatar },
     },
   ],
   playground: avatarConfig,

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

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react';
+import { ThemeContext } from '../../components';
+
+import { EuiAvatar, EuiSpacer, EuiTitle } from '../../../../src/components';
+
+export default () => {
+  const themeContext = useContext(ThemeContext);
+
+  /**
+   * Setup theme based on current light/dark theme
+   */
+  const isDarkTheme = themeContext.theme.includes('dark');
+
+  return (
+    <div>
+      <EuiTitle size="xs">
+        <h2>Avatar colors and sizes</h2>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiAvatar size="s" name="Small size" iconType="managementApp" />
+      &emsp;
+      <EuiAvatar size="m" name="Medium size" iconType="managementApp" />
+      &emsp;
+      <EuiAvatar size="l" name="Large" iconType="managementApp" />
+      &emsp;
+      <EuiAvatar
+        size="xl"
+        color="plain"
+        name="Plain color"
+        iconType="managementApp"
+      />
+      <EuiSpacer />
+      <EuiTitle size="xs">
+        <h2>Icon colors and sizes</h2>
+      </EuiTitle>
+      <EuiSpacer />
+      <EuiAvatar name="Avatar color" iconType="managementApp" color="#BD10E0" />
+      &emsp;
+      <EuiAvatar
+        name="Custom iconColor"
+        iconType="managementApp"
+        color={isDarkTheme ? '#103148' : '#E6F1FA'}
+        iconColor="primary"
+      />
+      &emsp;
+      <EuiAvatar
+        name="Null iconColor"
+        iconType="managementApp"
+        color={isDarkTheme ? '#343741' : '#D3DAE6'}
+        iconColor={null}
+      />
+      &emsp;
+      <EuiAvatar name="Large iconSize" iconType="managementApp" iconSize="l" />
+      &emsp;
+    </div>
+  );
+};

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

@@ -8,59 +8,24 @@ export default () => (
       <h3>Single vs multi-word</h3>
     </EuiTitle>
     <EuiSpacer />
-    <EuiAvatar size="m" name="Single" />
+    <EuiAvatar name="Single" />
     &emsp;
-    <EuiAvatar size="m" name="Two Words" />
+    <EuiAvatar name="Two Words" />
     &emsp;
-    <EuiAvatar size="m" name="More Than Two Words" />
+    <EuiAvatar name="More Than Two Words" />
     &emsp;
-    <EuiAvatar size="m" name="lowercase words" />
+    <EuiAvatar name="lowercase words" />
     <EuiSpacer />
     <EuiTitle size="xs">
-      <h4>Custom &amp; Spaces type</h4>
+      <h4>Custom</h4>
     </EuiTitle>
     <EuiSpacer />
-    <EuiAvatar size="m" type="space" name="Kibana" initialsLength={2} />
+    <EuiAvatar name="Kibana" initialsLength={2} />
     &emsp;
-    <EuiAvatar size="m" type="space" name="Leonardo Dude" initialsLength={1} />
+    <EuiAvatar name="Leonardo Dude" initialsLength={1} />
     &emsp;
-    <EuiAvatar size="m" type="space" name="Not provided" initials="?" />
+    <EuiAvatar name="Not provided" initials="?" />
     &emsp;
-    <EuiAvatar
-      size="m"
-      type="space"
-      name="Engineering Space"
-      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}
-    />
+    <EuiAvatar name="Engineering User" initials="En" initialsLength={2} />
   </div>
 );

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { EuiAvatar, EuiTitle, EuiSpacer } from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiTitle size="xs">
+      <h3>Spaces</h3>
+    </EuiTitle>
+    <EuiSpacer />
+    <EuiAvatar size="s" type="space" name="Kibana" />
+    &emsp;
+    <EuiAvatar type="space" name="Leonardo Space" />
+    &emsp;
+    <EuiAvatar size="l" type="space" name="Default" />
+    &emsp;
+    <EuiAvatar size="xl" type="space" name="Engineering Space" />
+  </div>
+);

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

@@ -1,5 +1,9 @@
+import { PropTypes } from 'react-view';
 import { EuiAvatar, checkValidColor } from '../../../../src/components/avatar';
-import { propUtilityForPlayground } from '../../services/playground';
+import {
+  propUtilityForPlayground,
+  iconValidator,
+} from '../../services/playground';
 
 export default () => {
   const docgenInfo = Array.isArray(EuiAvatar.__docgenInfo)
@@ -24,6 +28,13 @@ export default () => {
     },
   };
 
+  propsToUse.initialsLength = {
+    ...propsToUse.initialsLength,
+    type: PropTypes.Number,
+  };
+
+  propsToUse.iconType = iconValidator(propsToUse.iconType);
+
   return {
     config: {
       componentName: 'EuiAvatar',