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

package/docs/forms/form-controls/text-field/demo/demo2.md

@@ -0,0 +1,40 @@
+---
+order: 2
+---
+
+<EuiTitle>
+  With Errors
+</EuiTitle>
+
+```hbs template
+<EuiForm>
+  {{#let (unique-id) as |inputId|}}
+    <EuiFormRow
+      @label='Some Input'
+      @helpText="here's some help text"
+      @error={{array 'error'}}
+      @isInvalid={{true}}
+      @id={{inputId}}
+    >
+      <EuiFieldText
+        @value={{this.num}}
+        @id={{inputId}}
+        {{on 'input' (pick 'target.value' (set this 'num'))}}
+      />
+    </EuiFormRow>
+  {{/let}}
+</EuiForm>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class extends Component {
+  @tracked num = 1;
+
+  salute() {
+    alert('hello');
+  }
+}
+```

package/docs/forms/form-controls/{text-field-demo/demo2.md → text-field/demo/demo3.md}

@@ -1,32 +1,35 @@
 ---
-order: 2
+order: 4
 ---
 
-# Demo 2
-
-```hbs template
 <EuiTitle>
   You can use named blocks for further row customization
 </EuiTitle>
+
+```hbs template
 <EuiForm>
   {{#let (unique-id) as |inputId|}}
-    <EuiFormRow @error={{array "error 1"}} @isInvalid={{true}} @id={{inputId}}>
+    <EuiFormRow @error={{array 'error 1'}} @isInvalid={{true}} @id={{inputId}}>
       <:label>
-        <EuiAvatar @name="row" />
-        My label
+        <EuiAvatar @name='row' />
+        This is the
+        <strong>:label</strong>
+        block
       </:label>
       <:field>
         <EuiFieldText
-          @value={{this.num2}}
+          @value={{this.num}}
           @id={{inputId}}
-          {{on "input" (pick "target.value" (set this "num2"))}}
+          {{on 'input' (pick 'target.value' (set this 'num'))}}
         />
       </:field>
       <:errors as |error|>
         {{error}}
       </:errors>
       <:helpText>
-        Some text
+        You can also use the
+        <strong>:helpText</strong>
+        block
       </:helpText>
     </EuiFormRow>
   {{/let}}
@@ -36,14 +39,8 @@ order: 2
 ```javascript component
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
-export default class EuiTextFieldDemo2 extends Component {
+export default class extends Component {
   @tracked num = 1;
-  @tracked num2 = 1;
-
-  salute() {
-    alert('hello');
-  }
 }
 ```

package/docs/forms/form-controls/{text-field-demo/demo1.md → text-field/demo/demo4.md}

@@ -1,25 +1,31 @@
 ---
-order: 1
+order: 3
 ---
 
-# Demo
+<EuiTitle>
+  Text field with <strong>:prepend</strong> and <strong>:append</strong> blocks.
+</EuiTitle>
 
 ```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}}
+    >
       <EuiFieldText
         @value={{this.num}}
-        @clear={{set this "num" ""}}
+        @clear={{set this 'num' ''}}
         @id={{inputId}}
-        {{on "input" (pick "target.value" (set this "num"))}}
+        {{on 'input' (pick 'target.value' (set this 'num'))}}
       >
         <:prepend as |classes|>
           <EuiButtonIcon
             class={{classes}}
-            @size="xs"
-            @iconType="faceHappy"
-            {{on "click" this.salute}}
+            @size='xs'
+            @iconType='faceHappy'
+            {{on 'click' this.salute}}
           />
         </:prepend>
         <:append as |classes|>
@@ -28,33 +34,14 @@ order: 1
           </EuiFormLabel>
           <EuiButtonIcon
             class={{classes}}
-            @size="xs"
-            @iconType="faceHappy"
-            {{on "click" this.salute}}
+            @size='xs'
+            @iconType='faceHappy'
+            {{on 'click' this.salute}}
           />
         </:append>
       </EuiFieldText>
     </EuiFormRow>
   {{/let}}
-  <EuiHorizontalRule />
-  <EuiTitle>
-    With Errors
-  </EuiTitle>
-  {{#let (unique-id) as |inputId|}}
-    <EuiFormRow
-      @label="Some Input"
-      @helpText="here's some help text"
-      @error={{array "error"}}
-      @isInvalid={{true}}
-      @id={{inputId}}
-    >
-      <EuiFieldText
-        @value={{this.num2}}
-        @id={{inputId}}
-        {{on "input" (pick "target.value" (set this "num2"))}}
-      />
-    </EuiFormRow>
-  {{/let}}
 </EuiForm>
 ```
 
@@ -63,9 +50,8 @@ 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;
 
   salute() {
     alert('hello');

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

@@ -0,0 +1,14 @@
+---
+title: Text field
+---
+
+<EuiPageHeader @pageTitle="Text field"/>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    This component renders a basic HTML <EuiCode @language="html">{{'<input type="text">'}}</EuiCode> element.
+    Use a <strong>EuiFieldText</strong> to allow users to enter or edit text.
+  </p>
+</EuiText>

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

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

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

@@ -0,0 +1,24 @@
+---
+order: 2
+---
+
+# Invalid textarea
+
+```hbs template
+<EuiTextArea
+  @value={{this.text}}
+  @rows={{10}}
+  @resize='both'
+  @isInvalid={{true}}
+  {{on 'input' (pick 'target.value' (set this 'text'))}}
+/>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class extends Component {
+  @tracked text = '';
+}
+```

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

@@ -0,0 +1,13 @@
+---
+title: Textarea
+---
+<EuiPageHeader @pageTitle="Textarea"/>
+
+<EuiSpacer />
+
+<EuiText>
+  <p>
+    This component renders a basic HTML <EuiCode @language="html">{{'<textarea />'}}</EuiCode> element.
+    Use <strong>EuiTextArea</strong> to allow users to enter multi-line text.
+  </p>
+</EuiText>

package/docs/forms/form-layouts/described-form-groups-demo/demo1.md

@@ -13,7 +13,7 @@ order: 1
     Will be wrapped in a small, subdued EuiText block.
   </:description>
   <:default>
-    <EuiFormRow @label='Text field'>
+    <EuiFormRow @label='Text field' @helpText='Im helping!'>
       <EuiFieldText />
     </EuiFormRow>
   </:default>
@@ -25,7 +25,7 @@ order: 1
     </h3>
   </:title>
   <:default>
-    <EuiFormRow @label='Text field'>
+    <EuiFormRow @label='Text field' @helpText={{array 'Im helping!' 'Me too!'}}>
       <EuiFieldText />
     </EuiFormRow>
   </:default>
@@ -41,7 +41,14 @@ order: 1
   </:description>
   <:default>
     <EuiFormRow @label='Text field'>
-      <EuiFieldText />
+      <:field>
+        <EuiFieldText />
+      </:field>
+      <:helpText>
+        Im helping!
+        <br />
+        Me too!
+      </:helpText>
     </EuiFormRow>
     <EuiFormRow @label='Text field'>
       <EuiFilePicker />
@@ -59,7 +66,9 @@ order: 1
     </h3>
   </:title>
   <:description>
-    By default, EuiDescribedFormGroup will be double the default width of form elements. However, you can pass fullWidth prop to this, the individual field and row components to expand to their container.
+    By default, EuiDescribedFormGroup will be double the default width of form
+    elements. However, you can pass fullWidth prop to this, the individual field
+    and row components to expand to their container.
   </:description>
   <:default>
     <EuiFormRow @label='Use a switch instead of a single checkbox'>

package/docs/forms/form-layouts/described-form-groups.md

@@ -1 +1 @@
-# Described form groups
+<EuiPageHeader @pageTitle="Described form groups"/>

package/docs/layout/accordion-demo/demo1.md

@@ -1,114 +1,33 @@
+---
+order: 1
+---
+
+# Arrow display
+
+<EuiText>
+  The arrow helps indicate the current state of the accordion (open or not) and points to the main triggering button text. If you must hide or change the side in which the arrow appears, use <EuiCode>arrowDisplay: 'right'</EuiCode> or <EuiCode>'none'</EuiCode>
+</EuiText>
+
 ```hbs template
-<EuiAccordion>
-  <:buttonContent>
-    Clickable title
-  </:buttonContent>
-  <:content>
-    My content
-  </:content>
-</EuiAccordion>
-<br />
-<h1>
-  Accordion with
-  <b>
-    forceState
-  </b>
-</h1>
-The accordion is
-{{this.accordionState}}
-<br />
-<button type="button" {{on "click" (fn (mut this.accordionState) "open")}}>
-  Open
-</button>
-<button type="button" {{on "click" (fn (mut this.accordionState) "closed")}}>
-  Close
-</button>
-<EuiAccordion
-  @forceState={{this.accordionState}}
-  @onToggle={{if
-    (eq this.accordionState "open")
-    (fn (mut this.accordionState) "closed")
-    (fn (mut this.accordionState) "open")
-  }}
->
+<EuiAccordion @arrowDisplay='right'>
   <:buttonContent>
-    Clickable title
+    This accordion has the arrow on the right
   </:buttonContent>
   <:content>
-    My Content
+    Any content inside of
+    <strong>EuiAccordion</strong>
+    will appear here.
   </:content>
 </EuiAccordion>
-<br />
-<h1>
-  Accordion with
-  <b>
-    isLoading = true
-  </b>
-</h1>
-<EuiAccordion @isLoading={{true}}>
+<EuiSpacer />
+<EuiAccordion @arrowDisplay='none'>
   <:buttonContent>
-    "You spin my head right round"
+    This one has it removed entirely
   </:buttonContent>
   <:content>
-    My content
+    Any content inside of
+    <strong>EuiAccordion</strong>
+    will appear here.
   </:content>
 </EuiAccordion>
-<EuiAccordion @isLoading={{true}} @isLoadingMessage="What what">
-  <:buttonContent>
-    You spin my head right round also in content
-  </:buttonContent>
-  <:content>
-    My content
-  </:content>
-</EuiAccordion>
-<br />
-<h1>
-  Accordion with
-  <b>
-    arrowDisplay = left
-  </b>
-</h1>
-<EuiAccordion @arrowDisplay="right">
-  <:buttonContent>
-    Clickable Title
-  </:buttonContent>
-  <:content>
-    My content
-  </:content>
-</EuiAccordion>
-
-<h1>Nested accordions</h1>
-<EuiAccordion>
-  <:buttonContent>
-    Parent accordion
-  </:buttonContent>
-  <:content>
-    Parent content
-    <EuiAccordion>
-      <:buttonContent>
-        Child accordion
-      </:buttonContent>
-      <:content>
-        Child content
-        <EuiAccordion>
-          <:buttonContent>
-            Grandchild accordion
-          </:buttonContent>
-          <:content>
-            Grandchild content
-          </:content>
-        </EuiAccordion>
-      </:content>
-    </EuiAccordion>
-  </:content>
-</EuiAccordion>
-```
-
-```js component
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class AccordionDemo1Component extends Component {
-	@tracked accordionState = false;
-}
 ```

package/docs/layout/accordion-demo/demo2.md

@@ -0,0 +1,76 @@
+---
+order: 2
+---
+
+# Multiple accordions
+
+<EuiText>
+  Use any number of
+  <strong>EuiAccordion</strong>
+  elements to visually display them as a group.<br /><br />
+  Due to the previously mentioned bare styles, it is recommended to place an
+  <strong>EuiSpacer</strong>
+  between accordion items. Padding within each accordion item can be applied via
+  the
+  <EuiCode>paddingSize</EuiCode>
+  prop.
+</EuiText>
+
+```hbs template
+<EuiSpacer />
+<EuiAccordion @paddingSize='l'>
+  <:buttonContent>
+    An accordion with padding applied through props
+  </:buttonContent>
+  <:content>
+    <EuiText size='s'>
+      <p>The content inside can be of any height.</p>
+      <p>The content inside can be of any height.</p>
+      <p>The content inside can be of any height.</p>
+    </EuiText>
+  </:content>
+</EuiAccordion>
+<EuiSpacer />
+<EuiAccordion @paddingSize='l' @buttonContentClassName='eui-textTruncate'>
+  <:buttonContent>
+    A second accordion with padding and a very long title that should truncate
+    because of eui-textTruncate
+  </:buttonContent>
+  <:content>
+    <EuiText size='s'>
+      <p>The content inside can be of any height.</p>
+      <p>The content inside can be of any height.</p>
+      <p>The content inside can be of any height.</p>
+      <p>The content inside can be of any height.</p>
+      <p>The content inside can be of any height.</p>
+      <p>The content inside can be of any height.</p>
+    </EuiText>
+  </:content>
+</EuiAccordion>
+<EuiSpacer />
+<EuiAccordion @paddingSize='m'>
+  <:buttonContent>
+    A third accordion with nested accordion
+  </:buttonContent>
+  <:content>
+    <EuiText size='s'>
+      <p>
+        This content area will grow to accommodate when the accordion below
+        opens
+      </p>
+    </EuiText>
+    <EuiAccordion @paddingSize='m'>
+      <:buttonContent>
+        A fourth nested accordion
+      </:buttonContent>
+      <:content>
+        <EuiPanel @color='subdued'>
+          Any content inside of
+          <strong>EuiAccordion</strong>
+          will appear here.
+        </EuiPanel>
+      </:content>
+    </EuiAccordion>
+  </:content>
+</EuiAccordion>
+```

package/docs/layout/accordion-demo/demo3.md

@@ -0,0 +1,25 @@
+---
+order: 3
+---
+
+# Extra actions
+
+<EuiText>
+  Use the <EuiCode>extraAction</EuiCode> prop to pass an extra action displayed on the right of any accordion. Usually this is a delete or button, but can be anything. Note that this action is separate from the click state that expands the accordion. This is needed to make it accessible.
+</EuiText>
+
+```hbs template
+<EuiAccordion @paddingSize='m' @extraAction={{true}}>
+  <:buttonContent>
+    Click to open
+  </:buttonContent>
+  <:content>
+    <EuiText size='s'>
+      <strong>Opened content </strong>
+    </EuiText>
+  </:content>
+  <:extraAction>
+    <EuiButton @size='s'>Extra action!</EuiButton>
+  </:extraAction>
+</EuiAccordion>
+```

package/docs/layout/accordion-demo/demo4.md

@@ -0,0 +1,26 @@
+---
+order: 4
+---
+
+# Opened on initial render
+
+<EuiText>
+  Use the
+  <EuiCode>initialIsOpen</EuiCode>
+  prop to open the accordion when first rendered.
+</EuiText>
+
+```hbs template
+<EuiAccordion @paddingSize='m' @initialIsOpen={{true}}>
+  <:buttonContent>
+    I am opened by default. Click me to toggle close / open
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color='subdued'>
+      Any content inside of
+      <strong>EuiAccordion</strong>
+      will appear here.
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+```

package/docs/layout/accordion-demo/demo5.md

@@ -0,0 +1,65 @@
+---
+order: 5
+---
+
+# Controlling toggled state
+
+<EuiText>
+  Typically, the open and closed state of
+  <strong>EuiAccordion</strong>
+  is maintained by the component's internal state. Though, you can manually
+  control it with:
+  <ul>
+    <li><EuiCode>forceState</EuiCode>: Accepts either
+      <EuiCode>'open'</EuiCode>
+      or
+      <EuiCode>'closed'</EuiCode>.</li>
+    <li><EuiCode>onToggle</EuiCode>: A callback function returning
+      <EuiCode>true</EuiCode>
+      if the accordion is open</li>
+  </ul>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiButton {{on 'click' (fn (mut this.accordionState) 'open')}}>
+      Open
+    </EuiButton>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiButton {{on 'click' (fn (mut this.accordionState) 'closed')}}>
+      Close
+    </EuiButton>
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer />
+<EuiAccordion
+  @forceState={{this.accordionState}}
+  @onToggle={{if
+    (eq this.accordionState 'open')
+    (fn (mut this.accordionState) 'closed')
+    (fn (mut this.accordionState) 'open')
+  }}
+>
+  <:buttonContent>
+    I am a controlled accordion
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color='subdued'>
+      Any content inside of
+      <strong>EuiAccordion</strong>
+      will appear here.
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class AccordionDemo1Component extends Component {
+  @tracked accordionState = false;
+}
+```