@ember-eui/core 4.3.0 → 5.0.0-alpha.3

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

@@ -2,111 +2,312 @@
 order: 2
 ---
 
-# Demo
+# Anchor position
 
+<EuiText>
+    The alignment and arrow on your popover can be set with the
+    <EuiCode>anchorPosition</EuiCode>
+    prop. These positions will update based upon screen real estate.<br /><br />
+    <strong>Some tips:</strong>
+    <ul>
+      <li>The first word in the <EuiCode>anchorPosition</EuiCode> denotes where the popover will
+        appear relative to the button.</li>
+      <li>The second word in the <EuiCode>anchorPosition</EuiCode> denotes where the gravity / pin
+        position will appear relative to the popover.</li>
+    </ul>
+  </EuiText>
+  
 ```hbs template
-<EuiFlexGroup>
-  <EuiFlexItem @grow={{false}}>
-    <EuiPopover
-      @ownFocus={{true}}
-      @isOpen={{this.pop1}}
-      @anchorPosition="downLeft"
-      @closePopover={{set this "pop1" false}}
-    >
-      <:button>
-        <EuiButton
-          @iconType="arrowDown"
-          @iconSide="right"
-          {{on "click" (set this "pop1" true)}}
-        >
-          downLeft
-        </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.
+<div>
+  
+  <EuiFlexGroup>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop1}}
+        @anchorPosition='downLeft'
+        @closePopover={{set this 'pop1' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop1' true)}}
+          >
+            downLeft
+          </EuiButton>
+        </:button>
+        <:content>
+          Popover content
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop2}}
+        @anchorPosition='downCenter'
+        @closePopover={{set this 'pop2' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop2' true)}}
+          >
+            downCenter
+          </EuiButton>
+        </:button>
+        <:content>
+          Popover content
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop3}}
+        @anchorPosition='downRight'
+        @closePopover={{set this 'pop3' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop3' true)}}
+          >
+            downRight
+          </EuiButton>
+        </:button>
+        <:content>
+          Popover content
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer @size='l' />
+  <EuiFlexGroup>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop4}}
+        @anchorPosition='upLeft'
+        @closePopover={{set this 'pop4' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop4' true)}}
+          >
+            upLeft
+          </EuiButton>
+        </:button>
+        <:content>
+          Popover content
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop5}}
+        @anchorPosition='upCenter'
+        @closePopover={{set this 'pop5' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop5' true)}}
+          >
+            upCenter
+          </EuiButton>
+        </:button>
+        <:content>
+          Popover content
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop6}}
+        @anchorPosition='upRight'
+        @closePopover={{set this 'pop6' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop6' true)}}
+          >
+            upRight
+          </EuiButton>
+        </:button>
+        <:content>
+          Popover content
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer @size='l' />
+  <EuiFlexGroup>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop7}}
+        @anchorPosition='leftUp'
+        @closePopover={{set this 'pop7' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop7' true)}}
+          >
+            leftUp
+          </EuiButton>
+        </:button>
+        <:content>
+          <EuiText>
+            <p style='width: 200px;'>
+              For left- or right-aligned popovers, make sure there is sufficient
+              content. If the popover height is too short, the arrow positioning
+              will appear off.
             </p>
           </EuiText>
-        </div>
-      </:content>
-    </EuiPopover>
-  </EuiFlexItem>
-  <EuiFlexItem @grow={{false}}>
-    <EuiPopover
-      @ownFocus={{true}}
-      @isOpen={{this.pop2}}
-      @anchorPosition="downLeft"
-      @closePopover={{set this "pop2" false}}
-    >
-      <:button>
-        <EuiButton
-          @iconType="arrowDown"
-          @iconSide="right"
-          {{on "click" (set this "pop2" true)}}
-        >
-          downLeft
-        </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.
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop8}}
+        @anchorPosition='leftCenter'
+        @closePopover={{set this 'pop8' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop8' true)}}
+          >
+            leftCenter
+          </EuiButton>
+        </:button>
+        <:content>
+          Popover content
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop9}}
+        @anchorPosition='leftDown'
+        @closePopover={{set this 'pop9' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop9' true)}}
+          >
+            leftDown
+          </EuiButton>
+        </:button>
+        <:content>
+          <EuiText>
+            <p style='width: 200px;'>
+              For left- or right-aligned popovers, make sure there is sufficient
+              content. If the popover height is too short, the arrow positioning
+              will appear off.
             </p>
           </EuiText>
-        </div>
-        <EuiPopoverFooter>
-          <EuiTextColor @color="subdued">
-            Hello, I’m a small popover footer caption
-          </EuiTextColor>
-        </EuiPopoverFooter>
-      </:content>
-    </EuiPopover>
-  </EuiFlexItem>
-  <EuiFlexItem @grow={{false}}>
-    <EuiPopover
-      @ownFocus={{true}}
-      @isOpen={{this.pod3}}
-      @anchorPosition="downLeft"
-      @closePopover={{set this "pod3" false}}
-    >
-      <:button>
-        <EuiButton
-          @iconType="arrowDown"
-          @iconSide="right"
-          {{on "click" (set this "pod3" true)}}
-        >
-          downLeft
-        </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.
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer size='l' />
+  <EuiFlexGroup>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop10}}
+        @anchorPosition='rightUp'
+        @closePopover={{set this 'pop10' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop10' true)}}
+          >
+            rightUp
+          </EuiButton>
+        </:button>
+        <:content>
+          <EuiText>
+            <p style='width: 200px;'>
+              For left- or right-aligned popovers, make sure there is sufficient
+              content. If the popover height is too short, the arrow positioning
+              will appear off.
             </p>
           </EuiText>
-        </div>
-        <EuiPopoverFooter>
-          <EuiButton @fullWidth={{true}} @size="s">
-            Manage this thing
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop11}}
+        @anchorPosition='rightCenter'
+        @closePopover={{set this 'pop11' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop11' true)}}
+          >
+            rightCenter
           </EuiButton>
-        </EuiPopoverFooter>
-      </:content>
-    </EuiPopover>
-  </EuiFlexItem>
-</EuiFlexGroup>
+        </:button>
+        <:content>
+          Popover content
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop12}}
+        @anchorPosition='rightDown'
+        @closePopover={{set this 'pop12' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop12' true)}}
+          >
+            rightDown
+          </EuiButton>
+        </:button>
+        <:content>
+          <EuiText>
+            <p style='width: 200px;'>
+              For left- or right-aligned popovers, make sure there is sufficient
+              content. If the popover height is too short, the arrow positioning
+              will appear off.
+            </p>
+          </EuiText>
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+</div>
 ```
 
 ```javascript component
@@ -118,5 +319,14 @@ export default class PopoverDemo1 extends Component {
   @tracked pop1 = false;
   @tracked pop2 = false;
   @tracked pop3 = false;
+  @tracked pop4 = false;
+  @tracked pop5 = false;
+  @tracked pop6 = false;
+  @tracked pop7 = false;
+  @tracked pop8 = false;
+  @tracked pop9 = false;
+  @tracked pop10 = false;
+  @tracked pop11 = false;
+  @tracked pop12 = false;
 }
 ```

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

