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

package/docs/layout/bottom-bar.md

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

package/docs/layout/flex.md

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

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

@@ -2,30 +2,38 @@
 order: 1
 ---
 
-# Demo 1
+# EuiFlyout
 
-Click on the hamburger icon in the Header Nav to open the flyout!
+<EuiText>
+  <p>
+  <strong>EuiFlyout</strong> is a fixed position panel that pops in from the side of the window. It should be used to reveal more detailed contextual information or to provide complex forms without losing the user's current state. It is a good alternative to <a href="/docs/core/docs/layout/modal">modals</a> when the action is not transient.
+  </p>
+  <p>
+  Like modals, you control the visibilty of the flyout using your own state management, but <strong>EuiFlyout</strong> requires an <EuiCode>onClose</EuiCode> handler for it's internal dismiss buttons.
+  </p>
+</EuiText>
 
 ```hbs template
-<EuiButton {{on "click" this.openFlyout}}>
+<EuiButton {{on 'click' this.openFlyout}}>
   Small Flyout
 </EuiButton>
 {{#if this.flyoutOpen}}
-  <EuiFlyout @ownFocus={{true}} @size="s" @onClose={{this.closeFlyout}}>
+  <EuiFlyout
+    @size='s'
+    @onClose={{this.closeFlyout}}
+  >
     <EuiFlyoutHeader @hasBorder={{true}}>
-      <EuiTitle @size="l">Small Welcome!</EuiTitle>
+      <EuiTitle @size='l'>Small Welcome!</EuiTitle>
     </EuiFlyoutHeader>
     <EuiFlyoutBody>
-      <EuiFlyoutBody::Content>
-        Content
-      </EuiFlyoutBody::Content>
+      Content
     </EuiFlyoutBody>
     <EuiFlyoutFooter>
-      <EuiFlexGroup @justifyContent="spaceBetween" @gutterSize="s">
-        <EuiButton {{on "click" this.closeFlyout}}>
+      <EuiFlexGroup @justifyContent='spaceBetween' @gutterSize='s'>
+        <EuiButton {{on 'click' this.closeFlyout}}>
           Cancel
         </EuiButton>
-        <EuiButton @fill={{true}} {{on "click" this.closeFlyout}}>
+        <EuiButton @fill={{true}} {{on 'click' this.closeFlyout}}>
           Send
         </EuiButton>
       </EuiFlexGroup>

package/docs/layout/flyout-demo/demo2.md

@@ -1,48 +1,63 @@
 ---
 order: 2
 ---
+# More complicated flyout
 
-# Demo 2
+<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}}>
+<EuiButton {{on 'click' this.openFlyout}}>
   Small Flyout w/o Overlay
 </EuiButton>
 
 {{#if this.flyout2Open}}
-  <EuiFlyout @ownFocus={{false}} @size="s" @onClose={{this.closeFlyout}}>
+  <EuiFlyout @size='s' @onClose={{this.closeFlyout}}>
     <EuiFlyoutHeader @hasBorder={{true}}>
-      <EuiTitle @size="l">Small Welcome!</EuiTitle>
+      <EuiTitle @size='l'>Small Welcome!</EuiTitle>
     </EuiFlyoutHeader>
     <EuiFlyoutBody>
-      <EuiFlyoutBody::Content>
-        <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>
-          <EuiHorizontalRule margin="s" @size="half"/>
-          <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>
-          <EuiHorizontalRule margin="s" @size="half"/>
-          <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>
-        </EuiText>
-      </EuiFlyoutBody::Content>
+
+      <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>
+        <EuiHorizontalRule margin='s' @size='half' />
+        <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>
+        <EuiHorizontalRule margin='s' @size='half' />
+        <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>
+      </EuiText>
+
     </EuiFlyoutBody>
     <EuiFlyoutFooter>
-      <EuiFlexGroup @justifyContent="spaceBetween" @gutterSize="s">
-        <EuiButton {{on "click" (fn this.closeFlyout "flyout2Open")}}>
+      <EuiFlexGroup @justifyContent='spaceBetween' @gutterSize='s'>
+        <EuiButton {{on 'click' (fn this.closeFlyout 'flyout2Open')}}>
           Cancel
         </EuiButton>
-        <EuiButton @fill={{true}} {{on "click" (fn this.closeFlyout "flyout2Open")}}>
+        <EuiButton
+          @fill={{true}}
+          {{on 'click' (fn this.closeFlyout 'flyout2Open')}}
+        >
           Send
         </EuiButton>
       </EuiFlexGroup>

package/docs/layout/flyout-demo/demo3.md

@@ -0,0 +1,99 @@
+---
+order: 3
+---
+
+# Sizing
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+
+Flyouts come in three predefined <EuiCode>sizes</EuiCode> of <EuiCode>'s' | 'm' | 'l'</EuiCode>, which define the width <strong>relative to the window size</strong> with a minimum width defined in pixels. You can otherwise supply your own fixed width in number or string format.
+
+  </p>
+  </EuiText>
+
+```hbs template
+<EuiButton {{on 'click' this.openFlyout}}>
+  Show flyout to test widths
+</EuiButton>
+
+{{#if this.flyout2Open}}
+  <EuiFlyout
+    @size={{this.size}}
+    @onClose={{this.closeFlyout}}
+  >
+    <EuiFlyoutHeader @hasBorder={{true}}>
+      <EuiTitle @size='l'>Small Welcome!</EuiTitle>
+    </EuiFlyoutHeader>
+    <EuiFlyoutBody>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          {{#each this.sizes as |size|}}
+            <EuiButton
+              @color={{if (eq size.id this.size) 'primary' 'text'}}
+              {{on 'click' (set this 'size' size.id)}}
+            >
+              {{size.label}}
+            </EuiButton>
+          {{/each}}
+        </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}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoFlyoutDemo2Component extends Component {
+  @tracked flyout2Open = false;
+  @tracked size = 's';
+
+  sizes = [
+    {
+      id: 's',
+      label: 'Small'
+    },
+    {
+      id: 'm',
+      label: 'Medium'
+    },
+    {
+      id: 'l',
+      label: 'Large'
+    },
+    {
+      id: '400px',
+      label: 'Fixed (400)'
+    }
+  ];
+
+  @action
+  openFlyout() {
+    this.flyout2Open = true;
+  }
+
+  @action
+  closeFlyout(flyout) {
+    this.flyout2Open = false;
+  }
+}
+```

package/docs/layout/flyout-demo/demo4.md

@@ -0,0 +1,115 @@
+---
+order: 4
+---
+
+# Adjusting padding
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+
+All the inner flyout components inherit their padding from the wrapping <strong>EuiFlyout</strong> component. This ensures that all the horizontal edges line up no matter the <EuiCode>paddingSize</EuiCode>. When using the <EuiCode>"none"</EuiCode> size, you will need to accommodate your content with some other way of creating distance to the edges of the flyout.
+
+  </p>
+  </EuiText>
+
+```hbs template
+<EuiButton {{on 'click' this.openFlyout}}>
+  Show flyout to test padding sizes
+</EuiButton>
+
+{{#if this.flyout2Open}}
+  <EuiFlyout
+    @paddingSize={{this.padding}}
+    @onClose={{this.closeFlyout}}
+  >
+    <EuiFlyoutHeader @hasBorder={{true}}>
+      <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}}
+
+          <EuiButton {{on 'click' this.toggleSide}}>
+            change from
+            {{this.side}}
+          </EuiButton>
+        </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}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoFlyoutDemo2Component extends Component {
+  @tracked flyout2Open = false;
+  @tracked padding = 'l';
+  @tracked side = 'right';
+
+  @action
+  toggleSide() {
+    if (this.side === 'right') {
+      this.side = 'left';
+    } else {
+      this.side = 'right';
+    }
+  }
+
+  paddings = [
+    {
+      id: 'none',
+      label: 'None'
+    },
+    {
+      id: 's',
+      label: 'Small'
+    },
+    {
+      id: 'm',
+      label: 'Medium'
+    },
+    {
+      id: 'l',
+      label: 'Large'
+    }
+  ];
+
+  @action
+  openFlyout() {
+    this.flyout2Open = true;
+  }
+
+  @action
+  closeFlyout(flyout) {
+    debugger;
+    this.flyout2Open = false;
+  }
+}
+```

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

@@ -0,0 +1,59 @@
+---
+order: 5
+---
+
+# Adding a banner
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+
+To highlight some information at the top of a flyout, you can pass an <a href="/docs/core/docs/display/callout">EuiCallOut</a> to the <EuiCode>banner</EuiCode> prop available in <strong>EuiFlyoutBody</strong> and its layout will adjust appropriately.
+
+  </p>
+  </EuiText>
+
+```hbs template
+<EuiButton {{on 'click' this.openFlyout}}>
+  Show flyout to test padding sizes
+</EuiButton>
+
+{{#if this.flyout2Open}}
+  <EuiFlyout  @onClose={{this.closeFlyout}}>
+    <EuiFlyoutHeader @hasBorder={{true}}>
+      <EuiTitle @size='l'>Small Welcome!</EuiTitle>
+    </EuiFlyoutHeader>
+    <EuiFlyoutBody>
+      <:banner>
+        <EuiCallOut>
+          <:body>
+            Here’s some stuff that you need to know. This banner helps highlight
+            important information.
+          </:body>
+        </EuiCallOut>
+      </:banner>
+    </EuiFlyoutBody>
+  </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 flyout2Open = false;
+
+  @action
+  openFlyout() {
+    this.flyout2Open = true;
+  }
+
+  @action
+  closeFlyout(flyout) {
+    this.flyout2Open = false;
+  }
+}
+```

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

@@ -0,0 +1,57 @@
+---
+order: 6
+---
+
+# Without ownFocus
+
+<EuiSpacer />
+
+<EuiText>
+  <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>
+
+```hbs template
+<EuiButton {{on 'click' this.openFlyout}}>
+  Toggle flyout
+</EuiButton>
+
+{{#if this.flyout2Open}}
+  <EuiFlyout @ownFocus={{false}} @onClose={{this.closeFlyout}}>
+    <EuiFlyoutHeader @hasBorder={{true}}>
+      <EuiTitle @size='l'>Small Welcome!</EuiTitle>
+    </EuiFlyoutHeader>
+    <EuiFlyoutBody>
+      <:banner>
+        <EuiCallOut>
+          <:body>
+            Here’s some stuff that you need to know. This banner helps highlight
+            important information.
+          </:body>
+        </EuiCallOut>
+      </:banner>
+    </EuiFlyoutBody>
+  </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 flyout2Open = false;
+
+  @action
+  openFlyout() {
+    this.flyout2Open = true;
+  }
+
+  @action
+  closeFlyout(flyout) {
+    this.flyout2Open = false;
+  }
+}
+```

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

@@ -0,0 +1,51 @@
+---
+order: 7
+---
+
+# Push versus overlay
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+Another way to allow for continued interactions of the page content while a flyout is visible, is to change the <EuiCode>type</EuiCode> from <EuiCode>overlay</EuiCode> to <EuiCode>push</EuiCode>.
+  </p>
+	<p>
+	A pushed flyout still positions itself as <EuiCode>fixed</EuiCode>, but adds padding to the document's body element to accommodate for the flyout's width. Because this squishes the page content, the flyout changes back to <EuiCode>overlay</EuiCode> at smaller window widths. You can adjust this minimum breakpoint with <EuiCode>pushMinBreakpoint</EuiCode>.
+	</p>
+  </EuiText>
+
+```hbs template
+<EuiButton {{on 'click' this.openFlyout}}>
+  Toggle flyout
+</EuiButton>
+
+{{#if this.flyout2Open}}
+  <EuiFlyout @type='push' @size='s' @onClose={{this.closeFlyout}}>
+    <EuiFlyoutHeader @hasBorder={{true}}>
+      <EuiTitle @size='l'>Small Welcome!</EuiTitle>
+    </EuiFlyoutHeader>
+    <EuiFlyoutBody />
+  </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 flyout2Open = false;
+
+  @action
+  openFlyout() {
+    this.flyout2Open = true;
+  }
+
+  @action
+  closeFlyout(flyout) {
+    this.flyout2Open = false;
+  }
+}
+```

package/docs/layout/flyout.md

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