@ember-eui/core 5.0.3 → 5.2.1

package/docs/layout/popover/demo/d03-popover-titles-and-footers.md

@@ -0,0 +1,133 @@
+---
+order: 3
+---
+
+# Popover titles and footers
+<EuiText>
+  Popovers often need titling. Use the
+  <strong>EuiPopoverTitle</strong>
+  component nested somewhere inside the popover contents.
+  <br /><br />
+  You can also add a similarly styled
+  <strong>EuiPopoverFooter</strong>
+  for smaller captions or call to action buttons.
+</EuiText>
+
+```hbs template
+
+<EuiFlexGroup @gutterSize="l">
+  <!-- example 1 -->
+  <EuiFlexItem @grow={{false}}>
+    <EuiPopover
+      @ownFocus={{true}}
+      @isOpen={{this.pop1}}
+      @closePopover={{set this 'pop1' false}}
+    >
+      <:button>
+        <EuiButton
+          @iconType='arrowDown'
+          @iconSide='right'
+          {{on 'click' (set this 'pop1' true)}}
+        >
+          With title
+        </EuiButton>
+      </:button>
+      <:content>
+        <EuiPopoverTitle>
+          Hello, I’m a popover title
+        </EuiPopoverTitle>
+        <div style='width: 300px;'>
+          <EuiText @size='s'>
+            <p>
+              Selfies migas stumptown hot chicken quinoa wolf green juice, mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
+            </p>
+          </EuiText>
+        </div>
+      </:content>
+    </EuiPopover>
+  </EuiFlexItem>
+
+  <!-- example 2 -->
+  <EuiFlexItem @grow={{false}}>
+    <EuiPopover
+      @ownFocus={{true}}
+      @isOpen={{this.pop2}}
+      @anchorPosition='upCenter'
+      @closePopover={{set this 'pop2' false}}
+    >
+      <:button>
+        <EuiButton
+          @iconType='arrowDown'
+          @iconSide='right'
+          {{on 'click' (set this 'pop2' true)}}
+        >
+          With footer
+        </EuiButton>
+      </:button>
+      <:content>
+        <div style='width: 300px;'>
+          <EuiText @size='s'>
+            <p>
+              Selfies migas stumptown hot chicken quinoa wolf green juice, mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
+            </p>
+          </EuiText>
+        </div>
+        <EuiPopoverFooter>
+          <EuiTextColor @color="subdued">
+            Hello, I’m a small popover footer caption
+          </EuiTextColor>
+        </EuiPopoverFooter>
+      </:content>
+    </EuiPopover>
+  </EuiFlexItem>
+
+  <!-- example 3 -->
+  <EuiFlexItem @grow={{false}}>
+    <EuiPopover
+      @ownFocus={{true}}
+      @isOpen={{this.pop3}}
+      @anchorPosition='upCenter'
+      @closePopover={{set this 'pop3' false}}
+    >
+      <:button>
+        <EuiButton
+          @iconType='arrowDown'
+          @iconSide='right'
+          {{on 'click' (set this 'pop3' true)}}
+        >
+          With Title and footer button
+        </EuiButton>
+      </:button>
+      <:content>
+        <EuiPopoverTitle>
+          Hello, I’m a popover title
+        </EuiPopoverTitle>
+        <div style='width: 300px;'>
+          <EuiText @size='s'>
+            <p>
+              Selfies migas stumptown hot chicken quinoa wolf green juice, mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
+            </p>
+          </EuiText>
+        </div>
+        <EuiPopoverFooter>
+          <EuiButton @fullWidth={{true}}>
+            Manage this thing
+          </EuiButton>
+        </EuiPopoverFooter>
+      </:content>
+    </EuiPopover>
+  </EuiFlexItem>
+</EuiFlexGroup>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class PopoverDemo1 extends Component {
+  @tracked pop1 = false;
+  @tracked pop2 = false;
+  @tracked pop3 = false;
+}
+```

package/docs/layout/{popover-demo/demo5.md → popover/demo/d04-popover-padding-sizes.md}

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 4
 ---
 
 # Popover padding sizes
@@ -14,11 +14,12 @@ order: 5
     <strong>EuiPopoverTitle</strong>
     of
     <strong>EuiPopoverFooter</strong>.
