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

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;
+}
+```

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

@@ -0,0 +1,78 @@
+---
+order: 6
+---
+
+# Loading state
+
+<!-- <EuiText>
+  Use the
+  <EuiCode>isLoading</EuiCode>
+  prop when not all of the accordion's content is ready yet. When using
+  <EuiCode>isLoading</EuiCode>, the content of
+  <EuiCode>extraAction</EuiCode>
+  is replaced with a loading spinner.<br /><br />
+  Manage the content of the accordion using
+  <EuiCode>isLoadingMessage</EuiCode>. By default, it is set to
+  <EuiCode>false</EuiCode>
+  and the content will remain unaltered. Set it to
+  <EuiCode>true</EuiCode>
+  to show a default loading message or pass a node to show a custom loading
+  message.
+</EuiText> -->
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiText>
+      isLoadingMessage:
+    </EuiText>
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonEmpty {{on 'click' (fn (mut this.isLoadingMessage) false)}}>
+      False
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonEmpty {{on 'click' (fn (mut this.isLoadingMessage) true)}}>
+      True
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>
+    <EuiButtonEmpty
+      {{on
+        'click'
+        (fn (mut this.isLoadingMessage) 'This is a custom loading message')
+      }}
+    >
+      Custom
+    </EuiButtonEmpty>
+  </EuiFlexItem>
+</EuiFlexGroup>
+<EuiSpacer />
+<EuiAccordion
+  @isLoading={{true}}
+  @isLoadingMessage={{this.isLoadingMessage}}
+  @extraAction={{true}}
+>
+  <:buttonContent>
+    Accordion is loading, click to toggle
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color='subdued'>
+      Opened content
+    </EuiPanel>
+  </:content>
+  <:extraAction>
+    <EuiButton size='s'>Extra action!</EuiButton>
+  </:extraAction>
+</EuiAccordion>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class AccordionDemo1Component extends Component {
+  @tracked isLoadingMessage = false;
+}
+```

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

@@ -0,0 +1,66 @@
+---
+order: 7
+---
+
+# When content changes dynamically
+
+<EuiText>
+  If an accordion’s content changes height while the accordion is open, it will
+  resize dynamically.
+</EuiText>
+ 
+```hbs template
+<EuiAccordion @paddingSize='s'>
+  <:buttonContent>
+    Click me to toggle close / open
+  </:buttonContent>
+  <:content>
+    <EuiButton
+      @size='s'
+      @iconType='plusInCircleFilled'
+      {{on 'click' (fn this.incrementDecreaseRows 'add')}}
+    >
+      Increase height to
+      {{add this.counter 1}}
+      items
+    </EuiButton>
+    <EuiButton
+      @size='s'
+      @iconType='minusInCircleFilled'
+      {{on 'click' (fn this.incrementDecreaseRows 'sub')}}
+      @isDisabled={{eq this.counter 1}}
+    >
+      Decrease height to
+      {{sub this.counter 1}}
+      items
+    </EuiButton>
+    <EuiSpacer />
+    <EuiPanel @color='subdued'>
+      <ul>
+        {{#each (range 0 this.counter) as |row|}}
+          <li> Row {{row}}</li>
+        {{/each}}
+      </ul>
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class AccordionDemo8Component extends Component {
+  @tracked counter = 1;
+
+  @action
+  incrementDecreaseRows(actionType) {
+    if (actionType == 'add') {
+      this.counter++;
+    } else {
+      this.counter--;
+    }
+  }
+}
+```

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

