@ember-eui/core 5.0.1 → 5.1.0

package/docs/layout/{header-demo/demo1.md → header/demo/d01-header.md}

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Header
-
 <EuiText>
   The header is made up of
   <strong>many</strong>
@@ -33,47 +31,113 @@ order: 1
 </EuiText>
 
 ```hbs template
+
+<TodoText @text="missing EuiSelectableTemplateSitewide and EuiSelectable components"/>
+<EuiSpacer/>
+
 <EuiHeader>
+
   <EuiHeaderSection @side='left'>
     <EuiHeaderSectionItem @border='right'>
       <EuiHeaderLogo @iconType='logoElastic' aria-label='Go to home page' />
     </EuiHeaderSectionItem>
+    
+    <!-- spaces -->
     <EuiHeaderSectionItem @border='right'>
-      <EuiHeaderSectionItemButton @ref={{set this 'btn'}}>
-        <EuiAvatar
-          @name='Planta Prysmex'
-          @type='space'
-          @initialLength={{2}}
-          @size='s'
-        />
-      </EuiHeaderSectionItemButton>
+
+      <!-- <EuiPopover
+        @isOpen={{isOpen}}
+        @anchorPosition="downLeft"
+        @closePopover={{set this 'spacePopover' false}}
+        @panelPaddingSize="none"
+      >
+        <EuiSelectable
+          searchable={{this.listIsExtended}}
+          searchProps={{this.todo}}
+          options={{this.spaces}}
+          singleSelection="always"
+          style="width: 300"
+          onChange={{onChange}}
+          listProps={{this.todo}}
+        >
+          <:button>
+            <EuiHeaderSectionItemButton
+              aria-controls='header1'
+              aria-expanded={{this.spacePopover}}
+              aria-haspopup='true'
+              aria-label='Account menu'
+              @onClick={{this.onMenuButtonClick}}
+            >
+              <EuiAvatar
+                @name={{this.space.label}}
+                @type='space'
+                @initialLength={{2}}
+                @size='s'
+              />
+            </EuiHeaderSectionItemButton>
+          </:button>
+          <:content>
+            <EuiPopoverTitle paddingSize="s">
+              TODO: search
+            </EuiPopoverTitle>
+            TODO: list
+            <EuiPopoverFooter paddingSize="s">
+              <EuiButton
+                size="s"
+                @fullWidth={{true}}
+                onClick={{this.addMoreSpaces}}
+                disabled={{this.listIsExtended}}
+              >
+                Add more spaces
+              </EuiButton>
+            </EuiPopoverFooter>
+          </:content>
+        </EuiSelectable>
+      </EuiPopover> -->
+
     </EuiHeaderSectionItem>
   </EuiHeaderSection>
+
   <EuiHeaderBreadcrumbs
     aria-label='Header breadcrumbs example'
     @breadcrumbs={{this.breadcrumbs}}
   />
+
   <EuiHeaderSection @side='right'>
+
+    <!-- search -->
+    <EuiHeaderSectionItem @border='left'>
+      <EuiHeaderSectionItemButton
+        @ref={{set this 'cheerRef'}}
+      >
+        <EuiIcon @type='search' />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+
+    <!-- profile -->
     <EuiHeaderSectionItem @border='left'>
       <EuiPopover
         @isOpen={{this.userPopover}}
         @closePopover={{set this 'userPopover' false}}
       >
         <:button>
+
           <EuiHeaderSectionItemButton
             aria-controls='header1'
-            aria-expanded={{this.isOpen}}
+            aria-expanded={{this.userPopover}}
             aria-haspopup='true'
             aria-label='Account menu'
             @onClick={{this.onMenuButtonClick}}
           >
             <EuiAvatar
-              @name='David Martinez'
+              @name={{this.name}}
               @type='user'
               @initialLength={{2}}
               @size='s'
             />
           </EuiHeaderSectionItemButton>
+
+
         </:button>
         <:content>
           <div style='width:320px;'>
@@ -83,12 +147,12 @@ order: 1
               @responsive={{false}}
             >
               <EuiFlexItem @grow={{false}}>
-                <EuiAvatar @name='David Martinez' @size='xl' />
+                <EuiAvatar @name={{this.name}} @size='xl' />
               </EuiFlexItem>
 
               <EuiFlexItem>
                 <EuiText>
-                  <p>David Martinez</p>
+                  <p>{{this.name}}</p>
                 </EuiText>
 
                 <EuiSpacer @size='m' />
@@ -111,15 +175,10 @@ order: 1
           </div>
         </:content>
       </EuiPopover>
-
     </EuiHeaderSectionItem>
-    <EuiHeaderSectionItem @border='left'>
-      <EuiHeaderSectionItemButton @notification='3' @notificationColor='accent'>
-        <EuiIcon @type='bell' @size='m' />
-      </EuiHeaderSectionItemButton>
-    </EuiHeaderSectionItem>
-    <EuiHeaderSectionItem @border='left'>
 
+    <!-- apps -->
+    <EuiHeaderSectionItem @border='left'>
       <EuiPopover
         @isOpen={{this.appsPopover}}
         @closePopover={{set this 'appsPopover' false}}
@@ -136,38 +195,16 @@ order: 1
         </:button>
         <:content>
           <EuiKeyPadMenu id='headerAppKeyPadMenuId' style="width: 288px">
-            <EuiKeyPadMenuItem @label='Discover'>
-              <EuiIcon @type='discoverApp' @size='l' />
-            </EuiKeyPadMenuItem>
-
-            <EuiKeyPadMenuItem @label='Dashboard'>
-              <EuiIcon @type='dashboardApp' @size='l' />
-            </EuiKeyPadMenuItem>
-
-            <EuiKeyPadMenuItem @label='Dev Tools'>
-              <EuiIcon @type='devToolsApp' @size='l' />
-            </EuiKeyPadMenuItem>
-
-            <EuiKeyPadMenuItem @label='Machine Learning'>
-              <EuiIcon @type='machineLearningApp' @size='l' />
-            </EuiKeyPadMenuItem>
-
-            <EuiKeyPadMenuItem @label='Graph'>
-              <EuiIcon @type='graphApp' @size='l' />
-            </EuiKeyPadMenuItem>
-
-            <EuiKeyPadMenuItem @label='Visualize'>
-              <EuiIcon @type='visualizeApp' @size='l' />
-            </EuiKeyPadMenuItem>
-
-            <EuiKeyPadMenuItem @label='Timelion' @betaBadgeLabel='Beta'>
-              <EuiIcon @type='timelionApp' @size='l' />
-            </EuiKeyPadMenuItem>
+            {{#each this.apps as |appObj|}}
+              <EuiKeyPadMenuItem @label={{appObj.label}}>
+                <EuiIcon @type={{appObj.type}} @size='l' />
+              </EuiKeyPadMenuItem>
+            {{/each}}
           </EuiKeyPadMenu>
         </:content>
       </EuiPopover>
-
     </EuiHeaderSectionItem>
+
   </EuiHeaderSection>
 </EuiHeader>
 ```
