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

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

@@ -0,0 +1,126 @@
+---
+order: 2
+---
+
+# Overflow test
+
+```hbs template
+<EuiButton
+  @color='primary'
+  {{on 'click' (fn this.activateModal 'overflowModalActive')}}
+>
+  Show Modal
+</EuiButton>
+{{#if this.overflowModalActive}}
+
+  <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>
+{{/if}}
+<EuiSpacer />
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoModalComponent extends Component {
+  @tracked overflowModalActive = false;
+
+  @action
+  activateModal(modal) {
+    this[modal] = true;
+  }
+
+  @action
+  deactivateModal(modal) {
+    this[modal] = false;
+  }
+
+  @action
+  reloadPage() {
+    location.reload();
+  }
+}
+```

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

@@ -0,0 +1,55 @@
+---
+order: 3
+---
+
+# Confirm Modal
+
+```hbs template
+<EuiButton
+  @color='primary'
+  {{on 'click' (fn this.activateModal 'confirmModalActive')}}
+>
+  Show Confirm Modal
+</EuiButton>
+{{#if this.confirmModalActive}}
+  <EuiConfirmModal
+    @title='Refresh the page?'
+    @onConfirm={{this.reloadPage}}
+    @buttonColor='primary'
+    @confirmButtonText='Refresh'
+    @cancelButtonText='Cancel'
+    @onCancel={{fn this.deactivateModal 'confirmModalActive'}}
+  >
+    <EuiText>
+      This action will trash all unsaved changes
+    </EuiText>
+  </EuiConfirmModal>
+
+{{/if}}
+<EuiSpacer />
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoModalComponent extends Component {
+  @tracked confirmModalActive = false;
+
+  @action
+  activateModal(modal) {
+    this[modal] = true;
+  }
+
+  @action
+  deactivateModal(modal) {
+    this[modal] = false;
+  }
+
+  @action
+  reloadPage() {
+    location.reload();
+  }
+}
+```

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

@@ -0,0 +1,65 @@
+---
+order: 4
+---
+
+# Loading modal
+
+<EuiText>
+  <strong>EuiConfirmModal</strong> supports being able to apply loading and disabled states to the confirm button with the <EuiCode>confirmButtonDisabled</EuiCode> and <EuiCode>isLoading</EuiCode> props respectively. This is helpful to indicate the fetching of data and/or to wait for a user's input before enabling the confirm action.
+</EuiText>
+
+```hbs template
+<EuiButton
+  @color='primary'
+  {{on 'click' (fn this.activateModal 'loadingModalActive')}}
+>
+  Activate Loading Modal
+</EuiButton>
+{{#if this.loadingModalActive}}
+
+  <EuiConfirmModal
+    @title='Refresh the page?'
+    @onConfirm={{this.reloadPage}}
+    @buttonColor='primary'
+    @confirmButtonText='Refresh'
+    @cancelButtonText='Cancel'
+    @isLoading={{this.isLoading}}
+    @onCancel={{fn this.deactivateModal 'loadingModalActive'}}
+  >
+    <EuiText>
+      Eui Modal with isLoading true and a timeout for removing is loading
+      spinner
+    </EuiText>
+  </EuiConfirmModal>
+{{/if}}
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoModalComponent extends Component {
+  @tracked loadingModalActive = false;
+  @tracked isLoading = true;
+
+  @action
+  activateModal(modal) {
+    this[modal] = true;
+    setTimeout(() => {
+      this.isLoading = false;
+    }, 3500);
+  }
+
+  @action
+  deactivateModal(modal) {
+    this[modal] = false;
+    this.isLoading = true;
+  }
+
+  @action
+  reloadPage() {
+    location.reload();
+  }
+}
+```

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

@@ -0,0 +1,96 @@
+---
+order: 5
+---
+
+# Widths
+
+<EuiText>
+  Modals start with a minimum width of 400px, just enough to display form rows.
+  They will grow to fit the contents until it reaches the specified maxWidth,
+  the default of which is set to the medium breakpoint. If the modal is not
+  growing wide enough to fit your contents, you can pass a specific style.width,
+  just remember that modals will always shrink to fit the window width.
+</EuiText>
+
+```hbs template
+<EuiButton
+  @color='primary'
+  {{on 'click' (fn this.activateModal 'widthModalActive')}}
+>
+  Show Width Modal
+</EuiButton>
+{{#if this.widthModalActive}}
+
+  <EuiModal
+    @onClose={{fn this.deactivateModal 'widthModalActive'}}
+    @initialFocus='#focusee'
+    style='width: 800px'
+  >
+    <EuiModalHeader>
+      <EuiTitle @size='m'>
+        Basic Modal width 800 px width
+      </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 'widthModalActive')}}
+      >
+        Cancel
+      </EuiButtonEmpty>
+      <EuiButton
+        {{on 'click' (fn this.deactivateModal 'widthModalActive')}}
+        @color='primary'
+        @fill={{true}}
+      >
+        Submit
+      </EuiButton>
+    </EuiModalFooter>
+  </EuiModal>
+{{/if}}
+<EuiSpacer />
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoModalComponent extends Component {
+  @tracked widthModalActive = false;
+
+  @action
+  activateModal(modal) {
+    this[modal] = true;
+  }
+
+  @action
+  deactivateModal(modal) {
+    this[modal] = false;
+  }
+
+  @action
+  reloadPage() {
+    location.reload();
+  }
+}
+```

