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

package/docs/navigation/side-nav-demo/demo1.md

@@ -2,11 +2,25 @@
 
 ```hbs template
 <EuiSideNav
-  @mobileTitle="Test Mobile Title"
+  @mobileTitle='Mobile Title'
+  @heading='Title'
   @isOpenMobile={{true}}
   @items={{this.sideNavItems}}
   @selectedItem={{this.selectedItem}}
+  @truncate={{true}} {{! you can also truncate per item }}
 />
+
+<EuiSpacer />
+<EuiSideNav
+  @isOpenMobile={{true}}
+  @items={{this.sideNavItems}}
+  @selectedItem={{this.selectedItem}}
+  @truncate={{true}} {{! you can also truncate per item }}
+>
+  <:heading>
+    <EuiIcon @type="faceHappy"/> Header!
+  </:heading>
+</EuiSideNav>
 ```
 
 ```js component
@@ -25,7 +39,7 @@ export default class DemoSideNavComponent extends Component {
       ...data,
       id: name,
       name,
-      onClick,
+      onClick
     };
   }
 
@@ -38,14 +52,15 @@ export default class DemoSideNavComponent extends Component {
       createItem('Elasticsearch', {
         icon: 'logoElasticsearch',
         items: [
-          createItem('Data sources'),
+          createItem('Data sources', { disabled: true }),
           createItem('Users'),
           createItem('Roles'),
           createItem('Watches'),
           createItem(
-            'Extremely long title will become truncated when the browser is narrow enough'
-          ),
-        ],
+            'Extremely long title will become truncated when the browser is narrow enough',
+            { truncate: true }
+          )
+        ]
       }),
       createItem('Kibana', {
         icon: 'logoKibana',
@@ -57,31 +72,32 @@ export default class DemoSideNavComponent extends Component {
                 items: [
                   createItem('Time stuff', {
                     icon: 'clock',
+                    emphasize: true
                   }),
                   createItem('Lion stuff', {
                     icon: 'stats',
                     items: [
                       createItem('Hello sstuff', {
                         icon: 'logoGolang',
-                      }),
-                    ],
-                  }),
-                ],
+                        disabled: true
+                      })
+                    ]
+                  })
+                ]
               }),
-              createItem('Visualizations'),
-            ],
+              createItem('Visualizations')
+            ]
           }),
           createItem('Index Patterns'),
           createItem('Saved Objects'),
-          createItem('Reporting'),
-        ],
+          createItem('Reporting')
+        ]
       }),
       createItem('Logstash', {
         icon: 'logoLogstash',
-        items: [createItem('Pipeline viewer')],
-      }),
+        items: [createItem('Pipeline viewer')]
+      })
     ];
   }
 }
-
-```
+```

package/docs/navigation/side-nav.md

@@ -1 +1 @@
-# Side nav
+<EuiPageHeader @pageTitle="Side nav"/>

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

@@ -2,28 +2,26 @@
 order: 1
 ---
 
-# Basic Steps
+<EuiText>
+<p><strong>EuiSteps</strong> presents procedural content in a numbered outline format. It is best used when presenting instructional content that must be conducted in a particular order. It requires a <EuiCode>title</EuiCode> and <EuiCode>children</EuiCode> to be present and will automatically increment the step number based on the initial <EuiCode>firstStepNumber</EuiCode>.</p>
+</EuiText>
 
 ```hbs template
 <EuiSteps>
-  <EuiStep
-    @step={{1}}
-    @title="Step 1"
-  >
-    You do this!
+  <EuiStep @step={{1}} @title='Step 1'>
+    Do this first
   </EuiStep>
-  <EuiStep
-    @step={{2}}
-    @title="Step 2"
-  >
-    You do that!
-  </EuiStep>
-  <EuiStep
-    @step={{3}}
-    @title="Step 3"
-    @status="danger"
-  >
-    You did what!?
+  <EuiStep @step={{2}} @title='Step 2'>
+    Then this
   </EuiStep>
 </EuiSteps>
