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

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

@@ -0,0 +1,32 @@
+---
+order: 3
+title: Radio
+---
+
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Radio
+      </h1>
+    </EuiTitle>
+  </EuiPageHeaderSection>
+</EuiPageHeader>
+
+<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;
+}
+```

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

@@ -0,0 +1,26 @@
+---
+title: Radio group
+---
+
+<EuiPageHeader>
+  <EuiPageHeaderSection>
+    <EuiTitle @size="l">
+      <h1>
+        Radio 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>@idSelected</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>
+</EuiText>

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

@@ -0,0 +1,96 @@
+---
+order: 1
+---
+
+# Single range
+
+<EuiText>
+  <h3>Required</h3>
+  <ul>
+    <li>
+      <EuiCode>@min, @max</EuiCode>: Sets the range values.
+    </li>
+    <li>
+      <EuiCode>@step</EuiCode>: Technically not required because the
+      default is <EuiCode>1</EuiCode>.
+    </li>
+    <li>
+      <EuiCode>@value, @onChange</EuiCode>
+    </li>
+  </ul>
+  <h3>Optional</h3>
+  <ul>
+    <li>
+      <EuiCode>@showLabels</EuiCode>: While currently considered
+      optional, the property should be added to explicitly state the
+      range to the user.
+    </li>
+    <li>
+      <EuiCode>@showValue</EuiCode>: Displays a tooltip style indicator
+      of the selected value. You can add <EuiCode>:valuePrepend</EuiCode>
+      and/or <EuiCode>:valueAppend</EuiCode> blocks to bookend the value with
+      custom content.
+    </li>
+    <li>
+      <EuiCode>@showRange</EuiCode>: Displays a thickened line from the
+      minimum value to the selected value.
+    </li>
+  </ul>
+</EuiText>
+
+```hbs template
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @step={{0.5}}
+  @value={{this.value}}
+  @onChange={{this.onChange}}
+  @showLabels={{true}}
+  aria-label='An example of EuiRange with showLabels prop'
+/>
+<EuiSpacer @size='xl' />
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.value}}
+  @onChange={{this.onChange}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  aria-label='An example of EuiRange with showValue prop'
+/>
+<EuiSpacer @size='xl' />
+<EuiRange
+  @min={{100}}
+  @max={{200}}
+  @value={{this.value}}
+  @onChange={{this.onChange}}
+  @showLabels={{true}}
+  @showValue={{true}}
+  @showRange={{true}}
+  @valuePrepend='100 -'
+  aria-label='An example of EuiRange with valuePrepend prop'
+>
+  <:min as |minVal|>
+    The min value is:
+    {{minVal}}
+  </:min>
+  <:valueAppend>
+    🚀
+  </:valueAppend>
+</EuiRange>
+<EuiSpacer @size='xl' />
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked value = 170;
+  @action
+  onChange(e) {
+    this.value = e.target.value;
+  }
+}
+```

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

@@ -0,0 +1,62 @@
+---
+order: 2
+---
+
+# Dual range
+
+<EuiText>
+  <p>
+    The <strong>EuiDualRange</strong> accepts almost all the same props
+    as the regular <strong>EuiRange</strong>, with the exception of
+    <EuiCode>@showRange</EuiCode> which is on by default, and
+    <EuiCode>@showValue</EuiCode> since tooltips don't fit properly
+    when there are two.
+  </p>
+  <EuiCallOut @color="warning" @title="Retrieving field values">
+    <:body>
+      <p>
+        Two-value <EuiCode @language="html">input[type=range]</EuiCode> elements are not
+        part of the HTML5 specification. Because of this support gap,
+        <strong>EuiDualRange</strong> cannot expose a native
+        <EuiCode>value</EuiCode> property for native form to consumption.
+        <strong>
+          <EuiCode>@onChange</EuiCode> is the recommended
+          method for retrieving the upper and lower values.
+        </strong>
+      </p>
+      <p>
+        <strong>EuiDualRange</strong> does use native inputs to help
+        validate step values and range limits. These may be used as form
+        values when <EuiCode>@showInput</EuiCode> is in use. The
+        alternative is to store values in
+        <EuiCode @language="html">input[type=hidden]</EuiCode>.
+      </p>
+    </:body>
+  </EuiCallOut>
+</EuiText>
+
+```hbs template
+<EuiDualRange
+  @value={{this.value}}
+  @min={{-100}}
+  @max={{200}}
+  @step={{10}}
+  @onChange={{this.onChange}}
+  @showLabels={{true}}
+  aria-label='An example of EuiDualRange'
+/>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked value = ['', ''];
+  @action
+  onChange(values) {
+    this.value = values;
+  }
+}
+```

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

@@ -2,34 +2,32 @@
 order: 3
 ---
 
-# Demo
+# Inputs
 
-```hbs template
-<EuiTitle>
-  Inputs
-</EuiTitle>
 <EuiText>
   <p>
