@ember-eui/core 4.3.0 → 5.0.0-alpha.3

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 @@
-# Avatar
+<EuiPageHeader @pageTitle="Avatar"/>

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

@@ -1,174 +1,111 @@
-# Demo
+---
+order: 1
+---
+
+<EuiText>
+  <p>
+
+<strong>EuiBadges</strong> are used to focus on important bits of information. Although they will automatically space themselves if you use them in a repetitive fashion it is good form to wrap them using a <strong>EuiBadgeGroup</strong> so that they will wrap when width is constrained (as seen below).
+
+  </p>
+</EuiText>
 
 ```hbs template
-<EuiBadge
-  @href="https://starwars.fandom.com/wiki/Main_Page"
-  @iconType="https://iconarchive.com/download/i103537/sensibleworld/starwars/Death-Star.ico"
-  @iconSide="right"
->
-  Star Wars Lore
+<EuiTitle @size='xs'>
+  Accepted color names
+</EuiTitle>
+<EuiSpacer />
+<EuiBadge @color='default'>
+  default
 </EuiBadge>
-<EuiBadge
-  @href="https://starwars.fandom.com/wiki/Main_Page"
-  @iconType="https://static.thenounproject.com/png/65913-200.png"
-  @iconSide="right"
-  @color="default"
->
-  Darth Vader
+<EuiBadge @color='hollow'>
+  hollow
+</EuiBadge>
+<EuiBadge @color='primary'>
+  primary
+</EuiBadge>
+<EuiBadge @color='success'>
+  success
+</EuiBadge>
+<EuiBadge @color='accent'>
+  accent
+</EuiBadge>
+<EuiBadge @color='danger'>
+  danger
 </EuiBadge>
+<EuiBadge @color='warning'>
+  warning
+</EuiBadge>
+<EuiSpacer />
+<EuiTitle @size='xs'>
+  Custom color examples
+</EuiTitle>
+
 <EuiSpacer />
-<EuiBadge @href="#" @color="accent">
-  Hello
+<EuiBadge @color='#DDD'>
+  #DDD
 </EuiBadge>
-<EuiBadge @color="danger">
-  Danger!
+<EuiBadge @color='#AAA'>
+  #AAA
 </EuiBadge>
-<EuiBadge @onClick={{this.clickBadge}} @color="#000fff">
-  Custom color
+<EuiBadge @color='#666'>
+  #666
 </EuiBadge>
-<EuiBadge
-  @color="primary"
-  @iconType="cross"
-  @iconSide="right"
-  @iconOnClick={{this.clickIcon}}
-  @onClick={{this.clickBadge}}
->
-  Clickable
+<EuiBadge @color='#333'>
+  #333
 </EuiBadge>
-<EuiBadge @onClick={{this.clickBadge}} @iconType="check" @color="#c5c5c5">
-  Click Text Only!
+<EuiBadge @color='#BADA55'>
+  #BADA55
 </EuiBadge>
-<EuiBadge
-  @iconOnClick={{this.clickIcon}}
-  @color="#c9c9c9"
-  @iconType="returnKey"
->
-  Click Icon Only!
+<EuiBadge @color='#FCF7BC'>
+  #FCF7BC
 </EuiBadge>
-<EuiTitle @size="s">
-  Icon left or right
-</EuiTitle>
-<EuiBadge @iconType="check" @color="#c5c5c5">
-  On your left!
+<EuiBadge @color='#FEA27F'>
+  #FEA27F
 </EuiBadge>
-<EuiBadge @iconType="check" @iconSide="right">
-  On your right!
+<EuiBadge @color='#FFA500'>
+  #FFA500
 </EuiBadge>
-<EuiTitle @size="s">
-  Icon Only
-</EuiTitle>
-<EuiBadge @iconType="returnKey" @color="#c5c5c5" />
-<EuiBadge @iconType="check" />
+<EuiBadge @color='#0000FF'>
+  #0000FF
+</EuiBadge>
+
 <EuiSpacer />
-<EuiTitle @size="s">
-  Disabled
+<EuiTitle @size='xs'>
+  Disabled state
 </EuiTitle>
+<EuiSpacer />
 <EuiBadge
-  @iconType="arrowRight"
-  @color="#f6f6f6"
+  @iconType='arrowRight'
+  @color='#f6f6f6'
   @onClick={{this.toggleDisabled}}
-  @iconSide="right"
+  @iconSide='right'
 >
   Click me to disable this guy
 </EuiBadge>
 <EuiBadge
   @isDisabled={{this.disabled}}
-  @iconType={{if this.disabled "faceSad" "faceHappy"}}
-  @color="accent"
+  @iconType={{if this.disabled 'faceSad' 'faceHappy'}}
+  @color='accent'
 >
   I am
-  {{if this.disabled "disabled" "enabled!"}}
+  {{if this.disabled 'disabled' 'enabled!'}}
 </EuiBadge>
-<EuiSpacer @size="s" />
-<EuiText @size="xs">
+<EuiSpacer />
+<EuiText @size='xs'>
   Click on the Dot icon to turn the lightsaber on!
 </EuiText>
 <EuiBadge
-  @color="#e5e5e5"
+  @color='#e5e5e5'
   @iconOnClick={{this.toggleLightsaber}}
-  @iconType="dot"
-  @iconSide="right"
+  @iconType='dot'
+  @iconSide='right'
 >
   0===|*|==|
 </EuiBadge>
-<EuiBadge @isDisabled={{this.lightsaberDisabled}} @color="#F83A00">
+<EuiBadge @isDisabled={{this.lightsaberDisabled}} @color='#F83A00'>
   ----------------------------------------------------------
 </EuiBadge>
-<EuiSpacer />
-<EuiTitle @tagName="h2" @size="m">
-  Notification Badge
-</EuiTitle>
-<EuiNotificationBadge>
-  1
-</EuiNotificationBadge>
-<EuiNotificationBadge>
-  2
-</EuiNotificationBadge>
-<EuiNotificationBadge>
-  3
-</EuiNotificationBadge>
-<EuiNotificationBadge @color="subdued">
-  4
-</EuiNotificationBadge>
-<EuiNotificationBadge @size="m">
-  5
-</EuiNotificationBadge>
-<EuiSpacer />
-<EuiTitle @size="m">
-  Beta Badge
-  <EuiBetaBadge @label="Beta" @title="Philly" />
-</EuiTitle>
-<EuiBetaBadge @label="Pill" @title="Philly" />
-<EuiBetaBadge @label="Lab" @title="Coat" @iconType="beaker" />
-<EuiSpacer />
-<EuiTitle @tagName="h2" @size="m">
-  Badge Group
-</EuiTitle>
-<EuiPanel style="max-width: 200px;">
-  <EuiBadgeGroup @gutterSize="s" as |Group|>
-    <Group.item>
-      <EuiBadge @href="#" @color="accent">
-        Example of a good ol' badge group item 1
-      </EuiBadge>
-    </Group.item>
-    <Group.item>
-      <EuiBadge @iconType="check" @color="primary">
-        Example of a good ol' badge group item 2
-      </EuiBadge>
-    </Group.item>
-    <Group.item>
-      <EuiBadge @iconType="check" @iconSide="right" @color="secondary">
-        Example of a good ol' badge group item 3
-      </EuiBadge>
-    </Group.item>
-    <Group.item>
-      <EuiBadge @onClick={{this.clickBadge}} @color="#fffeee">
-        Example of a good ol' badge group item 4
-      </EuiBadge>
-    </Group.item>
-    <Group.item>
-      <EuiBadge
-        @onClick={{this.clickBadge}}
-        @iconType="cross"
-        @iconOnClick={{this.clickIcon}}
-        @color="#e5e5e5"
-      >
-        Example of a good ol' badge group item 5
-      </EuiBadge>
-    </Group.item>
-    <Group.item>
-      <EuiBadge
-        @onClick={{this.clickBadge}}
-        @iconSide="right"
-        @iconType="cross"
-        @iconOnClick={{this.clickIcon}}
-        @color="#f5f5f5"
-      >
-        Example of a good ol' badge group item 6
-      </EuiBadge>
-    </Group.item>
-  </EuiBadgeGroup>
-</EuiPanel>
 ```
 
 ```js component
@@ -199,5 +136,9 @@ export default class DemoIconComponent extends Component {
   clickBadge() {
     alert('BADGE TEXT clicked!');
   }
+  @action
+  clickBetaBadge() {
+    alert('Beta Badge clicked!');
+  }
 }
 ```

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

