@ember-eui/core 5.0.1 → 5.1.0

package/docs/navigation/button/demo/d05-icon-buttons.md

@@ -0,0 +1,139 @@
+---
+order: 5
+---
+
+# Icon buttons
+
+```hbs template
+<EuiFlexGroup @responsive={{false}} @gutterSize="s" @alignItems="center">
+  {{#each this.colors as |color|}}
+    <EuiFlexItem key={{color}} @grow={{false}}>
+      <EuiButtonIcon
+        @color={{color}}
+        @iconType="help"
+        aria-label="Help"
+      />
+    </EuiFlexItem>
+  {{/each}}
+</EuiFlexGroup>
+<EuiSpacer @size="m" />
+<EuiTitle @size="xxs">
+  <h3>
+    Display (<EuiCode>empty</EuiCode>, <EuiCode>base</EuiCode>, <EuiCode>fill</EuiCode>)
+  </h3>
+</EuiTitle>
+<EuiSpacer @size="s" />
+<EuiFlexGroup @responsive={{false}} @gutterSize="s" @alignItems="center">
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon @iconType="arrowRight" aria-label="Next" />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon @display="base" @iconType="arrowRight" aria-label="Next" />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon @display="fill" @iconType="arrowRight" aria-label="Next" />
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer @size="m" />
+<EuiTitle @size="xxs">
+  <h3>Disabled </h3>
+</EuiTitle>
+<EuiSpacer @size="s" />
+<EuiFlexGroup @responsive={{false}} @gutterSize="s" @alignItems="center">
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon @iconType="arrowRight" @isDisabled={{true}} aria-label="Next" />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon
+      @display="base"
+      @iconType="arrowRight"
+      @isDisabled={{true}}
+      aria-label="Next"
+    />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon
+      @iconType="arrowRight"
+      @display="fill"
+      @isDisabled={{true}}
+      aria-label="Next"
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer @size="m" />
+<EuiTitle @size="xxs">
+  <h3>
+    Size (<EuiCode>xs</EuiCode>, <EuiCode>s</EuiCode>, <EuiCode>m</EuiCode>)
+  </h3>
+</EuiTitle>
+<EuiSpacer @size="s" />
+<EuiFlexGroup @responsive={{false}} @gutterSize="s" @alignItems="center">
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon @display="base" @iconType="arrowRight" aria-label="Next" />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon
+      @display="base"
+      @iconType="arrowRight"
+      @size="s"
+      aria-label="Next"
+    />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon
+      @display="base"
+      @iconType="arrowRight"
+      @iconSize="l"
+      @size="m"
+      aria-label="Next"
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer @size="m" />
+<EuiTitle @size="xxs">
+  <h3>All icons types inherit button color</h3>
+</EuiTitle>
+<EuiSpacer @size="s" />
+<EuiFlexGroup @responsive={{false}} @gutterSize="s" @alignItems="center">
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon @iconType="heart" aria-label="Heart" @color="accent" />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon
+      @iconType="dashboardApp"
+      aria-label="Dashboard"
+      @color="success"
+    />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon
+      @display="base"
+      @iconType="trash"
+      aria-label="Delete"
+      @color="danger"
+    />
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon @display="base" @iconType="lensApp" aria-label="Lens" />
+  </EuiFlexItem>
+</EuiFlexGroup>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoComponent extends Component {
+  
+  colors = [
+    'primary',
+    'success',
+    'warning',
+    'danger',
+    'text',
+    'accent'
+  ];
+
+}
+```

package/docs/navigation/button/demo/d06-buttons-as-links.md