@@ -0,0 +1,64 @@
+---
+order: 8
+---
+
+# Interactive content in the trigger
+
+<EuiText>
+  <p>
+  Passing interactive content like links, buttons, or form elements as the
+  <EuiCode>buttonContent</EuiCode>, will cause issues with the wrapping button
+  element. To fix this, you can change this wrapping element to a div using
+  <EuiCode>buttonElement="div"</EuiCode>.
+  </p>
+  <p>
+  If you don't want the interactive content to trigger the accordion expansion,
+  you will have to apply
+  <EuiCode>e.stopPropagation</EuiCode>
+  to your element manually.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiCallOut @iconType='accessibility' @color='warning'>
+  <:body>
+    <EuiText>
+      Accordions need a focusable button for accessibility, so changing the
+      element to anything other than a button will enforce the display of the
+      arrow.
+    </EuiText>
+  </:body>
+</EuiCallOut>
+<EuiSpacer />
+<EuiAccordion @paddingSize='s' @buttonElement="div">
+  <:buttonContent>
+    <EuiText
+      onClick={{this.onClick}}
+      href='#/layout/accordion#interactive-content-in-the-trigger'
+    >
+      This is a nested link
+    </EuiText>
+  </: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';
+import { action } from '@ember/object';
+
+export default class AccordionDemo8Component extends Component {
+
+  @action
+  onClick(e) {
+    e.stopPropagation();
+  }
+}
+```

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

@@ -0,0 +1,114 @@
+---
+order: 9
+---
+
+# Styled for forms
+
+<EuiText>
+<p>
+  Since accordions are unstyled by default, EUI also provides a few classes you
+  can add to parts of the EuiAccordion to give it more style, like when using
+  with forms.
+  <ul>
+    <li><EuiCode>.euiAccordionForm</EuiCode>: Applied to the
+      <EuiCode>className</EuiCode>, adds top and bottom borders</li>
+    <li><EuiCode>.euiAccordionForm__button</EuiCode> : Applied to the
+      <EuiCode>buttonClassName</EuiCode>, adds extra padding to the button for
+      better spacing</li>
+    <li><EuiCode>.euiAccordionForm__extraAction</EuiCode> : Applied to the button
+      passed to
+      <EuiCode>extraAction</EuiCode>, will visually hide it until hover or focus</li>
+  </ul>
+</p>
+<p>
+  We also recommend creating a fieldset/legend combination for better
+  accessibility and DOM structure by passing
+  <EuiCode>element="fieldset"</EuiCode>. This will set the entire accordion as a
+  <EuiCode>"fieldset"</EuiCode>
+  and automatically change the buttonElement to a
+  <EuiCode>"legend"</EuiCode>.
+</p>
+</EuiText>
+
+```hbs template
+<EuiAccordion
+  @paddingSize='l'
+  @element='fieldset'
+  @className='euiAccordionForm'
+  @buttonClassName='euiAccordionForm__button'
+  @extraAction={{true}}
+>
+  <:buttonContent>
+    <EuiText
+      @onClick={{this.onClick}}
+      @href='#/layout/accordion#interactive-content-in-the-trigger'
+      @size='xs'
+    >
+      <div>
+        <EuiFlexGroup
+          @gutterSize='s'
+          @alignItems='center'
+          @responsive={{false}}
+        >
+          <EuiFlexItem @grow={{false}}>
+            <EuiIcon @type='logoWebhook' @size='m' />
+          </EuiFlexItem>
+
+          <EuiFlexItem>
+            <EuiTitle @size='xs'>
+              <h3>Webhook</h3>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+
+        <EuiText @size='s'>
+          <p>
+            <EuiTextColor @color='subdued'>
+              Will send a POST request to www.example.com/some/path/
+            </EuiTextColor>
+          </p>
+        </EuiText>
+      </div>
+    </EuiText>
+  </:buttonContent>
+  <:content>
+    <EuiForm @component='form'>
+      <EuiFlexGroup>
+        <EuiFlexItem>
+          <EuiFormRow @label='Username'>
+            <EuiFieldText @icon='user' @placeholder='John' />
+          </EuiFormRow>
+        </EuiFlexItem>
+
+        <EuiFlexItem>
+          <EuiFormRow
+            @label='Password'
+            @helpText='Must include one number and one symbol'
+          >
+            <EuiFieldPassword @icon='lock' />
+          </EuiFormRow>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer @size='m' />
+
+      <EuiFormRow @label='Body'>
+        <EuiTextArea @placeholder='I am a textarea, put some content in me!' />
+      </EuiFormRow>
+    </EuiForm>
+  </:content>
+</EuiAccordion>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class AccordionDemo8Component extends Component {
+  @action
+  onClick(e) {
+    e.stopPropagation();
+  }
+}
+```

package/docs/layout/accordion.md

@@ -6,4 +6,43 @@
       </h1>
     </EuiTitle>
   </EuiPageHeaderSection>
-</EuiPageHeader>
+</EuiPageHeader>
+
+<EuiCallOut>
+  <:body>
+    <EuiText>
+      Take care when including flex group content within accordions<br />
+      <strong>EuiFlexGroup's</strong>
+      negative margins can sometimes create scrollbars within
+      <strong>EuiAccordion</strong>
+      because of the overflow tricks used to hide content. If you run into this
+      issue make sure your paddingSize prop is large enough to account for the
+      <EuiCode>gutterSize</EuiCode>
+      of any nested flex groups.
+    </EuiText>
+  </:body>
+</EuiCallOut>
+
+<EuiSpacer />
+<EuiTitle>
+  Simple and unstyled
+</EuiTitle>
+<EuiSpacer />
+
+<EuiText>
+  <strong>EuiAccordion</strong>
+  has been purposely designed with minimal styles, allowing you to visually
+  enhance it as needed (see the accordion form example). The only styling
+  enforced by EUI is the caret icon, which indicates to users that the item can
+  be opened.<br /><br />
+  A
+  <EuiCode>buttonContent</EuiCode>
+  prop defines the content of the clickable area. On click it will expose the
+  children and animate based on the height of those children.<br /><br />
+  For styling needs, classes can be individually applied with
+  <EuiCode>className</EuiCode>
+  (for the entire accordion), and
+  <EuiCode>buttonClassName</EuiCode>
+  (for the clickable area).
+</EuiText>
+<EuiSpacer />

package/docs/layout/bottom-bar-demo/demo1.md

@@ -1,39 +1,60 @@
-```hbs template
+---
+order: 1
+---
+
+# Basic
+
 <EuiText>
