@ember-eui/core 5.0.3 → 5.2.1

package/docs/layout/{accordion-demo/demo9.md → accordion/demo/d10-styled-for-forms.md}

@@ -1,5 +1,5 @@
 ---
-order: 9
+order: 10
 ---
 
 # Styled for forms
@@ -31,19 +31,15 @@ order: 9
 </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>
+  <EuiAccordion
+    class='euiAccordionForm'
+    @paddingSize='l'
+    @element='fieldset'
+    @buttonClassName='euiAccordionForm__button'
+    @extraAction={{true}}
+  >
+    <:buttonContent>
       <div>
         <EuiFlexGroup
           @gutterSize='s'
@@ -69,35 +65,43 @@ order: 9
           </p>
         </EuiText>
       </div>
-    </EuiText>
-  </:buttonContent>
-  <:content>
-    <EuiForm @component='form'>
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiFormRow @label='Username'>
-            <EuiFieldText @icon='user' @placeholder='John' />
-          </EuiFormRow>
-        </EuiFlexItem>
+    </:buttonContent>
+    <:content>
+      <EuiForm @component='form'>
+        <EuiFlexGroup @gutterSize="l">
+          <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>
+          <EuiFlexItem>
+            <EuiFormRow
+              @label='Password'
+              @helpText='Must include one number and one symbol'
+            >
+              <EuiFieldPassword @icon='lock' />
+            </EuiFormRow>
+          </EuiFlexItem>
+        </EuiFlexGroup>
 
-      <EuiSpacer @size='m' />
+        <EuiSpacer @size='m' />
 
-      <EuiFormRow @label='Body'>
-        <EuiTextArea @placeholder='I am a textarea, put some content in me!' />
-      </EuiFormRow>
-    </EuiForm>
-  </:content>
-</EuiAccordion>
+        <EuiFormRow @label='Body'>
+          <EuiTextArea placeholder='I am a textarea, put some content in me!' />
+        </EuiFormRow>
+      </EuiForm>
+    </:content>
+  <:extraAction>
+    <EuiButtonIcon
+      @iconType="cross"
+      @color="danger"
+      class="euiAccordionForm__extraAction"
+      aria-label="Delete"
+    />
+  </:extraAction>
+  </EuiAccordion>
+</div>
 ```
 
 ```js component
@@ -106,9 +110,5 @@ 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/index.md

@@ -0,0 +1,23 @@
+---
+title: Accordion
+---
+
+<EuiPageHeader @pageTitle="Accordion"/>
+<EuiSpacer @size="l" />
+
+<EuiCallOut
+  @title='Take care when including flex group content within accordions'>
+  <:body>
+    <EuiText @size='s'>
+      <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>
+
+<EuiHorizontalRule/>

package/docs/layout/{bottom-bar-demo/demo1.md → bottom-bar/demo/d01-basic.md}

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# Basic
-
 <EuiText>
   <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.

package/docs/layout/{bottom-bar-demo/demo3.md → bottom-bar/demo/d03-displacement.md}

