@ember-eui/core 5.0.1 → 5.1.0

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

@@ -1,358 +0,0 @@
-# Demo
-
-```hbs template
-<EuiTitle>
-  Flex Group
-</EuiTitle>
-<EuiSpacer />
-<EuiTitle @size="s">
-  Flex Wrap
-</EuiTitle>
-<EuiSpacer @size="s" />
-<EuiFlexGroup @wrap={{true}}>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1); min-width: 300px;">
-    Min Width: 300px
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1); min-width: 300px;">
-    Min Width: 300px
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1); min-width: 300px;">
-    Min Width: 300px
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer @size="xl" />
-<EuiTitle @size="s">
-  Flex Group with unlimited items
-</EuiTitle>
-<EuiSpacer @size="s" />
-<EuiFlexGroup @wrap={{true}}>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    1
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    2
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    3
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    4
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    5
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    6
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    7
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    8
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    9
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    10
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer @size="xl" />
-<EuiTitle @size="s">
-  Flex Grow
-</EuiTitle>
-<EuiSpacer @size="s" />
-<EuiFlexGroup @wrap={{true}}>
-  <EuiFlexItem @grow="false" style="padding: 16px; background: rgba(27,169,245,0.1);">
-    This item won't grow.
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    But this item will.
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer @size="xl" />
-<EuiTitle @size="s">
-  Flex - Proportional Growth
-</EuiTitle>
-<EuiSpacer @size="s" />
-<EuiFlexGroup>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow={{1}}>
-    1
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow={{2}}>
-    2
-    <br />
-    wraps content if necessary
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow={{3}}>
-    3
-    <br />
-    expands_to_fit_if_content_cannot_wrap
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow={{4}}>
-    4
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer />
-<EuiFlexGroup>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow={{6}}>
-    6
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow={{3}}>
-    3
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow={{1}}>
-    1
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow={{3}}>
-    3
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow={{6}}>
-    6
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer @size="xl" />
-<EuiTitle @size="s">
-  Flex - Justify and Align
-</EuiTitle>
-<EuiSpacer @size="s" />
-<EuiFlexGroup @justifyContent="spaceEvenly">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow="false">
-    One here on the left
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow="false">
-    The other over here on the right.
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer />
-<EuiFlexGroup @justifyContent="spaceBetween">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow="false">
-    One here on the left
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow="false">
-    The other over here on the right.
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer />
-<EuiFlexGroup @justifyContent="spaceAround">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow="false">
-    I’m a single centered item!
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer />
-<EuiFlexGroup @alignItems="center">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow="false">
-    <EuiText>
-      <p>
-        I
-      </p>
-      <p>
-        am
-      </p>
-      <p>
-        really
-      </p>
-      <p>
-        tall
-      </p>
-    </EuiText>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    I am vertically centered!
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer @size="xl" />
-<EuiTitle @size="s">
-  Flex Groups can change direction
-</EuiTitle>
-<EuiSpacer @size="s" />
-<EuiFlexGroup @direction="column">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow="false">
-    Content grid item
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow="false">
-    Another content grid item
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);" @grow="false">
-    Using the column direction
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer @size="xl" />
-<EuiTitle @size="s">
-  Flex Grids for repeatable grids - can have up to 4 columns
-</EuiTitle>
-<EuiSpacer @size="s" />
-<EuiFlexGrid @columns={{4}}>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      One
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Two
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Three
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Four
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Five
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Six
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Seven
-    </div>
-  </EuiFlexItem>
-</EuiFlexGrid>
-<EuiSpacer @size="xl" />
-<EuiTitle @size="s">
-  Flex Grids can change direction
-</EuiTitle>
-<EuiSpacer @size="s" />
-<EuiFlexGrid @direction="column" @columns={{2}}>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      One
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Two
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Three
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Four
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Five
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Six
-    </div>
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    <div>
-      Seven
-    </div>
-  </EuiFlexItem>
-</EuiFlexGrid>
-<EuiSpacer @size="xl" />
-<EuiTitle @size="s">
-  Gutter Size for both Grids and Groups
-</EuiTitle>
-<EuiSpacer @size="s" />
-<EuiFlexGroup @gutterSize="none">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    None
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    None
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    None
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    None
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer />
-<EuiFlexGroup @gutterSize="xs">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Extra small
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Extra small
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Extra small
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Extra small
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer />
-<EuiFlexGroup @gutterSize="s">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Small
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Small
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Small
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Small
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer />
-<EuiFlexGroup @gutterSize="m">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Medium
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Medium
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Medium
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Medium
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer />
-<EuiFlexGroup @gutterSize="l">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Large (default)
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Large (default)
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Large (default)
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Large (default)
-  </EuiFlexItem>
-</EuiFlexGroup>
-<EuiSpacer />
-<EuiFlexGroup @gutterSize="xl">
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Extra Large
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Extra Large
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Extra Large
-  </EuiFlexItem>
-  <EuiFlexItem style="padding: 16px; background: rgba(27,169,245,0.1);">
-    Extra Large
-  </EuiFlexItem>
-</EuiFlexGroup>
-```

