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

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

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

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

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

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

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

package/app/components/eui-text-align/index.js

@@ -1 +1 @@
-export { default } from '@ember-eui/core/components/eui-text-align';
+export { default } from '@ember-eui/core/components/eui-text-align';

package/app/components/eui-text-area/index.js

@@ -1 +1 @@
-export { default } from '@ember-eui/core/components/eui-text-area';
+export { default } from '@ember-eui/core/components/eui-text-area';

package/app/components/eui-text-color/index.js

@@ -1 +1 @@
-export { default } from '@ember-eui/core/components/eui-text-color';
+export { default } from '@ember-eui/core/components/eui-text-color';

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

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

package/app/components/eui-tool-tip/index.js

@@ -1 +1 @@
-export { default } from '@ember-eui/core/components/eui-tool-tip';
+export { default } from '@ember-eui/core/components/eui-tool-tip';

package/app/components/eui-tool-tip-popover/index.js

@@ -1 +1 @@
-export { default } from '@ember-eui/core/components/eui-tool-tip-popover';
+export { default } from '@ember-eui/core/components/eui-tool-tip-popover';

package/app/helpers/eui-palette.js

@@ -1 +1 @@
-export { default, euiPalette } from '@ember-eui/core/helpers/eui-palette';
+export { default, euiPalette } from '@ember-eui/core/helpers/eui-palette';

package/app/helpers/hex-to-rgb.js

@@ -1 +1 @@
-export { default, hexToRgb } from '@ember-eui/core/helpers/hex-to-rgb';
+export { default, hexToRgb } from '@ember-eui/core/helpers/hex-to-rgb';

package/app/initializers/eui-config.js

@@ -0,0 +1 @@
+export { default, initialize } from '@ember-eui/core/initializers/eui-config';

package/docs/display/avatar.md

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

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

@@ -11,103 +11,101 @@ order: 1
 </EuiText>
 
 ```hbs template
-<EuiPanel @hasShadow={{false}}>
-  <EuiTitle @size='xs'>
-    Accepted color names
-  </EuiTitle>
-  <EuiSpacer />
-  <EuiBadge @color='default'>
-    default
-  </EuiBadge>
-  <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>
+<EuiTitle @size='xs'>
+  Accepted color names
+</EuiTitle>
+<EuiSpacer />
+<EuiBadge @color='default'>
+  default
+</EuiBadge>
+<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 @color='#DDD'>
-    #DDD
-  </EuiBadge>
-  <EuiBadge @color='#AAA'>
-    #AAA
-  </EuiBadge>
-  <EuiBadge @color='#666'>
-    #666
-  </EuiBadge>
-  <EuiBadge @color='#333'>
-    #333
-  </EuiBadge>
-  <EuiBadge @color='#BADA55'>
-    #BADA55
-  </EuiBadge>
-  <EuiBadge @color='#FCF7BC'>
-    #FCF7BC
-  </EuiBadge>
-  <EuiBadge @color='#FEA27F'>
-    #FEA27F
-  </EuiBadge>
-  <EuiBadge @color='#FFA500'>
-    #FFA500
-  </EuiBadge>
-  <EuiBadge @color='#0000FF'>
-    #0000FF
-  </EuiBadge>
+<EuiSpacer />
+<EuiBadge @color='#DDD'>
+  #DDD
+</EuiBadge>
+<EuiBadge @color='#AAA'>
+  #AAA
+</EuiBadge>
+<EuiBadge @color='#666'>
+  #666
+</EuiBadge>
+<EuiBadge @color='#333'>
+  #333
+</EuiBadge>
+<EuiBadge @color='#BADA55'>
+  #BADA55
+</EuiBadge>
+<EuiBadge @color='#FCF7BC'>
+  #FCF7BC
+</EuiBadge>
+<EuiBadge @color='#FEA27F'>
+  #FEA27F
+</EuiBadge>
+<EuiBadge @color='#FFA500'>
+  #FFA500
+</EuiBadge>
+<EuiBadge @color='#0000FF'>
+  #0000FF
+</EuiBadge>
 
-  <EuiSpacer />
-  <EuiTitle @size='xs'>
-    Disabled state
-  </EuiTitle>
-  <EuiSpacer />
-  <EuiBadge
-    @iconType='arrowRight'
-    @color='#f6f6f6'
-    @onClick={{this.toggleDisabled}}
-    @iconSide='right'
-  >
-    Click me to disable this guy
-  </EuiBadge>
-  <EuiBadge
-    @isDisabled={{this.disabled}}
-    @iconType={{if this.disabled 'faceSad' 'faceHappy'}}
-    @color='accent'
-  >
-    I am
-    {{if this.disabled 'disabled' 'enabled!'}}
-  </EuiBadge>
-  <EuiSpacer />
-  <EuiText @size='xs'>
-    Click on the Dot icon to turn the lightsaber on!
-  </EuiText>
-  <EuiBadge
-    @color='#e5e5e5'
-    @iconOnClick={{this.toggleLightsaber}}
-    @iconType='dot'
-    @iconSide='right'
-  >
-    0===|*|==|
-  </EuiBadge>
-  <EuiBadge @isDisabled={{this.lightsaberDisabled}} @color='#F83A00'>
-    ----------------------------------------------------------
-  </EuiBadge>
-</EuiPanel>
+<EuiSpacer />
+<EuiTitle @size='xs'>
+  Disabled state
+</EuiTitle>
+<EuiSpacer />
+<EuiBadge
+  @iconType='arrowRight'
+  @color='#f6f6f6'
+  @onClick={{this.toggleDisabled}}
+  @iconSide='right'
+>
+  Click me to disable this guy
+</EuiBadge>
+<EuiBadge
+  @isDisabled={{this.disabled}}
+  @iconType={{if this.disabled 'faceSad' 'faceHappy'}}
+  @color='accent'
+>
+  I am
+  {{if this.disabled 'disabled' 'enabled!'}}
+</EuiBadge>
+<EuiSpacer />
+<EuiText @size='xs'>
+  Click on the Dot icon to turn the lightsaber on!
+</EuiText>
+<EuiBadge
+  @color='#e5e5e5'
+  @iconOnClick={{this.toggleLightsaber}}
+  @iconType='dot'
+  @iconSide='right'
+>
+  0===|*|==|
+</EuiBadge>
+<EuiBadge @isDisabled={{this.lightsaberDisabled}} @color='#F83A00'>
+  ----------------------------------------------------------
+</EuiBadge>
 ```
 
 ```js component

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

@@ -13,22 +13,20 @@ Badges can use icons on the left and right (default) sides.
 </EuiText>
 
 ```hbs template
