prysmex · betocantu93 · Mar 14, 2022 · Mar 1, 2022 · Mar 11, 2022 · Mar 14, 2022
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "@embroider/util": "^1.3.0"
   },
   "volta": {
-    "node": "16.14.0"
+    "node": "16.14.0",
+    "yarn": "1.22.17"
   }
 }
diff --git a/packages/core/addon/components/eui-avatar/index.hbs b/packages/core/addon/components/eui-avatar/index.hbs
@@ -7,9 +7,11 @@
       iconColor=@iconColor
       iconSize=@iconSize
       iconType=@iconType
+      imageUrl=@imageUrl
+      initials=@initials
     )
-    background-image=(if @imageUrl @imageUrl "none")
-  ) as |inlineStyles|
+  )
+  as |inlineStyles|
 }}
   <div
     class={{class-names
@@ -19,8 +21,9 @@
       size=(arg-or-default @size "m")
       type=(arg-or-default @type "user")
     }}
-    aria-label={{@name}}
+    aria-label={{if @isDisabled undefined @name}}
     title={{@name}}
+    role={{if @isDisabled "presentation" "img"}}
     ...attributes
     {{simple-style inlineStyles}}
   >
@@ -34,6 +37,7 @@
         @size={{or @iconSize @size}}
         @type={{@iconType}}
         aria-label={{@name}}
