@ember-eui/core 5.0.1 → 5.1.0

package/docs/layout/accordion/demo/d08-when-content-changes-dynamically.md

@@ -0,0 +1,71 @@
+---
+order: 8
+---
+
+# 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' @initialIsOpen={{true}}>
+  <:buttonContent>
+    Click me to toggle close / open
+  </:buttonContent>
+  <:content>
+
+    <EuiPanel @color='subdued'>
+      <EuiText @size="s">
+        <p>
+          <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>
+        </p>
+        <ul>
+          {{#each (range 0 this.counter) as |row|}}
+            <li> Row {{add row 1}}</li>
+          {{/each}}
+        </ul>
+      </EuiText>
+    </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 → accordion/demo/d09-interactive-content-in-the-trigger.md}

@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 ---
 
 # Interactive content in the trigger
@@ -32,12 +32,12 @@ order: 8
 <EuiSpacer />
 <EuiAccordion @paddingSize='s' @buttonElement="div">
   <:buttonContent>
-    <EuiText
+    <EuiLink
       onClick={{this.onClick}}
-      href='#/layout/accordion#interactive-content-in-the-trigger'
+      @href='#docfy-demo-docs-layout-accordion-d09-interactive-content-in-the-trigger'
     >
       This is a nested link
-    </EuiText>
+    </EuiLink>
   </:buttonContent>
   <:content>
     <EuiPanel @color='subdued'>

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