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

package/docs/layout/flyout.md

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

package/docs/layout/header.md

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

package/docs/layout/horizontal-rule.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Horizontal rule
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Horizontal Rule"/>

package/docs/layout/modal.md

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

package/docs/layout/page.md

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

package/docs/layout/panel.md

@@ -1,15 +1,7 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Panel
-      </h1>
-    </EuiTitle>
-    <EuiSpacer @size='l' />
+<EuiPageHeader @pageTitle="Panel"/>
+
 <EuiText>
   <p>
 <strong>EuiPanel</strong> is a building block component. Use it as a layout helper for containing content. It is also commonly used as a base for other larger components like <strong>EuiPage</strong>, <strong>EuiPopover</strong> and <strong>EuiCard</strong>.
   </p>
 </EuiText>
-  </EuiPageHeaderSection>
-</EuiPageHeader>

package/docs/layout/popover.md

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

package/docs/navigation/breadcrumbs.md

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

package/docs/navigation/button.md

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

package/docs/navigation/collapsible-nav.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Collapsible nav
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Collapsible nav"/>

package/docs/navigation/key-pad-menu.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Key pad menu
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Key pad menu"/>

package/docs/navigation/link.md

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

package/docs/navigation/side-nav.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Side nav
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Side nav"/>

package/docs/navigation/steps.md

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

package/docs/navigation/tabs-demo/demo1.md

@@ -1,109 +1,36 @@
-# Demo
+---
+order: 4
+---
 
-```hbs template
-<EuiSpacer @size="xxl" />
-<EuiTitle @size="s">
-  Simple tabs with
-  <b>
-    isSelected
-  </b>
-  and
-  <b>
-    display = condensed
-  </b>
-</EuiTitle>
-<EuiTabs @display="condensed" as |Tab|>
-  <Tab @isSelected={{true}}>
-    Example 1
-  </Tab>
-  <Tab>
-    Example 2
-  </Tab>
-  <Tab>
-    Example 3
-  </Tab>
-</EuiTabs>
-<EuiSpacer @size="xxl" />
-<EuiTitle @size="s">
-  Simple tabs with
-  <b>
-    disabled
-  </b>
-  and
-  <b>
-    expand = true
-  </b>
-</EuiTitle>
-<EuiTabs @expand={{true}} as |Tab|>
-  <Tab @disabled={{true}}>
-    Example 1
-  </Tab>
-  <Tab>
-    Example 2
-  </Tab>
-</EuiTabs>
-<EuiSpacer @size="xxl" />
-<EuiTitle @size="s">
-  Tabbed content
-</EuiTitle>
-<EuiTabbedContent @tabs={{this.tabsItems1}} />
-<EuiSpacer @size="xxl" />
-<EuiTitle @size="s">
-  Tabbed content with
-  <b>
-    onTabClick
-  </b>
-</EuiTitle>
-<EuiTabbedContent @tabs={{this.tabsItems2}} @onTabClick={{this.sayMyName}} />
-<EuiSpacer @size="xxl" />
-<EuiTitle @size="s">
-  Tabbed content with
-  <b>
-    initialSelectedTab
-  </b>
-</EuiTitle>
-<EuiTabbedContent
-  @tabs={{this.tabsItems2}}
-  @initialSelectedTab={{object-at 2 this.tabsItems2}}
-/>
-<EuiSpacer @size="xxl" />
-<EuiTitle @size="s">
-  Tabbed content with
-  <b>
-    selectedTab
-  </b>
-</EuiTitle>
-<p>
-  This is used if you want to control the tabs from the outside, however the internal state is not propagated to the
-  outside
-</p>
-<EuiSpacer />
-<EuiButton @color="primary" {{on "click" this.cycleTabs}}>
-  Next tab
-</EuiButton>
-Outer selected tab:
-{{get (object-at this.tabsIndex2 this.tabsItems2) "name"}}
-<EuiTabbedContent
-  @tabs={{this.tabsItems2}}
-  @selectedTab={{object-at this.tabsIndex2 this.tabsItems2}}
-/>
+# Tab sizes
+
+<EuiText>
+<p><strong>EuiTabs</strong> allow a <EuiCode>size</EuiCode> prop. In general you should always use the default (medium) size. The small size is best for when placing inside popovers or other small containers. Reserve using the large size for when using as primary page navigation, like inside of <a href="#/layout/page-header"><strong>EuiPageHeader</strong></a>.</p>
+<p>You can also use the <EuiCode>expand</EuiCode> prop to evenly stretch each tab horizontally.</p>
+</EuiText>
 
-<EuiSpacer />
-<EuiTitle @size="s">
-  You could also provide a `selectedTabContent` block for more flexibility
-</EuiTitle>
-<EuiTabbedContent
-  @tabs={{array
-    (hash id="hello" name="Hello")
-    (hash id="goodbye" name="Goodbye")
-  }}
->
-  <:selectedTabContent as |currentTab|>
-    <EuiTitle>
-      {{currentTab.name}}
-    </EuiTitle>
-  </:selectedTabContent>
-</EuiTabbedContent>
+```hbs template
+<div>
+  <EuiPopover
+    @ownFocus={{true}}
+    @isOpen={{this.popover}}
+    @anchorPosition='downLeft'
+    @closePopover={{set this 'popover' false}}
+  >
+    <:button>
+      <EuiButton
+        @iconType='arrowDown'
+        @iconSide='right'
+        {{on 'click' (set this 'popover' true)}}
+      >
+        Show Popover
+      </EuiButton>
+    </:button>
+    <:content>
+      <EuiTabbedContent @tabs={{this.tabsItems1}} />
+    </:content>
+  </EuiPopover>
+</div>
 ```
 
 ```js component