+<EuiSpacer @size='m' />
+<EuiText>
+  <p>
+    Set
+    <EuiCode>firstStepNumber</EuiCode>
+    to continue step numbering after any type of break in the content
+  </p>
+</EuiText>
+<EuiSpacer @size='m' />
 ```

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

@@ -1,63 +1,60 @@
 ---
-order: 2
+order: 4
 ---
 
 # Statuses
 
+<EuiText>
+<p>Steps can optionally include <EuiCode>status</EuiCode> prop that will alter the look of the number prefix. The options are <EuiCode>incomplete</EuiCode>, <EuiCode>complete</EuiCode>, <EuiCode>warning</EuiCode>, <EuiCode>danger</EuiCode>, <EuiCode>disabled</EuiCode> and <EuiCode>loading</EuiCode>. This is used mostly as a final step when you need to make some sort of final check.</p>
+</EuiText>
+
 ```hbs template
 <EuiSteps>
-  <EuiStep
-    @step={{1}}
-    @title="Step 1"
-  >
+  <EuiStep @step={{1}} @title='Step 1'>
     You do this!
   </EuiStep>
-  <EuiStep
-    @title="Step 2"
-    @status={{this.status}}
-    @step={{2}}
-  >
-    You did good! {{if (eq this.status "danger") "(or not)"}}
-    <EuiSubSteps>
-      Click the buttons below to change status!
+  <EuiStep @title='Step 2' @status={{this.status}} @step={{2}}>
+    We are fancy buttons just waiting to be pushed!
+    <div>
+      <EuiSpacer />
       <EuiFlexGroup>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="danger" {{on "click" this.setDanger}}>
+          <EuiButton @color='danger' {{on 'click' this.setDanger}}>
             Set Danger
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="secondary" {{on "click" this.setComplete}}>
+          <EuiButton @color='success' {{on 'click' this.setComplete}}>
             Set Complete
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="warning" {{on "click" this.setWarning}}>
+          <EuiButton @color='warning' {{on 'click' this.setWarning}}>
             Set Warning
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButton @color="primary" {{on "click" this.setLoading}}>
+          <EuiButton @color='primary' {{on 'click' this.setLoading}}>
             Set Loading
           </EuiButton>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButtonEmpty {{on "click" this.setDisabled}}>
+          <EuiButtonEmpty {{on 'click' this.setDisabled}}>
             Set Disabled
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButtonEmpty {{on "click" this.setIncomplete}}>
+          <EuiButtonEmpty {{on 'click' this.setIncomplete}}>
             Set Incomplete
           </EuiButtonEmpty>
         </EuiFlexItem>
         <EuiFlexItem @grow={{false}}>
-          <EuiButtonEmpty {{on "click" this.reset}}>
+          <EuiButtonEmpty {{on 'click' this.reset}}>
             Reset
           </EuiButtonEmpty>
         </EuiFlexItem>
       </EuiFlexGroup>
-    </EuiSubSteps>
+    </div>
   </EuiStep>
 </EuiSteps>
 ```

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

@@ -1,28 +1,30 @@
 ---
-order: 3
+order: 5
 ---
 
 # Horizontal Steps
 
+<EuiText>
+<p>For use when forms/setup instructions can and should be split into multiple pages. Each step should correspond to an individual page of form elements, using the <EuiCode>status</EuiCode> key to denote the user's progress.</p>
+<p>For horizontal steps, the <EuiCode>status</EuiCode> key defaults to <EuiCode>"incomplete"</EuiCode> and the default filled styling is reserved for indicating <EuiCode>"current"</EuiCode> status.</p>
+</EuiText>
+
 ```hbs template
 <EuiStepsHorizontal>
   <EuiStepHorizontal
-    @title="Cart"
+    @title='Completed step 1'
+    @status='complete'
     @step={{1}}
     @isComplete={{true}}
   />
+  <EuiStepHorizontal @title='Selected step 2' @step={{2}} @status='current' />
   <EuiStepHorizontal