@@ -0,0 +1,51 @@
+---
+order: 6
+---
+
+# Buttons as links
+
+
+```hbs template
+<EuiFlexGroup @responsive={{false}} @wrap={{true}} @gutterSize="s" @alignItems="center">
+  <EuiFlexItem @grow={{false}}>
+    <EuiButton @href="#/navigation/button">Link to elastic.co</EuiButton>
+  </EuiFlexItem>
+
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonEmpty @href="#/navigation/button">
+      Link to elastic.co
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon
+      @href="#/navigation/button"
+      @iconType="link"
+      aria-label="This is a link"
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+
+<EuiFlexGroup @responsive={{false}} @wrap={{true}} @gutterSize="s" @alignItems="center">
+  <EuiFlexItem @grow={{false}}>
+    <EuiButton @href="#/navigation/button" @isDisabled={{true}}>
+      Disabled link
+    </EuiButton>
+  </EuiFlexItem>
+
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonEmpty @href="#/navigation/button" @isDisabled={{true}}>
+      Disabled empty link
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonIcon
+      @href="#/navigation/button"
+      @iconType="link"
+      aria-label="This is a link"
+      @isDisabled={{true}}
+    />
+  </EuiFlexItem>
+</EuiFlexGroup>
+```

package/docs/navigation/button/demo/d07-loading-state.md

@@ -0,0 +1,38 @@
+---
+order: 7
+---
+
+# Loading state
+
+
+```hbs template
+<EuiFlexGroup @responsive={{false}} @wrap={{true}} @gutterSize="s" @alignItems="center">
+  <EuiFlexItem @grow={{false}}>
+    <EuiButton @isLoading={true}>Loading&hellip;</EuiButton>
+  </EuiFlexItem>
+
+  <EuiFlexItem @grow={{false}}>
+    <EuiButton @fill={{true}} @size="s" @isLoading={true}>
+      Loading&hellip;
+    </EuiButton>
+  </EuiFlexItem>
+
+  <EuiFlexItem @grow={{false}}>
+    <EuiButton @fill={{true}} @isLoading={true} @iconType="check" @iconSide="right">
+      Loading&hellip;
+    </EuiButton>
+  </EuiFlexItem>
+
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonEmpty @isLoading={{true}}>
+      Loading&hellip;
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonEmpty @size="xs" @isLoading={{true}} @iconSide="right">
+      Loading&hellip;
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+</EuiFlexGroup>
+```

package/docs/navigation/button/demo/d08-split-buttons.md

@@ -0,0 +1,43 @@
+---
+order: 8
+---
+
+# Split buttons
+
+
+```hbs template
+<TodoText/>
+<!-- <EuiFlexGroup @responsive={{false}} @gutterSize="xs" @alignItems="center">
+  <EuiFlexItem @grow={{false}}>
+    <EuiButton @size="s" @iconType="calendar">
+      Last 15 min
+    </EuiButton>
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+
+    <EuiPopover
+      @ownFocus={{true}}
+      @isOpen={{this.popover}}
+      @anchorPosition='downCenter'
+      @closePopover={{set this 'popover' false}}
+    >
+      <:button>
+        <EuiButton
+          @iconType='arrowDown'
+          @iconSide='right'
+          {{on 'click' (set this 'popover' true)}}
+        >
+          Show Popover
+        </EuiButton>
+      </:button>
+      <:content>
+        <EuiText @size="m" style="width: 300px;">
+          <p>
+            Popover content that’s wider than the default width
+          </p>
+        </EuiText>
+      </:content>
+    </EuiPopover>
+  </EuiFlexItem>
+</EuiFlexGroup> -->
+```

package/docs/navigation/button/demo/d09-toggle-buttons.md

@@ -0,0 +1,10 @@
+---
+order: 9
+---
+
+# Toggle buttons
+
+
+```hbs template
+<TodoText/>
+```

package/docs/navigation/button/demo/d10-button-groups.md

@@ -0,0 +1,10 @@
+---
+order: 10
+---
+
+# Button groups
+
+
+```hbs template
+<TodoText/>
+```

package/docs/navigation/button/demo/d11-ghost.md

@@ -0,0 +1,10 @@
+---
+order: 11
+---
+
+# Ghost
+
+
+```hbs template
+<TodoText/>
+```

package/docs/navigation/button/index.md