-  </EuiText>
+</EuiText>
 
 ```hbs template
 <div>
   <EuiFlexGroup>
+
     <EuiFlexItem @grow={{false}}>
       <EuiPopover
         @ownFocus={{true}}
@@ -37,22 +38,26 @@ order: 5
         </:button>
         <:content>
           <EuiPopoverTitle>
-            HELLO, I’M A POPOVER TITLE
+            Hello, I’m a popover title
           </EuiPopoverTitle>
           <div style='width: 300px;'>
-            <EuiText size='s'>
+            <EuiText @size='s'>
               Only changing the panelPaddingSize will get inherited by the
               title.
             </EuiText>
           </div>
           <EuiPopoverFooter>
-            <EuiButton @fullWidth={{true}}>
+            <EuiButton
+              @size='s'
+              @fullWidth={{true}}
+            >
               Footer button
             </EuiButton>
           </EuiPopoverFooter>
         </:content>
       </EuiPopover>
     </EuiFlexItem>
+
     <EuiFlexItem @grow={{false}}>
       <EuiPopover
         @ownFocus={{true}}
@@ -66,36 +71,40 @@ order: 5
             @iconSide='right'
             {{on 'click' (set this 'pop2' true)}}
           >
-            No panel padding
+            No panel padding (none)
           </EuiButton>
         </:button>
         <:content>
           <EuiPopoverTitle>
-            HELLO, I’M A POPOVER TITLE
+            Hello, I’m a popover title
           </EuiPopoverTitle>
           <div style='width: 300px;'>
-            <EuiText size='s'>
+            <EuiText @size='s'>
               Removing the panelPaddingSize completely is good for lists that
               should extend to the edges.
             </EuiText>
           </div>
           <EuiPopoverFooter>
-            <EuiButton @fullWidth={{true}}>
+            <EuiButton
+              @size='s'
+              @fullWidth={{true}}
+            >
               Footer button
             </EuiButton>
           </EuiPopoverFooter>
         </:content>
       </EuiPopover>
     </EuiFlexItem>
+
   </EuiFlexGroup>
-  <EuiSpacer @size='l' />
+
 
   <EuiFlexGroup>
+
     <EuiFlexItem @grow={{false}}>
       <EuiPopover
         @ownFocus={{true}}
         @isOpen={{this.pop3}}
-        @panelPaddingSize='s'
         @closePopover={{set this 'pop3' false}}
       >
         <:button>
@@ -104,27 +113,31 @@ order: 5
             @iconSide='right'
             {{on 'click' (set this 'pop3' true)}}
           >
-            No title padding
+            No title padding (none)
           </EuiButton>
         </:button>
         <:content>
           <EuiPopoverTitle @paddingSize='none'>
-            HELLO, I’M A POPOVER TITLE
+            Hello, I’m a popover title
           </EuiPopoverTitle>
           <div style='width: 300px;'>
-            <EuiText size='s'>
+            <EuiText @size='s'>
               Removing the padding from titles only with paddingSize on
               EuiPopoverTitle.
             </EuiText>
           </div>
           <EuiPopoverFooter>
-            <EuiButton @fullWidth={{true}}>
+            <EuiButton
+              @size='s'
+              @fullWidth={{true}}
+            >
               Footer button
             </EuiButton>
           </EuiPopoverFooter>
         </:content>
       </EuiPopover>
     </EuiFlexItem>
+
     <EuiFlexItem @grow={{false}}>
       <EuiPopover
         @ownFocus={{true}}
@@ -142,27 +155,32 @@ order: 5
           </EuiButton>
         </:button>
         <:content>
-          <EuiPopoverTitle @paddingSize='m'>
-            HELLO, I’M A POPOVER TITLE
+          <EuiPopoverTitle @paddingSize='s'>
+            Hello, I’m a popover title
           </EuiPopoverTitle>
           <div style='width: 300px;'>
-            <EuiText size='s'>
+            <EuiText @size='s'>
               You can adjust both the panelPaddingSize and the paddingSize at
               the same time
             </EuiText>
           </div>
           <EuiPopoverFooter>
-            <EuiButton @fullWidth={{true}}>
+            <EuiButton
+              @size='s'
+              @fullWidth={{true}}
+            >
               Footer button
             </EuiButton>
           </EuiPopoverFooter>
         </:content>
       </EuiPopover>
     </EuiFlexItem>
+
   </EuiFlexGroup>
-  <EuiSpacer @size='l' />
+
 
   <EuiFlexGroup>
+
     <EuiFlexItem @grow={{false}}>
       <EuiPopover
         @ownFocus={{true}}
@@ -181,22 +199,26 @@ order: 5
         </:button>
         <:content>
           <EuiPopoverTitle>
-            HELLO, I’M A POPOVER TITLE
+            Hello, I’m a popover title
           </EuiPopoverTitle>
           <div style='width: 300px;'>
-            <EuiText size='s'>
+            <EuiText @size='s'>
               Removing the padding from titles only with paddingSize on
               EuiPopoverTitle.
             </EuiText>
           </div>
           <EuiPopoverFooter @paddingSize='none'>
-            <EuiButton @fullWidth={{true}}>
+            <EuiButton
+              @size='s'
+              @fullWidth={{true}}
+            >
               Footer button
             </EuiButton>
           </EuiPopoverFooter>
         </:content>
       </EuiPopover>
     </EuiFlexItem>
+
     <EuiFlexItem @grow={{false}}>
       <EuiPopover
         @ownFocus={{true}}
@@ -214,25 +236,28 @@ order: 5
           </EuiButton>
         </:button>
         <:content>
-          <EuiPopoverTitle @paddingSize='m'>
-            HELLO, I’M A POPOVER TITLE
+          <EuiPopoverTitle @paddingSize='s'>
+            Hello, I’m a popover title
           </EuiPopoverTitle>
           <div style='width: 300px;'>
-            <EuiText size='s'>
-              You can adjust both the panelPaddingSize and the paddingSize at
-              the same time
+            <EuiText @size='s'>
+              For the most reliable padding display, set the panelPaddingSize and the paddingSize props for each component individually.
             </EuiText>
           </div>
-          <EuiPopoverFooter @paddingSize='m'>
-            <EuiButton @fullWidth={{true}}>
+          <EuiPopoverFooter @paddingSize='s'>
+            <EuiButton
+              @size='s'
+              @fullWidth={{true}}
+            >
               Footer button
             </EuiButton>
           </EuiPopoverFooter>
         </:content>
       </EuiPopover>
     </EuiFlexItem>
+
   </EuiFlexGroup>
-  <EuiSpacer @size='l' />
+
 </div>
 ```
 

