@ember-eui/core 4.4.0 → 5.0.0-alpha.1

package/addon/utils/popover/index.ts

@@ -21,7 +21,12 @@ import { EuiPopoverPosition } from './types';
 
 type Dimension = 'height' | 'width';
 
-export const POSITIONS: EuiPopoverPosition[] = ['top', 'right', 'bottom', 'left'];
+export const POSITIONS: EuiPopoverPosition[] = [
+  'top',
+  'right',
+  'bottom',
+  'left'
+];
 
 interface BoundingBox {
   [position: string]: number;
@@ -143,8 +148,10 @@ export function findPopoverPosition({
   // calculate the window's bounds
   // window.(innerWidth|innerHeight) do not account for scrollbars
   // so prefer the clientWidth/clientHeight of the DOM if available
-  const documentWidth = document.documentElement.clientWidth || window.innerWidth;
-  const documentHeight = document.documentElement.clientHeight || window.innerHeight;
+  const documentWidth =
+    document.documentElement.clientWidth || window.innerWidth;
+  const documentHeight =
+    document.documentElement.clientHeight || window.innerHeight;
   const windowBoundingBox: EuiClientRect = {
     top: 0,
     right: documentWidth,
@@ -155,7 +162,9 @@ export function findPopoverPosition({
   };
 
   // if no container element is given fall back to using the window viewport
-  const containerBoundingBox = container ? getElementBoundingBox(container) : windowBoundingBox;
+  const containerBoundingBox = container
+    ? getElementBoundingBox(container)
+    : windowBoundingBox;
 
   /**
    * `position` was specified by the function caller and is a strong hint
@@ -196,7 +205,10 @@ export function findPopoverPosition({
     // position is forced, if it conflicts with the alignment then reset align to `null`
     // e.g. original placement request for `downLeft` is moved to the `left` side, future calls
     // will position and align `left`, and `leftLeft` is not a valid placement
-    if (position === align || (align !== undefined && position === positionComplements[align])) {
+    if (
+      position === align ||
+      (align !== undefined && position === positionComplements[align])
+    ) {
       iterationAlignments[0] = undefined;
     }
   }
@@ -339,7 +351,8 @@ export function getPopoverScreenCoordinates({
   const crossAxisSecondSide = positionComplements[crossAxisFirstSide]; // "left" -> "right"
   const crossAxisDimension = relatedDimension[crossAxisFirstSide]; // "left" -> "width"
 
-  const [topBuffer, rightBuffer, bottomBuffer, leftBuffer] = getBufferValues(buffer);
+  const [topBuffer, rightBuffer, bottomBuffer, leftBuffer] =
+    getBufferValues(buffer);
 
   const { crossAxisPosition, crossAxisArrowPosition } = getCrossAxisPosition({
     crossAxisFirstSide,
@@ -357,15 +370,17 @@ export function getPopoverScreenCoordinates({
   });
 
   const primaryAxisDimension = relatedDimension[position]; // "top" -> "height"
-  const primaryAxisPositionName = dimensionPositionAttribute[primaryAxisDimension]; // "height" -> "top"
+  const primaryAxisPositionName =
+    dimensionPositionAttribute[primaryAxisDimension]; // "height" -> "top"
 
-  const { primaryAxisPosition, primaryAxisArrowPosition } = getPrimaryAxisPosition({
-    position,
-    offset,
-    popoverBoundingBox,
-    anchorBoundingBox,
-    arrowConfig
-  });
+  const { primaryAxisPosition, primaryAxisArrowPosition } =
+    getPrimaryAxisPosition({
+      position,
+      offset,
+      popoverBoundingBox,
+      anchorBoundingBox,
+      arrowConfig
+    });
 
   const popoverPlacement = {
     [crossAxisFirstSide]: crossAxisPosition,
@@ -374,7 +389,10 @@ export function getPopoverScreenCoordinates({
 
   // calculate the fit of the popover in this location
   // fit is in range 0.0 -> 1.0 and is the percentage of the popover which is visible in this location
-  const combinedBoundingBox = intersectBoundingBoxes(windowBoundingBox, containerBoundingBox);
+  const combinedBoundingBox = intersectBoundingBoxes(
+    windowBoundingBox,
+    containerBoundingBox
+  );
 
   // shrink the visible bounding box by `buffer`
   // to compute a fit value
@@ -397,7 +415,8 @@ export function getPopoverScreenCoordinates({
 
   const arrow = arrowConfig
     ? {
-        [crossAxisFirstSide]: crossAxisArrowPosition! - popoverPlacement[crossAxisFirstSide],
+        [crossAxisFirstSide]:
+          crossAxisArrowPosition! - popoverPlacement[crossAxisFirstSide],
         [primaryAxisPositionName]: primaryAxisArrowPosition
       }
     : undefined;
@@ -457,7 +476,10 @@ function getCrossAxisPosition({
 
   // To fit the content within both the window and container,
   // compute the smaller of the two spaces along each edge
-  const combinedBoundingBox = intersectBoundingBoxes(windowBoundingBox, containerBoundingBox);
+  const combinedBoundingBox = intersectBoundingBoxes(
+    windowBoundingBox,
+    containerBoundingBox
+  );
   const availableSpace = getAvailableSpace(
     anchorBoundingBox,
     combinedBoundingBox,
@@ -467,7 +489,8 @@ function getCrossAxisPosition({
   );
   const minimumSpace = arrowConfig ? arrowConfig.arrowBuffer : 0;
 
-  const contentOverflowSize = (popoverSizeOnCrossAxis - anchorSizeOnCrossAxis) / 2;
+  const contentOverflowSize =
+    (popoverSizeOnCrossAxis - anchorSizeOnCrossAxis) / 2;
 
   let alignAmount = 0;
   let alignDirection = 1;
@@ -480,7 +503,8 @@ function getCrossAxisPosition({
     alignAmount = contentOverflowSize;
 
     const alignedOverflowAmount = contentOverflowSize + alignAmount;
-    const needsShift = alignedOverflowAmount > availableSpace[positionComplements[align]];
+    const needsShift =
+      alignedOverflowAmount > availableSpace[positionComplements[align]];
     amountOfShiftNeeded = needsShift
       ? alignedOverflowAmount - availableSpace[positionComplements[align]]
       : 0;
@@ -490,19 +514,26 @@ function getCrossAxisPosition({
     const spaceAvailableOnFirstSide = availableSpace[crossAxisFirstSide];
     const spaceAvailableOnSecondSide = availableSpace[crossAxisSecondSide];
 
-    const isShiftTowardFirstSide = spaceAvailableOnFirstSide > spaceAvailableOnSecondSide;
+    const isShiftTowardFirstSide =
+      spaceAvailableOnFirstSide > spaceAvailableOnSecondSide;
     shiftDirection = isShiftTowardFirstSide ? -1 : 1;
 
     // determine which direction has more room and the popover should shift to
-    const leastAvailableSpace = Math.min(spaceAvailableOnFirstSide, spaceAvailableOnSecondSide);
+    const leastAvailableSpace = Math.min(
+      spaceAvailableOnFirstSide,
+      spaceAvailableOnSecondSide
+    );
 
     const needsShift = contentOverflowSize > leastAvailableSpace;
-    amountOfShiftNeeded = needsShift ? contentOverflowSize - leastAvailableSpace : 0;
+    amountOfShiftNeeded = needsShift
+      ? contentOverflowSize - leastAvailableSpace
+      : 0;
   }
 
   // shift over the popover if necessary
   const shiftAmount = amountOfShiftNeeded * shiftDirection;
-  let crossAxisPosition = crossAxisPositionOriginal + shiftAmount + alignAmount * alignDirection;
+  let crossAxisPosition =
+    crossAxisPositionOriginal + shiftAmount + alignAmount * alignDirection;
 
   // if an `arrowConfig` is specified, find where to position the arrow
   let crossAxisArrowPosition;
@@ -516,7 +547,8 @@ function getCrossAxisPosition({
     // but instead of moving the arrow, shift the popover content
     if (crossAxisArrowPosition < crossAxisPosition + minimumSpace) {
       // arrow is too close to the minimum side
-      const difference = crossAxisPosition + minimumSpace - crossAxisArrowPosition;
+      const difference =
+        crossAxisPosition + minimumSpace - crossAxisArrowPosition;
       crossAxisPosition -= difference;
     } else if (
       crossAxisArrowPosition + minimumSpace + arrowWidth >
@@ -524,7 +556,8 @@ function getCrossAxisPosition({
     ) {
       // arrow is too close to the maximum side
       const edge = crossAxisPosition + popoverSizeOnCrossAxis;
-      const difference = crossAxisArrowPosition - (edge - minimumSpace - arrowWidth);
+      const difference =
+        crossAxisArrowPosition - (edge - minimumSpace - arrowWidth);
       crossAxisPosition += difference;
     }
   }
@@ -561,19 +594,25 @@ function getPrimaryAxisPosition({
   const popoverSizeOnPrimaryAxis = popoverBoundingBox[primaryAxisDimension];
 
   // start at the top or left edge of the anchor element
-  const primaryAxisPositionName = dimensionPositionAttribute[primaryAxisDimension]; // "height" -> "top"
+  const primaryAxisPositionName =
+    dimensionPositionAttribute[primaryAxisDimension]; // "height" -> "top"
   const anchorEdgeOrigin = anchorBoundingBox[primaryAxisPositionName];
 
   // find the popover position on the primary axis
   const anchorSizeOnPrimaryAxis = anchorBoundingBox[primaryAxisDimension];
-  const primaryAxisOffset = isOffsetDecreasing ? popoverSizeOnPrimaryAxis : anchorSizeOnPrimaryAxis;
-  const contentOffset = (offset + primaryAxisOffset) * (isOffsetDecreasing ? -1 : 1);
+  const primaryAxisOffset = isOffsetDecreasing
+    ? popoverSizeOnPrimaryAxis
+    : anchorSizeOnPrimaryAxis;
+  const contentOffset =
+    (offset + primaryAxisOffset) * (isOffsetDecreasing ? -1 : 1);
   const primaryAxisPosition = anchorEdgeOrigin + contentOffset;
 
   let primaryAxisArrowPosition;
 
   if (arrowConfig) {
-    primaryAxisArrowPosition = isOffsetDecreasing ? popoverSizeOnPrimaryAxis : 0;
+    primaryAxisArrowPosition = isOffsetDecreasing
+      ? popoverSizeOnPrimaryAxis
+      : 0;
   }
 
   return {
@@ -619,7 +658,8 @@ export function getAvailableSpace(
   offset: number,
   offsetSide: EuiPopoverPosition
 ): BoundingBox {
-  const [topBuffer, rightBuffer, bottomBuffer, leftBuffer] = getBufferValues(buffer);
+  const [topBuffer, rightBuffer, bottomBuffer, leftBuffer] =
+    getBufferValues(buffer);
   return {
     top:
       anchorBoundingBox.top -
@@ -654,15 +694,22 @@ export function getVisibleFit(
   contentBoundingBox: BoundingBox,
   containerBoundingBox: BoundingBox
 ): number {
-  const intersection = intersectBoundingBoxes(contentBoundingBox, containerBoundingBox);
+  const intersection = intersectBoundingBoxes(
+    contentBoundingBox,
+    containerBoundingBox
+  );
 
-  if (intersection.left > intersection.right || intersection.top > intersection.top) {
+  if (
+    intersection.left > intersection.right ||
+    intersection.top > intersection.top
+  ) {
     // there is no intersection, the boxes are completely separated on at least one axis
     return 0;
   }
 
   const intersectionArea =
-    (intersection.right - intersection.left) * (intersection.bottom - intersection.top);
+    (intersection.right - intersection.left) *
+    (intersection.bottom - intersection.top);
   const contentArea =
     (contentBoundingBox.right - contentBoundingBox.left) *
     (contentBoundingBox.bottom - contentBoundingBox.top);
@@ -705,7 +752,10 @@ export function intersectBoundingBoxes(
  * @param cousin {HTMLElement}
  * @returns {number}
  */
-export function getElementZIndex(element: HTMLElement, cousin: HTMLElement): number {
+export function getElementZIndex(
+  element: HTMLElement,
+  cousin: HTMLElement
+): number {
   /**
    * finding the z-index of `element` is not the full story
    * its the CSS stacking context that is important
@@ -752,7 +802,9 @@ export function getElementZIndex(element: HTMLElement, cousin: HTMLElement): num
 
   for (const node of nodesToInspect) {
     // get this node's z-index css value
-    const zIndex = window.document.defaultView!.getComputedStyle(node).getPropertyValue('z-index');
+    const zIndex = window.document
+      .defaultView!.getComputedStyle(node)
+      .getPropertyValue('z-index');
 
     // if the z-index is not a number (e.g. "auto") return null, else the value
     const parsedZIndex = parseInt(zIndex, 10);

package/addon/utils/range/index.ts

@@ -0,0 +1 @@
+export const EUI_THUMB_SIZE = 16;

package/app/components/eui-auto-sizer/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-auto-sizer';

package/app/components/eui-breadcrumbs/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-breadcrumbs';

package/app/components/eui-card-select/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-card-select';

package/app/components/{eui-code-block-impl → eui-code-block/controls}/index.js

@@ -1 +1 @@
-export { default } from '@ember-eui/core/components/eui-code-block-impl';
+export { default } from '@ember-eui/core/components/eui-code-block/controls';

package/app/components/{eui-code-block-impl/code-block-controls → eui-code-block/full-screen-display}/index.js

@@ -1 +1 @@
-export { default } from '@ember-eui/core/components/eui-code-block-impl/code-block-controls';
+export { default } from '@ember-eui/core/components/eui-code-block/full-screen-display';

package/app/components/eui-code-block/virtualized/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-code-block/virtualized';

package/app/components/eui-description-list/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-description-list';

package/app/components/eui-description-list-description/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-description-list-description';

package/app/components/eui-description-list-title/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-description-list-title';

package/app/components/eui-empty-prompt/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-empty-prompt';

package/app/components/eui-header-alert/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-header-alert';

package/app/components/eui-header-breadcrumbs/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-header-breadcrumbs';

package/app/components/eui-header-links/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-header-links';

package/app/components/eui-hide-for/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-hide-for';

package/app/components/eui-key-pad-menu/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-key-pad-menu';

package/app/components/eui-key-pad-menu/key/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-key-pad-menu/key';

package/app/components/eui-key-pad-menu-item/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-key-pad-menu-item';

package/app/components/eui-link/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-link';

package/app/components/eui-page-header-content/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-page-header-content';

package/app/components/eui-page-template/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-page-template';

package/app/components/eui-show-for/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-show-for';

package/app/components/eui-split-panel/inner/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-split-panel/inner';

package/app/components/eui-split-panel/outer/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-split-panel/outer';

package/app/utils/copy-to-clipboard.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/utils/copy-to-clipboard';

package/docs/display/avatar-demo/demo1.md

@@ -1,54 +1,48 @@
-# 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>
-</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}} />
+---
+order: 1
+---
 
+# Basic
 
-<EuiTitle @size="xs">
-  <h4>
-    Icons
-  </h4>
-</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"/>
+<EuiText>
+  <p>
 
-<EuiTitle @size="xs">
-  <h4>
-    Colors and Sizes
-  </h4>
-</EuiTitle>
-<EuiSpacer />
+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 hex value to the <EuiCode>color</EuiCode> prop.
 
-<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"/>
+  </p>
+</EuiText>
 
-```
+```hbs template
+<div>
+  <EuiAvatar @size='s' @name='Raphael' />
+  <EuiAvatar @size='m' @name='Donatello' />
+  <EuiAvatar @size='l' @name='Leonardo' @color='#BD10E0' />
+  <EuiAvatar @size='xl' @name='Michelangelo' />
+</div>
+<EuiSpacer />
+<EuiTitle @size='xs'>
+  With image
+</EuiTitle>
+<div>
+  <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'
+  />
+</div>
+```

package/docs/display/avatar-demo/demo2.md

@@ -0,0 +1,42 @@
+---
+order: 2
+---
+
+# Initials
+
+<EuiText>
+  <p>
+
+The initials displayed in the avatar try to be smart based on the name prop. If the name contains spaces, it will display the first character of each word, <strong>always maxing out at 2 characters.</strong> You can customize this by passing a combination of <EuiCode>initialsLength</EuiCode> and/or <EuiCode>initials</EuiCode> props. However, the avatar will still always max out at 2 characters.
+
+  </p>
+</EuiText>
+
+```hbs template
+<EuiTitle @size='xs'>
+  Single vs multi-word
+</EuiTitle>
+<EuiSpacer />
+<div>
+  <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' />
+</div>
+<EuiSpacer />
+<EuiTitle @size='xs'>
+  Custom
+</EuiTitle>
+<EuiSpacer />
+<div>
+  <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}}
+  />
+</div>
+```

package/docs/display/avatar-demo/demo3.md

@@ -0,0 +1,33 @@
+---
+order: 3
+---
+
+# Types
+
+<EuiText>
+  <p>
+
+The avatar <EuiCode>type</EuiCode>, which primarily defines the shape, is keyworded and can be <EuiCode>"user"</EuiCode> (default) or <EuiCode>"space"</EuiCode> (for workspaces).
+
+  </p>
+</EuiText>
+
+```hbs template
+<div>
+  <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}}
+  />
+</div>
+```

package/docs/display/avatar-demo/demo4.md

@@ -0,0 +1,53 @@
+---
+order: 4
+---
+
+# Icons
+
+<EuiText>
+  <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>.
+
+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's color.
+
+  </p>
+</EuiText>
+
+```hbs template
+<EuiTitle @size='xs'>
+  Icon colors and sizes
+</EuiTitle>
+<div>
+  <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'
+  />
+</div>
+
+<EuiTitle @size='xs'>
+  Icon colors and sizes
+</EuiTitle>
+<EuiSpacer />
+<div>
+  <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' />
+</div>
+```

package/docs/display/avatar-demo/demo5.md

@@ -0,0 +1,38 @@
+---
+order: 5
+---
+
+# Disabled
+
+<EuiText>
+  <p>
+
+While <strong>EuiAvatar</strong> doesn'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>
+</EuiText>
+
+```hbs template
+<div>
+  <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'
+  />
+</div>
+```

package/docs/display/avatar.md

@@ -1 +1,9 @@
-# Avatar
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Avatar
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>