@@ -178,124 +215,105 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class DemoHeaderComponent extends Component {
-  @tracked isOpen = false;
+  @tracked spacePopover = false;
   @tracked userPopover = false;
   @tracked appsPopover = false;
   @tracked btn;
-
-  spacesValues = [
+  @tracked spaces = [
     {
-      label: 'Sales team',
-      prepend: {
-        type: 'space',
-        name: 'Sales Team',
-        size: 's'
-      },
-      checked: 'on'
+      label: 'Sales Team'
     },
     {
-      label: 'Engineering',
-      prepend: {
-        type: 'space',
-        name: 'Engineering',
-        size: 's'
-      }
+      label: 'Engineering'
     },
     {
-      label: 'Security',
-      prepend: {
-        type: 'space',
-        name: 'Security',
-        size: 's'
-      }
+      label: 'Security'
     },
     {
-      label: 'Default',
-      prepend: {
-        type: 'space',
-        name: 'Default',
-        size: 's'
-      }
+      label: 'Default'
     }
   ];
+  @tracked space = this.spaces.firstObject
 
   additionalSpaces = [
     {
-      label: 'Sales team 2',
-      prepend: {
-        type: 'space',
-        name: 'Sales Team 2',
-        size: 's'
-      }
+      label: 'Sales Team 2'
     },
     {
-      label: 'Engineering 2',
-      prepend: {
-        type: 'space',
-        name: 'Engineering 2',
-        size: 's'
-      }
+      label: 'Engineering 2'
     },
     {
-      label: 'Security 2',
-      prepend: {
-        type: 'space',
-        name: 'Security 2',
-        size: 's'
-      }
+      label: 'Security 2'
     },
     {
-      label: 'Default 2',
-      prepend: {
-        type: 'space',
-        name: 'Default 2',
-        size: 's'
-      }
+      label: 'Default 2'
     }
   ];
 
-  animate = () => {
-    this.btn?.euiAnimate?.();
-  };
+  apps = [
+    {
+      label: 'Discover',
+      type: 'discoverApp'
+    },
+    {
+      label: 'Dashboard',
+      type: 'dashboardApp'
+    },
+    {
+      label: 'Dev Tools',
+      type: 'devToolsApp'
+    },
+    {
+      label: 'Machine Learning',
+      type: 'machineLearningApp'
+    },
+    {
+      label: 'Graph',
+      type: 'graphApp'
+    },
+    {
+      label: 'Visualize',
+      type: 'visualizeApp'
+    },
+    {
+      label: 'Timelion',
+      type: 'timelionApp'
+    }
+  ]
+
+  name = 'John Username'
 
   breadcrumbs = [
     {
       text: 'Management',
       href: '#',
-      onClick: (e) => {
-        e.preventDefault();
-      },
-      'data-test-subj': 'breadcrumbsAnimals',
-      className: 'customClass'
+      onClick: this.breadcrumOnClick
     },
     {
       text: 'Truncation test is here for a really long item',
       href: '#',
-      onClick: (e) => {
-        e.preventDefault();
-      }
+      onClick: this.breadcrumOnClick
     },
     {
       text: 'Hidden',
       href: '#',
-      onClick: (e) => {
-        e.preventDefault();
-      }
+      onClick: this.breadcrumOnClick
     },
     {
       text: 'Users',
       href: '#',
-      onClick: (e) => {
-        e.preventDefault();
-      }
+      onClick: this.breadcrumOnClick
     },
     {
       text: 'Create'
     }
   ];
 
-  @action
-  onClick(e) {
+  get listIsExtended() {
+    return this.spaces.length > 4
+  }
+
+  breadcrumOnClick(e) {
     e.preventDefault();
   }
 

package/docs/layout/header/demo/d02-sections.md

@@ -0,0 +1,9 @@
+---
+order: 3
+---
+
+# Sections
+
+```hbs template
+  <TodoText/>
+```

package/docs/layout/{header-demo/demo2.md → header/demo/d03-header-links.md}

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 ---
 
 # Header links
@@ -21,7 +21,7 @@ order: 2
 
   <EuiHeaderSectionItem>
     <EuiHeaderLinks aria-label='App navigation links example'>
-      <EuiHeaderLink @isActive={{false}}>Docs</EuiHeaderLink>
+      <EuiHeaderLink @isActive={{true}}>Docs</EuiHeaderLink>
 
       <EuiHeaderLink>Code</EuiHeaderLink>
 

package/docs/layout/{header-demo/demo3.md → header/demo/d04-fixed-header.md}

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 ---
 
 # Fixed header

package/docs/layout/{header-demo/demo4.md → header/demo/d05-dark-theme.md}

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 ---
 
 # Dark theme
@@ -12,8 +12,8 @@ order: 4
 
 ```hbs template
 <EuiHeader @theme='dark'>
-  <EuiHeaderSection @side='left' @border='right'>
-    <EuiHeaderSectionItem>
+  <EuiHeaderSection @side='left'>
+    <EuiHeaderSectionItem @border='right'>
       <EuiHeaderLogo>Elastic</EuiHeaderLogo>
     </EuiHeaderSectionItem>
     <EuiHeaderSectionItem>

package/docs/layout/{header-demo/demo5.md → header/demo/d06-portal-content-in-the-header.md}

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 ---
 
 # Portal content in the header
@@ -53,6 +53,7 @@ order: 5
       <EuiPopover
         @isOpen={{this.popover}}
         @closePopover={{set this 'popover' false}}
+        @anchorPosition='leftCenter'
         @panelPaddingSize='none'
       >
         <:button>
@@ -86,7 +87,7 @@ order: 5
                   {{alert.date}}
                 </:date>
                 <:badge>
-                  <EuiBadge>{{alert.badge}}</EuiBadge>
+                  <EuiBadge @color={{alert.badgeColor}}>{{alert.badge}}</EuiBadge>
                 </:badge>
               </EuiHeaderAlert>
             {{/each}}
@@ -127,7 +128,11 @@ order: 5
               {{alert.date}}
             </:date>
             <:badge>
-              <EuiBadge>{{alert.badge}}</EuiBadge>
+              <EuiBadge
+                @color={{alert.badgeColor}}
+              >
+                {{alert.badge}}
+              </EuiBadge>
             </:badge>
           </EuiHeaderAlert>
         {{/each}}
@@ -174,42 +179,48 @@ export default class DemoHeaderComponent extends Component {
       text: 'Show or hide applications and features per space in Kibana.',
       action: 'Learn about feature controls',
       date: '1 May 2019',
-      badge: 7.1
+      badge: '7.1',
+      badgeColor: 'default'
     },
     {
       title: 'Kibana 7.0 is turning heads',
       text: 'Simplified navigation, responsive dashboards, dark mode… pick your favorite.',
       action: 'Read the blog',
       date: '10 April 2019',
-      badge: 7.0
+      badge: '7.0',
+      badgeColor: 'hollow'
     },
     {
       title: 'Enter dark mode',
       text: 'Kibana now supports the easy-on-the-eyes theme across the entire UI.',
       action: 'Go to Advanced Settings',
       date: '10 April 2019',
-      badge: 7.0
+      badge: '7.0',
+      badgeColor: 'hollow'
     },
     {
       title: 'Pixel-perfect Canvas is production ready',
       text: 'Your creative space for visualizing data awaits.',
       action: 'Watch the webinar',
       date: '26 March 2019',
-      badge: 6.7
+      badge: '6.7',
+      badgeColor: 'hollow'
     },
     {
       title: '6.7 release notes',
       text: 'Stay up-to-date on the latest and greatest features.',
       action: 'Check out the docs',
       date: '26 March 2019',
-      badge: 6.7
+      badge: '6.7',
+      badgeColor: 'hollow'
     },
     {
       title: 'Rollups made simple in Kibana',
       text: 'Save space and preserve the integrity of your data directly in the UI.',
       action: 'Read the blog',
       date: '10 January 2019',
-      badge: 6.5
+      badge: '6.5',
+      badgeColor: 'hollow'
     }
   ];
 

package/docs/layout/{header-demo/demo6.md → header/demo/d07-header-notifications.md}

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 ---
 
 # Header notifications

package/docs/layout/{header-demo/demo7.md → header/demo/d08-stacked-headers.md}

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 8
 ---
 
 # Stacked headers
@@ -18,8 +18,11 @@ order: 6
     />
   </EuiFlexItem>
 </EuiFlexGroup>
+
 <EuiSpacer />
-<EuiHeader @position={{this.position}}>
+
+<!-- header 1 -->
+<EuiHeader @position={{this.position}} @theme='dark'>
   <EuiHeaderSection @side='left'>
     <EuiHeaderSectionItem @border='right'>
       <EuiHeaderLogo>Elastic</EuiHeaderLogo>
@@ -28,43 +31,46 @@ order: 6
   <EuiHeaderSection @side='right'>
     <EuiHeaderSectionItem>
       <EuiHeaderSectionItemButton
-        @notification={{if this.notificationNumber true false}}
-        @notificationColor='accent'
-        @ref={{set this 'bellRef'}}
+        aria-label='Account menu'
       >
-        <EuiIcon @type='bell' />
-      </EuiHeaderSectionItemButton>
-    </EuiHeaderSectionItem>
-    <EuiHeaderSectionItem>
-      <EuiHeaderSectionItemButton
-        @notification={{this.notificationNumber}}
-        @notificationColor='accent'
-        @ref={{set this 'cheerRef'}}
-      >
-        <EuiIcon @type='cheer' />
+        <EuiAvatar
+          @name='John Username'
+          @type='user'
+          @initialLength={{2}}
+          @size='s'
+        />
       </EuiHeaderSectionItemButton>
     </EuiHeaderSectionItem>
   </EuiHeaderSection>
 </EuiHeader>
-<EuiHeader @position={{this.position}} @theme='dark'>
+
+<!-- header 2 -->
+<EuiHeader @position={{this.position}}>
   <EuiHeaderSection @side='left'>
-    <EuiHeaderSectionItem @border='right'>
-      <EuiHeaderLogo>Elastic</EuiHeaderLogo>
-    </EuiHeaderSectionItem>
-  </EuiHeaderSection>
-  <EuiHeaderSection @side='right'>
     <EuiHeaderSectionItem>
       <EuiHeaderSectionItemButton
-        @notification={{if this.notificationNumber true false}}
-        @notificationColor='accent'
-        @ref={{set this 'bellRef'}}
+        @border='right'
+        aria-label='Account menu'
       >
-        <EuiIcon @type='bell' />
+        <EuiAvatar
+          @name="Default Space"
+          @type='space'
+          @initialLength={{2}}
+          @size='s'
+        />
       </EuiHeaderSectionItemButton>
     </EuiHeaderSectionItem>
+  </EuiHeaderSection>
+
+  <EuiHeaderBreadcrumbs
+    aria-label='Header breadcrumbs example'
+    @breadcrumbs={{this.breadcrumbs}}
+  />
+
+  <EuiHeaderSection @side='right'>
     <EuiHeaderSectionItem>
       <EuiHeaderSectionItemButton
-        @notification={{this.notificationNumber}}
+        @notification={{true}}
         @notificationColor='accent'
         @ref={{set this 'cheerRef'}}
       >
@@ -83,6 +89,21 @@ import { action } from '@ember/object';
 export default class DemoHeaderComponent extends Component {
   @tracked position = 'static';
 
+  breadcrumbs = [
+    {
+      text: 'Management',
+      href: '#',
+      onClick: this.breadcrumOnClick
+    },
+    {
+      text: 'Users'
+    }
+  ];
+
+  breadcrumOnClick(e) {
+    e.preventDefault();
+  } 
+
   setPosition = (e) => {
     if (e.target.checked) {
       this.position = 'fixed';

package/docs/layout/header/demo/d09-the-elastic-navigation-pattern.md

@@ -0,0 +1,9 @@
+---
+order: 9
+---
+
+# The Elastic navigation pattern
+
+```hbs template
+<TodoText/>
+```

package/docs/layout/header/index.md

@@ -0,0 +1,7 @@
+---
+title: Header
+---
+
+<EuiPageHeader @pageTitle="Header"/>
+
+<EuiHorizontalRule/>

package/docs/layout/horizontal-rule/demo/d01-size.md

@@ -0,0 +1,14 @@
+---
+order: 1
+---
+
+```hbs template
+<div class="eui-textCenter">
+  <EuiCode>quarter</EuiCode>
+  <EuiHorizontalRule @size="quarter" />
+  <EuiCode>half</EuiCode>
+  <EuiHorizontalRule @size="half" />
+  <EuiCode>full (default)</EuiCode>
+  <EuiHorizontalRule />
+</div>
+```