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

package/docs/editors/code/code-block.md

@@ -1 +1,27 @@
-# CodeBlock
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Code
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>
+
+<EuiSpacer />
+<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.
+</p>
+<p>
+  JSX code (often React) has distinct language syntaxes from the base JavaScript and TypeScript languages. For these instances, use <EuiCode @language="jsx">language="jsx"</EuiCode> or <EuiCode @language="tsx">language="tsx"</EuiCode>.
+</p>
+</EuiText>

package/docs/editors/code/inline-demo/demo1.md

@@ -13,17 +13,20 @@ order: 1
   </p>
   <p>
     You can also pass a language in like
-    <EuiCode language='html'>{{this.htmlCode}}</EuiCode>.
+    <EuiCode @language='html'>{{this.htmlCode}}</EuiCode>.
   </p>
   <p>
     Make the background transparent like this
-    <EuiCode @language='html' @transparentBackground={{true}}>
+    <EuiCode @transparentBackground={{true}} @language='html'>
       {{this.htmlCode}}
     </EuiCode>
     .
   </p>
 </EuiText>
-<EuiTextArea @value={{this.htmlCode}} {{on "input" (pick "target.value" (set this "htmlCode"))}}/>
+<EuiTextArea
+  @value={{this.htmlCode}}
+  {{on 'input' (pick 'target.value' (set this 'htmlCode'))}}
+/>
 ```
 
 ```javascript component

package/docs/editors/code/inline.md

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

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

@@ -71,36 +71,17 @@ class Human {
 }
 \`\`\`
 
-\`\`\`golang
-package main
-
-import \"fmt\"
-
-func main() {
-
-	// \`var\` declares 1 or more variables.
-	var a = "initial"
-	fmt.Println(a)
-
-	// You can declare multiple variables at once.
-	var b, c int = 1, 2
-	fmt.Println(b, c)
-
-	// Go will infer the type of initialized variables.
-	var d = true
-	fmt.Println(d)
+\`\`\`tsx
+import Component from '@glimmer/component';
+import { helper } from '@ember/component/helper';
+import { tracked } from '@glimmer/tracking';
 
-	// Variables declared without a corresponding
-	// initialization are _zero-valued_. For example, the
-	// zero value for an \`int\` is \`0\`.
-	var e int
-	fmt.Println(e)
+export default class SomeComponent extends Component {
+	@tracked count = 0;
 
-	// The \`:=\` syntax is shorthand for declaring and
-	// initializing a variable, e.g. for
-	// \`var f string = "apple"\` in this case.
-	f := "apple"
-	fmt.Println(f)
+	add = helper(function([a, b]: [number, number]) {
+		return a + b;
+	});
 }
 
 \`\`\`

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

@@ -1 +1,9 @@
-# Base Editor
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Base editor
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/forms/form-controls/checkbox/demo/demo1.md

@@ -0,0 +1,49 @@
+---
+order: 1
+---
+
+```hbs template
+<EuiForm>
+  <EuiCheckbox
+    @id='131'
+    @label='I am a checkbox'
+    @checked={{this.checkbox1}}
+    {{on 'change' (pick 'target.checked' (set this 'checkbox1'))}}
+  />
+  <EuiCheckbox
+    @id='131d'
+    @label='I am an indeterminate checkbox'
+    @indeterminate={{this.indeterminate}}
+    {{on 'change' (pick 'target.checked' (set this 'indeterminate'))}}
+  />
+  <EuiCheckbox
+    @disabled={{true}}
+    @id='disabled-checkbox'
+    @label='I am a checkbox'
+    @checked={{this.checkbox1}}
+    {{on 'change' (pick 'target.checked' (set this 'checkbox1'))}}
+  />
+  <EuiCheckbox
+    @id='disabled-checkbox'
+    @checked={{this.checkbox1}}
+    {{on 'change' (pick 'target.checked' (set this 'checkbox1'))}}
+  >
+    <:label>
+      Using the
+      <strong>:label</strong>
+      block
+    </:label>
+  </EuiCheckbox>
+</EuiForm>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked checkbox1 = true;
+  @tracked indeterminate = true;
+}
+```

package/docs/forms/form-controls/checkbox/index.md

@@ -0,0 +1,34 @@
+---
+order: 1
+title: Checkbox
+---
+
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Checkbox
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    This component renders a basic HTML <EuiCode @language="html">{{'<input type="checkbox">'}}</EuiCode> element.
+    Use checkboxes to allow users to select multiple options from a list.
+  </p>
+  <p>
+    Use the <EuiCode>@checked</EuiCode> argument to handle the checked and
+    unchecked state. You can also use the <EuiCode>@indeterminate</EuiCode> argument to set an indeterminate state.
+    This state is commonly used in hierarchical checkboxes to indicate that only some of the checkbox's descendants are checked.
+  </p>
+  <p>
+    Make sure to pass a <EuiCode>@label</EuiCode> to ensure a larger
+    clickable area and ensure that screen readers will read out the
+    label when the user is focused on the input.
+    You can also use the <EuiCode>:label</EuiCode> block for a more complex label.
+  </p>
+</EuiText>

package/docs/forms/form-controls/{checkbox-group-demo → checkbox-group/demo}/demo1.md

@@ -2,28 +2,19 @@
 order: 1
 ---
 
-# Demo
-
-This component is different yet simplier from what you'd expect in ember in a way that you don't control the rendering of each checkbox, you just pass in an array of `@options` and `@idToSelectedMap` which you are in charge to calculate on subsequent `@onChange`'s, refer to the javascript snippet.
-
-You can optionally pass `@valueKey` and `@labelKey` for a more flexible and ergonomic API, so you don't actually _have_ to map your options to
-`{ id: '', label: '' }` which are the default `@valueKey` and `@labelKey`.
-
-<EuiSpacer />
-
 ```hbs template
 <EuiCheckboxGroup
   @options={{this.checkboxes}}
   @idToSelectedMap={{this.checkboxIdToSelectedMap}}
