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

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

@@ -0,0 +1,45 @@
+---
+order: 3
+---
+
+# Large file picker
+
+<EuiText>
+  <p>
+    By default <strong>EuiFilePicker</strong> is rendered with the same height as the other controls, but you can pass <EuiCode>@display="large"</EuiCode> for a taller size.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiFilePicker
+  @initialPromptText='Select or drag and drop multiple files'
+  @onChange={{this.onChange}}
+  @multiple={{true}}
+  @display='large'
+  aria-label='Use aria labels when no actual label is in use'
+/>
+
+{{#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 = [];
+
+  onChange = (fileList) => {
+    this.files = fileList;
+  };
+}
+```

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

@@ -0,0 +1,63 @@
+---
+order: 4
+---
+
+# Remove files programatically
+
+<EuiText>
+  <p>
+    The current file selection can be cleared programmatically by calling the <EuiCode>removeFiles</EuiCode> method on the <strong>EuiFilePicker ref</strong>.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiFilePicker
+      @ref={{set this 'filePickerRef'}}
+      @multiple={{true}}
+      @initialPromptText='Select or drag and drop multiple files'
+      @onChange={{this.onChange}}
+      @display='large'
+      aria-label='Use aria labels when no actual label is in use'
+    />
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <div>
+      <EuiButton
+        @color='danger'
+        @iconType='trash'
+        @disabled={{eq this.files.length 0}}
+        {{on 'click' this.filePickerRef.removeFiles}}
+      >
+        <h3>Remove files</h3>
+      </EuiButton>
+    </div>
+  </EuiFlexItem>
+</EuiFlexGroup>
+
+{{#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 = [];
+  @tracked filePickerRef;
+
+  onChange = (fileList) => {
+    this.files = fileList;
+  };
+}
+```

package/docs/forms/form-controls/file-picker/index.md

@@ -0,0 +1,22 @@
+---
+title: File picker
+---
+
+<EuiPageHeader @pageTitle="File picker"/>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    <strong>EuiFilePicker</strong> is a stylized, but generic HTML <EuiCode @language="html">{{'<input type="file">'}}</EuiCode> tag.
+    It supports drag and drop as well as on click style selection of files.
+    The example below shows how to grab the files using the
+    <EuiLink
+      @href="https://developer.mozilla.org/en-US/docs/Web/API/FileList"
+      @target="_blank"
+    >
+      FileList API
+    </EuiLink>.
+    Like other form elements, you can wrap it in a <strong>EuiFormRow</strong> to apply a label.
+  </p>
+</EuiText>

package/docs/forms/form-controls/form-control-layout/index.md

@@ -0,0 +1,30 @@
+---
+title: Form control layout
+---
+
+<EuiPageHeader @pageTitle="Form control layout"/>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    <EuiBadge @color="warning">Building block only</EuiBadge>
+  </p>
+  <p>
+    <strong>EuiFormControlLayout</strong> is generally used internally
+    to consistently style form controls, but it's published in
+    case you want to create your own form control which matches those of
+    EUI.
+  </p>
+  <EuiCallOut @title="Additional padding required" @color="warning">
+    <:body>
+      <p>
+      The padding on the <EuiCode>input</EuiCode> itself doesn't
+      take into account the presence of the various icons supported by
+      <strong>EuiFormControlLayout</strong>. Any input component
+      provided to <strong>EuiFormControlLayout</strong> is responsible
+      for its own padding.
+      </p>
+    </:body>
+  </EuiCallOut>
+</EuiText>

package/docs/forms/form-controls/{form-control-layout-delimited-demo → form-control-layout-delimited/demo}/demo1.md

@@ -1,7 +1,7 @@
 # Demo
 
 ```hbs template
-<EuiFormControlLayoutDelimited @delimiter="+">
+<EuiFormControlLayoutDelimited @delimiter='+'>
   <:prepend as |classes|>
     <EuiFormLabel class={{classes}}>
       Add
@@ -9,18 +9,18 @@
   </:prepend>
   <:startControl as |classes|>
     <input
-      type="number"
-      placeholder="100"
-      class="euiFieldNumber {{classes}}"
-      aria-label="Use aria labels when no actual label is in use"
+      type='number'
+      placeholder='100'
+      class='euiFieldNumber {{classes}}'
+      aria-label='Use aria labels when no actual label is in use'
     />
   </:startControl>
   <:endControl as |classes|>
     <input
-      type="number"
-      placeholder="100"
-      class="euiFieldNumber {{classes}}"
-      aria-label="Use aria labels when no actual label is in use"
+      type='number'
+      placeholder='100'
+      class='euiFieldNumber {{classes}}'
+      aria-label='Use aria labels when no actual label is in use'
     />
   </:endControl>
 </EuiFormControlLayoutDelimited>
@@ -35,25 +35,29 @@
   </:prepend>
   <:startControl as |classes|>
     <input
-      type="number"
-      placeholder="100"
-      class="euiFieldNumber {{classes}}"
-      aria-label="Use aria labels when no actual label is in use"
+      type='number'
+      placeholder='100'
+      class='euiFieldNumber {{classes}}'
+      aria-label='Use aria labels when no actual label is in use'
     />
   </:startControl>
   <:endControl as |classes|>
     <input
-      type="number"
-      placeholder="100"
-      class="euiFieldNumber {{classes}}"
-      aria-label="Use aria labels when no actual label is in use"
+      type='number'
+      placeholder='100'
+      class='euiFieldNumber {{classes}}'
+      aria-label='Use aria labels when no actual label is in use'
     />
   </:endControl>
 </EuiFormControlLayoutDelimited>
 
 <EuiSpacer />
 
-<EuiFormRow @fullWidth={{true}} @error={{array "error1" "error2"}} @isInvalid={{true}}>
+<EuiFormRow
+  @fullWidth={{true}}
+  @error={{array 'error1' 'error2'}}
+  @isInvalid={{true}}
+>
   <:label>
     Hello
   </:label>
@@ -66,10 +70,10 @@
       </:prepend>
       <:startControl as |classes|>
         <input
-          type="number"
-          placeholder="100"
-          class="euiFieldNumber {{classes}}"
-          aria-label="Use aria labels when no actual label is in use"
+          type='number'
+          placeholder='100'
+          class='euiFieldNumber {{classes}}'
+          aria-label='Use aria labels when no actual label is in use'
         />
       </:startControl>
       <:delimiter>
@@ -77,10 +81,10 @@
       </:delimiter>
       <:endControl as |classes|>
         <input
-          type="number"
-          placeholder="100"
-          class="euiFieldNumber {{classes}}"
-          aria-label="Use aria labels when no actual label is in use"
+          type='number'
+          placeholder='100'
+          class='euiFieldNumber {{classes}}'
+          aria-label='Use aria labels when no actual label is in use'
         />
       </:endControl>
       <:append as |classes|>
@@ -91,7 +95,7 @@
     </EuiFormControlLayoutDelimited>
   </:field>
   <:errors as |error|>
-    <EuiIcon @type="faceSad" @color="danger" />
+    <EuiIcon @type='faceSad' @color='danger' />
     {{error}}
   </:errors>
   <:helpText>
@@ -101,26 +105,26 @@
 
 <EuiSpacer />
 <EuiFormRow
-  @error={{array "error1" "error2"}}
+  @error={{array 'error1' 'error2'}}
   @isInvalid={{true}}
-  @label="Hello"
+  @label='Hello'
   @helpText="Here's a hint"
 >
   <EuiFormControlLayoutDelimited @fullWidth={{true}}>
     <:startControl as |classes|>
       <input
-        type="number"
-        placeholder="100"
-        class="euiFieldNumber {{classes}}"
-        aria-label="Use aria labels when no actual label is in use"
+        type='number'
+        placeholder='100'
+        class='euiFieldNumber {{classes}}'
+        aria-label='Use aria labels when no actual label is in use'
       />
     </:startControl>
     <:endControl as |classes|>
       <input
-        type="number"
-        placeholder="100"
-        class="euiFieldNumber {{classes}}"
-        aria-label="Use aria labels when no actual label is in use"
+        type='number'
+        placeholder='100'
+        class='euiFieldNumber {{classes}}'
+        aria-label='Use aria labels when no actual label is in use'
       />
     </:endControl>
   </EuiFormControlLayoutDelimited>

package/docs/forms/form-controls/form-control-layout-delimited/index.md

@@ -0,0 +1,24 @@
+---
+title: Form control layout delimited
+---
+
+<EuiPageHeader @pageTitle="Form control layout delimited"/>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    <EuiBadge @color="warning">Building block only</EuiBadge>
+  </p>
+
+  <p>
+    Like <strong>EuiFormControlLayout</strong>,
+    <strong>EuiFormControlLayoutDelimited</strong> is generally used
+    internally to consistently style form controls. This component
+    specifically lays out two form controls with center text or icon.
+  </p>
+  <p>
+    It requires both a <EuiCode>:startControl</EuiCode> and a <EuiCode>:endControl</EuiCode> block.
+    You can optionally change the center content to a different string or node (like an EuiIcon).
+  </p>
+</EuiText>

package/docs/forms/form-controls/number-field/demo/demo1.md

@@ -0,0 +1,20 @@
+---
+order: 1
+---
+
+```hbs template
+<EuiFieldNumber
+  @value={{this.num}}
+  {{on 'input' (pick 'target.value' (set this 'num2'))}}
+/>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked num = 1;
+}
+```

package/docs/forms/form-controls/{number-field-demo/demo1.md → number-field/demo/demo2.md}

@@ -1,29 +1,41 @@
 ---
-order: 1
+order: 2
 ---
 
-# Demo
+# Form Demo
 
 ```hbs template
 <EuiForm>
   {{#let (unique-id) as |inputId|}}
-    <EuiFormRow @label="Some Input" @id={{inputId}} @helpText="here's some help text">
+    <EuiFormRow
+      @label='Some Input'
+      @id={{inputId}}
+      @helpText="here's some help text"
+    >
       <EuiFieldNumber
         @value={{this.num}}
         @id={{inputId}}
-        {{on "input" (pick "target.value" (set this "num"))}}
+        {{on 'input' (pick 'target.value' (set this 'num'))}}
       />
     </EuiFormRow>
   {{/let}}
   {{#let (unique-id) as |inputId|}}
-    <EuiFormRow @label="Some Input" @id={{inputId}} @helpText="here's some help text">
+    <EuiFormRow
+      @label='Some Input'
+      @id={{inputId}}
+      @helpText="here's some help text"
+    >
       <EuiFieldNumber
         @value={{this.num}}
         @id={{inputId}}
-        {{on "input" (pick "target.value" (set this "num"))}}
+        {{on 'input' (pick 'target.value' (set this 'num'))}}
       >
         <:prepend as |classes|>
-          <EuiButtonIcon @iconType="faceHappy" class={{classes}} {{on "click" this.salute}} />
+          <EuiButtonIcon
+            @iconType='faceHappy'
+            class={{classes}}
+            {{on 'click' this.salute}}
+          />
         </:prepend>
       </EuiFieldNumber>
     </EuiFormRow>
@@ -34,16 +46,16 @@ order: 1
   </EuiTitle>
   {{#let (unique-id) as |inputId|}}
     <EuiFormRow
-      @label="Some Input"
+      @label='Some Input'
       @isInvalid={{true}}
       @id={{inputId}}
-      @error={{array "error one" "error two"}}
+      @error={{array 'error one' 'error two'}}
       @helpText="here's some help text"
     >
       <EuiFieldNumber
         @value={{this.num2}}
         @id={{inputId}}
-        {{on "input" (pick "target.value" (set this "num2"))}}
+        {{on 'input' (pick 'target.value' (set this 'num2'))}}
       />
     </EuiFormRow>
   {{/let}}
@@ -55,7 +67,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 {
   @tracked num = 1;
   @tracked num2 = 1;
 

package/docs/forms/form-controls/number-field/index.md

@@ -0,0 +1,12 @@
+---
+title: Number field
+---
+
+<EuiPageHeader @pageTitle="Number field"/>
+
+<EuiText>
+  <p>
+    This component renders a basic HTML <EuiCode @language="html">{{'<input type="number">'}}</EuiCode> element.
+    Use a <strong>EuiFieldNumber</strong> to allow users to enter numbers.
+  </p>
+</EuiText>

package/docs/forms/form-controls/password-field/demo/demo1.md

@@ -0,0 +1,19 @@
+---
+order: 1
+---
+
+```hbs template
+<EuiFieldPassword
+  @value={{this.password}}
+  {{on 'input' (pick 'target.value' (set this 'password'))}}
+/>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class extends Component {
+  @tracked password = '';
+}
+```

package/docs/forms/form-controls/{password-field-demo/demo1.md → password-field/demo/demo2.md}

@@ -1,17 +1,21 @@
 ---
-order: 1
+order: 2
 ---
 
-# Demo
+# Form demo
 
 ```hbs template
 <EuiForm>
   {{#let (unique-id) as |inputId|}}
-    <EuiFormRow @label="Some Input" @helpText="here's some help text" @id={{inputId}}>
+    <EuiFormRow
+      @label='Some Input'
+      @helpText="here's some help text"
+      @id={{inputId}}
+    >
       <EuiFieldPassword
         @value={{this.password}}
         @id={{inputId}}
-        {{on "input" (pick "target.value" (set this "password"))}}
+        {{on 'input' (pick 'target.value' (set this 'password'))}}
       />
     </EuiFormRow>
   {{/let}}
@@ -21,16 +25,16 @@ order: 1
   </EuiTitle>
   {{#let (unique-id) as |inputId|}}
     <EuiFormRow
-      @label="Some Input"
+      @label='Some Input'
       @id={{inputId}}
       @isInvalid={{true}}
-      @error={{array "error one" "error two"}}
+      @error={{array 'error one' 'error two'}}
       @helpText="here's some help text"
     >
       <EuiFieldPassword
         @value={{this.password2}}
         @id={{inputId}}
-        {{on "input" (pick "target.value" (set this "password2"))}}
+        {{on 'input' (pick 'target.value' (set this 'password2'))}}
       />
     </EuiFormRow>
   {{/let}}
@@ -42,7 +46,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 {
   @tracked password = '';
   @tracked password2 = '';
 }

package/docs/forms/form-controls/password-field/index.md

@@ -0,0 +1,19 @@
+---
+title: Password field
+---
+
+<EuiPageHeader @pageTitle="Password field"/>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    Use a <strong>EuiFieldPassword</strong> to allow users to enter a password.
+    By default, it renders a basic HTML <EuiCode @language="html">{{'<input type="password">'}}</EuiCode> where the content is obfuscated.
+    When users type in the field the characters are presented as asterisks.
+  </p>
+  <p>
+    You can change this default behavior by passing <EuiCode>{{'@type="dual"'}}</EuiCode> so that users can toggle between showing and obfuscating the content.
+    This option makes the experience more user-friendly and accessible.
+  </p>
+</EuiText>

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

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

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

@@ -0,0 +1,24 @@
+---
+order: 3
+title: Radio
+---
+
+<EuiPageHeader @pageTitle="Radio"/>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    This component renders a basic HTML <EuiCode @language="html">{{'<input type="radio">'}}</EuiCode> element.
+    Use radio buttons to allow users to choose one option out of a list.
+    They are ideal for a list of more than 2 options, and usually no more than 6 options.
+  </p>
+  <p>
+    When creating a list, each input should have the same <EuiCode>@name</EuiCode> to ensure a group is established.
+    This way when you select a radio button in that group, the other options are automatically deselected.
+  </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/radio-group/demo/demo1.md

@@ -0,0 +1,50 @@
+---
+order: 1
+---
+
+```hbs template
+<EuiRadioGroup
+  @options={{this.radios}}
+  @idSelected={{this.selectedRadioId}}
+  @onChange={{set this 'selectedRadioId'}}
+/>
+<EuiSpacer />
+<EuiRadioGroup
+  @legend='With legend'
+  @options={{this.radios}}
+  @idSelected={{this.selectedRadioId}}
+  @onChange={{set this 'selectedRadioId'}}
+/>
+<EuiSpacer />
+Selected:
+{{this.selectedRadioId}}
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  radios = [
+    {
+      id: 'radio-1',
+      label: 'radio 1'
+    },
+    {
+      id: 'radio-2',
+      label: 'radio 2'
+    },
+    {
+      id: 'radio-3',
+      label: 'radio 3'
+    },
+    {
+      id: 'radio-4',
+      label: 'radio 4'
+    }
+  ];
+
+  @tracked selectedRadioId = null;
+}
+```