package/docs/layout/{popover-demo/demo6.md → popover/demo/d05-panel-class-name.md}

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 5
 ---
 
 # Panel class name
@@ -14,7 +14,7 @@ order: 6
     @ownFocus={{true}}
     @isOpen={{this.popover}}
     @anchorPosition='downLeft'
-    @panelClasses='background-blue'
+    @panelClasses='guideDemo__textLines'
     @closePopover={{set this 'popover' false}}
   >
     <:button>
@@ -27,7 +27,7 @@ order: 6
       </EuiButton>
     </:button>
     <:content>
-      This has a custom class that applies some css.
+      This has a custom class that applies some grid lines.
     </:content>
   </EuiPopover>
 </div>

package/docs/layout/{popover-demo/demo7.md → popover/demo/d06-popover-with-block-level-display.md}

@@ -1,5 +1,5 @@
 ---
-order: 7
+order: 6
 ---
 # Popover with block level display
 
@@ -12,13 +12,12 @@ order: 7
   <EuiPopover
     @ownFocus={{true}}
     @isOpen={{this.popover}}
-    @anchorPosition='downLeft'
+    @anchorPosition='downCenter'
     @display='block'
     @closePopover={{set this 'popover' false}}
   >
     <:button>
       <EuiButton
-        @iconType='arrowDown'
         @iconSide='right'
         @fullWidth={{true}}
         {{on 'click' (set this 'popover' true)}}

package/docs/layout/{popover-demo/demo3.md → popover/demo/d07-popover-on-a-fixed-element.md}

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 7
 ---
 
 # Popover on a fixed element
@@ -33,16 +33,8 @@ order: 3
       </EuiButton>
     </:button>
     <:content>
-      <EuiPopoverTitle>
-        Hello, I’m a popover title
-      </EuiPopoverTitle>
-      <div style='width: 300px;'>
-        <EuiText size='s'>
-          <p>
-            Selfies migas stumptown hot chicken quinoa wolf green juice,
-            mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
-          </p>
-        </EuiText>
+      <div>
+        This popover scrolls with the button element!
       </div>
     </:content>
   </EuiPopover>

package/docs/layout/{popover-demo/demo9.md → popover/demo/d09-popover-attached-to-input-element.md}