@@ -0,0 +1,32 @@
+---
+order: 2
+---
+
+# Badge with Icon
+
+<EuiText>
+  <p>
+
+Badges can use icons on the left and right (default) sides.
+
+  </p>
+</EuiText>
+
+```hbs template
+<EuiBadge
+  @iconType='https://iconarchive.com/download/i103537/sensibleworld/starwars/Death-Star.ico'
+  @iconSide='right'
+  @color='warning'
+>
+  Star Wars Lore
+</EuiBadge>
+
+<EuiBadge
+  @iconType='https://static.thenounproject.com/png/65913-200.png'
+  @iconSide='left'
+  @color='hollow'
+>
+  Darth Vader
+</EuiBadge>
+<EuiBadge @iconType='returnKey' @color='#c5c5c5' />
+```

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

@@ -0,0 +1,70 @@
+---
+order: 3
+---
+
+# Badge with onClick events
+
+<EuiText>
+  <p>
+
+Badges can have <EuiCode>onClick</EuiCode> events applied to the badge itself or the icon within the badge. The latter option is useful for when you might use badges in other components (like a tag system with autocomplete where you need close events).
+
+  </p>
+</EuiText>
+
+```hbs template
+<EuiBadge
+  @color='primary'
+  @iconType='cross'
+  @iconSide='right'
+  @iconOnClick={{this.clickIcon}}
+  @onClick={{this.clickBadge}}
+>
+  Clickable
+</EuiBadge>
+<EuiBadge @onClick={{this.clickBadge}} @iconType='check' @color='#c5c5c5'>
+  Click Text Only!
+</EuiBadge>
+<EuiBadge
+  @iconOnClick={{this.clickIcon}}
+  @color='#c9c9c9'
+  @iconType='returnKey'
+>
+  Click Icon Only!
+</EuiBadge>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoIconComponent extends Component {
+  @tracked disabled = false;
+  @tracked lightsaberDisabled = true;
+
+  @action
+  toggleDisabled() {
+    this.disabled = !this.disabled;
+  }
+
+  @action
+  toggleLightsaber() {
+    this.lightsaberDisabled = !this.lightsaberDisabled;
+  }
+
+  @action
+  clickIcon() {
+    alert('ICON clicked!');
+  }
+
+  @action
+  clickBadge() {
+    alert('BADGE TEXT clicked!');
+  }
+  @action
+  clickBetaBadge() {
+    alert('Beta Badge clicked!');
+  }
+}
+```

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

