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

package/docs/forms/form-controls/range/demo/demo7.md

@@ -0,0 +1,350 @@
+---
+order: 7
+---
+
+# Range kitchen sink
+
+<EuiText>
+  <p>
+    Showcase of the different settings ranges can have
+  </p>
+</EuiText>
+
+```hbs template
+<EuiTitle>
+  Simple range
+</EuiTitle>
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.value}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @onChange={{pick 'target.value' (set this 'value')}}
+/>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Simple range with input
+</EuiTitle>
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.value}}
+  @onChange={{pick 'target.value' (set this 'value')}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showInput={{true}}
+/>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Simple range with popover
+</EuiTitle>
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.value}}
+  @onChange={{pick 'target.value' (set this 'value')}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showInput='inputWithPopover'
+/>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Simple range with append and popover
+</EuiTitle>
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.value}}
+  @onChange={{pick 'target.value' (set this 'value')}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showInput='inputWithPopover'
+>
+  <:append as |classes|>
+    <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+  </:append>
+</EuiRange>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Dual range with append and popover
+</EuiTitle>
+<EuiDualRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.valueDual}}
+  @onChange={{set this 'valueDual'}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showInput='inputWithPopover'
+>
+  <:append as |classes|>
+    <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+  </:append>
+</EuiDualRange>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Dual range with append
+</EuiTitle>
+<EuiCallOut
+  @iconType='alert'
+  @title='Content blocks and `showInput`'
+  @color='warning'
+>
+  <:body>
+    The
+    <b>prepend</b>
+    and
+    <b>append</b>
+    blocks are not shown in dual ranges unless the `showInput` value is
+    `inputWithPopover`
+  </:body>
+</EuiCallOut>
+<EuiDualRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.valueDual}}
+  @onChange={{set this 'valueDual'}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showInput={{true}}
+>
+  <:append as |classes|>
+    <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+  </:append>
+</EuiDualRange>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Dual range
+</EuiTitle>
+<EuiDualRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.valueDual}}
+  @onChange={{set this 'valueDual'}}
+  @showLabels={{true}}
+  @showValue={{true}}
+/>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Ranges within forms
+</EuiTitle>
+<EuiChangesetForm
+  @changeset={{changeset this.changeset}}
+  as |Form changesetObj|
+>
+  <EuiFlexGroup @direction='column' @gutterSize='none'>
+    <Form.FieldRangeSlider
+      @fieldName='rangeSlider1'
+      @label='Range slider'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+    />
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @fieldName='rangeSlider1'
+      @label='Range slider with input'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+    />
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @fieldName='rangeSlider1'
+      @label='Range slider with append'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldRangeSlider>
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @fieldName='rangeSlider1'
+      @label='Range slider with popover'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput='inputWithPopover'
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldRangeSlider>
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @fieldName='rangeSlider2'
+      @label='Dual slider with popover'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput='inputWithPopover'
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldDualRangeSlider>
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @fieldName='rangeSlider2'
+      @label='Dual slider with inputs'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+    />
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @fieldName='rangeSlider2'
+      @label='Plain dual slider'
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+    />
+    <EuiButton @type='submit' @isDisabled={{changesetObj.isInvalid}}>
+      Submit form
+    </EuiButton>
+  </EuiFlexGroup>
+</EuiChangesetForm>
+<EuiSpacer @size='xl' />
+<EuiTitle>
+  Validated form
+</EuiTitle>
+<ValidatedForm as |Form|>
+  <EuiFlexGroup @direction='column' @gutterSize='none'>
+    <Form.FieldRangeSlider
+      @label='Range slider'
+      @value={{this.validatedData.rangeSlider1}}
+      @onChange={{set this.validatedData 'rangeSlider1'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @validations={{hash
+        number=(hash gte=0 lte=100 allowString=true)
+        presence=(hash presence=true)
+      }}
+    />
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @label='Range slider with input'
+      @value={{this.validatedData.rangeSlider1}}
+      @onChange={{set this.validatedData 'rangeSlider1'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+      @validations={{hash
+        number=(hash gte=0 lte=100 allowString=true)
+        presence=(hash presence=true)
+      }}
+    />
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @label='Range slider with append'
+      @value={{this.validatedData.rangeSlider1}}
+      @onChange={{set this.validatedData 'rangeSlider1'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+      @validations={{hash
+        number=(hash gte=0 lte=100 allowString=true)
+        presence=(hash presence=true)
+      }}
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldRangeSlider>
+    <EuiSpacer />
+    <Form.FieldRangeSlider
+      @label='Range slider with popover'
+      @value={{this.validatedData.rangeSlider1}}
+      @onChange={{set this.validatedData 'rangeSlider1'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput='inputWithPopover'
+      @validations={{hash
+        number=(hash gte=0 lte=100 allowString=true)
+        presence=(hash presence=true)
+      }}
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldRangeSlider>
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @label='Dual slider with popover'
+      @value={{this.validatedData.rangeSlider2}}
+      @onChange={{set this.validatedData 'rangeSlider2'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput='inputWithPopover'
+      @validations={{hash presence=(hash presence=true)}}
+    >
+      <:append as |classes|>
+        <EuiFormLabel class={{classes}}>Append</EuiFormLabel>
+      </:append>
+    </Form.FieldDualRangeSlider>
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @label='Dual slider with inputs'
+      @value={{this.validatedData.rangeSlider2}}
+      @onChange={{set this.validatedData 'rangeSlider2'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @showInput={{true}}
+      @validations={{hash presence=(hash presence=true)}}
+    />
+    <EuiSpacer />
+    <Form.FieldDualRangeSlider
+      @label='Plain dual slider'
+      @value={{this.validatedData.rangeSlider2}}
+      @onChange={{set this.validatedData 'rangeSlider2'}}
+      @showLabels={{true}}
+      @showValue={{true}}
+      @min={{0}}
+      @max={{300}}
+      @validations={{hash presence=(hash presence=true)}}
+    />
+    <EuiButton @type='submit'>
+      Submit form
+    </EuiButton>
+  </EuiFlexGroup>
+</ValidatedForm>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked value = 0;
+  @tracked valueDual = [0, 0];
+  @tracked validatedData = {};
+  changeset = {};
+}
+```

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

