@ember-eui/core 5.6.0 → 5.8.1

package/docs/display/list-group/demo/d01-list-group.md

@@ -0,0 +1,99 @@
+---
+order: 1
+---
+
+ <EuiText>
+    <p>The <strong>EuiListGroup</strong> component is used to present <strong>EuiListGroupItems</strong> in a neatly formatted list. Use the <EuiCode>flush</EuiCode> and <EuiCode>bordered</EuiCode> properties for full-width and bordered presentations, respectively.
+Adjust the <EuiCode>gutterSize</EuiCode> prop to increase or decrease the spacing between items.</p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiListGroup
+      @bordered={{this.bordered}}
+      @flush={{this.flush}}
+      @maxWidth={{this.maxWidth}}
+      @gutterSize={{this.gutterSize}}
+    >
+      <EuiListGroupItem
+        @href={{if this.useHref '/'}}
+        @onClick={{if this.useOnClick this.onClick}}
+        @isActive={{this.isActive}}
+        @isDisabled={{this.isDisabled}}
+        @wrapText={{this.wrapText}}
+        @size={{this.size}}
+        @color={{this.color}}
+        @iconType={{if this.useIconType 'bell'}}
+      >
+        {{#if this.wrapText}}
+          First item with very long text with Lorem ipsum dolor sit amet,
+          consectetur adipiscing elit
+        {{else}}
+          First item
+        {{/if}}
+      </EuiListGroupItem>
+      <EuiListGroupItem>
+        Second item
+      </EuiListGroupItem>
+      <EuiListGroupItem>
+        Third item
+      </EuiListGroupItem>
+      <EuiListGroupItem>
+        Fourth item
+      </EuiListGroupItem>
+    </EuiListGroup>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiFlexGroup>
+      <EuiFlexItem>
+        <EuiTitle @size='xs'>Group</EuiTitle>
+        <div>
+          <Input @type='checkbox' @checked={{this.bordered}} name='bordered' />
+          <label for='bordered'>Bordered</label>
+        </div>
+        <div>
+          <Input @type='checkbox' @checked={{this.flush}} name='flushed' />
+          <label for='flushed'>Flush</label>
+        </div>
+
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiFlexItem>
+</EuiFlexGroup>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class DemoListGroupComponent extends Component {
+  // Group config
+  @tracked bordered = false;
+  @tracked flush = false;
+  @tracked gutterSize = 's';
+  @tracked maxWidthType = 'bool';
+  @tracked maxWidth = false;
+
+  @action
+  parseToNum(event) {
+    this.maxWidth = Number(event.target.value);
+  }
+
+  @action
+  onClick(event) {
+    console.log('Item clicked');
+  }
+
+  //Item config
+  @tracked useHref = false;
+  @tracked useOnClick = false;
+  @tracked isActive = false;
+  @tracked isDisabled = false;
+  @tracked wrapText = false;
+  @tracked size = 'm';
+  @tracked color = 'inherit';
+  @tracked useIconType = false;
+}
+```

package/docs/display/list-group/demo/d02-list-of-links.md

@@ -0,0 +1,47 @@
+---
+order: 2
+---
+
+# List of links
+
+ <EuiText>
+   <p>Display <strong>EuiListGroupItems</strong> as links by providing an <EuiCode>href</EuiCode> value and change their state with the <EuiCode>isActive</EuiCode> and <EuiCode>isDisabled</EuiCode> properties.</p><p>As is done in this example, the <strong>EuiListGroup</strong> component can also accept an array of items via the <EuiCode>listItems</EuiCode> property.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup>
+  <EuiListGroupItem @href='#/display/list-group' @iconType='calendar' @size='s'>
+    First link
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='clock'
+    @size='s'
+    @isActive='true'
+  >
+    This is an active link with very long label that truncates
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='compute'
+    @size='s'
+    @isDisabled='true'
+  >
+    Third link is disabled
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='copyClipboard'
+    @size='s'
+  >
+    Fourth link
+  </EuiListGroupItem>
+  <EuiListGroupItem
+    @href='#/display/list-group'
+    @iconType='crosshairs'
+    @size='s'
+  >
+    Fifth link
+  </EuiListGroupItem>
+</EuiListGroup>
+```

package/docs/display/list-group/demo/d03-text-wrapping-and-tooltips.md

@@ -0,0 +1,31 @@
+---
+order: 3
+---
+
+# Text wrapping and tooltips
+
+ <EuiText>
+   <p>Optional props <EuiCode>showToolTip</EuiCode> and <EuiCode>wrapLines</EuiCode> can be used to augment the display of list items. Use these when lists are inside small containers where it is likely that the content will be truncated.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup @showToolTips>
+  <EuiListGroupItem>
+    First item
+  </EuiListGroupItem>
+
+  <EuiListGroupItem>
+    Second item
+  </EuiListGroupItem>
+
+  <EuiListGroupItem>
+    <span>
+      Third very, very long item that
+      <strong>will surely</strong>
+      force truncation
+    </span>
+  </EuiListGroupItem>
+  <EuiListGroupItem @wrapText={{true}}>Fourth very, very long item with wrapping
+    enabled that will not force truncation</EuiListGroupItem>
+</EuiListGroup>
+```

package/docs/display/list-group/demo/d04-list-item-color-and-size.md

@@ -0,0 +1,27 @@
+---
+order: 4
+---
+
+# List item color and size
+
+ <EuiText>
+   <p><strong>EuiListGroupItems</strong> will inherit the color from their element type whether it is a <EuiCode>button</EuiCode>, <EuiCode>anchor</EuiCode>, or <EuiCode>span</EuiCode>. You can enforce a different color of <EuiCode>primary</EuiCode>, <EuiCode>text</EuiCode>, or <EuiCode>subdued</EuiCode> with the <EuiCode>color</EuiCode> prop. Or provide the prop directly to <strong>EuiListGroup</strong>.</p><p>They also accept options for text size; <EuiCode><span class="token string">'xs'</span> <span class="token operator">|</span> <span class="token string">'s'</span> <span class="token operator">|</span> <span class="token string">'m'</span> <span class="token operator">|</span> <span class="token string">'l'</span></EuiCode>.</p>
+</EuiText>
+
+```hbs template
+<EuiListGroup>
+  <EuiListGroupItem @href='#' @label='Inherit by default (xs)' @size='xs' />
+
+  <EuiListGroupItem @label='Primary (s)' @color='primary' @size='s' />
+
+  <EuiListGroupItem @href='#' @label='Text (m)' @color='text' />
+
+  <EuiListGroupItem @href='#' @label='Subdued (l)' @color='subdued' @size='l' />
+</EuiListGroup>
+
+<EuiSpacer @size='s' />
+
+<EuiListGroup {{style (inline-styles background='black')}}>
+  <EuiListGroupItem @href='#' @label='Ghost' @color='ghost' />
+</EuiListGroup>
+```

package/docs/display/list-group/index.md

@@ -0,0 +1,8 @@
+---
+title: List Group
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="List Group"/>
+
+  <EuiHorizontalRule />

package/docs/display/loading/spinner-demo/d02-spinner.md

@@ -0,0 +1,6 @@
+```hbs template
+<EuiLoadingSpinner @size='s' />
+<EuiLoadingSpinner @size='m' />
+<EuiLoadingSpinner @size='l' />
+<EuiLoadingSpinner @size='xl' />
+```

package/docs/display/loading/text-content-demo/{demo1.md → d3-text-content.md}

@@ -1,5 +1,3 @@
-# Demo
-
 Text Content Loading display will only render a maximum of 10 lines.
 <br>
 <br>

package/docs/display/notification-event/demo/{demo1.md → d01-notification-event.md}

@@ -2,12 +2,8 @@
 order: 1
 ---
 
-# Basic
-
 ```hbs template
-{{#let (slice
-  0 this.messagesCount this.messages
-) as |msgs|}}
+{{#let (slice 0 this.messagesCount this.messages) as |msgs|}}
   <EuiPanel @paddingSize='xs'>
     <EuiNotificationEvent
       @type='Hey!'
@@ -20,21 +16,21 @@ order: 1
       @accordionHideText='hide'
     >
 
-    <:primaryAction>
-      <EuiButtonEmpty
-        style="display: {{if this.showPrimaryAction '' 'none'}};"
-        @flush="left"
-        @size="s"
-      >
-        Do something!
-      </EuiButtonEmpty>
-    </:primaryAction>
+      <:primaryAction>
+        <EuiButtonEmpty
+          style='display: {{if this.showPrimaryAction "" "none"}};'
+          @flush='left'
+          @size='s'
+        >
+          Do something!
+        </EuiButtonEmpty>
+      </:primaryAction>
 
     </EuiNotificationEvent>
   </EuiPanel>
 {{/let}}
 
-<EuiSpacer/>
+<EuiSpacer />
 
 Messages count:
 <EuiRange
@@ -61,12 +57,8 @@ import { action } from '@ember/object';
 export default class NotificationEvent1Component extends Component {
   @tracked messagesCount;
   @tracked showPrimaryAction;
-  
-  messages = [
-    'This is a message',
-    "Wait, there's more",
-    'hmmm...'
-  ]
+
+  messages = ['This is a message', "Wait, there's more", 'hmmm...'];
 
   constructor() {
     super(...arguments);
@@ -75,9 +67,8 @@ export default class NotificationEvent1Component extends Component {
   }
 
   @action
-  setMessagesCount(e){
+  setMessagesCount(e) {
     this.messagesCount = e.target.value;
   }
-
 }
-```
+```

package/docs/display/notification-event/index.md

@@ -1,6 +1,6 @@
 ---
-order: 1
 title: Notification Event
 ---
 
-<EuiPageHeader @pageTitle="Notification Event"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Notification Event"/>

package/docs/display/progress/index.md

@@ -0,0 +1,7 @@
+---
+title: Progress
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Progress"/>
+<EuiHorizontalRule />

package/docs/display/{stat.md → stat-demo/index.md}

@@ -1,3 +1,8 @@
+---
+title: Stat
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Stat"/>
 
 <EuiText>

package/docs/display/{text.md → text/index.md}

@@ -1,3 +1,8 @@
+---
+title: Text
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Text"/>
 
 <EuiText>
@@ -9,4 +14,4 @@ EuiText can ensure proper line-length for readability by setting a <EuiCode>max-
   </p>
 </EuiText>
 
-<EuiHorizontalRule />
+<EuiHorizontalRule />

package/docs/display/title/index.md

@@ -0,0 +1,6 @@
+---
+title: Title
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Title"/>

package/docs/display/toast/{toast-list-demo/demo1.md → demo/d01-toast.md}

@@ -1,11 +1,9 @@
-# Demo
-
 ```hbs template
-<EuiButton @color="primary" {{on "click" this.showRandomToast}}>
+<EuiButton @color='primary' {{on 'click' this.showRandomToast}}>
   Add toast to global toast list
 </EuiButton>
 
-<EuiSpacer @size="l" />
+<EuiSpacer @size='l' />
 
 <EuiGlobalToastList @toastLifeTimeMs={{3000}} />
 ```
@@ -22,11 +20,11 @@ export default class DemoToastListComponent extends Component {
   @action
   showRandomToast() {
     this.euiToaster.show({
-      onClose: function() {
+      onClose: function () {
         console.log('A toast is being closed');
       },
       ...this.toasts[Math.floor(Math.random() * 4)]
-    })
+    });
   }
 
   toasts = [
@@ -35,25 +33,25 @@ export default class DemoToastListComponent extends Component {
       body: 'This toast overrides the default toastLifeTimeMs value and will be around for 15 seconds.',
       color: 'warning',
       iconType: 'clock',
-      toastLifeTimeMs: 15000,
+      toastLifeTimeMs: 15000
     },
     {
       title: `Download complete!`,
       body: 'Thanks for your patience!',
-      color: 'success',
+      color: 'success'
     },
     {
       title: `Logging you out soon, due to inactivity`,
       body: 'This is a security measure.',
       color: 'warning',
-      iconType: 'user',
+      iconType: 'user'
     },
-     {
+    {
       title: `Oops, there was an error`,
       body: 'Sorry. We’ll try not to let it happen it again.',
       color: 'danger',
-      iconType: 'help',
+      iconType: 'help'
     }
-  ]
+  ];
 }
-```
+```

package/docs/display/{tool-tip.md → toast/index.md}

@@ -1,4 +1,9 @@
-<EuiPageHeader @pageTitle="Tooltip"/>
+---
+title: Toast
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Toast"/>
 
 <EuiSpacer @size='l' />
 <EuiText>

package/docs/display/{tool-tip-demo/demo1.md → tool-tip/demo/d01-tool-tip.md}

@@ -2,9 +2,6 @@
 order: 1
 ---
 
-<EuiText>
-  Generally, tooltips should provide short, <strong>non-essential</strong>, contextual information, usually naming or describing with more detail. If you need interactive content or anything other than text, we recommend using <strong>EuiPopover</strong> instead.
-</EuiText>
 <EuiSpacer />
 <EuiCallOut @color="warning" @size="s" @iconType="accessibility" @title="Putting anything other than plain text in a tooltip is lost on screen readers." />
 <EuiSpacer />

package/docs/display/tool-tip/index.md

@@ -0,0 +1,10 @@
+---
+title: Tooltip
+---
+
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Tooltip"/>
+
+<EuiSpacer @size='l' />
+
+<EuiHorizontalRule />

package/docs/editors/code/{inline-demo/demo1.md → demo/d01-inline.md}

@@ -2,7 +2,7 @@
 order: 1
 ---
 
-# Demo
+# Inline
 
 ```hbs template
 <EuiText>

package/docs/editors/code/{code-block-demo/demo1.md → demo/d02-code-block.md}

@@ -1,5 +1,5 @@
 ---
-order: 1
+order: 2
 ---
 
 # Code block

package/docs/editors/code/{code-block-demo/demo5.md → demo/d03-line-numbers.md}

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 3
 ---
 
 # Line numbers

package/docs/editors/code/{code-block-demo/demo2.md → demo/d04-copy.md}

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 4
 ---
 
 # Copy

package/docs/editors/code/{code-block-demo/demo3.md → demo/d05-overflow-height.md}

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 5
 ---
 
 # Overflow height

package/docs/editors/code/{code-block-demo/demo4.md → demo/d06-white-space.md}

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 6
 ---
 
 # White space

package/docs/editors/code/{code-block-demo/demo6.md → demo/d07-line-numbers-highlighted.md}

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 ---
 
 # Line numbers highlighted

package/docs/editors/code/{code-block-demo/demo7.md → demo/d08-code-block-virtualization.md}

@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 8
 ---
 
 # Code block virtualization

package/docs/editors/code/{code-block-demo/demo8.md → demo/d09-flyout.md}

@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 ---
 
 # Flyout

package/docs/editors/code/{code-block.md → index.md}

@@ -1,14 +1,18 @@
+---
+title: Code
+---
+
+<EuiSpacer/>
 <EuiPageHeader @pageTitle="Code"/>
 
-<EuiSpacer />
+<EuiSpacer @size='l' />
+
 <EuiCallOut>
   <:body>
     <strong>EuiCode</strong> and <strong>EuiCodeBlock</strong> are intended to render static lines or blocks of code in <strong>read-only</strong> contexts. If you need capabilities to edit, or want to print long code (e.g., printing JSON from an API), we recommend installing a version of Monaco. If you are building within the Kibana platform, you can use their CodeEditor.
   </:body>
 </EuiCallOut>
 
-<EuiSpacer />
-
 <EuiText>
 <p>
   The <strong>EuiCode</strong> and <strong>EuiCodeBlock</strong> components support <a href="https://prismjs.com/#supported-languages" target="_blank">all language syntaxes</a> supported by the <EuiCode>prism</EuiCode> <a href="https://prismjs.com" target="_blank">library</a>. The language prop can also be omitted to simply render formatted but unhighlighted code.
@@ -19,3 +23,4 @@
 </EuiText>
 
 <EuiHorizontalRule />
+<EuiSpacer/>

package/docs/editors/markdown-editor/base-editor-demo/demo1.md

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Demo
-
 ```hbs template
 <EuiMarkdownEditor
   @value={{this.value}}
@@ -19,7 +17,6 @@ import { action } from '@ember/object';
 import { visit } from '@ember-eui/core/utils/markdown/plugins/markdown-add-components';
 import { defaultProcessingPlugins } from '@ember-eui/core/utils/markdown/plugins/markdown-default-plugins';
 
-
 /*
  Quick example how you can extend plugins, this plugin adds _blank to `a` elements
 */
@@ -27,7 +24,7 @@ function TargetBlankProcessingPlugin() {
   return (tree) => {
     visit(tree, (node) => {
       if (node.type === 'element' && node.tagName === 'a') {
-				node.properties.target = '_blank';
+        node.properties.target = '_blank';
       }
       return node;
     });

package/docs/editors/markdown-editor/base-editor.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Base editor"/>
+<EuiSpacer/>
+<EuiPageHeader @pageTitle="Base editor"/>

package/docs/forms/{form-controls/combo-box → combo-box}/demo/demo1.md

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Basic
-
 <EuiText>
   <p>
     <strong>EuiComboBox </strong> ember's implementation uses <a href="https://ember-power-select.com">ember-power-select</a> under the hood for a rich selector, so please refer to it if needed.