@@ -0,0 +1,27 @@
+---
+order: 4
+---
+
+# Badge for health status
+
+<EuiText>
+  <p>
+Badges can work as health status indicators in places where there are a lot
+of repeated statuses, e.g. in tables.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiBadge @color='success'>
+  Healthy
+</EuiBadge>
+<EuiBadge @color='warning'>
+  Warning
+</EuiBadge>
+<EuiBadge @color='danger'>
+  Critical
+</EuiBadge>
+<EuiBadge @color='default'>
+  Unknown
+</EuiBadge>
+```

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

@@ -0,0 +1,31 @@
+---
+order: 5
+---
+
+# Badge with href
+
+<EuiText>
+  <p>
+Badges can also be made to render anchor tags by passing an href.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiBadge
+  @href='https://starwars.fandom.com/wiki/Main_Page'
+  @iconType='https://iconarchive.com/download/i103537/sensibleworld/starwars/Death-Star.ico'
+  @iconSide='right'
+  @color='warning'
+>
+  Star Wars Lore
+</EuiBadge>
+
+<EuiBadge
+  @href='https://starwars.fandom.com/wiki/Main_Page'
+  @iconType='https://static.thenounproject.com/png/65913-200.png'
+  @iconSide='left'
+  @color='hollow'
+>
+  Darth Vader
+</EuiBadge>
+```

package/docs/display/badge-demo/demo6.md