@@ -0,0 +1,26 @@
+---
+title: Range
+---
+
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Range
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>
+
+<EuiSpacer />
+
+<EuiText>
+  <EuiCallOut @color="warning" @title="Understanding precision">
+    <:body>
+      <p>
+        Range sliders should only be used when <strong>the precise value is not considered important</strong>.
+        If the precise value does matter, add the <EuiCode>@showInput</EuiCode> arg or use a <strong>EuiFieldNumber</strong> instead.
+      </p>
+    </:body>
+  </EuiCallOut>
+</EuiText>

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

@@ -0,0 +1,29 @@
+---
+order: 1
+---
+
+```hbs template
+<EuiFieldSearch
+  @isClearable={{true}}
+  @clear={{set this 'text' ''}}
+  @onSearch={{set this 'searchText'}}
+  @value={{this.searchText}}
+/>
+<EuiSpacer />
+<EuiTitle>
+  Search Text:
+  <EuiTextColor @color='success'>
+    {{this.searchText}}
+  </EuiTextColor>
+</EuiTitle>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked searchText = '';
+}
+```

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

@@ -0,0 +1,22 @@
+---
+title: Search field
+---
+
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Search field
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    This component renders a basic HTML <EuiCode @language="html">{{'<input type="search">'}}</EuiCode> element.
+    Use a <strong>EuiFieldSearch</strong> to allow users to enter search queries.
+  </p>
+</EuiText>

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

@@ -0,0 +1,29 @@
+---
+order: 1
+---
+
+## Simple select
+
+```hbs template
+<EuiSelect
+  @label='Simple select'
+  @value={{this.select1}}
+  @hasNoInitialSelection={{true}}
+  @options={{array
+    (hash value='1' text='hello')
+    (hash value='2' text='goodbye')
+  }}
+  {{on 'change' (pick 'target.value' (set this 'select1'))}}
+/>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked select1 = '';
+  @tracked select2 = '';
+}
+```

package/docs/forms/form-controls/select/demo/demo2.md