-    @title="Shipping"
-    @step={{2}}
-    @isComplete={{true}}
-  />
-  <EuiStepHorizontal
-    @title="Payment Method"
+    @title='Incomplete step 3 which will wrap to the next line'
     @step={{3}}
-    @isSelected={{true}}
   />
   <EuiStepHorizontal
-    @title="Review Order"
+    @title='Disabled step 4'
+    @status='disabled'
     @step={{4}}
     @disabled={{true}}
   />

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

@@ -0,0 +1,84 @@
+---
+order: 2
+---
+
+# Complex steps
+
+<EuiText>
+<p>If you need to call out a set of substeps that are not lines of code, most likely a <EuiCode>&lt;ol/&gt;</EuiCode>, wrap the block in a <EuiCode>&lt;EuiSubSteps/&gt;</EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiSteps>
+  <EuiStep @step={{1}} @title='Step 1 has intro plus code snippet'>
+    <EuiText>
+      <p>Run this code snippet to install things.</p>
+    </EuiText>
+    <EuiSpacer />
+    <EuiCodeBlock @language='bash'>npm install</EuiCodeBlock>
+  </EuiStep>
+  <EuiStep @step={{2}} @title='Step 2 has sub steps'>
+    <EuiText>
+      <p>
+        In order to complete this step, do the following things{' '}
+        <strong>in order</strong>.
+      </p>
+      <EuiSubSteps>
+        <ol>
+          <li>Do thing 1</li>
+          <li>Do thing 2</li>
+          <li>Do thing 3</li>
+        </ol>
+      </EuiSubSteps>
+      <p>Here are some bullet point reminders.</p>
+      <ul>
+        <li>Reminder 1</li>
+        <li>Reminder 2</li>
+        <li>Reminder 3</li>
+      </ul>
+    </EuiText>
+  </EuiStep>
+  <EuiStep @step={{3}} @title='Step 3 has an intro and one line instruction'>
+    <EuiText>
+      <p>
+        Now that you&apos;ve completed step 2, go find the{' '}
+        <EuiCode>thing</EuiCode>.
+      </p>
+      <p>
+        Go to
+        <strong>Overview &gt;&gt; Endpoints</strong>
+        note{' '}
+        <strong>Elasticsearch</strong>
+        as
+        <EuiCode>&lt;thing&gt;</EuiCode>.
+      </p>
+    </EuiText>
+  </EuiStep>
+  <EuiStep @step={{4}} @title='The last step has two options'>
+    <EuiText @size='s'>
+      <h3>
+        <strong>Option 1:</strong>
+        If you have this type of instance
+      </h3>
+      <EuiSubSteps>
+        <ol>
+          <li>Do thing 1</li>
+          <li>Do thing 2</li>
+          <li>Do thing 3</li>
+        </ol>
+      </EuiSubSteps>
+      <h3>
+        <strong>Option 2:</strong>
+        If you have the other type of instance
+      </h3>
+      <EuiSubSteps>
+        <ol>
+          <li>Do thing 1</li>
+          <li>Do thing 2</li>
+          <li>Do thing 3</li>
+        </ol>
+      </EuiSubSteps>
+    </EuiText>
+  </EuiStep>
+</EuiSteps>
+```

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

@@ -0,0 +1,29 @@
+---
+order: 3
+---
+
+# Heading elements
+
+<EuiText>
+<p>To aid with accessibility and hierarchical headings, you can and should pass in a heading element to use for each step title. The example below shows that the logical heading element should be an <EuiCode>h2</EuiCode>and therefore adds <EuiCode>headingElement<span class="token verb keyword">=</span><span class="token conjunction variable">"</span>h2<span class="token conjunction variable">"</span></EuiCode> to the EuiSteps component.</p>
+<p>The style of the title will <strong>not</strong> be affected.</p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiTitle size='l'>
+    <h1>Heading 1</h1>
+  </EuiTitle>
+
+  <EuiSpacer size='xl' />
+
+  <EuiSteps @headingElement='h2'>
+    <EuiStep @step={{1}} @title='Step 1'>
+      <EuiTitle @size='xs'>
+        <h3>Did you notice the step title is inside a Heading 2 element?</h3>
+      </EuiTitle>
+    </EuiStep>
+
+  </EuiSteps>
+</div>
+```