@@ -0,0 +1,13 @@
+---
+title: Button
+---
+
+<EuiPageHeader @pageTitle="Button"/>
+<EuiSpacer @size="l" />
+
+<EuiText>
+  <p> EUI provides many types, colors and configurations of buttons. The one best suited for you context depends on placement, prominence, and state. For primary and secondary actions it is best to use the basic <strong>EuiButton</strong>. For tertiary or low prominence actions, use <strong>EuiButtonempty</strong>.</p>
+  <p>Be sure to read the full button usage guidelines.</p>
+</EuiText>
+
+<EuiHorizontalRule/>

package/docs/navigation/steps-demo/demo3.md

@@ -13,7 +13,6 @@ order: 5
 <EuiStepsHorizontal>
   <EuiStepHorizontal
     @title='Completed step 1'
-    @status='complete'
     @step={{1}}
     @isComplete={{true}}
   />

package/docs/{layout/page-template/demo/demo1.md → templates/page-template/demo/d01-a-full-page-with-everything.md}

@@ -2,31 +2,8 @@
 order: 1
 ---
 
-# Basic Page
+# A full page with everything
 
-<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>

package/docs/{layout/page-template/demo/demo4.md → templates/page-template/demo/d04-centered-body.md}

@@ -2,7 +2,7 @@
 order: 4
 ---
 
-# Centered Body
+# Centered body
 
 <EuiSpacer />
 <EuiText>

package/docs/{layout/page-template/demo/demo5.md → templates/page-template/demo/d05-centered-content.md}

@@ -2,7 +2,7 @@
 order: 5
 ---
 
-# Centered Content
+# Centered content
 
 <EuiSpacer />
 <EuiText>

package/docs/templates/page-template/index.md

@@ -0,0 +1,37 @@
+---
+title: Page template
+---
+
+<EuiPageHeader @pageTitle="Page template"/>
+
+<EuiText>
+  <p>
+  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.
+  </p>
+</EuiText>
+
+<!-- <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 />
+
+<EuiCallOut
+  @color="danger"
+  @title='Do not nest multiple EuiPageTemplate components.'
+  @iconType='alert'
+>
+  <:body>
+    The template is a very fragile component that will cause unexpected results if nested.
+  </:body>
+</EuiCallOut>
+<EuiSpacer /> -->
+
+<EuiHorizontalRule />

package/docs/templates/sitewide-search/demo/d01-basic-setup.md

@@ -0,0 +1,10 @@
+---
+order: 1
+---
+
+# Basic setup
+
+
+```hbs template
+<TodoText/>
+```

package/docs/templates/sitewide-search/demo/d02-options.md

@@ -0,0 +1,10 @@
+---
+order: 2
+---
+
+# Options
+
+
+```hbs template
+<TodoText/>
+```

package/docs/templates/sitewide-search/index.md

@@ -0,0 +1,9 @@
+---
+title: Sitewide search
+disabled: true
+disabled_demos:
+  - d01-basic-setup
+  - d02-options
+---
+
+<EuiPageHeader @pageTitle="Sitewide search"/>

package/docs/templates/super-date-picker/demo/d01-update-button.md

@@ -0,0 +1,10 @@
+---
+order: 1
+---
+
+# Update button
+
+
+```hbs template
+<TodoText/>
+```

package/docs/templates/super-date-picker/demo/d02-quick-select-panels.md

@@ -0,0 +1,10 @@
+---
+order: 2
+---
+
+# Quick select panels
+
+
+```hbs template
+<TodoText/>
+```

package/docs/templates/super-date-picker/demo/d03-sizing.md

@@ -0,0 +1,10 @@
+---
+order: 3
+---
+
+# Sizing
+
+
+```hbs template
+<TodoText/>
+```

package/docs/templates/super-date-picker/demo/d04-auto-refresh.md

@@ -0,0 +1,11 @@
+---
+order: 1
+4
+---
+
+# Auto refresh
+
+
+```hbs template
+<TodoText/>
+```

package/docs/templates/super-date-picker/demo/d05-elastic-pattern-with-kql.md

@@ -0,0 +1,10 @@
+---
+order: 5
+---
+
+# Elastic pattern with KQL
+
+
+```hbs template
+<TodoText/>
+```