+        role={{if @isDisabled "presentation" "img"}}
         @color={{or
           @iconColor
           (if (eq @iconColor null) @iconColor inlineStyles.color)

diff --git a/packages/core/addon/utils/css-mappings/eui-avatar.ts b/packages/core/addon/utils/css-mappings/eui-avatar.ts
@@ -1,6 +1,8 @@
 import { isColorDark } from '../../helpers/is-color-dark';
 import { hexToRgb } from '../../helpers/hex-to-rgb';
 import { euiPaletteColorBlindBehindText } from '../../utils/color/eui_palettes';
+import { isValidHex } from '../../helpers/is-valid-hex';
+import { assert, warn } from '@ember/debug';
 
 export const baseClass = 'euiAvatar';
 export const VIS_COLORS = euiPaletteColorBlindBehindText();
@@ -19,30 +21,70 @@ export const typeMapping = {
 
 export function inlineStyles({
   name,
-  color
+  color,
+  imageUrl,
+  initials
 }: {
   name: string;
   color: string;
   iconColor: string;
+  imageUrl?: string;
+  initials?: string;
 }): Styling {
   let assignedColor = color;
+  // let iconCustomColor = iconColor;
+  let avatarStyle: {
+    backgroundColor?: string;
+    color?: string;
+    backgroundImage?: string;
+  } = {};
+
+  checkValidInitials(initials);
 
   const isNamedColor = color === 'plain' || color === null;
 
+  if (imageUrl) {
+    avatarStyle.backgroundImage = `url(${imageUrl})`;
+  }
+
   if (!isNamedColor) {
-    if (name && !assignedColor) {
-      assignedColor = VIS_COLORS[Math.floor(name.length % VIS_COLORS.length)];
-    }
+    checkValidColor(color);
+
+    assignedColor =
+      color || VIS_COLORS[Math.floor(name.length % VIS_COLORS.length)];
+
     const textColor = isColorDark(...hexToRgb(assignedColor || 'base'))
       ? '#FFFFFF'
       : '#000000';
-    return {
-      'background-color': assignedColor,
-      color: textColor
-    };
+
+    avatarStyle.backgroundColor = assignedColor;
+    avatarStyle.color = textColor;
+    return avatarStyle;
   }
 
-  return {};
+  return avatarStyle;
+}
+
+export const checkValidColor = (color: string | 'plain' | null) => {
+  const validHex = (color && isValidHex(color)) || color === 'plain';
+  if (color && !validHex) {
+    assert(
+      'EuiAvatar needs to pass a valid color. This can either be a three or six character hex value',
+      true
+    );
+  }
+};
+
+function checkValidInitials(initials?: string) {
+  // Must be a string of 1 or 2 characters
+  if (initials && initials.length > 2) {
+    warn(
+      'EuiAvatar only accepts a max of 2 characters for the initials as a string. It is displaying only the first 2 characters.',
+      {
+        id: 'EuiAvatar-initials-excedeed'
+      }
+    );
+  }
 }
 
 const mapping: ComponentMapping = {

diff --git a/packages/core/docs/display/avatar-demo/demo1.md b/packages/core/docs/display/avatar-demo/demo1.md
@@ -1,54 +1,151 @@
 # Demo
 
 ```hbs template
-<EuiAvatar @size="s" @name="Raphael" />
-<EuiAvatar @size="m" @name="Donatello" />
-<EuiAvatar @size="l" @name="Leonardo" @color="#BD10E0" />
-<EuiAvatar @size="xl" @name="Michelangelo" />
-<EuiSpacer />
-<EuiAvatar @size="s" @name="Cat" @imageUrl="https://source.unsplash.com/64x64/?cat" />
-<EuiAvatar @size="m" @name="Cat" @imageUrl="https://source.unsplash.com/64x64/?cat" />
-<EuiAvatar @size="l" @name="Cat" @imageUrl="https://source.unsplash.com/64x64/?cat" />
-<EuiAvatar @size="xl" @name="Cat" @imageUrl="https://source.unsplash.com/64x64/?cat" />
-<EuiSpacer />
-<EuiAvatar @size="m" @name="Single" />
-<EuiAvatar @size="m" @name="Two Words" />
-<EuiAvatar @size="m" @name="More Than Two Words" />
-<EuiAvatar @size="m" @name="lowercase words" />
-<EuiSpacer />
-<EuiTitle @size="xs">
-  <h4>
-    Custom & Spaces type
-  </h4>
+<EuiPanel @color='subdued'>
+  <EuiAvatar @size='s' @name='Raphael' />
+  <EuiAvatar @size='m' @name='Donatello' />
+  <EuiAvatar @size='l' @name='Leonardo' @color='#BD10E0' />
+  <EuiAvatar @size='xl' @name='Michelangelo' />
+  <EuiSpacer />
+  <EuiTitle @size='xs'>
+    With image
+  </EuiTitle>
+  <EuiAvatar
+    @size='s'
+    @name='Cat'
+    @imageUrl='https://source.unsplash.com/64x64/?cat'
+  />
+  <EuiAvatar
+    @size='m'
+    @name='Cat'
+    @imageUrl='https://source.unsplash.com/64x64/?cat'
+  />
+  <EuiAvatar
+    @size='l'
+    @name='Cat'
+    @imageUrl='https://source.unsplash.com/64x64/?cat'
+  />
+  <EuiAvatar
+    @size='xl'
+    @name='Cat'
+    @imageUrl='https://source.unsplash.com/64x64/?cat'
+  />
+</EuiPanel>
+
+<EuiSpacer />
+<EuiTitle @size='m'>
+  Initials
 </EuiTitle>
 <EuiSpacer />
-<EuiAvatar @size="m" @type="space" @name="Kibana" @initialsLength={{2}} />
-<EuiAvatar @size="m" @type="space" @name="Leonardo Dude" @initialsLength={{1}} />
-<EuiAvatar @size="m" @type="space" @name="Not provided" @initials="?" />
-<EuiAvatar @size="m" @type="space" @name="Engineering Space" @initials="En" @initialsLength={{2}} />
-
-
-<EuiTitle @size="xs">
-  <h4>
-    Icons
-  </h4>
+<EuiPanel @color='subdued'>
+  <EuiTitle @size='xs'>
+    Single vs multi-word
+  </EuiTitle>
+  <EuiSpacer />
+  <EuiAvatar @size='m' @name='Single' />
+  <EuiAvatar @size='m' @name='Two Words' />
+  <EuiAvatar @size='m' @name='More Than Two Words' />
+  <EuiAvatar @size='m' @name='lowercase words' />
+  <EuiSpacer />
+  <EuiTitle @size='xs'>
+    Custom
+  </EuiTitle>
+  <EuiSpacer />
+  <EuiAvatar @size='m' @name='Kibana' @initialsLength={{2}} />
+  <EuiAvatar @size='m' @name='Leonardo Dude' @initialsLength={{1}} />
+  <EuiAvatar @size='m' @name='Not provided' @initials='?' />
+  <EuiAvatar
+    @size='m'
+    @name='Engineering Space'
+    @initials='En'
+    @initialsLength={{2}}
+  />
+</EuiPanel>
+<EuiSpacer />
+<EuiTitle @size='m'>
+  Types
 </EuiTitle>
 <EuiSpacer />
-<EuiAvatar @size="s" @name="Small Size" @iconType="managementApp"/>
-<EuiAvatar @size="m" @name="Medium Size" @iconType="managementApp"/>
-<EuiAvatar @size="l" @name="Large" @iconType="managementApp"/>
-<EuiAvatar @size="xl" @name="Plain color" @color="plain" @iconType="managementApp"/>
-
-<EuiTitle @size="xs">
-  <h4>
-    Colors and Sizes
-  </h4>
+<EuiPanel @color='subdued'>
+  <EuiAvatar @size='s' @type='space' @name='Kibana' @initialsLength={{2}} />
+  <EuiAvatar
+    @size='m'
+    @type='space'
+    @name='Leonardo Dude'
+    @initialsLength={{1}}
+  />
+  <EuiAvatar @size='l' @type='space' @name='Not provided' @initials='?' />
+  <EuiAvatar
+    @size='xl'
+    @type='space'
+    @name='Engineering Space'
+    @initials='En'
+    @initialsLength={{2}}
+  />
+</EuiPanel>
+<EuiSpacer />
+<EuiTitle @size='m'>
+  Icons
 </EuiTitle>
 <EuiSpacer />
+<EuiPanel @color='subdued'>
+  <EuiTitle @size='xs'>
+    Icon colors and sizes
+  </EuiTitle>
+  <EuiAvatar @size='s' @name='Small Size' @iconType='managementApp' />
+  <EuiAvatar @size='m' @name='Medium Size' @iconType='managementApp' />
+  <EuiAvatar @size='l' @name='Large' @iconType='managementApp' />
+  <EuiAvatar
+    @size='xl'
+    @name='Plain color'
+    @color='plain'
+    @iconType='managementApp'
+  />
 
-<EuiAvatar @name="Avatar color" @iconType="managementApp" @color="#BD10E0"/>
-<EuiAvatar @name="Custom iconColor" @iconType="managementApp" @color="#103148" @iconColor="primary"/>
-<EuiAvatar @name="Null iconColor" @iconType="appSearchApp" @iconColor={{null}} @color="#343741"/>
-<EuiAvatar @name="Large iconSize" @iconType="appSearchApp" @iconSize="l"/>
-
-```
+  <EuiTitle @size='xs'>
+    Icon colors and sizes
+  </EuiTitle>
+  <EuiSpacer />
+  <EuiAvatar @name='Avatar color' @iconType='managementApp' @color='#BD10E0' />
+  <EuiAvatar
+    @name='Custom iconColor'
+    @iconType='managementApp'
+    @color='#E6F1FA'
+    @iconColor='primary'
+  />
+  <EuiAvatar
+    @name='Null iconColor'
+    @iconType='managementApp'
+    @iconColor={{null}}
+    @color='#D3DAE6'
+  />
+  <EuiAvatar @name='Large iconSize' @iconType='managementApp' @iconSize='l' />
+</EuiPanel>
+<EuiSpacer />
+<EuiTitle @size='m'>
+  Disabled
+</EuiTitle>
+<EuiSpacer />
+<EuiPanel @color='subdued'>
+  <EuiAvatar
+    @size='m'
+    @type='space'
+    @isDisabled={{true}}
+    @name='Leonardo Dude'
+    @initialsLength={{1}}
+  />
+  <EuiAvatar @size='m' @isDisabled={{true}} @name='Two Words' />
+  <EuiAvatar
+    @size='m'
+    @isDisabled={{true}}
+    @name='Cat'
+    @imageUrl='https://source.unsplash.com/64x64/?cat'
+  />
+  <EuiAvatar
+    @size='m'
+    @isDisabled={{true}}
+    @name='Medium Size'
+    @iconType='managementApp'
+  />
+</EuiPanel>
+```
diff --git a/packages/core/docs/display/avatar.md b/packages/core/docs/display/avatar.md
@@ -6,4 +6,4 @@
       </h1>
     </EuiTitle>
   </EuiPageHeaderSection>
-</EuiPageHeader>
+</EuiPageHeader>