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

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 @@
-# Flyout
+<EuiPageHeader @pageTitle="Flyout"/>