@@ -0,0 +1,59 @@
+---
+order: 7
+---
+
+# Beta badge type
+
+<EuiText>
+  <p>
+The <strong>EuiBetaBadge</strong> was created specifically to call out modules that are not in GA. Generally the labels used are "Beta" or "Lab". They require an extra <EuiCode>tooltipContent</EuiCode> to describe the purpose of the badge. You can pass an optional title prop to populate the tooltip title or html title attribute but by default it will use the <EuiCode>label</EuiCode>.
+
+If you pass in an <EuiCode>iconType</EuiCode>, only the icon will be used in the badge itself and the label will be applied as the title. Only use an icon when attaching the beta badge to small components. Beta badges can also be made clickable by passing <EuiCode>href</EuiCode> or <EuiCode>onClick</EuiCode> as needed.
+
+They can also be used in conjunction with EuiCards.
+
+  </p>
+</EuiText>
+
+```hbs template
+<EuiBetaBadge @label='Beta' @title='Philly' />
+<EuiBetaBadge @label='Beta' @title='Philly' />
+<EuiBetaBadge @label='B' @title='Philly' />
+<EuiBetaBadge @label='B' @title='Philly' />
+<EuiBetaBadge @label='Lab' @title='Coat' @iconType='beaker' />
+<EuiBetaBadge @label='Lab' @title='Coat' @iconType='beaker' />
+<EuiSpacer @size='xs' />
+<EuiBetaBadge @label='Beta' @title='Philly' @color='accent' />
+<EuiBetaBadge @label='Beta' @title='Philly' @color='accent' />
+<EuiBetaBadge @label='B' @title='Philly' @color='accent' />
+<EuiBetaBadge @label='B' @title='Philly' @color='accent' />
+<EuiBetaBadge @label='Lab' @title='Coat' @iconType='beaker' @color='accent' />
+<EuiBetaBadge @label='Lab' @title='Coat' @iconType='beaker' @color='accent' />
+<EuiSpacer @size='xs' />
+<EuiBetaBadge @label='Beta' @title='Philly' @color='subdued' />
+<EuiBetaBadge @label='Beta' @title='Philly' @color='subdued' />
+<EuiBetaBadge @label='B' @title='Philly' @color='subdued' />
+<EuiBetaBadge @label='B' @title='Philly' @color='subdued' />
+<EuiBetaBadge @label='Lab' @title='Coat' @iconType='beaker' @color='subdued' />
+<EuiBetaBadge @label='Lab' @title='Coat' @iconType='beaker' @color='subdued' />
+<EuiSpacer />
+<EuiTitle @size='m'>
+  Beta badges will also line up nicely with titles
+  <EuiBetaBadge @label='Beta' @title='Philly' />
+</EuiTitle>
+<EuiTitle @size='xs'>
+  Clickable beta badges
+</EuiTitle>
+<EuiSpacer />
+<EuiBetaBadge
+  @label='Lab'
+  @title='Coat'
+  @iconType='beaker'
+  @onClick={{this.clickBetaBadge}}
+/>
+<EuiBetaBadge
+  @label='Beta'
+  @title='Philly'
+  @href='http://www.elastic.co/subscriptions'
+/>
+```

package/docs/display/badge-demo/demo7.md

@@ -0,0 +1,97 @@
+---
+order: 6
+---
+
+# Badge groups and truncation
+
+<EuiText>
+  <p>
+Badges, like buttons, will only every be a single line of text. This means text will not wrap, but be truncated if the badge's width reaches that of its parent's.
+
+For this reason, badges also auto-apply the inner text of the badge to the <EuiCode>title</EuiCode> attribute of the element to provide default browser tooltips with the full badge text.
+
+To ensure proper wrapping, truncation and spacing of multiple badges, it is advisable to wrap them in a <strong>EuiBadgeGroup</strong>.
+
+  </p>
+</EuiText>
+
+```hbs template
+<EuiBadgeGroup @gutterSize='s' as |Group|>
+  <Group.item>
+    <EuiBadge @href='#' @color='accent'>
+      Example of a good ol' badge group item 1
+    </EuiBadge>
+  </Group.item>
+  <Group.item>
+    <EuiBadge @iconType='check' @color='primary'>
+      Example of a good ol' badge group item 2
+    </EuiBadge>
+  </Group.item>
+  <Group.item>
+    <EuiBadge @iconType='check' @iconSide='right' @color='success'>
+      Example of a good ol' badge group item 3
+    </EuiBadge>
+  </Group.item>
+  <Group.item>
+    <EuiBadge @onClick={{this.clickBadge}} @color='#fffeee'>
+      Example of a good ol' badge group item 4
+    </EuiBadge>
+  </Group.item>
+  <Group.item>
+    <EuiBadge
+      @onClick={{this.clickBadge}}
+      @iconType='cross'
+      @iconOnClick={{this.clickIcon}}
+      @color='#e5e5e5'
+    >
+      Example of a good ol' badge group item 5
+    </EuiBadge>
+  </Group.item>
+  <Group.item>
+    <EuiBadge
+      @onClick={{this.clickBadge}}
+      @iconSide='right'
+      @iconType='cross'
+      @iconOnClick={{this.clickIcon}}
+      @color='#f5f5f5'
+    >
+      Example of a good ol' badge group item 6
+    </EuiBadge>
+  </Group.item>
+</EuiBadgeGroup>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoIconComponent extends Component {
+  @tracked disabled = false;
+  @tracked lightsaberDisabled = true;
+
+  @action
+  toggleDisabled() {
+    this.disabled = !this.disabled;
+  }
+
+  @action
+  toggleLightsaber() {
+    this.lightsaberDisabled = !this.lightsaberDisabled;
+  }
+
+  @action
+  clickIcon() {
+    alert('ICON clicked!');
+  }
+
+  @action
+  clickBadge() {
+    alert('BADGE TEXT clicked!');
+  }
+  @action
+  clickBetaBadge() {
+    alert('Beta Badge clicked!');
+  }
+}
+```