package/docs/navigation/steps.md

@@ -1 +1 @@
-# Steps
+<EuiPageHeader @pageTitle="Steps"/>

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

@@ -1,109 +1,27 @@
-# Demo
+---
+order: 1
+---
+
+
+<EuiText>
+<p><strong>EuiTabs</strong> is a wrapping component that requires <strong>EuiTab</strong> components as direct children. You control the displayed contents and current state through props on EuiTab like <EuiCode>isSelected</EuiCode> and <EuiCode>onClick</EuiCode>.</p><p>Use the <EuiCode>prepend</EuiCode> and <EuiCode>append</EuiCode> tab props to add content before and after the tab label respectively.</p>
+</EuiText>
 
 ```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>
+  {{#each this.tabs as |tab|}}
+    <EuiTab
+      @isSelected={{eq tab.id this.selectedTab.id}}
+      {{on 'click' (set this 'selectedTab' tab)}}
+    >
+      {{tab.name}}
+    </EuiTab>
+  {{/each}}
 </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}}
-/>
-
 <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>
+<EuiText>
+  {{this.selectedTab.content}}
+</EuiText>
 ```
 
 ```js component
@@ -112,54 +30,38 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class DemoTabsComponent extends Component {
-  @tracked tabsIndex2 = 0;
-
+  @tracked selectedTab = 0;
+  @tracked tabs = [
+    {
+      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.'
+    }
+  ];
   constructor() {
     super(...arguments);
-
-    this.tabsItems1 = [
-      {
-        id: 'example1',
-        name: 'Example 1',
-        content: 'Example 1 content.',
-      },
-      {
-        id: 'example2',
-        name: 'Example 2',
-        content: 'Example 2 content.',
-      },
-    ];
-
-    this.tabsItems2 = [
-      {
-        id: 'one',
-        name: 'Click me 1!',
-        content: "Same ol' 1 content.",
-      },
-      {
-        id: 'two',
-        name: 'Click me 2!',
-        content: "Same ol' 2 content.",
-      },
-      {
-        id: 'three',
-        name: 'Click me 3!',
-        content: "Same ol' 3 content.",
-      },
-    ];
-  }
-
-  sayMyName(tab) {
-    alert(`I am ${tab.name || tab.id}`);
-  }
-
-  @action
-  cycleTabs() {
-    this.tabsIndex2++;
-
-    if (this.tabsIndex2 >= this.tabsItems2.length) {
-      this.tabsIndex2 = 0;
-    }
+    this.selectedTab = this.tabs[0];
   }
 }
 ```

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

@@ -0,0 +1,73 @@
+---
+order: 2
+---
+
+# 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>
+
+```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>
+      <EuiTabs>
+        {{#each this.tabs as |tab|}}
+          <EuiTab
+            @isSelected={{eq this.selectedTab.id tab.id}}
+            {{on 'click' (set this 'selectedTab' tab)}}
+          >
+            {{tab.name}}
+          </EuiTab>
+        {{/each}}
+      </EuiTabs>
+      <EuiSpacer />
+      {{this.selectedTab.content}}
+    </:content>
+  </EuiPopover>
+</div>
+```
+
+```js component
+import Component from '@ember/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class DemoTabsComponent extends Component {
+  @tracked selectedTab;
+
+  constructor() {
+    super(...arguments);
+
+    this.tabs = [
+      {
+        id: 'example1',
+        name: 'Example 1',
+        content: 'Example 1 content.'
+      },
+      {
+        id: 'example2',
+        name: 'Example 2',
+        content: 'Example 2 content.'
+      }
+    ];
+
+    this.selectedTab = this.tabs[0];
+  }
+}
+```