@@ -2,29 +2,32 @@
 order: 3
 ---
 
-# Demo 3
+# Popover on a fixed element
 
-Popover on a fixed element
-Popover content even works on position: fixed; elements. Add the repositionOnScroll boolean prop to ensure the popover realigns to the fixed button on scroll.
+<EuiText>
+  Popover content even works on <EuiCode>position: fixed;</EuiCode>
+  elements. Add the <EuiCode>repositionOnScroll</EuiCode> boolean prop to ensure the popover
+  realigns to the fixed button on scroll.
+</EuiText>
 
 ```hbs template
-<EuiButton {{on "click" (set this "isExampleShown" true)}}>
+<EuiButton {{on 'click' this.toggleExampleShown}}>
   Toggle example
 </EuiButton>
 {{#if this.isExampleShown}}
   <EuiPopover
     @ownFocus={{true}}
     @isOpen={{this.pop1}}
-    @closePopover={{set this "pop1" false}}
+    @closePopover={{set this 'pop1' false}}
     @repositionOnScroll={{true}}
-    style="position: fixed; bottom: 50px; right: 50px; z-index: 10;"
+    style='position: fixed; bottom: 50px; right: 50px; z-index: 10;'
   >
     <:button>
       <EuiButton
-        @iconType="arrowDown"
-        @iconSide="right"
+        @iconType='arrowDown'
+        @iconSide='right'
         @fill={{true}}
-        {{on "click" (set this "pop1" true)}}
+        {{on 'click' (set this 'pop1' true)}}
       >
         Show fixed popover
       </EuiButton>
@@ -33,11 +36,11 @@ Popover content even works on position: fixed; elements. Add the repositionOnScr
       <EuiPopoverTitle>
         Hello, I’m a popover title
       </EuiPopoverTitle>
-      <div style="width: 300px;">
-        <EuiText size="s">
+      <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.
+            mumblecore tattooed trust fund hammock truffaut taxidermy kogi.
           </p>
         </EuiText>
       </div>
@@ -55,5 +58,10 @@ export default class PopoverDemo1 extends Component {
   @tracked isExampleShown = false;
   @tracked pop2 = false;
   @tracked pop3 = false;
+
+  @action
+  toggleExampleShown() {
+    this.isExampleShown = !this.isExampleShown
+  }
 }
 ```

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

@@ -0,0 +1,118 @@
+---
+order: 4
+---
+
+# 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
+<EuiPopover
+  @ownFocus={{true}}
+  @isOpen={{this.pop1}}
+  @closePopover={{set this 'pop1' false}}
+>
+  <:button>
+    <EuiButton
+      @iconType='arrowDown'
+      @iconSide='right'
+      @fill={{true}}
+      {{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>
+<EuiPopover
+  @ownFocus={{true}}
+  @isOpen={{this.pop2}}
+  @closePopover={{set this 'pop2' false}}
+>
+  <:button>
+    <EuiButton
+      @iconType='arrowDown'
+      @iconSide='right'
+      @fill={{true}}
+      {{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>
+      Hello, I’m a small popover footer caption
+    </EuiPopoverFooter>
+  </:content>
+</EuiPopover>
+<EuiPopover
+  @ownFocus={{true}}
+  @isOpen={{this.pop3}}
+  @closePopover={{set this 'pop3' false}}
+>
+  <:button>
+    <EuiButton
+      @iconType='arrowDown'
+      @iconSide='right'
+      @fill={{true}}
+      {{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>
+```
+
+```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;
+}
+```