@ember-eui/core 5.0.3 → 5.2.1

package/docs/layout/flyout/demo/d02-more-complicated-flyout.md

@@ -0,0 +1,195 @@
+---
+order: 2
+---
+# More complicated flyout
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+
+This component also comes with related child components for ease of creating headers, footers and scrolling body content. <strong>EuiFlyoutHeader</strong> and <strong>EuiFlyoutFooter</strong> are pinned to the top and bottom of the flyout, respectively, to allow for always visible navigation and actions. The <strong>EuiFlyoutBody</strong> component will then automatically overflow.
+
+  </p>
+  </EuiText>
+
+```hbs template
+<EuiButton {{on 'click' this.openFlyout}}>
+  Show flyout
+</EuiButton>
+
+{{#if this.flyoutOpen}}
+  <EuiFlyout
+    @size='m'
+    @onClose={{this.closeFlyout}}
+  >
+    <EuiFlyoutHeader @hasBorder={{true}}>
+      <EuiTitle @size='l'>Flyout header</EuiTitle>
+      <EuiSpacer @size='s'/>
+      <EuiText @color="subdued">
+        <p>Put navigation items in the header, and cross tab actions in a footer.</p>
+      </EuiText>
+      <EuiTabs @bottomBorder={{false}} style="margin-bottom: -25px;">
+        {{#each this.tabs as |tab|}}
+          <EuiTab
+            @isSelected={{eq this.selectedTab.id tab.id}}
+            {{on 'click' (set this 'selectedTab' tab)}}
+          >
+            {{tab.name}}
+          </EuiTab>
+        {{/each}}
+      </EuiTabs>
+    </EuiFlyoutHeader>
+    <EuiFlyoutBody>
+
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.popover}}
+        @anchorPosition='downCenter'
+        @closePopover={{set this 'popover' false}}
+      >
+        <:button>
+          <EuiButton
+            {{on 'click' (set this 'popover' true)}}
+          >
+            Even popovers can be included
+          </EuiButton>
+        </:button>
+        <:content>
+          <p>This is the popover content, notice how it can overflow the flyout!</p>
+          <p>
+            When placed in a flyout, the <EuiCode>repositionOnScroll</EuiCode> prop ensures that the popover scrolls with body of the flyout.
+          </p>
+        </:content>
+      </EuiPopover>
+
+      <EuiSpacer/>
+
+      <TodoText @text="missing EuiSuperSelect component"/>
+      <TodoText @text="missing euiExpression component"/>
+
+      <EuiText>
+        <p>
+          Far out in the uncharted backwaters of the unfashionable end of the
+          western spiral arm of the Galaxy lies a small unregarded yellow sun.
+        </p>
+
+        <p>
+          Orbiting this at a distance of roughly ninety-two million miles is an
+          utterly insignificant little blue green planet whose ape- descended life
+          forms are so amazingly primitive that they still think digital watches
+          are a pretty neat idea.
+        </p>
+
+        <ul>
+          <li>List item one</li>
+          <li>List item two</li>
+          <li>Dolphins</li>
+        </ul>
+
+        <p>
+          This planet has - or rather had - a problem, which was this: most of the
+          people living on it were unhappy for pretty much of the time. Many
+          solutions were suggested for this problem, but most of these were
+          largely concerned with the movements of small green pieces of paper,
+          which is odd because on the whole it was not the small green pieces of
+          paper that were unhappy.
+        </p>
+
+        <h2>This is Heading Two</h2>
+
+        <ol>
+          <li>Number one</li>
+          <li>Number two</li>
+          <li>Dolphins again</li>
+        </ol>
+
+        <p>
+          But the dog wasn&rsquo;t lazy, it was just practicing mindfulness, so it
+          had a greater sense of life-satisfaction than that fox with all its
+          silly jumping.
+        </p>
+
+        <p>
+          And from the fox&rsquo;s perspective, life was full of hoops to jump{' '}
+          <em>through</em>, low-hanging fruit to jump <em>for</em>, and dead car
+          batteries to jump-<em>start</em>.
+        </p>
+
+        <h3>This is Heading Three</h3>
+
+        <p>
+          So it thought the dog was making a poor life choice by focusing so much
+          on mindfulness. What if its car broke down?
+        </p>
+      </EuiText>
+
+      <EuiCodeBlock
+        @isCopyable={{false}}
+        @language='html'
+      >
+        {{this.htmlCode}}
+      </EuiCodeBlock>
+
+    </EuiFlyoutBody>
+    <EuiFlyoutFooter>
+      <EuiFlexGroup @justifyContent='spaceBetween' @gutterSize='s'>
+        <EuiButtonEmpty @iconType="cross" {{on 'click' this.closeFlyout}}>
+          Close
+        </EuiButtonEmpty>
+        <EuiButton
+          @fill={{true}}
+          {{on 'click' this.closeFlyout}}
+        >
+          Save
+        </EuiButton>
+      </EuiFlexGroup>
+    </EuiFlyoutFooter>
+  </EuiFlyout>
+{{/if}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoFlyoutDemo2Component extends Component {
+  @tracked flyoutOpen = false;
+  @tracked selectedTab;
+
+  htmlCode = `
+    <!--I'm an example of HTML-->
+    <div>
+      asdf
+    </div>
+  `;
+
+  constructor() {
+    super(...arguments);
+
+    this.tabs = [
+      {
+        id: '1',
+        name: 'Tab 1'
+      },
+      {
+        id: '2',
+        name: 'Tab 2'
+      }
+    ];
+
+    this.selectedTab = this.tabs[0];
+  }
+
+  @action
+  openFlyout() {
+    this.flyoutOpen = true;
+  }
+
+  @action
+  closeFlyout(flyout) {
+    this.flyoutOpen = false;
+  }
+}
+```