package/docs/templates/super-date-picker/index.md

@@ -0,0 +1,12 @@
+---
+title: Super date picker
+disabled: true
+disabled_demos:
+  - d01-update-button
+  - d02-quick-select-panels
+  - d03-sizing
+  - d04-auto-refresh
+  - d05-elastic-pattern-with-kql
+---
+
+<EuiPageHeader @pageTitle="Sitewide search"/>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ember-eui/core",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "Ember Components for Elastic UI",
   "keywords": [
     "ember-addon",
@@ -54,7 +54,7 @@
   "dependencies": {
     "@elastic/eui": "41.4.0",
     "@ember/render-modifiers": "^2.0.4",
-    "@html-next/vertical-collection": "3.0.0-1",
+    "@html-next/vertical-collection": "3.0.0",
     "@types/lodash-es": "^4.17.4",
     "@types/refractor": "^3.0.0",
     "chroma-js": "^2.1.0",
@@ -182,5 +182,5 @@
   "volta": {
     "extends": "../../package.json"
   },
-  "gitHead": "3aef480644ac4197019735532b7907b018151deb"
+  "gitHead": "d8af7448f9a9283a6b2aeb246dbbf73687c56a0e"
 }

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

@@ -1,33 +0,0 @@
----
-order: 1
----
-
-# Arrow display
-
-<EuiText>
-  The arrow helps indicate the current state of the accordion (open or not) and points to the main triggering button text. If you must hide or change the side in which the arrow appears, use <EuiCode>arrowDisplay: 'right'</EuiCode> or <EuiCode>'none'</EuiCode>
-</EuiText>
-
-```hbs template
-<EuiAccordion @arrowDisplay='right'>
-  <:buttonContent>
-    This accordion has the arrow on the right
-  </:buttonContent>
-  <:content>
-    Any content inside of
-    <strong>EuiAccordion</strong>
-    will appear here.
-  </:content>
-</EuiAccordion>
-<EuiSpacer />
-<EuiAccordion @arrowDisplay='none'>
-  <:buttonContent>
-    This one has it removed entirely
-  </:buttonContent>
-  <:content>
-    Any content inside of
-    <strong>EuiAccordion</strong>
-    will appear here.
-  </:content>
-</EuiAccordion>
-```

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

@@ -1,66 +0,0 @@
----
-order: 7
----
-
-# When content changes dynamically
-
-<EuiText>
-  If an accordion’s content changes height while the accordion is open, it will
-  resize dynamically.
-</EuiText>
- 
-```hbs template
-<EuiAccordion @paddingSize='s'>
-  <:buttonContent>
-    Click me to toggle close / open
-  </:buttonContent>
-  <:content>
-    <EuiButton
-      @size='s'
-      @iconType='plusInCircleFilled'
-      {{on 'click' (fn this.incrementDecreaseRows 'add')}}
-    >
-      Increase height to
-      {{add this.counter 1}}
-      items
-    </EuiButton>
-    <EuiButton
-      @size='s'
-      @iconType='minusInCircleFilled'
-      {{on 'click' (fn this.incrementDecreaseRows 'sub')}}
-      @isDisabled={{eq this.counter 1}}
-    >
-      Decrease height to
-      {{sub this.counter 1}}
-      items
-    </EuiButton>
-    <EuiSpacer />
-    <EuiPanel @color='subdued'>
-      <ul>
-        {{#each (range 0 this.counter) as |row|}}
-          <li> Row {{row}}</li>
-        {{/each}}
-      </ul>
-    </EuiPanel>
-  </:content>
-</EuiAccordion>
-```
-
-```js component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
-
-export default class AccordionDemo8Component extends Component {
-  @tracked counter = 1;
-
-  @action
-  incrementDecreaseRows(actionType) {
-    if (actionType == 'add') {
-      this.counter++;
-    } else {
-      this.counter--;
-    }
-  }
-}
-```

package/docs/layout/bottom-bar.md

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