@@ -22,30 +22,32 @@ order: 9
 ```hbs template
 <div>
   <EuiInputPopover
-    @isOpen={{this.popover}}
-    @closePopover={{set this 'popover' false}}
+    @isOpen={{this.popover1}}
+    @closePopover={{set this 'popover1' false}}
   >
     <:input>
       <EuiFieldText
-        @value={{this.num1}}
-        {{on 'input' (pick 'target.value' (set this 'num1'))}}
-        {{on 'focus' (set this 'popover' true)}}
+        @value={{this.text1}}
+        {{on 'input' (pick 'target.value' (set this 'text1'))}}
+        {{on 'focus' (set this 'popover1' true)}}
       />
     </:input>
     <:content>
-      This is a popover
+      Popover content
     </:content>
   </EuiInputPopover>
+
   <EuiSpacer @size='l' />
+
   <EuiInputPopover
     @isOpen={{this.popover2}}
     @closePopover={{set this 'popover2' false}}
   >
     <:input>
       <EuiFieldText
-        @value={{this.num2}}
+        @value={{this.text2}}
         style={{concat 'width: ' this.width 'px'}}
-        {{on 'input' (pick 'target.value' (set this 'num2'))}}
+        {{on 'input' (pick 'target.value' (set this 'text2'))}}
         {{on
           'focus'
           (queue (set this 'popover2' true) (fn this.setInputWidth 400))
@@ -54,7 +56,7 @@ order: 9
       />
     </:input>
     <:content>
-      This is a popover that modifies inputs width
+      Popover will adjust in size as the input does
     </:content>
   </EuiInputPopover>
 </div>
@@ -66,11 +68,11 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 
 export default class PopoverDemo1 extends Component {
-  @tracked popover = false;
+  @tracked popover1 = false;
   @tracked popover2 = false;
   @tracked width = 200;
-  @tracked num1 = '';
-  @tracked num2 = '';
+  @tracked text1 = '';
+  @tracked text2 = '';
 
   @action
   setInputWidth(width) {

package/docs/layout/popover/demo/d10-setting-an-initial-focus.md

@@ -0,0 +1,61 @@
+---
+order: 10
+---
+
+# Setting an initial focus
+
+```hbs template
+
+<div>
+  {{#let
+    (unique-id)
+  as |textId|}}
+    <EuiPopover
+      @ownFocus={{false}}
+      @isOpen={{this.popover}}
+      @anchorPosition='downLeft'
+      @closePopover={{set this 'popover' false}}
+      @initialFocus={{concat '#' textId}}
+    >
+      <:button>
+        <EuiButton
+          @iconType='arrowDown'
+          @iconSide='right'
+          {{on 'click' (set this 'popover' true)}}
+        >
+          Show popover
+        </EuiButton>
+      </:button>
+      <:content>
+
+        <EuiFormRow
+          @label='Enter name'
+          @id={{textId}}
+          @hasChildLabel={{false}}
+        >
+          <EuiFieldText
+            @value={{this.textValue}}
+            @id={{textId}}
+            id='hello'
+            {{on 'input' (pick 'target.value' (set this 'textValue'))}}
+          />
+        </EuiFormRow>
+
+        <EuiSpacer />
+
+        <EuiButton @fill={{true}}>Submit</EuiButton>
+      </:content>
+    </EuiPopover>
+  {{/let}}
+</div>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class PopoverDemo1 extends Component {
+  @tracked popover = false;
+}
+```

package/docs/layout/{popover-demo/demo10.md → popover/demo/d11-removing-the-focus-trap.md}

@@ -1,5 +1,5 @@
 ---
-order: 10
+order: 11
 ---
 
 # Removing the focus trap

package/docs/layout/popover/demo/d12-popover-using-and-html-element-as-the-anchor.md

@@ -0,0 +1,9 @@
+---
+order: 12
+---
+
+# Popover using an HTML Element as the anchor
+
+```hbs template
+  <TodoText @text='To do'/>
+```

package/docs/layout/popover/index.md

@@ -0,0 +1,7 @@
+---
+title: Popover
+---
+
+<EuiPageHeader @pageTitle="Popover"/>
+
+<EuiHorizontalRule/>

package/docs/layout/resizable-container/demo/d01-horizontal-resizing.md

@@ -0,0 +1,10 @@
+---
+order: 1
+---
+
+# Horizontal resizing
+
+
+```hbs template
+<TodoText/>
+```

package/docs/layout/resizable-container/demo/d02-resizable-panel-options.md

@@ -0,0 +1,10 @@
+---
+order: 2
+---
+
+# Resizable panel options
+
+
+```hbs template
+<TodoText/>
+```

package/docs/layout/resizable-container/demo/d03-horizontal-resizing-with-controlled-widths.md

@@ -0,0 +1,10 @@
+---
+order: 3
+---
+
+# Horizontal resizing with controlled widths
+
+
+```hbs template
+<TodoText/>
+```

package/docs/layout/resizable-container/demo/d04-vertical-resizing.md

@@ -0,0 +1,10 @@
+---
+order: 4
+---
+
+# Vertical resizing
+
+
+```hbs template
+<TodoText/>
+```

package/docs/layout/resizable-container/demo/d05-collapsible-resizable-panels.md

@@ -0,0 +1,10 @@
+---
+order: 5
+---
+
+# Collapsible resizable panels
+
+
+```hbs template
+<TodoText/>
+```

package/docs/layout/resizable-container/demo/d06-responsive-layout.md

@@ -0,0 +1,10 @@
+---
+order: 6
+---
+
+# Responsive layout
+
+
+```hbs template
+<TodoText/>
+```

package/docs/layout/resizable-container/demo/d07-collapsible-panels-options.md

@@ -0,0 +1,10 @@
+---
+order: 7
+---
+
+# Collapsible panels options
+
+
+```hbs template
+<TodoText/>
+```