-  <b>EuiBottomBar</b> is a simple wrapper component that does nothing but fix a bottom bar (usually filled with buttons) to the bottom of the page. Use it when you have really long pages or complicated, multi-page forms. In the case of forms, only invoke it if a form is in a savable state.
+  <p>
+  <strong>EuiBottomBar</strong> is a simple wrapper component that does nothing but affix a dark bar (usually filled with buttons) to the bottom of the page. Use it when you have really long pages or complicated, multi-page forms. In the case of forms, only invoke it if a form is in a savable state.
+  </p>
+  <p>
+    Like many of our other wrapper components, <strong>EuiBottomBar</strong> accepts a <EuiCode>paddingSize</EuiCode> prop, which can be set to <EuiCode>s | m (default) | l | none</EuiCode>.
+  </p>
 </EuiText>
-<EuiSpacer/>
 
-<EuiButton @color="primary" {{on "click" (set this "basicBottomBarActive" (not this.basicBottomBarActive))}}>
+```hbs template
+<EuiButton
+  @color='primary'
+  {{on
+    'click'
+    (set this 'basicBottomBarActive' (not this.basicBottomBarActive))
+  }}
+>
   Toggle appearance of the bottom bar
 </EuiButton>
 
 {{#if this.basicBottomBarActive}}
   <EuiBottomBar>
-    <EuiFlexGroup @justifyContent="spaceBetween">
+    <EuiFlexGroup @justifyContent='spaceBetween'>
       <EuiFlexItem @grow={{false}}>
-        <EuiFlexGroup @gutterSize="s">
+        <EuiFlexGroup @gutterSize='s'>
           <EuiFlexItem @grow={{false}}>
-            <EuiButton @color="ghost" @size="s" @iconType="help">
+            <EuiButton @color='ghost' @size='s' @iconType='help'>
               Help
             </EuiButton>
           </EuiFlexItem>
           <EuiFlexItem @grow={{false}}>
-            <EuiButton @color="ghost" @size="s" @iconType="user">
+            <EuiButton @color='ghost' @size='s' @iconType='user'>
               Add user
             </EuiButton>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem @grow={{false}}>
-        <EuiFlexGroup @gutterSize="s">
+        <EuiFlexGroup @gutterSize='s'>
           <EuiFlexItem @grow={{false}}>
-            <EuiButtonEmpty @color="ghost" @size="s" @iconType="cross">
+            <EuiButtonEmpty @color='ghost' @size='s' @iconType='cross'>
               Discard
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem @grow={{false}}>
-            <EuiButton @color="primary" @fill={{true}} @size="s" @iconType="check">
+            <EuiButton
+              @color='primary'
+              @fill={{true}}
+              @size='s'
+              @iconType='check'
+            >
               Save
             </EuiButton>
           </EuiFlexItem>
@@ -42,44 +63,6 @@
     </EuiFlexGroup>
   </EuiBottomBar>
 {{/if}}
-
-<EuiSpacer/>
-
-<EuiTitle>
-  Displacement
-</EuiTitle>
-<EuiText>
-  There is an affordForDisplacement prop (defaulting to true), which determines whether the component makes room for itself by adding bottom padding equivalent to its own height on the document body element. Setting this to false can be useful to minimize scrollbar visibility but will cause the bottom bar to overlap body content.
-</EuiText>
-<EuiSpacer/>
-<EuiButton @color="primary" {{on "click" (queue
-  (set this "affordForDisplacement" true)
-  (set this "displacedBottomBarActive" true)
-)}}>
-  Show bottom bar
-</EuiButton>
-<EuiButton @color="primary" {{on "click" (queue
-  (set this "affordForDisplacement" false)
-  (set this "displacedBottomBarActive" true)
-)}}>
-  Show bottom bar (without affordForDisplacement behavior)
-</EuiButton>
-{{#if this.displacedBottomBarActive}}
-  <EuiBottomBar @affordForDisplacement={{this.affordForDisplacement}}>
-    <EuiFlexGroup @justifyContent="flexEnd">
-      <EuiFlexItem @grow={{false}}>
-        <EuiButtonEmpty
-          @color="ghost"
-          @size="s"
-          @iconType="cross"
-          {{on "click" (set this "displacedBottomBarActive" false)}}
-        >
-          close
-        </EuiButtonEmpty>
-      </EuiFlexItem>
-    </EuiFlexGroup>
-  </EuiBottomBar>
-{{/if}}
 ```
 
 ```js component

package/docs/layout/bottom-bar-demo/demo2.md

@@ -0,0 +1,54 @@
+---
+order: 2
+---
+
+# Positions
+
+<EuiText>
+  <p>
+  Bottom bars default to a fixed position, in a portal at the bottom of the
+    browser window. Alternatively, you can change the <EuiCode>position</EuiCode> to <EuiCode>sticky</EuiCode> where
+    it will render in place but stick to the window only as the window edge
+    nears. The <EuiCode>static</EuiCode> position reverts back to default DOM behavior.
+  </p>
+  <p>
+     You can
+    also apply a different set of positioning locations just by adjusting them
+    in with the <EuiCode>top | right | bottom | left</EuiCode> props.
+  </p>
+</EuiText>
+
+```hbs template
+<div>
+  <EuiText>
+    <p>
+      When scrolling past this example block, the
+      <strong>EuiBottomBar</strong>
+      will stick to the bottom of the browser window (with a 10px offset), but
+      keeps it within the bounds of its parent.
+    </p>
+  </EuiText>
+  <EuiSpacer @size='xl' />
+  <EuiSpacer @size='xl' />
+  <EuiBottomBar
+    @landmarkHeading='Page level controls'
+    @position='sticky'
+    @bottom={{10}}
+  >
+    <EuiText color='ghost' textAlign='center'>
+      <p>Scroll to see!</p>
+    </EuiText>
+  </EuiBottomBar>
+</div>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class BottomBarDemo1Component extends Component {
+  @tracked basicBottomBarActive = false;
+  @tracked displacedBottomBarActive = false;
+  @tracked affordForDisplacement = true;
+}
+```

package/docs/layout/bottom-bar-demo/demo3.md

@@ -0,0 +1,81 @@
+---
+order: 3
+---
+
+# Displacement
+
+<EuiText>
+  <p>
+  There is an <EuiCode>affordForDisplacement</EuiCode> prop (defaulting to <EuiCode>true</EuiCode>), which determines
+  whether the component makes room for itself by adding bottom padding
+  equivalent to its own height on the document <EuiCode @language="html">body</EuiCode> element. Setting this to
+  <EuiCode>false</EuiCode> can be useful to minimize scrollbar visibility but will cause the bottom
+  bar to overlap body content.
+  </p>
+  <p>
+     You can
+    also apply a different set of positioning locations just by adjusting them
+    in with the <EuiCode>top | right | bottom | left</EuiCode> props.
+  </p>
+</EuiText>
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiButton
+      @color='primary'
+      {{on
+        'click'
+        (queue
+          (set this 'affordForDisplacement' true)
+          (set this 'displacedBottomBarActive' true)
+        )
+      }}
+    >
+      Show bottom bar
+    </EuiButton>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <EuiButton
+      @color='primary'
+      {{on
+        'click'
+        (queue
+          (set this 'affordForDisplacement' false)
+          (set this 'displacedBottomBarActive' true)
+        )
+      }}
+    >
+      Show bottom bar (without affordForDisplacement behavior)
+    </EuiButton>
+  </EuiFlexItem>
+</EuiFlexGroup>
+{{#if this.displacedBottomBarActive}}
+  <EuiBottomBar @affordForDisplacement={{this.affordForDisplacement}}>
+    <EuiFlexGroup @justifyContent='flexEnd'>
+      <EuiFlexItem @grow={{false}}>
+        <EuiButtonEmpty
+          @color='ghost'
+          @size='s'
+          @iconType='cross'
+          {{on 'click' (set this 'displacedBottomBarActive' false)}}
+        >
+          close
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  </EuiBottomBar>
+{{/if}}
+<EuiSpacer />
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class BottomBarDemo1Component extends Component {
+  @tracked basicBottomBarActive = false;
+  @tracked displacedBottomBarActive = false;
+  @tracked affordForDisplacement = true;
+}
+```