-    The showInput prop, will append or bookend the range slider with number type inputs. This is important for allowing precise values to be entered by the user.
+    The <EuiCode>@showInput</EuiCode> arg, will append or bookend the range slider with number type inputs. This is important for allowing precise values to be entered by the user.
   </p>
   <p>
     Passing empty strings as the value to the ranges, will allow the inputs to be blank, though the range handles will show at the min (or max and min) positions.
   </p>
 </EuiText>
+
+```hbs template
 <EuiRange
   @value={{this.value}}
   @onChange={{this.onChange}}
   @showInput={{true}}
-  aria-label="An example of EuiRange"
+  aria-label='An example of EuiRange'
 />
-<EuiSpacer @size="xl" />
+<EuiSpacer @size='xl' />
 <EuiDualRange
   @value={{this.valueDual}}
   @onChange={{this.onChangeDual}}
   @showInput={{true}}
-  @minInputProps={{hash ariaLabel="Min Value"}}
-  @maxInputProps={{hash ariaLabel="Max Value"}}
-  aria-label="An example of EuiDualRange with inputs"
+  @minInputProps={{hash ariaLabel='Min Value'}}
+  @maxInputProps={{hash ariaLabel='Max Value'}}
+  aria-label='An example of EuiDualRange with inputs'
 />
 ```
 
@@ -38,7 +36,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 value = '20';
   @tracked valueDual = [20, 100];
 

package/docs/forms/form-controls/{range-demo → range/demo}/demo4.md

@@ -2,34 +2,32 @@
 order: 4
 ---
 
-# Demo
+# Tick marks
 
-```hbs template
-<EuiTitle>
-  Tick marks
-</EuiTitle>
 <EuiText>
   <p>
-    To show clickable tick marks and labels at a given interval, add the prop showTicks. By default, tick mark interval is bound to the step prop, however, you can set a custom interval without changing the actual steps allowed by passing a number to the tickInterval prop.
+    To show clickable tick marks and labels at a given interval, add the arg <EuiCode>@showTicks={{true}}</EuiCode>. By default, tick mark interval is bound to the step arg, however, you can set a custom interval without changing the actual steps allowed by passing a number to the <EuiCode>@tickInterval</EuiCode> arg.
   </p>
   <p>
     To pass completely custom tick marks, you can pass an array of objects that require a value and label. The value must be included in the range of values (min-max), though the label may be anythin you choose.
   </p>
 </EuiText>
+
+```hbs template
 <EuiRange
   @step={{10}}
   @value={{this.value}}
   @onChange={{this.onChange}}
   @showTicks={{true}}
-  aria-label="An example of EuiRange with ticks"
+  aria-label='An example of EuiRange with ticks'
 />
-<EuiSpacer @size="xl" />
-<EuiTitle @size="xxs">
+<EuiSpacer @size='xl' />
+<EuiTitle @size='xxs'>
   <h3>
     Custom tick interval
   </h3>
 </EuiTitle>
-<EuiSpacer @size="l" />
+<EuiSpacer @size='l' />
 <EuiRange
   @value={{this.value2}}
   @onChange={{this.onChange2}}
@@ -37,22 +35,22 @@ order: 4
   @showRange={{true}}
   @showTicks={{true}}
   @tickInterval={{20}}
-  aria-label="An example of EuiRange with custom tickInterval"
+  aria-label='An example of EuiRange with custom tickInterval'
 />
-<EuiSpacer @size="xl" />
-<EuiTitle @size="xxs">
+<EuiSpacer @size='xl' />
+<EuiTitle @size='xxs'>
   <h3>
     Custom ticks object
   </h3>
 </EuiTitle>
-<EuiSpacer @size="l" />
+<EuiSpacer @size='l' />
 <EuiDualRange
   @value={{this.dualValue}}
-  @onChange={{set this "dualValue"}}
-  @ticks={{array (hash label="20kb" value=20) (hash label="100kb" value=100)}}
+  @onChange={{set this 'dualValue'}}
+  @ticks={{array (hash label='20kb' value=20) (hash label='100kb' value=100)}}
   @showInput={{true}}
   @showTicks={{true}}