@@ -20,6 +20,7 @@ order: 3
 </EuiText>
 
 ```hbs template
+<TodoText @text="missing euiButtonGroupButton component"/>
 <EuiFlexGroup>
   <EuiFlexItem>
     <EuiButton

package/docs/layout/bottom-bar/index.md

@@ -0,0 +1,18 @@
+---
+title: Bottom bar
+---
+
+<EuiPageHeader @pageTitle="Bottom bar"/>
+
+<EuiSpacer/>
+
+<EuiCallOut>
+  <:body>
+    <EuiText @size='s'>
+      <strong>EuiBottomBar</strong>
+      offers a quick way to apply a bottom bar to your page layouts.
+    </EuiText>
+  </:body>
+</EuiCallOut>
+
+<EuiHorizontalRule/>

package/docs/layout/flex/demo/d01-flex-group-is-for-a-single-row-layout.md

@@ -0,0 +1,19 @@
+---
+order: 1
+---
+
+# Flex group is for a single row layout
+
+```hbs template
+  <EuiFlexGroup class="flex-demo">
+    <EuiFlexItem>Content grid item</EuiFlexItem>
+    <EuiFlexItem>
+      <p>Another content grid item</p>
+      <EuiSpacer />
+      <p>
+        Note how both of these are the same width and height despite having
+        different content?
+      </p>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+```

package/docs/layout/flex/demo/d02-flex-items-are-also-flex.md

@@ -0,0 +1,18 @@
+---
+order: 2
+---
+
+# Flex items are also flex
+
+```hbs template
+<EuiFlexGroup class="flex-demo">
+  <EuiFlexItem>
+    <EuiButton @fill={{true}}>Buttons will widen</EuiButton>
+  </EuiFlexItem>
+  <EuiFlexItem>
+    <div>
+      <EuiButton @fill={{true}}>Unless you wrap them</EuiButton>
+    </div>
+  </EuiFlexItem>
+</EuiFlexGroup>
+```

package/docs/layout/flex/demo/d03-spans-instead-of-divs.md

@@ -0,0 +1,19 @@
+---
+order: 3
+---
+
+# Spans instead of divs
+
+```hbs template
+<button>
+  <EuiFlexGroup class="flex-demo" @tagName="span">
+    <EuiFlexItem @tagName="span">
+      These items are within a button
+    </EuiFlexItem>
+
+    <EuiFlexItem @tagName="span">
+      So they all specify component=&ldquo;span&rdquo;
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</button>
+```

package/docs/layout/flex/demo/d04-panels-grow-to-fill-flex-items.md

@@ -0,0 +1,32 @@
+---
+order: 4
+---
+
+# Panels grow to fill flex items
+
+```hbs template
+<EuiFlexGroup>
+  <EuiFlexItem>
+    <EuiText>
+      <p>
+        <EuiCode>FlexItem</EuiCode>
+      </p>
+      <p>A side nav might be in this one.</p>
+      <p>And you would want the panel on the right to expand with it.</p>
+    </EuiText>
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiPanel>
+      <strong>EuiPanel</strong>
+    </EuiPanel>
+  </EuiFlexItem>
+
+  <EuiFlexItem>
+    <EuiPanel @grow={{false}}>
+      Another <strong>EuiPanel</strong>, with{' '}
+      <EuiCode>grow=&#123;false&#125;</EuiCode>.
+    </EuiPanel>
+  </EuiFlexItem>
+</EuiFlexGroup>
+```

package/docs/layout/flex/demo/d05-turn-off-item-streching.md

@@ -0,0 +1,12 @@
+---
+order: 5
+---
+
+# Turn off item stretching
+
+```hbs template
+<EuiFlexGroup class="flex-demo">
+  <EuiFlexItem @grow={{false}}>This item won&rsquo;t grow</EuiFlexItem>
+  <EuiFlexItem>But this item will.</EuiFlexItem>
+</EuiFlexGroup>
+```

package/docs/layout/flex/demo/d06-proportional-widths-of-items.md

@@ -0,0 +1,32 @@
+---
+order: 6
+---
+
+# Proportional widths of items
+
+```hbs template
+<div>
+  <EuiFlexGroup class="flex-demo">
+    <EuiFlexItem @grow={{1}}>1</EuiFlexItem>
+    <EuiFlexItem @grow={{2}}>
+      2<br />
+      wraps content if necessary
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{3}}>
+      3<br />
+      expands_to_fit_if_content_cannot_wrap
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{4}}>4</EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiSpacer />
+
+  <EuiFlexGroup class="flex-demo">
+    <EuiFlexItem @grow={{6}}>6</EuiFlexItem>
+    <EuiFlexItem @grow={{3}}>3</EuiFlexItem>
+    <EuiFlexItem @grow={{1}}>1</EuiFlexItem>
+    <EuiFlexItem @grow={{3}}>3</EuiFlexItem>
+    <EuiFlexItem @grow={{6}}>6</EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```

package/docs/layout/flex/demo/d07-justify-and-align.md

@@ -0,0 +1,11 @@
+---
+order: 7
+---
+
+# Justify and align
+
+```hbs template
+  <EuiFlexGroup class="flex-demo" @justifyContent="spaceAround">
+    <EuiFlexItem @grow={{false}}>I&rsquo;m a single centered item!</EuiFlexItem>
+  </EuiFlexGroup>
+```

package/docs/layout/flex/demo/d08-allowing-flex-items-to-wrap.md

@@ -0,0 +1,43 @@
+---
+order: 8
+---
+
+# Allowing flex items to wrap
+
+
+```hbs template
+<EuiFlexGroup class="flex-demo" @wrap={{true}}>
+  <EuiFlexItem style="min-width: 300">Min-width 300px</EuiFlexItem>
+
+  <EuiFlexItem style="min-width: 300">Min-width 300px</EuiFlexItem>
+
+  <EuiFlexItem style="min-width: 300">Min-width 300px</EuiFlexItem>
+</EuiFlexGroup>
+
+<EuiHorizontalRule/>
+
+<EuiFlexGroup class="flex-demo" @justifyContent="spaceBetween">
+  <EuiFlexItem @grow={{false}}>One here on the left.</EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>The other over here on the right.</EuiFlexItem>
+</EuiFlexGroup>
+
+<EuiHorizontalRule/>
+
+<EuiFlexGroup class="flex-demo" @justifyContent="spaceEvenly">
+  <EuiFlexItem @grow={{false}}>Spaced evenly between this one.</EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>And this one here on the right.</EuiFlexItem>
+</EuiFlexGroup>
+
+<EuiHorizontalRule/>
+
+<EuiFlexGroup class="flex-demo" @alignItems="center">
+  <EuiFlexItem @grow={{false}}>
+    <p>I</p>
+    <p>am</p>
+    <p>a</p>
+    <p>tall</p>
+    <p>item</p>
+  </EuiFlexItem>
+  <EuiFlexItem>I am vertically centered!</EuiFlexItem>
+</EuiFlexGroup>
+```

package/docs/layout/flex/demo/d09-change-direction.md

@@ -0,0 +1,13 @@
+---
+order: 9
+---
+
+# Change direction
+
+```hbs template
+<EuiFlexGroup class="flex-demo" @direction="column">
+  <EuiFlexItem @grow={{false}}>Content grid item</EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>Another content grid item</EuiFlexItem>
+  <EuiFlexItem @grow={{false}}>Using the column direction</EuiFlexItem>
+</EuiFlexGroup>
+```

package/docs/layout/flex/demo/d10-flex-grids-are-for-repeatable-items.md

@@ -0,0 +1,33 @@
+---
+order: 10
+---
+
+# Flex grids are for repeatable items
+
+```hbs template
+<div>
+  <EuiFlexGrid class="flex-demo" @columns={{3}}>
+    <EuiFlexItem>
+      <div>One</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Two</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Three</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Four</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Five</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Six</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Seven</div>
+    </EuiFlexItem>
+  </EuiFlexGrid>
+</div>
+```

package/docs/layout/flex/demo/d11-flex-grids-can-change-direction.md

@@ -0,0 +1,33 @@
+---
+order: 11
+---
+
+# Flex grids can change direction
+
+```hbs template
+<div>
+  <EuiFlexGrid class="flex-demo" @columns={{2}} @direction="column">
+    <EuiFlexItem>
+      <div>One</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Two</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Three</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Four</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Five</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Six</div>
+    </EuiFlexItem>
+    <EuiFlexItem>
+      <div>Seven</div>
+    </EuiFlexItem>
+  </EuiFlexGrid>
+</div>
+```

package/docs/layout/flex/demo/d12-flex-grids-and-flex-groups-can-nest.md

@@ -0,0 +1,30 @@
+---
+order: 12
+---
+
+# Flex grids and flex groups can nest
+
+```hbs template
+<div>
+  <EuiFlexGroup class="flex-demo">
+    <EuiFlexItem @grow={{false}}>
+      <div>Flex Group</div>
+      <EuiSpacer />
+      <EuiFlexGroup class="flex-demo">
+        <EuiFlexItem>Nested Grid One</EuiFlexItem>
+        <EuiFlexItem>Nested Grid Two</EuiFlexItem>
+      </EuiFlexGroup>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <div>Flex Grid</div>
+      <EuiSpacer />
+      <EuiFlexGrid @columns={{3}}>
+        <EuiFlexItem>Nested Grid One</EuiFlexItem>
+        <EuiFlexItem>Nested Grid Two</EuiFlexItem>
+        <EuiFlexItem>Nested Grid Three</EuiFlexItem>
+        <EuiFlexItem>Nested Grid Four</EuiFlexItem>
+      </EuiFlexGrid>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```

package/docs/layout/flex/demo/d13-gutter-sizing.md

@@ -0,0 +1,61 @@
+---
+order: 13
+---
+
+# Gutter sizing
+
+```hbs template
+<div>
+  <EuiFlexGroup class="flex-demo" @gutterSize="none">
+    <EuiFlexItem>None</EuiFlexItem>
+    <EuiFlexItem>None</EuiFlexItem>
+    <EuiFlexItem>None</EuiFlexItem>
+    <EuiFlexItem>None</EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiSpacer />
+
+  <EuiFlexGroup class="flex-demo" @gutterSize="xs">
+    <EuiFlexItem>Extra small</EuiFlexItem>
+    <EuiFlexItem>Extra small</EuiFlexItem>
+    <EuiFlexItem>Extra small</EuiFlexItem>
+    <EuiFlexItem>Extra small</EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiSpacer />
+
+  <EuiFlexGroup class="flex-demo" @gutterSize="s">
+    <EuiFlexItem>Small</EuiFlexItem>
+    <EuiFlexItem>Small</EuiFlexItem>
+    <EuiFlexItem>Small</EuiFlexItem>
+    <EuiFlexItem>Small</EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiSpacer />
+
+  <EuiFlexGroup class="flex-demo" @gutterSize="m">
+    <EuiFlexItem>Medium</EuiFlexItem>
+    <EuiFlexItem>Medium</EuiFlexItem>
+    <EuiFlexItem>Medium</EuiFlexItem>
+    <EuiFlexItem>Medium</EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiSpacer />
+
+  <EuiFlexGroup class="flex-demo" @gutterSize="l">
+    <EuiFlexItem>Large (default)</EuiFlexItem>
+    <EuiFlexItem>Large (default)</EuiFlexItem>
+    <EuiFlexItem>Large (default)</EuiFlexItem>
+    <EuiFlexItem>Large (default)</EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiSpacer />
+
+  <EuiFlexGroup class="flex-demo" @gutterSize="xl">
+    <EuiFlexItem>Extra Large</EuiFlexItem>
+    <EuiFlexItem>Extra Large</EuiFlexItem>
+    <EuiFlexItem>Extra Large</EuiFlexItem>
+    <EuiFlexItem>Extra Large</EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```

package/docs/layout/flex/demo/d14-responsive-layouts.md

@@ -0,0 +1,29 @@
+---
+order: 14
+---
+
+# Responsive layouts
+
+```hbs template
+<div>
+  <EuiFlexGroup class="flex-demo" @alignItems="center">
+    <EuiFlexItem @grow={{false}}>
+      <EuiIcon @type="faceSad" />
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      On mobile, the icon will show above this text.
+    </EuiFlexItem>
+  </EuiFlexGroup>
+
+  <EuiSpacer />
+
+  <EuiFlexGroup class="flex-demo" @responsive={{false}} @alignItems="center">
+    <EuiFlexItem @grow={{false}}>
+      <EuiIcon @type="faceHappy" />
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      On mobile, the icon will stay to the left of this text.
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
+```

package/docs/layout/flex/index.md

@@ -0,0 +1,18 @@
+---
+title: Flex
+---
+
+<EuiPageHeader @pageTitle="Flex"/>
+
+<EuiSpacer @size="l" />
+
+<EuiCallOut
+  @title='Coloring and padding exist for examples only'>
+  <:body>
+    <EuiText @size='s'>
+      Padding and background-color are added to all the <strong>EuiFlexItem</strong> components on this documentation page for illustrative purposes only. You will need to add padding through additional components or classes if you need it.
+    </EuiText>
+  </:body>
+</EuiCallOut>
+
+<EuiHorizontalRule/>

package/docs/layout/{flyout-demo/demo1.md → flyout/demo/d01-basic.md}

@@ -2,8 +2,6 @@
 order: 1
 ---
 
-# EuiFlyout
-
 <EuiText>
   <p>
   <strong>EuiFlyout</strong> is a fixed position panel that pops in from the side of the window. It should be used to reveal more detailed contextual information or to provide complex forms without losing the user's current state. It is a good alternative to <a href="/docs/core/docs/layout/modal">modals</a> when the action is not transient.
@@ -15,29 +13,27 @@ order: 1
 
 ```hbs template
 <EuiButton {{on 'click' this.openFlyout}}>
