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

package/docs/layout/header-demo/demo5.md

@@ -0,0 +1,232 @@
+---
+order: 5
+---
+
+# Portal content in the header
+
+<EuiText>
+  <p>
+    Use an <strong>EuiHeaderSectionItemButton</strong> to display additional information in <EuiLink @href="/docs/core/docs/layout/popover">popovers</EuiLink> or <EuiLink @href="/docs/core/docs/layout/flyout">flyouts</EuiLink>, such as a user profile or news feed. When using <EuiLink @href="/docs/core/docs/layout/flyout">EuiFlyout</EuiLink>, be sure to wrap it in a <EuiLink @href="/docs/core/docs/utilities/portal">EuiPortal</EuiLink>. When using an <EuiLink @href="">EuiPopover</EuiLink> in conjunction with a <strong>fixed</strong> header, be sure to add the <EuiCode>repositionOnScroll</EuiCode> prop to the popover.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup @alignItems='center' @gutterSize='m'>
+  <EuiFlexItem @grow={{false}}>
+    <EuiSwitch
+      @label='Make header fixed position'
+      @checked={{eq this.position 'fixed'}}
+      @onChange={{this.setPosition}}
+    />
+  </EuiFlexItem>
+
+  <EuiFlexItem @grow={{false}}>
+    <EuiSwitch
+      @label='Change theme to dark'
+      @checked={{eq this.theme 'dark'}}
+      @onChange={{this.setTheme}}
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+
+<EuiSpacer />
+<EuiHeader @position={{this.position}} @theme={{this.theme}}>
+  <EuiHeaderSection @side='left'>
+    <EuiHeaderSectionItem @border='right'>
+      <EuiHeaderLogo>Elastic</EuiHeaderLogo>
+    </EuiHeaderSectionItem>
+  </EuiHeaderSection>
+  <EuiHeaderSection @side='right'>
+    <EuiHeaderSectionItem>
+      <EuiHeaderSectionItemButton
+        @notification={{true}}
+        aria-controls='headerFlyoutNewsFeed'
+        aria-expanded={{this.flyout}}
+        aria-haspopup='true'
+        aria-label='Alerts feed: Updates available'
+        {{on 'click' (set this 'flyout' true)}}
+      >
+        <EuiIcon @type='bell' />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+    <EuiHeaderSectionItem>
+      <EuiPopover
+        @isOpen={{this.popover}}
+        @closePopover={{set this 'popover' false}}
+        @panelPaddingSize='none'
+      >
+        <:button>
+          <EuiHeaderSectionItemButton
+            @notification={{6}}
+            aria-controls='headerPopoverNewsFeed'
+            aria-expanded={{this.popover}}
+            aria-haspopup='true'
+            aria-label='News feed: Updates available'
+            {{on 'click' (set this 'popover' (not this.popover))}}
+          >
+            <EuiIcon @type='cheer' />
+          </EuiHeaderSectionItemButton>
+        </:button>
+        <:content>
+          <EuiPopoverTitle @paddingSize='s'>What&apos;s new</EuiPopoverTitle>
+          <div style='max-height:40vh; overflow-y: auto; padding: 4px'>
+            <EuiSpacer size='s' />
+            {{#each this.alerts as |alert|}}
+              <EuiHeaderAlert>
+                <:title>
+                  {{alert.title}}
+                </:title>
+                <:action>
+                  <EuiLink>{{alert.action}}</EuiLink>
+                </:action>
+                <:text>
+                  {{alert.text}}
+                </:text>
+                <:date>
+                  {{alert.date}}
+                </:date>
+                <:badge>
+                  <EuiBadge>{{alert.badge}}</EuiBadge>
+                </:badge>
+              </EuiHeaderAlert>
+            {{/each}}
+          </div>
+          <EuiPopoverFooter @paddingSize='s'>
+            <EuiText @color='subdued' @size='s'>
+              <p>Version 7.0</p>
+            </EuiText>
+          </EuiPopoverFooter>
+        </:content>
+      </EuiPopover>
+
+    </EuiHeaderSectionItem>
+  </EuiHeaderSection>
+</EuiHeader>
+
+{{#if this.flyout}}
+  <EuiPortal>
+    <EuiFlyout @onClose={{set this 'flyout' false}} @size='s'>
+      <EuiFlyoutHeader @hasBorder={{true}}>
+        <EuiTitle @size='s'>
+          <h2>What&apos;s new</h2>
+        </EuiTitle>
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
+        {{#each this.alerts as |alert|}}
+          <EuiHeaderAlert>
+            <:title>
+              {{alert.title}}
+            </:title>
+            <:action>
+              <EuiLink>{{alert.action}}</EuiLink>
+            </:action>
+            <:text>
+              {{alert.text}}
+            </:text>
+            <:date>
+              {{alert.date}}
+            </:date>
+            <:badge>
+              <EuiBadge>{{alert.badge}}</EuiBadge>
+            </:badge>
+          </EuiHeaderAlert>
+        {{/each}}
+      </EuiFlyoutBody>
+      <EuiFlyoutFooter>
+        <EuiFlexGroup @justifyContent='spaceBetween' @alignItems='center'>
+          <EuiFlexItem @grow={{false}}>
+            <EuiButtonEmpty
+              @iconType='cross'
+              @onClick={{set this 'flyout' false}}
+              @flush='left'
+            >
+              Close
+            </EuiButtonEmpty>
+          </EuiFlexItem>
+          <EuiFlexItem @grow={{false}}>
+            <EuiText @color='subdued' @size='s'>
+              <p>Version 7.0</p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlyoutFooter>
+    </EuiFlyout>
+
+  </EuiPortal>
+
+{{/if}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoHeaderComponent extends Component {
+  @tracked flyout = false;
+  @tracked popover = false;
+  @tracked position = 'static';
+  @tracked theme = 'default';
+
+  alerts = [
+    {
+      title: 'Control access to features',
+      text: 'Show or hide applications and features per space in Kibana.',
+      action: 'Learn about feature controls',
+      date: '1 May 2019',
+      badge: 7.1
+    },
+    {
+      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
+    },
+    {
+      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
+    },
+    {
+      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
+    },
+    {
+      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
+    },
+    {
+      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
+    }
+  ];
+
+  setPosition = (e) => {
+    if (e.target.checked) {
+      this.position = 'fixed';
+    } else {
+      this.position = 'static';
+    }
+  };
+
+  setTheme = (e) => {
+    if (e.target.checked) {
+      this.theme = 'dark';
+    } else {
+      this.theme = 'default';
+    }
+  };
+}
+```

package/docs/layout/header-demo/demo6.md

@@ -0,0 +1,85 @@
+---
+order: 6
+---
+
+# Header notifications
+
+<EuiText>
+  To alert or notify users about the additional information they are receiving,
+  use the <strong>EuiHeaderSectionItemButton</strong> <EuiCode>notification</EuiCode> prop. You can pass a node that
+  will render inside a <strong>EuiBadgeNotification</strong> or pass <EuiCode>true</EuiCode> to render a simple dot.
+  You can also animate the button by calling the <EuiCode>euiAnimate()</EuiCode> method on the
+  <strong>EuiHeaderSectionItemButton</strong> <EuiCode>ref</EuiCode>.
+</EuiText>
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiButton {{on 'click' this.notify}}>
+      Notify
+    </EuiButton>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiButton {{on 'click' this.reset}}>
+      Reset
+    </EuiButton>
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer />
+<EuiHeader>
+  <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'}}
+      >
+        <EuiIcon @type='bell' />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+    <EuiHeaderSectionItem>
+      <EuiHeaderSectionItemButton
+        @notification={{this.notificationNumber}}
+        @notificationColor='accent'
+        @ref={{set this 'cheerRef'}}
+      >
+        <EuiIcon @type='cheer' />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+  </EuiHeaderSection>
+</EuiHeader>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoHeaderComponent extends Component {
+  @tracked notificationNumber = 0;
+  bellRef;
+  cheerRef;
+
+  @action
+  animate() {
+    this.bellRef?.euiAnimate();
+    this.cheerRef?.euiAnimate();
+  }
+
+  @action
+  notify() {
+    this.notificationNumber += 1;
+    this.animate();
+  }
+
+  @action
+  reset() {
+    this.notificationNumber = 0;
+  }
+}
+```

package/docs/layout/header-demo/demo7.md

@@ -0,0 +1,94 @@
+---
+order: 6
+---
+
+# Stacked headers
+
+<EuiText>
+  Stacking multiple headers provides a great way to separate global navigation concerns. However, the <EuiCode>position="fixed"</EuiCode> option will not be aware of the number of headers. If you do need fixed <strong>and</strong> stacked headers, you will need to apply the SASS helper mixin and pass in the correct height to afford for.
+</EuiText>
+
+```hbs template
+<EuiFlexGroup @alignItems='center' @gutterSize='m'>
+  <EuiFlexItem @grow={{false}}>
+    <EuiSwitch
+      @label='Make header fixed position'
+      @checked={{eq this.position 'fixed'}}
+      @onChange={{this.setPosition}}
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer />
+<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'}}
+      >
+        <EuiIcon @type='bell' />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+    <EuiHeaderSectionItem>
+      <EuiHeaderSectionItemButton
+        @notification={{this.notificationNumber}}
+        @notificationColor='accent'
+        @ref={{set this 'cheerRef'}}
+      >
+        <EuiIcon @type='cheer' />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+  </EuiHeaderSection>
+</EuiHeader>
+<EuiHeader @position={{this.position}} @theme='dark'>
+  <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'}}
+      >
+        <EuiIcon @type='bell' />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+    <EuiHeaderSectionItem>
+      <EuiHeaderSectionItemButton
+        @notification={{this.notificationNumber}}
+        @notificationColor='accent'
+        @ref={{set this 'cheerRef'}}
+      >
+        <EuiIcon @type='cheer' />
+      </EuiHeaderSectionItemButton>
+    </EuiHeaderSectionItem>
+  </EuiHeaderSection>
+</EuiHeader>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoHeaderComponent extends Component {
+  @tracked position = 'static';
+
+  setPosition = (e) => {
+    if (e.target.checked) {
+      this.position = 'fixed';
+    } else {
+      this.position = 'static';
+    }
+  };
+}
+```

package/docs/layout/header.md

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

package/docs/layout/horizontal-rule.md

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

package/docs/layout/modal-demo/demo1.md

@@ -1,175 +1,74 @@
-# Demo
+---
+order: 1
+---
+
+# Modal
+
+<EuiText>
+  Each <strong>EuiModal</strong> requires a specific set of nested child components. They can be
+  omitted if necessary, but the order cannot be changed or interrupted. Modals
+  come a wrapping <strong>EuiOverlayMask</strong> to obscure the content beneath, but unlike
+  flyouts, modals cannot be dismissed by clicking on the overlay mask. This is
+  inline with our modal usage guidelines which requires there to be a primary
+  action button, even if that button simply closes the modal.
+</EuiText>
 
 ```hbs template
-<EuiTitle>
-  Basic Modal
-</EuiTitle>
-<EuiButton @color="primary" {{on "click" (fn this.activateModal "basicModalActive")}}>
-  Activate Modal
-</EuiButton>
-{{#if this.basicModalActive}}
-  <EuiOverlayMask @headerZindexLocation="above">
-    <EuiModal
-      @onClose={{fn this.deactivateModal "basicModalActive"}}
-      @initialFocus="#focusee"
-      @maxWidth="90%"
-    >
-      <EuiModalHeader>
-        <EuiTitle @size="m">
-          Basic Modal
-        </EuiTitle>
-      </EuiModalHeader>
-      <EuiModalBody>
-        <EuiText>
-          <p>
-            Hello there!
-          </p>
-          <p>
-            This modal has many
-            <a id="focusee" href="#">
-              different
-            </a>
-            <a href="#">
-              focusable
-            </a>
-            <a href="#">
-              items
-            </a>
-            .
-          </p>
-        </EuiText>
-      </EuiModalBody>
-      <EuiModalFooter>
-        <EuiButtonEmpty {{on "click" (fn this.deactivateModal "basicModalActive")}}>
-          Cancel
-        </EuiButtonEmpty>
-        <EuiButton
-          {{on "click" (fn this.deactivateModal "basicModalActive")}}
-          @color="primary"
-          @fill={{true}}
-        >
-          Submit
-        </EuiButton>
-      </EuiModalFooter>
-    </EuiModal>
-  </EuiOverlayMask>
-{{/if}}
-<EuiSpacer />
-<EuiTitle>
-  Overflow Test
-</EuiTitle>
-<EuiButton @color="primary" {{on "click" (fn this.activateModal "overflowModalActive")}}>
+<EuiButton
+  @color='primary'
+  {{on 'click' (fn this.activateModal 'basicModalActive')}}
+>
   Show Modal
 </EuiButton>
-{{#if this.overflowModalActive}}
-  <EuiOverlayMask @headerZindexLocation="above">
-    <EuiModal
-      @initialFocus="#donebutton"
-      @onClose={{fn this.deactivateModal "overflowModalActive"}}
-    >
-      <EuiModalHeader>
-        <EuiTitle @size="l">
-          Overflow Test
-        </EuiTitle>
-      </EuiModalHeader>
-      <EuiModalBody>
-        <EuiText>
-          <p>
-            <strong>
-              Palpatine
-            </strong>
-            : Did you ever hear the tragedy of Darth Plagueis The Wise?
-          </p>
-          <p>
-            <strong>
-              Anakin
-            </strong>
-            : No.
-          </p>
-          <p>
-            <strong>
-              Palpatine
-            </strong>
-            : I thought not. It's not a story the Jedi would tell you.
-                It's a Sith legend. Darth Plagueis was a Dark Lord of the Sith,
-                so powerful and so wise he could use the Force to influence the midichlorians
-                to create life… He had such a knowledge of the dark side,
-                he could even keep the ones he cared about from dying.
-          </p>
-          <p>
-            <strong>
-              Anakin
-            </strong>
-            : He could actually save people from death?
-          </p>
-          <p>
-            Palpatine: The dark side of the Force is a pathway to many
-                abilities some consider to be unnatural.
-          </p>
-          <p>
-            <strong>
-              Anakin
-            </strong>
-            : What happened to him?
-          </p>
-          <p>
-            <strong>
-              Palpatine
-            </strong>
-            : He became so powerful… the only thing he was afraid of was losing his power,
-                which eventually, of course, he did. Unfortunately, he taught his apprentice
-                everything he knew, then his apprentice killed him in his sleep.
-                Ironic. He could save others from death, but not himself.
-          </p>
-          <p>
-            <strong>
-              Anakin
-            </strong>
-            : Is it possible to learn this power?
-          </p>
-          <p>
-            <strong>
-              Palpatine
-            </strong>
-            : Not from a Jedi.
-          </p>
-        </EuiText>
-      </EuiModalBody>
-      <EuiModalFooter>
-        <EuiButton
-          @color="primary"
-          {{on "click" (fn this.deactivateModal "overflowModalActive")}}
-          id="donebutton"
-        >
-          Done
-        </EuiButton>
-      </EuiModalFooter>
-    </EuiModal>
-  </EuiOverlayMask>
-{{/if}}
-<EuiSpacer />
-<EuiTitle>
-  Confirm Modal
-</EuiTitle>
-<EuiButton @color="primary" {{on "click" (fn this.activateModal "confirmModalActive")}}>
-  Show Confirm Modal
-</EuiButton>
-{{#if this.confirmModalActive}}
-  <EuiOverlayMask @headerZindexLocation="above">
-    <EuiConfirmModal
-      @title="Refresh the page?"
-      @onConfirm={{this.reloadPage}}
-      @buttonColor="primary"
-      @confirmButtonText="Refresh"
-      @cancelButtonText="Cancel"
-      @onCancel={{fn this.deactivateModal "confirmModalActive"}}
-    >
+{{#if this.basicModalActive}}
+
+  <EuiModal
+    @onClose={{fn this.deactivateModal 'basicModalActive'}}
+    @initialFocus='#focusee'
+    @maxWidth='90%'
+  >
+    <EuiModalHeader>
+      <EuiTitle @size='m'>
+        Basic Modal
+      </EuiTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
       <EuiText>
-        This action will trash all unsaved changes
+        <p>
+          Hello there!
+        </p>
+        <p>
+          This modal has many
+          <a id='focusee' href='#'>
+            different
+          </a>
+          <a href='#'>
+            focusable
+          </a>
+          <a href='#'>
+            items
+          </a>
+          .
+        </p>
       </EuiText>
-    </EuiConfirmModal>
-  </EuiOverlayMask>
+    </EuiModalBody>
+    <EuiModalFooter>
+      <EuiButtonEmpty
+        {{on 'click' (fn this.deactivateModal 'basicModalActive')}}
+      >
+        Cancel
+      </EuiButtonEmpty>
+      <EuiButton
+        {{on 'click' (fn this.deactivateModal 'basicModalActive')}}
+        @color='primary'
+        @fill={{true}}
+      >
+        Submit
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
 {{/if}}
+<EuiSpacer />
 ```
 
 ```js component
@@ -179,8 +78,6 @@ import { action } from '@ember/object';
 
 export default class DemoModalComponent extends Component {
   @tracked basicModalActive = false;
-  @tracked overflowModalActive = false;
-  @tracked confirmModalActive = false;
 
   @action
   activateModal(modal) {