elastic · cchaos · Mar 13, 2019 · Mar 13, 2019 · Mar 13, 2019 · Mar 13, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 - Allow toasts in `EuiGlobalToastList` to override `toastLifeTimeMs` ([#1720](https://github.com/elastic/eui/pull/1720))
 - Allow `EuiListGroupItem` to pass a custom element as the `icon` ([#1726](https://github.com/elastic/eui/pull/1726))
+- Added default icon for `EuiListGroupItem` if one is not passed ([#1729](https://github.com/elastic/eui/pull/1729))
+- Added `toInitials` string service ([#1729](https://github.com/elastic/eui/pull/1729))
 
 **Bug fixes**
 

diff --git a/src-docs/src/views/nav_drawer/nav_drawer.js b/src-docs/src/views/nav_drawer/nav_drawer.js
@@ -16,6 +16,7 @@ import {
   EuiHeaderBreadcrumbs,
   EuiHeaderLogo,
   EuiIcon,
+  EuiImage,
   EuiTitle,
   EuiNavDrawerGroup,
   EuiNavDrawer,
@@ -38,6 +39,20 @@ export default class extends Component {
       isFullScreen: false,
     };
 
+    const faveExtraAction = {
+      color: 'subdued',
+      iconType: 'starEmpty',
+      iconSize: 's',
+      'aria-label': 'Add to favorites',
+    };
+
+    const pinExtraAction = {
+      color: 'subdued',
+      iconType: 'pin',
+      iconSize: 's',
+      'aria-label': 'Pin to top',
+    };
+
     this.topLinks = [
       {
         label: 'Recently viewed',
@@ -49,35 +64,20 @@ export default class extends Component {
               label: 'My dashboard',
               href: '/#/layout/nav-drawer',
               iconType: 'dashboardApp',
-              extraAction: {
-                color: 'subdued',
-                iconType: 'starEmpty',
-                iconSize: 's',
-                'aria-label': 'Add to favorites',
-              },
+              extraAction: faveExtraAction,
             },
             {
               label: 'Workpad with title that wraps',
               href: '/#/layout/nav-drawer',
               iconType: 'canvasApp',
-              extraAction: {
-                color: 'subdued',
-                iconType: 'starEmpty',
-                iconSize: 's',
-                'aria-label': 'Add to favorites',
-              },
+              extraAction: faveExtraAction,
             },
             {
               label: 'My logs',
               href: '/#/layout/nav-drawer',
               iconType: 'loggingApp',
               'aria-label': 'This is an alternate aria-label',
-              extraAction: {
-                color: 'subdued',
-                iconType: 'starEmpty',
-                iconSize: 's',
-                'aria-label': 'Add to favorites',
-              },
+              extraAction: faveExtraAction,
             },
           ],
         },
@@ -96,7 +96,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starFilled',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Remove from favorites',
                 alwaysShow: true,
               },
             },
@@ -108,7 +108,7 @@ export default class extends Component {
                 color: 'subdued',
                 iconType: 'starFilled',
                 iconSize: 's',
-                'aria-label': 'Add to favorites',
+                'aria-label': 'Remove from favorites',
                 alwaysShow: true,
               },
             },
@@ -124,67 +124,50 @@ export default class extends Component {
         iconType: 'canvasApp',
         isActive: true,
         extraAction: {
-          color: 'subdued',
-          iconType: 'pinFilled',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
+          ...pinExtraAction,
           alwaysShow: true,
         },
       },
       {
         label: 'Discover',
         href: '/#/layout/nav-drawer',
         iconType: 'discoverApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
       },
       {
         label: 'Visualize',
         href: '/#/layout/nav-drawer',
         iconType: 'visualizeApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
       },
       {
         label: 'Dashboard',
         href: '/#/layout/nav-drawer',
         iconType: 'dashboardApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
       },
       {
         label: 'Machine learning',
         href: '/#/layout/nav-drawer',
         iconType: 'machineLearningApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
       },
       {
-        label: 'Graph',
+        label: 'Custom Plugin (no icon)',
         href: '/#/layout/nav-drawer',
-        iconType: 'graphApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
+      },
+      {
+        label: 'Nature Plugin (image as icon)',
+        href: '/#/layout/nav-drawer',
+        extraAction: pinExtraAction,
+        icon: (
+          <EuiImage
+            size="s"
+            alt="Random nature image"
+            url="https://source.unsplash.com/300x300/?Nature"
+          />
+        ),
       }
     ];
 
@@ -193,67 +176,37 @@ export default class extends Component {
         label: 'APM',
         href: '/#/layout/nav-drawer',
         iconType: 'apmApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
       },
       {
         label: 'Infrastructure',
         href: '/#/layout/nav-drawer',
         iconType: 'infraApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
       },
       {
         label: 'Log viewer',
         href: '/#/layout/nav-drawer',
         iconType: 'loggingApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
       },
       {
         label: 'Uptime',
         href: '/#/layout/nav-drawer',
         iconType: 'upgradeAssistantApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
       },
       {
         label: 'Maps',
         href: '/#/layout/nav-drawer',
         iconType: 'gisApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
       },
       {
         label: 'SIEM',
         href: '/#/layout/nav-drawer',
         iconType: 'securityAnalyticsApp',
-        extraAction: {
-          color: 'subdued',
-          iconType: 'pin',
-          iconSize: 's',
-          'aria-label': 'Pin to top',
-        },
+        extraAction: pinExtraAction,
       }
     ];
 

diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
@@ -3,7 +3,7 @@ import { CommonProps, keysOf } from '../common';
 import classNames from 'classnames';
 
 import { isColorDark, hexToRgb } from '../../services/color';
-import { VISUALIZATION_COLORS } from '../../services';
+import { VISUALIZATION_COLORS, toInitials } from '../../services';
 
 const sizeToClassNameMap = {
   none: null,
@@ -79,35 +79,8 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
 
   let optionalInitial;
   if (name && !imageUrl) {
-    // Calculate the number of initials to show, maxing out at 2
-    let calculatedInitialsLength = initials
-      ? initials.split(' ').length
-      : name.split(' ').length;
-    calculatedInitialsLength =
-      calculatedInitialsLength > 2 ? 2 : calculatedInitialsLength;
-
-    // Check if initialsLength was passed and set to calculated, unless greater than 2
-    if (initialsLength) {
-      calculatedInitialsLength = initialsLength <= 2 ? initialsLength : 2;
-    }
-
-    let calculatedInitials;
-    // A. Set to initials prop if exists (but trancate to 2 characters max unless length is supplied)
-    if (initials) {
-      calculatedInitials = initials.substring(0, calculatedInitialsLength);
-    } else {
-      if (name.trim() && name.split(' ').length > 1) {
-        // B. If there are any spaces in the name, set to first letter of each word
-        calculatedInitials = name.match(/\b(\w)/g);
-        calculatedInitials =
-          calculatedInitials &&
-          calculatedInitials.join('').substring(0, calculatedInitialsLength);
-      } else {
-        // C. Set to the name's initials truncated based on calculated length
-        calculatedInitials = name.substring(0, calculatedInitialsLength);
-      }
-    }
-
+    // Create the initials
+    const calculatedInitials = toInitials(name, initialsLength, initials);
     optionalInitial = <span aria-hidden="true">{calculatedInitials}</span>;
   }
 
@@ -152,7 +125,7 @@ function checkValidInitials(initials: EuiAvatarProps['initials']) {
   if (initials && initials.length > 2) {
     // tslint:disable-next-line:no-console
     console.warn(
-      `EuiAvatar only accepts a max of 2 characters for the initials as a string`
+      `EuiAvatar only accepts a max of 2 characters for the initials as a string. It is displaying only the first 2 characters.`
     );
   }
 }
diff --git a/src/components/image/_image.scss b/src/components/image/_image.scss
@@ -9,6 +9,7 @@
   max-width: 100%;
   position: relative;
   min-height: 1px; /* 1 */
+  line-height: 0; // Fixes cropping when image is resized by forcing it's height to be determined by the image not line-height
 
   &.euiImage--hasShadow {
     .euiImage__img {

diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
@@ -70,8 +70,8 @@
 }
 
 .euiListGroupItem__icon {
-  flex-grow: 0;
   margin-right: $euiSizeM;
+  flex-grow: 0;
   flex-shrink: 0;
 }
 

diff --git a/src/components/nav_drawer/_nav_drawer.scss b/src/components/nav_drawer/_nav_drawer.scss
@@ -60,6 +60,7 @@
       }
 
       .euiListGroupItem__extraAction {
+        // Hides extra action from scrolling into view when tabbing in the collapsed view
         visibility: hidden;
       }
     }

diff --git a/src/components/nav_drawer/_nav_drawer_group.scss b/src/components/nav_drawer/_nav_drawer_group.scss
@@ -11,4 +11,30 @@
       border-radius: $euiBorderRadius;
     }
   }
+
+  .euiListGroupItem__icon {
+    max-width: $euiSize;
+  }
+}
+
+// Default icon will simulate an avatar but with coloring specific to
+.euiNavDrawerGroup__itemDefaultIcon {
+  @include innerBorder('dark', 50%, .05);
+  @include size($euiSize);
+  line-height: $euiSize;
+  font-size: $euiSizeM;
+  flex-shrink: 0; // Ensures it never scales down below it's intended size
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+  overflow: visible;
+  font-weight: $euiFontWeightMedium; // Explicitly state so it doesn't get overridden by inheritence
+  border-radius: 50%;
+
+  &:after {
+    top: -$euiSizeXS;
+    left: -$euiSizeXS;
+    right: -$euiSizeXS;
+    bottom: -$euiSizeXS;
+  }
 }
diff --git a/src/components/nav_drawer/nav_drawer_group.js b/src/components/nav_drawer/nav_drawer_group.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { EuiListGroup } from '../list_group/list_group';
+import { toInitials } from '../../services';
 
 export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick, ...rest }) => {
   const classes = classNames(
@@ -27,6 +28,16 @@ export const EuiNavDrawerGroup = ({ className, listItems, flyoutMenuButtonClick,
     itemProps.size = item.size || 's';
     itemProps['aria-label'] = item['aria-label'] || item.label;
 
+    // Add an avatar in place of non-existent icons
+    const itemProvidesIcon = !!item.iconType || !!item.icon;
+    if (!itemProvidesIcon) {
+      itemProps.icon = (
+        <span className="euiNavDrawerGroup__itemDefaultIcon">
+          {toInitials(item.label)}
+        </span>
+      );
+    }
+
     // And return the item with conditional `onClick` and without `flyoutMenu`
     return { ...itemProps };
   });
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,6 +60,7 @@ @@
           }
           .euiListGroupItem__extraAction {
+            // Hides extra action from scrolling into view when tabbing in the collapsed view
             visibility: hidden;
           }
         }
@@ Expand Down @@