-  @valueKey="value"
+  @valueKey='value'
   @onChange={{this.onChange}}
 />
 <EuiSpacer />
 <EuiCheckboxGroup
-  @legend="With legend"
+  @legend='With legend'
   @options={{this.checkboxes}}
   @idToSelectedMap={{this.checkboxIdToSelectedMap}}
-  @valueKey="value"
+  @valueKey='value'
   @onChange={{this.onChange}}
 />
 <EuiSpacer />
@@ -41,7 +32,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
-export default class EuiTextFieldDemo1 extends Component {
+export default class extends Component {
   checkboxes = [
     {
       value: 'check-1',

package/docs/forms/form-controls/checkbox-group/index.md

@@ -0,0 +1,35 @@
+---
+order: 2
+title: Checkbox group
+---
+
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Checkbox group
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    This component is different yet simplier from what you'd expect in ember in a way that you don't control the rendering of each checkbox, you just pass in an array of <EuiCode>@options</EuiCode> and <EuiCode>@idToSelectedMap</EuiCode> which you are in charge to calculate on subsequent <EuiCode>@onChange</EuiCode>'s, refer to the javascript snippet.
+  </p>
+  <p>
+  You can optionally pass <EuiCode>@valueKey</EuiCode> and <EuiCode>@labelKey</EuiCode> for a more flexible and ergonomic API, so you don't actually have to map your options to
+    <EuiCode>{ id: '', label: '' }</EuiCode> which are the default <EuiCode>@valueKey</EuiCode> and <EuiCode>@labelKey</EuiCode>.
+  </p>
+  <p>
+    When the individual labels for each radio do not provide a
+    sufficient description, pass a <EuiCode>@legend</EuiCode> to the
+    group.
+  </p>
+  <p>
+    Use the <EuiCode>@compressed</EuiCode> prop to tighten up the spacing
+    between checkbox rows.
+  </p>
+</EuiText>

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

@@ -2,7 +2,13 @@
 order: 1
 ---
 
-# Demo
+# 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.
+  </p>
+</EuiText>
 
 ```hbs template
 <EuiComboBox
@@ -24,7 +30,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
-export default class Demo1 extends Component {
+export default class extends Component {
   @tracked selected = [];
   @tracked options = [];
   @tracked remainingOptions = [];

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

@@ -2,7 +2,13 @@
 order: 2
 ---
 
-# Demo
+# Disabled
+
+<EuiText>
+	<p>
+		Set the prop <EuiCode> isDisabled </EuiCode> to make the combo box disabled.
+	</p>
+</EuiText>
 
 ```hbs template
 <EuiComboBox
@@ -10,12 +16,7 @@ order: 2
   @options={{this.remainingOptions}}
   @selectedOptions={{this.selected}}
   @searchEnabled={{true}}
-  @singleSelection={{hash asPlainText=true}}
-  @extra={{hash
-    prependTriggerComponent=(component
-      'eui-form-label' label='Prepend a component'
-    )
-  }}
+  @isDisabled={{true}}
   @searchField='label'
   as |option item|
 >
@@ -28,7 +29,7 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
-export default class Demo1 extends Component {
+export default class extends Component {
   @tracked selected = [];
   @tracked options = [];
   @tracked remainingOptions = [];
@@ -36,6 +37,7 @@ export default class Demo1 extends Component {
     super(...arguments);
     this.options = this.generateArray(100);
     this.remainingOptions = this.options.slice();
+    this.selected = [this.options[0]];
   }
   generateArray(n) {
     let arr = [];

package/docs/forms/form-controls/combo-box/demo/demo3.md

@@ -0,0 +1,60 @@
+---
+order: 3
+---
+
+# Virtualized
+
+<EuiText>
+	<p>
+		<strong>EuiComboBoxList</strong> uses <a href="https://github.com/html-next/vertical-collection">vertical collection</a> to only render visible options to be super fast no matter how many options there are.
+	</p>
+</EuiText>
+
+```hbs template
+<EuiComboBox
+  @onChange={{this.onChange}}
+  @options={{this.remainingOptions}}
+  @selectedOptions={{this.selected}}
+  @searchEnabled={{true}}
+  @searchField='label'
+  as |option item|
+>
+  {{option.label}}
+</EuiComboBox>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked selected = [];
+  @tracked options = [];
+  @tracked remainingOptions = [];
+  constructor() {
+    super(...arguments);
+    this.options = this.generateArray(100000);
+    this.remainingOptions = this.options.slice();
+  }
+  generateArray(n) {
+    let arr = [];
+    for (let i = 0; i < n - 1; i++) {
+      arr[i] = {
+        value: i,
+        label: `Number ${i}`,
+        color: '#' + (((1 << 24) * Math.random()) | 0).toString(16)
+      };
+    }
+    return arr;
+  }
+
+  @action
+  onChange(selected) {
+    this.remainingOptions = this.options.filter(
+      (opt) => !selected.includes(opt)
+    );
+    this.selected = selected;
+  }
+}
+```

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

@@ -1,19 +1,19 @@
 ---
-order: 2
+order: 4
 ---
 
-# Demo
+# Groups
 
-Using on create options for bubbling new option and handling in onCreateOption function, you may want to provide a customOptionText, you can assume {searchText} will be interpolated, be sure sanitize your string!
+You can group options together. The groups won’t match against the search value.
 
 ```hbs template
 <EuiComboBox
   @onChange={{this.onChange}}
-  @options={{this.remainingOptions}}
+  @options={{this.groupedOptions}}
   @onCreateOption={{this.onCreateOption}}
   @selectedOptions={{this.selected}}
   @searchEnabled={{true}}
-  @customOptionText='Do you want to add&nbsp;<strong>{searchText}</strong>&nbsp;to your list?'
+  @customOptionText='Do you want to add&nbsp;{searchText}&nbsp;to your list?'
   @searchField='label'
   as |option item|
 >
@@ -26,21 +26,26 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 
-export default class Demo1 extends Component {
+export default class extends Component {
   @tracked selected = [];
   @tracked options = [];
-  @tracked remainingOptions = [];
+  @tracked groupedOptions = [];
+
   constructor() {
     super(...arguments);
-    this.options = this.generateArray(100);
-    this.remainingOptions = this.options.slice();
+    this.options = [
+      { value: 'No group option', label: 'No group option', color: 'red' },
+      { groupName: 'Group 1', options: this.generateArray('group1', 3) },
+      { groupName: 'Group 2', options: this.generateArray('group2', 5) }
+    ];
+    this.groupedOptions = this.options.slice();
   }
-  generateArray(n) {
+  generateArray(prefix, n) {
     let arr = [];
     for (let i = 0; i < n - 1; i++) {
       arr[i] = {
         value: i,
-        label: `Number ${i}`,
+        label: `${prefix} Number ${i}`,
         color: '#' + (((1 << 24) * Math.random()) | 0).toString(16)
       };
     }
@@ -49,9 +54,7 @@ export default class Demo1 extends Component {
 
   @action
   onChange(selected) {
-    this.remainingOptions = this.options.filter(
-      (opt) => !selected.includes(opt)
-    );
+    this.groupedOptions = this.options.filter((opt) => !selected.includes(opt));
     this.selected = selected;
   }
 

package/docs/forms/form-controls/combo-box/demo/demo5.md

@@ -0,0 +1,151 @@
+---
+order: 5
+---
+
+# Containers
+
+This example demonstrates how the combo box works within containers. Because this component uses portals, it’s important that it works within other portal-using components.
+
+```hbs template
+<EuiFormRow
+  @label='Combo box'
+  @helpText='This combo box is inside of a form row'
+>
+  <EuiComboBox
+    @onChange={{this.onChange}}
+    @options={{this.groupedOptions}}
+    @onCreateOption={{this.onCreateOption}}
+    @selectedOptions={{this.selected}}
+    @searchEnabled={{true}}
+    @customOptionText='Do you want to add&nbsp;{searchText}&nbsp;to your list?'
+    @searchField='label'
+    as |option item|
+  >
+    {{option.label}}
+  </EuiComboBox>
+
+</EuiFormRow>
+
+<EuiFlexGroup @responsive={{false}} @direction='columm'>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButton {{on 'click' (set this 'showModal' (not this.showModal))}}>
+      Show Modal
+    </EuiButton>
+  </EuiFlexItem>
+
+  <EuiFlexItem @grow={{false}}>
+    <EuiPopover
+      @ownFocus={{true}}
+      @isOpen={{this.showPopover}}
+      @anchorPosition='downLeft'
+      @closePopover={{set this 'showPopover' false}}
+    >
+      <:button>
+        <EuiButton
+          @iconType='arrowDown'
+          @iconSide='right'
+          {{on 'click' (set this 'showPopover' true)}}
+        >
+          Open popover
+        </EuiButton>
+      </:button>
+      <:content>
+        <div style='width:300px;'>
+          <EuiComboBox
+            @onChange={{this.onChange}}
+            @options={{this.groupedOptions}}
+            @onCreateOption={{this.onCreateOption}}
+            @selectedOptions={{this.selected}}
+            @searchEnabled={{true}}
+            @customOptionText='Do you want to add&nbsp;{searchText}&nbsp;to your list?'
+            @searchField='label'
+            as |option item|
+          >
+            {{option.label}}
+          </EuiComboBox>
+        </div>
+      </:content>
+    </EuiPopover>
+  </EuiFlexItem>
+</EuiFlexGroup>
+
+{{#if this.showModal}}
+  <EuiModal @onClose={{set this 'showModal' false}}>
+    <EuiModalHeader>
+      <EuiModalHeaderTitle>
+        <h1>Combo box in a modal</h1>
+      </EuiModalHeaderTitle>
+    </EuiModalHeader>
+    <EuiModalBody>
+      <EuiComboBox
+        @onChange={{this.onChange}}
+        @options={{this.groupedOptions}}
+        @onCreateOption={{this.onCreateOption}}
+        @selectedOptions={{this.selected}}
+        @searchEnabled={{true}}
+        @customOptionText='Do you want to add&nbsp;{searchText}&nbsp;to your list?'
+        @searchField='label'
+        as |option item|
+      >
+        {{option.label}}
+      </EuiComboBox>
+    </EuiModalBody>
+  </EuiModal>
+{{/if}}
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked selected = [];
+  @tracked options = [];
+  @tracked groupedOptions = [];
+  @tracked showModal = false;
+  @tracked showPopover = false;
+
+  constructor() {
+    super(...arguments);
+    this.options = [
+      { value: 'No group option', label: 'No group option', color: 'red' },
+      { groupName: 'Group 1', options: this.generateArray('group1', 3) },
+      { groupName: 'Group 2', options: this.generateArray('group2', 5) }
+    ];
+    this.groupedOptions = this.options.slice();
+  }
+  generateArray(prefix, n) {
+    let arr = [];
+    for (let i = 0; i < n - 1; i++) {
+      arr[i] = {
+        value: i,
+        label: `${prefix} Number ${i}`,
+        color: '#' + (((1 << 24) * Math.random()) | 0).toString(16)
+      };
+    }
+    return arr;
+  }
+
+  @action
+  onChange(selected) {
+    this.groupedOptions = this.options.filter((opt) => !selected.includes(opt));
+    this.selected = selected;
+  }
+
+  @action
+  onCreateOption(newOption) {
+    const newOptionStructure = {
+      value: `${newOption}`,
+      label: `${newOption}`
+    };
+    if (
+      this.options.filter((opt) => opt.value == newOptionStructure.value)
+        .length == 0
+    ) {
+      this.options.addObject(newOptionStructure);
+      this.selected.addObject(newOptionStructure);
+    }
+  }
+}
+```

package/docs/forms/form-controls/combo-box/index.md

@@ -0,0 +1,14 @@
+---
+order: 1
+title: Combo box
+---
+
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Combo box
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>

package/docs/forms/form-controls/file-picker/demo/demo1.md

@@ -0,0 +1,29 @@
+---
+order: 1
+---
+
+# Basic file picker
+
+```hbs template
+<EuiFilePicker @onChange={{set this 'files'}} />
+
+{{#if (gt this.files.length 0)}}
+  <EuiSpacer />
+  <EuiTitle>FilesAttached:</EuiTitle>
+  <EuiSpacer @size='xs' />
+  <ul>
+    {{#each this.files as |file|}}
+      <li>{{file.name}}</li>
+    {{/each}}
+  </ul>
+{{/if}}
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class extends Component {
+  @tracked files = [];
+}
+```