@@ -121,31 +48,31 @@ export default class DemoTabsComponent extends Component {
       {
         id: 'example1',
         name: 'Example 1',
-        content: 'Example 1 content.',
+        content: 'Example 1 content.'
       },
       {
         id: 'example2',
         name: 'Example 2',
-        content: 'Example 2 content.',
-      },
+        content: 'Example 2 content.'
+      }
     ];
 
     this.tabsItems2 = [
       {
         id: 'one',
         name: 'Click me 1!',
-        content: "Same ol' 1 content.",
+        content: "Same ol' 1 content."
       },
       {
         id: 'two',
         name: 'Click me 2!',
-        content: "Same ol' 2 content.",
+        content: "Same ol' 2 content."
       },
       {
         id: 'three',
         name: 'Click me 3!',
-        content: "Same ol' 3 content.",
-      },
+        content: "Same ol' 3 content."
+      }
     ];
   }
 

package/docs/navigation/tabs-demo/demo2.md

@@ -0,0 +1,56 @@
+---
+order: 1
+---
+
+# Tabbed Content
+
+<EuiText>
+<p><strong>EuiTabbedContent</strong> makes it easier to associate tabs with content based on the selected tab. Use the <EuiCode>initialSelectedTab</EuiCode> prop to specify which tab to initially select.</p>
+</EuiText>
+
+```hbs template
+<EuiTabbedContent @tabs={{this.tabsItems1}} />
+```
+
+```js component
+import Component from '@ember/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoTabsComponent extends Component {
+  @tracked tabsIndex2 = 0;
+
+  constructor() {
+    super(...arguments);
+
+    this.tabsItems1 = [
+      {
+        id: 'cobalt--id',
+        name: 'Cobalt',
+        content:
+          ' Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth&rsquo;s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.'
+      },
+      {
+        id: 'dextrose--id',
+        name: 'Dextrose',
+        content:
+          'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
+      },
+      {
+        id: 'hydrogen--id',
+        name: 'Hydrogen',
+        prepend: 'heatmap',
+        disabled: true,
+        content:
+          'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
+      },
+      {
+        id: 'monosodium_glutammate--id',
+        name: 'Monosodium Glutamate',
+        content:
+          ' Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.'
+      }
+    ];
+  }
+}
+```

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

@@ -0,0 +1,79 @@
+---
+order: 2
+---
+
+# Controlled tabbed content
+
+<EuiText>
+<p>You can also use the <code class="euiCode" data-code-language="text">selectedTab</code> and <code class="euiCode" data-code-language="text">onTabClick</code> props to take complete control over tab selection. This can be useful if you want to change tabs based on user interaction with another part of the UI.</p>
+</EuiText>
+
+```hbs template
+<EuiButton @color='primary' {{on 'click' this.cycleTabs}}>
+  Next tab
+</EuiButton>
+Outer selected tab:
+{{get (object-at this.tabsIndex2 this.tabsItems1) 'name'}}
+<EuiTabbedContent
+  @tabs={{this.tabsItems1}}
+  @selectedTab={{object-at this.tabsIndex2 this.tabsItems1}}
+/>
+
+<EuiSpacer />
+```
+
+```js component
+import Component from '@ember/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoTabsComponent extends Component {
+  @tracked tabsIndex2 = 0;
+
+  constructor() {
+    super(...arguments);
+
+    this.tabsItems1 = [
+      {
+        id: 'cobalt--id',
+        name: 'Cobalt',
+        content:
+          ' Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth&rsquo;s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.'
+      },
+      {
+        id: 'dextrose--id',
+        name: 'Dextrose',
+        content:
+          'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
+      },
+      {
+        id: 'hydrogen--id',
+        name: 'Hydrogen',
+        prepend: 'heatmap',
+
+        content:
+          'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
+      },
+      {
+        id: 'monosodium_glutammate--id',
+        name: 'Monosodium Glutamate',
+        content:
+          ' Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.'
+      }
+    ];
+  }
+
+  sayMyName(tab) {
+    alert(`I am ${tab.name || tab.id}`);
+  }
+
+  @action
+  cycleTabs() {
+    this.tabsIndex2++;
+
+    if (this.tabsIndex2 >= this.tabsItems2.length) {
+      this.tabsIndex2 = 0;
+    }
+  }
+}
+```