-<EuiPanel @hasShadow={{false}}>
-  <EuiBadge
-    @iconType='https://iconarchive.com/download/i103537/sensibleworld/starwars/Death-Star.ico'
-    @iconSide='right'
-    @color='warning'
-  >
-    Star Wars Lore
-  </EuiBadge>
+<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' />
-</EuiPanel>
+<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

@@ -13,28 +13,25 @@ Badges can have <EuiCode>onClick</EuiCode> events applied to the badge itself or
 </EuiText>
 
 ```hbs template
-<EuiPanel @hasShadow={{false}}>
-
-  <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>
-</EuiPanel>
+<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

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

@@ -12,18 +12,16 @@ of repeated statuses, e.g. in tables.
 </EuiText>
 
 ```hbs template
-<EuiPanel @hasShadow={{false}}>
-  <EuiBadge @color='success'>
-    Healthy
-  </EuiBadge>
-  <EuiBadge @color='warning'>
-    Warning
-  </EuiBadge>
-  <EuiBadge @color='danger'>
-    Critical
-  </EuiBadge>
-  <EuiBadge @color='default'>
-    Unknown
-  </EuiBadge>
-</EuiPanel>
+<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

@@ -11,23 +11,21 @@ Badges can also be made to render anchor tags by passing an href.
 </EuiText>
 
 ```hbs template
-<EuiPanel @hasShadow={{false}}>
-  <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://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>
-</EuiPanel>
+<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

@@ -16,56 +16,44 @@ They can also be used in conjunction with EuiCards.
 </EuiText>
 
 ```hbs template
-<EuiPanel @hasShadow={{false}}>
+<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' />
-  <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'
-  />
-</EuiPanel>
+</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

@@ -16,53 +16,49 @@ To ensure proper wrapping, truncation and spacing of multiple badges, it is advi
 </EuiText>
 
 ```hbs template
-<EuiSpacer @hasShadow={{false}} />
-<EuiPanel style='max-width: 200px;' @color='subdued'>
-  <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>
-</EuiPanel>
-<EuiSpacer />
+<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

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

@@ -13,10 +13,7 @@ Used to showcase the number of notifications, alerts, or hidden selections.
 </EuiText>
 
 ```hbs template
-<EuiPanel @hasShadow={{false}}>
-  <EuiNotificationBadge>
-    3
-  </EuiNotificationBadge>
-
-</EuiPanel>
+<EuiNotificationBadge>
+  3
+</EuiNotificationBadge>
 ```

package/docs/display/badge.md

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