package/docs/layout/modal.md

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

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

@@ -1,5 +1,98 @@
-# Demo
+---
+order: 1
+---
+
+# Basic Page
+
+<EuiText>
+  Page layouts are modular and fit together in a precise manner, though certain
+  parts can also be added or removed as needed. EUI provides both the indivdual
+  page components and an over-arching template for easily creating some
+  pre-defined layouts.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut
+  @title='The following examples showcase the both the template and custom built
+    usages of the page components.'
+  @iconType='document'
+>
+  <:body>
+    You'll find the code for each in their own tab and if you go to full screen,
+    you can see how they would behave in a typical application layout.
+  </:body>
+</EuiCallOut>
+<EuiSpacer />
+<EuiHorizontalRule />
+<EuiTitle>
+  A full page with everything
+</EuiTitle>
+<EuiSpacer />
+<EuiText>
+  EUI provides a family of components using the
+  <EuiCode>EuiPage</EuiCode>
+  prefix that work together to build consistent page layouts that work
+  responsively.<br />
+  <ul>
+    <li><strong>EuiPage</strong>
+      and
+      <strong>EuiPageBody</strong>
+      provide the overall wrapper with a column flex display.</li>
+    <li><strong>EuiPageSideBar</strong>
+      provides a way to add side navigation that can be made sticky to scroll
+      independent of the page content. See
+      <strong>EuiSideNav</strong>
+      for contents.</li>
+    <li><strong>EuiPageHeader</strong>
+      provides a title, description, section for actions and possible tabs.</li>
+    <li><strong>EuiPageContent</strong>
+      provides the main content container and extends
+      <strong>EuiPanel</strong>.</li>
+    <li><strong>EuiPageContentBody</strong>
+      wraps the content that comes after the page header.</li>
+  </ul>
+  Or you can use the provided
+  <strong>EuiPageTemplate</strong>, which is simply a shortcut for creating the
+  different types of page layout patterns described in these docs. It is
+  somewhat opinionated, but still has the ability to customize most of the inner
+  components with props like
+  <EuiCode>pageSideBarProps</EuiCode>
+  and
+  <EuiCode>pageContentProps</EuiCode>.
+</EuiText>
 
 ```hbs template
-You are pretty much viewing a page rendered.
-```
+<EuiPageTemplate
+  @grow={{true}}
+  @pageHeader={{hash
+    iconType='logoElastic'
+    pageTitle='Page Title'
+    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
+    tabs=this.tabs
+  }}
+  @pageSideBar={{component 'eui-loading-content' lines=8}}
+>
+  <EuiLoadingContent @lines={{16}} />
+</EuiPageTemplate>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoIconComponent extends Component {
+  tabs = [
+    { label: 'Tab 1', isSelected: true },
+    {
+      label: 'Tab 2',
+      onClick: this.setShowBottomBar
+    }
+  ];
+  @tracked showing = false;
+
+  @action
+  setSHowBottomBar() {
+    this.showing = !this.showing;
+  }
+}
+```

package/docs/layout/page-demo/demo10.md

@@ -0,0 +1,42 @@
+---
+order: 10
+---
+
+# A simple page layout with custom content
+
+<EuiText>
+ You can replace the inner parts of <strong>EuiPageBody</strong> with your own content, with or without a page header. This allows you to create dashboard style layouts with lots of panels. It is not recommended, however, to use this setup when you also have side bar.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut>
+  <:body>
+    This layout can be achieved in <strong>EuiPageTemplate</strong> by setting <EuiCode>template="empty"</EuiCode>.
+  </:body>
+</EuiCallOut>
+
+```hbs template
+<EuiPageTemplate
+  @grow={{true}}
+  @template='empty'
+  @pageHeader={{hash
+    iconType='logoElastic'
+    pageTitle='Page Title'
+    rightSideItems=(array (component 'eui-button-title' title='Go full screen' color='warning')(component 'eui-button-title' title='Do something'))
+  }}
+>
+  <EuiFlexGrid @columns={{2}}>
+    <EuiFlexItem>
+      <EuiPanel style='height: 200px' />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel style='height: 200px' />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel style='height: 200px' />
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <EuiPanel style='height: 200px' />
+    </EuiFlexItem>
+  </EuiFlexGrid>
+</EuiPageTemplate>
+```

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

@@ -0,0 +1,46 @@
+---
+order: 2
+---
+
+# Restricting page width
+
+<EuiSpacer />
+<EuiText>
+  Most content does not scale well to the full width of the window. You can
+  restrict this to a typical width and center the page by setting the
+  <EuiCode>restrictWidth</EuiCode>
+  prop to
+  <EuiCode>true</EuiCode>
+  on
+  <strong>EuiPageHeader</strong>
+  and
+  <strong>EuiPageContent</strong>. You can also pass an integer to this property
+  to max out the width at a custom pixel value or a string with a custom
+  measurement.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut>
+  <:title>
+    The
+    <strong>EuiPageTemplate</strong>
+    allows setting this property at the top level and defaults to true.
+  </:title>
+</EuiCallOut>
+
+```hbs template
+<EuiPageTemplate
+  @grow={{true}}
+  @restrictWidth='75%'
+  @grow={{true}}
+  @pageHeader={{hash
+    iconType='logoElastic'
+    pageTitle='Page Title'
+    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
+    tabs=this.tabs
+    description= 'Restricting the width to 75%.'
+  }}
+  @pageSideBar={{component 'eui-loading-content' lines=8}}
+>
+  <EuiLoadingContent @lines={{16}} />
+</EuiPageTemplate>
+```

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

@@ -0,0 +1,50 @@
+---
+order: 3
+---
+
+# Showing a bottom bar
+
+<EuiSpacer />
+<!-- <EuiText>
+  Adding an
+  <strong>EuiBottomBar</strong>
+  can be tricky to use and account for any side bars.
+  <strong>EuiPageTemplate</strong>
+  handles this nicely by supplying a
+  <EuiCode>bottomBar</EuiCode>
+  prop for passing the contents of your bottom bar, and
+  <EuiCode>bottomBarProps</EuiCode>
+  that extends
+  <strong>EuiBottomBar</strong>.<br /><br />
+
+  <!-- It uses the
+  <EuiCode>sticky</EuiCode>
+  position so that it sticks to the bottom of and remains within the bounds of
+  <strong>EuiPageBody</strong>. This way it will never overlap the
+  <strong>EuiPageSideBar</strong>, no matter the screen size. It also means not
+  needing to accommodate for the height of the bar in the body element.
+</EuiText> -->
+<EuiSpacer />
+<EuiCallOut>
+  <:title>
+    <strong>EuiPageTemplate</strong>
+    only supports bottom bars in the
+    <EuiCode>default</EuiCode>
+    template.
+  </:title>
+</EuiCallOut>
+
+```hbs template
+<EuiPageTemplate
+  @grow={{true}}
+  @pageHeader={{hash
+    iconType='logoElastic'
+    pageTitle='Page Title'
+    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
+  }}
+  @pageSideBar={{component 'eui-loading-content' lines=8}}
+  @bottomBar={{component "eui-button-title" title="Save"}}
+>
+  <EuiLoadingContent @lines={{16}} />
+</EuiPageTemplate>
+```

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

@@ -0,0 +1,38 @@
+---
+order: 4
+---
+
+# Centered Body
+
+<EuiSpacer />
+<EuiText>
+  When the content for the page is minimal or in an empty/pre-setup state, the page content can be centered vertically and horizontally. We recommend then using the <strong>EuiEmptyPrompt</strong> for the content.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut>
+  <:title>
+    This layout can be achieved in <strong>EuiPageTemplate</strong> by setting <EuiCode>template="centeredBody"</EuiCode>.
+  </:title>
+</EuiCallOut>
+
+```hbs template
+<EuiPageTemplate
+  @template='centeredBody'
+  @grow={{true}}
+  @pageSideBar={{component 'eui-loading-content' lines=8}}
+>
+  <EuiEmptyPrompt @paddingSize='l'>
+    <:content>
+      <EuiTitle>No spice</EuiTitle>
+      <EuiSpacer />
+      <EuiLoadingContent @lines={{8}} />
+      <EuiButton>
+        Go to full screen
+      </EuiButton>
+    </:content>
+    <:footer>
+      Footer
+    </:footer>
+  </EuiEmptyPrompt>
+</EuiPageTemplate>
+```

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

@@ -0,0 +1,30 @@
+---
+order: 5
+---
+
+# Centered Content
+<EuiSpacer />
+<EuiText>
+  Similar to the previous example, you can create a centered panel to emphasize incompleteness even with a page header. For this setup, we recommend using setting <strong>EuiPageContent</strong> to use the <EuiCode>subdued</EuiCode> color as to not have nested shadows.
+</EuiText>
+<EuiSpacer />
+<EuiCallOut>
+  <:title>
+    This layout can be achieved in <strong>EuiPageTemplate</strong> by setting <EuiCode>template="centeredContent"</EuiCode>.
+  </:title>
+</EuiCallOut>
+
+```hbs template
+<EuiPageTemplate
+  @grow={{true}}
+  @template='centeredContent'
+  @pageHeader={{hash
+    iconType='logoElastic'
+    pageTitle='Page Title'
+    rightSideItems=(array (component 'eui-button-title' title='Go full screen'))
+  }}
+  @pageSideBar={{component 'eui-loading-content' lines=8}}
+>
+  <EuiEmptyPrompt @paddingSize="l" @title='No spice' @body={{component 'eui-loading-content' lines=8}}/>
+</EuiPageTemplate>
+```