-  aria-label="An example of EuiDualRange with ticks"
+  aria-label='An example of EuiDualRange with ticks'
 />
 ```
 
@@ -61,7 +59,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 value = '20';
   @tracked dualValue = [20, 100];
 

package/docs/forms/form-controls/{range-demo → range/demo}/demo5.md

@@ -2,44 +2,42 @@
 order: 5
 ---
 
-# Demo
+# Levels
 
-```hbs template
-<EuiTitle>
-  Levels
-</EuiTitle>
 <EuiText>
   <p>
-    To create colored indicators for certain intervals, pass an array of objects that include a min, max and color. Color options are [ "primary", "success", "warning", "danger" ].
+    To create colored indicators for certain intervals, pass an array of objects that include a <EuiCode>min</EuiCode>, <EuiCode>max</EuiCode> and <EuiCode>color</EuiCode>. Color options are <EuiCode @language="js">["primary", "success", "warning", "danger"]</EuiCode>.
   </p>
   <p>
-    Be sure to then add an aria-describedby and match it to the id of a EuiFormHelpText.
+    Be sure to then add an <strong>aria-describedby</strong> and match it to the id of a <strong>EuiFormHelpText</strong>.
   </p>
 </EuiText>
+
+```hbs template
 <EuiRange
   @value={{this.value}}
   @onChange={{this.onChange}}
   @showTicks={{true}}
   @tickInterval={{20}}
   @levels={{this.levels}}
-  aria-label="An example of EuiRange with levels prop"
-  aria-describedby="levelsHelp2"
+  aria-label='An example of EuiRange with levels prop'
+  aria-describedby='levelsHelp2'
 />
-<EuiFormHelpText id="levelsHelp2">
+<EuiFormHelpText id='levelsHelp2'>
   Recommended levels are {levels[1].min} and above.
 </EuiFormHelpText>
-<EuiSpacer size="xl" />
+<EuiSpacer size='xl' />
 <EuiDualRange
   @value={{this.dualValue}}
-  @onChange={{set this "dualValue"}}
+  @onChange={{set this 'dualValue'}}
   @showTicks={{true}}
   @showInput={{true}}
-  @ticks={{array (hash label="20kb" value=20) (hash label="100kb" value=100)}}
+  @ticks={{array (hash label='20kb' value=20) (hash label='100kb' value=100)}}
   @levels={{this.levels}}
-  aria-label="An example of EuiDualRange with levels prop"
-  aria-describedby="levelsHelp3"
+  aria-label='An example of EuiDualRange with levels prop'
+  aria-describedby='levelsHelp3'
 />
-<EuiFormHelpText id="levelsHelp3">
+<EuiFormHelpText id='levelsHelp3'>
   Recommended size is {levels[1].min}kb and above.
 </EuiFormHelpText>
 ```
@@ -49,7 +47,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 value = '20';
   @tracked dualValue = [20, 100];
 
@@ -62,13 +60,13 @@ export default class EuiTextFieldDemo1 extends Component {
     {
       min: 0,
       max: 20,
-      color: 'danger',
+      color: 'danger'
     },
     {
       min: 20,
       max: 100,
-      color: 'success',
-    },
+      color: 'success'
+    }
   ];
 }
 ```

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

@@ -0,0 +1,57 @@
+---
+order: 6
+---
+
+# Inputs with range in a dropdown
+
+<EuiText>
+  <p>
+    Passing <EuiCode>@showInput="inputWithPopover"</EuiCode> instead of a boolean will only display the inputs until the input is interacted with in which case a dropdown will appear displaying the actual slider.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiRange
+  @value={{this.value}}
+  @onChange={{this.onChange}}
+  @showInput='inputWithPopover'
+  @showLabels={{true}}
+  aria-label='An example of EuiRange with showInput prop'
+/>
+<EuiSpacer @size='xl' />
+<EuiDualRange
+  @value={{this.dualValue}}
+  @onChange={{set this 'dualValue'}}
+  @showInput='inputWithPopover'
+  @showLabels={{true}}
+  @levels={{this.levels}}
+  aria-label='An example of EuiDualRange with showInput prop'
+/>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class extends Component {
+  @tracked value = '20';
+  @action
+  onChange(e) {
+    this.value = e.target.value;
+  }
+
+  levels = [
+    {
+      min: 0,
+      max: 20,
+      color: 'danger'
+    },
+    {
+      min: 20,
+      max: 100,
+      color: 'success'
+    }
+  ];
+}
+```