package/docs/navigation/tabs-demo/demo4.md

@@ -0,0 +1,102 @@
+---
+order: 3
+---
+
+# Bottom border
+
+<EuiText>
+<p>The <EuiCode>bottomBorder</EuiCode> helps to separate the tab group from the content below and is on by default. However, some components like <a href="#/layout/flyout">flyouts</a> already provide borders which can act as the divider. In this case you can turn the border off with <EuiCode>bottomBorder<span class="token operator">=</span><span class="token punctuation">{</span><span class="token boolean">false</span><span class="token punctuation">}</span></EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiButton {{on 'click' this.openFlyout}}>
+  Show tabs flyout header
+</EuiButton>
+{{#if this.flyoutOpen}}
+  <EuiFlyout @onClose={{this.closeFlyout}}>
+    <EuiFlyoutHeader @hasBorder={{true}}>
+      <EuiTitle @size='l'>Flyout header</EuiTitle>
+      <EuiTabbedContent @tabs={{this.tabsItems1}} />
+    </EuiFlyoutHeader>
+    <EuiFlyoutBody />
+    <EuiFlyoutFooter>
+      <EuiFlexGroup @justifyContent='spaceBetween' @gutterSize='s'>
+        <EuiButton {{on 'click' this.closeFlyout}}>
+          Cancel
+        </EuiButton>
+        <EuiButton @fill={{true}} {{on 'click' this.closeFlyout}}>
+          Send
+        </EuiButton>
+      </EuiFlexGroup>
+    </EuiFlyoutFooter>
+  </EuiFlyout>
+{{/if}}
+```
+
+```js component
+import Component from '@ember/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoTabsComponent extends Component {
+  @tracked tabsIndex2 = 0;
+
+  @tracked flyoutOpen = false;
+
+  @action
+  openFlyout() {
+    this.flyoutOpen = true;
+  }
+
+  @action
+  closeFlyout(flyout) {
+    this.flyoutOpen = false;
+  }
+
+  constructor() {
+    super(...arguments);
+
+    this.tabsItems1 = [
+      {
+        id: 'cobalt--id',
+        name: 'Cobalt',
+        content:
+          ' Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth&rsquo;s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.'
+      },
+      {
+        id: 'dextrose--id',
+        name: 'Dextrose',
+        content:
+          'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
+      },
+      {
+        id: 'hydrogen--id',
+        name: 'Hydrogen',
+        prepend: 'heatmap',
+
+        content:
+          'Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.'
+      },
+      {
+        id: 'monosodium_glutammate--id',
+        name: 'Monosodium Glutamate',
+        content:
+          ' Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.'
+      }
+    ];
+  }
+
+  sayMyName(tab) {
+    alert(`I am ${tab.name || tab.id}`);
+  }
+
+  @action
+  cycleTabs() {
+    this.tabsIndex2++;
+
+    if (this.tabsIndex2 >= this.tabsItems2.length) {
+      this.tabsIndex2 = 0;
+    }
+  }
+}
+```

package/docs/navigation/tabs.md

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

package/docs/utilities/auto-sizer.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Auto sizer
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Auto sizer"/>

package/docs/utilities/copy.md

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

package/docs/utilities/mutation-observer.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Mutation observer
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Mutation observer"/>

package/docs/utilities/outside-click-detector.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Outside click detector
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Outside click detector"/>

package/docs/utilities/overlay-mask.md

@@ -1,9 +1 @@
-<EuiPageHeader>
-  <EuiPageHeaderSection>
-    <EuiTitle @size="l">
-      <h1>
-        Overlay Mask
-      </h1>
-    </EuiTitle>
-  </EuiPageHeaderSection>
-</EuiPageHeader>
+<EuiPageHeader @pageTitle="Overlay mask"/>

package/docs/utilities/portal.md

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