package/docs/layout/{flyout-demo/demo3.md → flyout/demo/d03-sizing.md}

@@ -19,7 +19,7 @@ Flyouts come in three predefined <EuiCode>sizes</EuiCode> of <EuiCode>'s' | 'm'
   Show flyout to test widths
 </EuiButton>
 
-{{#if this.flyout2Open}}
+{{#if this.flyoutOpen}}
   <EuiFlyout
     @size={{this.size}}
     @onClose={{this.closeFlyout}}
@@ -30,6 +30,7 @@ Flyouts come in three predefined <EuiCode>sizes</EuiCode> of <EuiCode>'s' | 'm'
     <EuiFlyoutBody>
       <EuiFlexGroup>
         <EuiFlexItem>
+          <TodoText @text="missing EuiButtonGroup component"/>
           {{#each this.sizes as |size|}}
             <EuiButton
               @color={{if (eq size.id this.size) 'primary' 'text'}}
@@ -41,19 +42,6 @@ Flyouts come in three predefined <EuiCode>sizes</EuiCode> of <EuiCode>'s' | 'm'
         </EuiFlexItem>
       </EuiFlexGroup>
     </EuiFlyoutBody>
-    <EuiFlyoutFooter>
-      <EuiFlexGroup @justifyContent='spaceBetween' @gutterSize='s'>
-        <EuiButton {{on 'click' (fn this.closeFlyout 'flyout2Open')}}>
-          Cancel
-        </EuiButton>
-        <EuiButton
-          @fill={{true}}
-          {{on 'click' (fn this.closeFlyout 'flyout2Open')}}
-        >
-          Send
-        </EuiButton>
-      </EuiFlexGroup>
-    </EuiFlyoutFooter>
   </EuiFlyout>
 {{/if}}
 ```
@@ -64,7 +52,7 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class DemoFlyoutDemo2Component extends Component {
-  @tracked flyout2Open = false;
+  @tracked flyoutOpen = false;
   @tracked size = 's';
 
   sizes = [
@@ -88,12 +76,12 @@ export default class DemoFlyoutDemo2Component extends Component {
 
   @action
   openFlyout() {
-    this.flyout2Open = true;
+    this.flyoutOpen = true;
   }
 
   @action
   closeFlyout(flyout) {
-    this.flyout2Open = false;
+    this.flyoutOpen = false;
   }
 }
 ```

package/docs/layout/{flyout-demo/demo4.md → flyout/demo/d04-adjusting-padding.md}

@@ -19,7 +19,7 @@ All the inner flyout components inherit their padding from the wrapping <strong>
   Show flyout to test padding sizes
 </EuiButton>
 
-{{#if this.flyout2Open}}
+{{#if this.flyoutOpen}}
   <EuiFlyout
     @paddingSize={{this.padding}}
     @onClose={{this.closeFlyout}}
@@ -28,34 +28,38 @@ All the inner flyout components inherit their padding from the wrapping <strong>
       <EuiTitle @size='l'>Small Welcome!</EuiTitle>
     </EuiFlyoutHeader>
     <EuiFlyoutBody>
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          {{#each this.paddings as |padding|}}
-            <EuiButton
-              @color={{if (eq padding.id this.padding) 'primary' 'text'}}
-              {{on 'click' (set this 'padding' padding.id)}}
-            >
-              {{padding.label}}
-            </EuiButton>
-          {{/each}}
+      <:banner>
+        <EuiCallOut
+          @title='The banner left and right padding is medium to match that of flyout'
+        />
+      </:banner>
 
-          <EuiButton {{on 'click' this.toggleSide}}>
-            change from
-            {{this.side}}
-          </EuiButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
+      <:default>
+        <TodoText @text="missing EuiButtonGroup component"/>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            {{#each this.paddings as |padding|}}
+              <EuiButton
+                @color={{if (eq padding.id this.padding) 'primary' 'text'}}
+                {{on 'click' (set this 'padding' padding.id)}}
+              >
+                {{padding.label}}
+              </EuiButton>
+            {{/each}}
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </:default>
     </EuiFlyoutBody>
     <EuiFlyoutFooter>
       <EuiFlexGroup @justifyContent='spaceBetween' @gutterSize='s'>
-        <EuiButton {{on 'click' (fn this.closeFlyout 'flyout2Open')}}>
-          Cancel
-        </EuiButton>
+        <EuiButtonEmpty @iconType="cross" {{on 'click' this.closeFlyout}}>
+          Close
+        </EuiButtonEmpty>
         <EuiButton
           @fill={{true}}
-          {{on 'click' (fn this.closeFlyout 'flyout2Open')}}
+          {{on 'click' this.closeFlyout}}
         >
-          Send
+          Save
         </EuiButton>
       </EuiFlexGroup>
     </EuiFlyoutFooter>
@@ -69,18 +73,8 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class DemoFlyoutDemo2Component extends Component {
-  @tracked flyout2Open = false;
+  @tracked flyoutOpen = false;
   @tracked padding = 'l';
-  @tracked side = 'right';
-
-  @action
-  toggleSide() {
-    if (this.side === 'right') {
-      this.side = 'left';
-    } else {
-      this.side = 'right';
-    }
-  }
 
   paddings = [
     {
@@ -103,13 +97,12 @@ export default class DemoFlyoutDemo2Component extends Component {
 
   @action
   openFlyout() {
-    this.flyout2Open = true;
+    this.flyoutOpen = true;
   }
 
   @action
   closeFlyout(flyout) {
-    debugger;
-    this.flyout2Open = false;
+    this.flyoutOpen = false;
   }
 }
 ```

package/docs/layout/{flyout-demo/demo5.md → flyout/demo/d05-adding-a-banner.md}

@@ -16,10 +16,10 @@ To highlight some information at the top of a flyout, you can pass an <a href="/
 
 ```hbs template
 <EuiButton {{on 'click' this.openFlyout}}>
-  Show flyout to test padding sizes
+  Show flyout with banner
 </EuiButton>
 
-{{#if this.flyout2Open}}
+{{#if this.flyoutOpen}}
   <EuiFlyout  @onClose={{this.closeFlyout}}>
     <EuiFlyoutHeader @hasBorder={{true}}>
       <EuiTitle @size='l'>Small Welcome!</EuiTitle>
@@ -29,7 +29,7 @@ To highlight some information at the top of a flyout, you can pass an <a href="/
         <EuiCallOut>
           <:body>
             Here’s some stuff that you need to know. This banner helps highlight
-            important information.
+            important information. <EuiLink @href="#">View docs</EuiLink>
           </:body>
         </EuiCallOut>
       </:banner>
@@ -44,16 +44,16 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class DemoFlyoutDemo2Component extends Component {
-  @tracked flyout2Open = false;
+  @tracked flyoutOpen = false;
 
   @action
   openFlyout() {
-    this.flyout2Open = true;
+    this.flyoutOpen = true;
   }
 
   @action
   closeFlyout(flyout) {
-    this.flyout2Open = false;
+    this.flyoutOpen = false;
   }
 }
 ```

package/docs/layout/{flyout-demo/demo6.md → flyout/demo/d06-without-ownfocus.md}

@@ -10,27 +10,24 @@ order: 6
   <p>
 Like modals, you will usually want to obscure the page content beneath with <EuiCode>@ownFocus</EuiCode> which wraps the flyout with an <a href="/docs/core/docs/display/callout">EuiOverlayMask</a>. However, there are use-cases where flyouts present more information or controls, but need to maintain the interactions of the page content. By setting <EuiCode>@ownFocus={{false}}</EuiCode>, the underlying page content will be visible and clickable.
   </p>
-  </EuiText>
+</EuiText>
 
 ```hbs template
 <EuiButton {{on 'click' this.openFlyout}}>
   Toggle flyout
 </EuiButton>
 
-{{#if this.flyout2Open}}
+{{#if this.flyoutOpen}}
   <EuiFlyout @ownFocus={{false}} @onClose={{this.closeFlyout}}>
     <EuiFlyoutHeader @hasBorder={{true}}>
-      <EuiTitle @size='l'>Small Welcome!</EuiTitle>
+      <EuiTitle @size='l'>A flyout without ownFocus</EuiTitle>
     </EuiFlyoutHeader>
     <EuiFlyoutBody>
-      <:banner>
-        <EuiCallOut>
-          <:body>
-            Here’s some stuff that you need to know. This banner helps highlight
-            important information.
-          </:body>
-        </EuiCallOut>
-      </:banner>
+      <EuiText>
+        <p>
+          The page contents is still interactable though screenreader users will find themselves still within the bounds of the flyout.
+        </p>
+      </EuiText>
     </EuiFlyoutBody>
   </EuiFlyout>
 {{/if}}
@@ -42,16 +39,16 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
 export default class DemoFlyoutDemo2Component extends Component {
-  @tracked flyout2Open = false;
+  @tracked flyoutOpen = false;
 
   @action
   openFlyout() {
-    this.flyout2Open = true;
+    this.flyoutOpen = true;
   }
 
   @action
   closeFlyout(flyout) {
-    this.flyout2Open = false;
+    this.flyoutOpen = false;
   }
 }
 ```

package/docs/layout/{flyout-demo/demo7.md → flyout/demo/d07-push-versus-overlay.md}

@@ -17,15 +17,29 @@ Another way to allow for continued interactions of the page content while a flyo
 
 ```hbs template
 <EuiButton {{on 'click' this.openFlyout}}>
-  Toggle flyout
+  Toggle pushed flyout
 </EuiButton>
 
 {{#if this.flyout2Open}}
   <EuiFlyout @type='push' @size='s' @onClose={{this.closeFlyout}}>
     <EuiFlyoutHeader @hasBorder={{true}}>
-      <EuiTitle @size='l'>Small Welcome!</EuiTitle>
+      <EuiTitle @size='l'>A pushed flyout</EuiTitle>
     </EuiFlyoutHeader>
-    <EuiFlyoutBody />
+    <EuiFlyoutBody>
+      <EuiText>
+        <p>
+          A pushed flyout typically contains more information about a particular piece of data or complex form controls for editing.
+        </p>
+        <p>
+          Also, it is good to include a close button in the footer for a larger hit target than the small close button provides.
+        </p>
+      </EuiText>
+    </EuiFlyoutBody>
+    <EuiFlyoutFooter>
+      <EuiButton {{on 'click' this.closeFlyout}}>
+        Close
+      </EuiButton>
+    </EuiFlyoutFooter>
   </EuiFlyout>
 {{/if}}
 ```

package/docs/layout/flyout/demo/d08-understanding-max-width.md

@@ -0,0 +1,9 @@
+---
+order: 8
+---
+
+# Understanding max-width
+
+```hbs template
+  <TodoText/>
+```

package/docs/layout/flyout/index.md

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