package/docs/layout/flex.md

@@ -1 +0,0 @@
-<EuiPageHeader @pageTitle="Flex"/>

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

@@ -1,87 +0,0 @@
----
-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}}>
-  Small Flyout w/o Overlay
-</EuiButton>
-
-{{#if this.flyout2Open}}
-  <EuiFlyout @size='s' @onClose={{this.closeFlyout}}>
-    <EuiFlyoutHeader @hasBorder={{true}}>
-      <EuiTitle @size='l'>Small Welcome!</EuiTitle>
-    </EuiFlyoutHeader>
-    <EuiFlyoutBody>
-
-      <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')}}>
-          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;
-
-  @action
-  openFlyout() {
-    this.flyout2Open = true;
-  }
-
-  @action
-  closeFlyout(flyout) {
-    this.flyout2Open = false;
-  }
-}
-```

package/docs/layout/flyout.md

@@ -1 +0,0 @@
-<EuiPageHeader @pageTitle="Flyout"/>

package/docs/layout/header.md

@@ -1 +0,0 @@
-<EuiPageHeader @pageTitle="Header"/>

package/docs/layout/horizontal-rule-demo/demo1.md

@@ -1,70 +0,0 @@
-# Demo
-
-```hbs template
-<EuiTitle @size="l">
-  Size
-</EuiTitle>
-<EuiText @size="s">
-  <p>
-    quarter
-  </p>
-</EuiText>
-<EuiHorizontalRule @size="quarter" />
-<EuiText @size="s">
-  <p>
-    half
-  </p>
-</EuiText>
-<EuiHorizontalRule @size="half" />
-<EuiText @size="s">
-  <p>
-    full (default)
-  </p>
-</EuiText>
-<EuiHorizontalRule @size="full" />
-<EuiTitle @size="l">
-  Margin
-</EuiTitle>
-<EuiText @size="s">
-  <p>
-    none
-  </p>
-</EuiText>
-<EuiHorizontalRule @margin="none" />
-<EuiText @size="s">
-  <p>
-    xs
-  </p>
-</EuiText>
-<EuiHorizontalRule @margin="xs" />
-<EuiText @size="s">
-  <p>
-    s
-  </p>
-</EuiText>
-<EuiHorizontalRule @margin="s" />
-<EuiText @size="s">
-  <p>
-    m
-  </p>
-</EuiText>
-<EuiHorizontalRule @margin="m" />
-<EuiText @size="s">
-  <p>
-    l (default)
-  </p>
-</EuiText>
-<EuiHorizontalRule @margin="l" />
-<EuiText @size="s">
-  <p>
-    xl
-  </p>
-</EuiText>
-<EuiHorizontalRule @margin="xl" />
-<EuiText @size="s">
-  <p>
-    xxl
-  </p>
-</EuiText>
-<EuiHorizontalRule @margin="xxl" />
-```

package/docs/layout/horizontal-rule.md

@@ -1 +0,0 @@
-<EuiPageHeader @pageTitle="Horizontal Rule"/>

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

@@ -1,97 +0,0 @@
----
-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
-<EuiButton
-  @color='primary'
-  {{on 'click' (fn this.activateModal 'basicModalActive')}}
->
-  Show Modal
-</EuiButton>
-{{#if this.basicModalActive}}
-
-  <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>
-{{/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 basicModalActive = false;
-
-  @action
-  activateModal(modal) {
-    this[modal] = true;
-  }
-
-  @action
-  deactivateModal(modal) {
-    this[modal] = false;
-  }
-
-  @action
-  reloadPage() {
-    location.reload();
-  }
-}
-```