-  Small Flyout
+  A typical flyout
 </EuiButton>
 {{#if this.flyoutOpen}}
   <EuiFlyout
-    @size='s'
+    @size='m'
     @onClose={{this.closeFlyout}}
   >
     <EuiFlyoutHeader @hasBorder={{true}}>
-      <EuiTitle @size='l'>Small Welcome!</EuiTitle>
+      <EuiTitle @size='l'>A typical flyout</EuiTitle>
     </EuiFlyoutHeader>
     <EuiFlyoutBody>
-      Content
+      <EuiText>
+        For consistency across the many flyouts, please utilize the following code for implementing the flyout with a header.
+      </EuiText>
+      <EuiCodeBlock
+        @isCopyable={{false}}
+        @language="html"
+      >
+        Some code
+      </EuiCodeBlock>
     </EuiFlyoutBody>
-    <EuiFlyoutFooter>
-      <EuiFlexGroup @justifyContent='spaceBetween' @gutterSize='s'>
-        <EuiButton {{on 'click' this.closeFlyout}}>
-          Cancel
-        </EuiButton>
-        <EuiButton @fill={{true}} {{on 'click' this.closeFlyout}}>
-          Send
-        </EuiButton>
-      </EuiFlexGroup>
-    </EuiFlyoutFooter>
   </EuiFlyout>
 {{/if}}
 ```