@@ -0,0 +1,44 @@
+---
+order: 2
+---
+
+## Using blocks
+
+<EuiText>
+  <p>
+    You can make use of the <strong>:prepend</strong> and <strong>:append</strong> blocks to customize the select.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiSelect
+  @value={{this.select1}}
+  @hasNoInitialSelection={{true}}
+  @options={{array
+    (hash value='1' text='hello')
+    (hash value='2' text='goodbye')
+  }}
+  {{on 'change' (pick 'target.value' (set this 'select1'))}}
+>
+  <:prepend as |classes|>
+    <EuiFormLabel class={{classes}}>
+      Prepend
+    </EuiFormLabel>
+  </:prepend>
+  <:append as |classes|>
+    <EuiFormLabel class={{classes}}>
+      Append
+    </EuiFormLabel>
+  </:append>
+</EuiSelect>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked select1 = '';
+}
+```

package/docs/forms/form-controls/{select-demo/demo1.md → select/demo/demo3.md}

@@ -1,18 +1,25 @@
 ---
-order: 1
+order: 3
 ---
 
-# Demo
+## Form demo
 
 ```hbs template
 {{#let (unique-id) as |selectId|}}
-  <EuiFormRow @label="Some Select" @helpText="here's some help text" @id={{selectId}}>
+  <EuiFormRow
+    @label='Some Select'
+    @helpText="here's some help text"
+    @id={{selectId}}
+  >
     <EuiSelect
       @value={{this.select1}}
       @hasNoInitialSelection={{true}}
-      @options={{array (hash value="1" text="hello") (hash value="2" text="goodbye")}}
+      @options={{array
+        (hash value='1' text='hello')
+        (hash value='2' text='goodbye')
+      }}
       @id={{selectId}}
-      {{on "change" (pick "target.value" (set this "select1"))}}
+      {{on 'change' (pick 'target.value' (set this 'select1'))}}
     >
       <:prepend as |classes|>
         <EuiFormLabel class={{classes}} for={{selectId}}>
@@ -28,18 +35,21 @@ order: 1
 </EuiTitle>
 {{#let (unique-id) as |selectId|}}
   <EuiFormRow
-    @label="Some Input"
+    @label='Some Input'
     @isInvalid={{true}}
-    @error={{array "error one" "error two"}}
+    @error={{array 'error one' 'error two'}}
     @helpText="here's some help text"
     @id={{selectId}}
   >
     <EuiSelect
       @value={{this.select2}}
       @hasNoInitialSelection={{true}}
-      @options={{array (hash value="1" text="hello") (hash value="2" text="goodbye")}}
+      @options={{array
+        (hash value='1' text='hello')
+        (hash value='2' text='goodbye')
+      }}
       @id={{selectId}}
-      {{on "change" (pick "target.value" (set this "select2"))}}
+      {{on 'change' (pick 'target.value' (set this 'select2'))}}
     >
       <:prepend as |classes|>
         <EuiFormLabel class={{classes}} for={{selectId}}>
@@ -56,7 +66,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 select1 = '';
   @tracked select2 = '';
 }

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

@@ -0,0 +1,27 @@
+---
+title: Select
+---
+
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Select
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    This component renders a basic HTML <EuiCode @language="html">{{'<select>'}}</EuiCode> element.
+    Use <strong>EuiSelect</strong> to allow users to choose from a list of 7 to 12 options.
+    When there are less than 7 options consider using a <strong>EuiRadioGroup</strong>.
+  </p>
+  <p>
+    If you need more customization for how the options and/or selected values render, you can use an <strong>EuiSuperSelect</strong> instead.
+    For long lists of options use an <strong>EuiComboBox</strong>, which has search and multi-select capabilities, but also has restrictions on how items are rendered.
+  </p>
+</EuiText>

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

@@ -2,29 +2,29 @@
 order: 1
 ---
 
-# Demo
-
 ```hbs template
 <EuiForm>
   <EuiSwitch
-    @id="131"
-    @label="I am a checkbox"
+    @id='131'
+    @label='I am a checkbox'
     @checked={{this.switch1}}
-    @onChange={{pick "target.checked" (set this "switch1")}}
+    @onChange={{pick 'target.checked' (set this 'switch1')}}
   />
+  <EuiSpacer />
   <EuiSwitch
-    @id="131d"
+    @id='131d'
     @checked={{this.switch2}}
-    @onChange={{pick "target.checked" (set this "switch2")}}
+    @onChange={{pick 'target.checked' (set this 'switch2')}}
   >
     <:label>
       Switch with custom Label
     </:label>
   </EuiSwitch>
+  <EuiSpacer />
   <EuiSwitch
     @disabled={{true}}
-    @id="disabled-checkbox"
-    @label="Disabled switch"
+    @id='disabled-checkbox'
+    @label='Disabled switch'
     @checked={{this.radio1}}
   />
 </EuiForm>
@@ -35,7 +35,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 switch1 = false;
   @tracked switch2 = false;
 }

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

@@ -0,0 +1,21 @@
+---
+title: Switch
+---
+
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Switch
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    A switch can be substituted for a checkbox when the semantics of the label dictate a true on/off state.
+  </p>
+</EuiText>