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

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

@@ -2,297 +2,50 @@
 order: 1
 ---
 
-# Demo
+# Basic
+
+<EuiText>
+  <p>
+    Use the
+    <strong>EuiPopover</strong>
+    component to hide controls or options behind a clickable element. A popover
+    is temporary so keep tasks simple and narrowly focused.
+   </p>
+   <p> 
+    While the visibility
+    of the popover is maintained by the consuming application, popovers will
+    automatically close when clicking outside of the popover bounds. Therefore
+    all work done in a popover should automatically be saved. 
+    </p>
+    <p>
+    Avoid popover
+    inception (popover triggering another popover), and instead use a
+    EuiContextMenu to swap the popover panel content.
+    </p>
+
+</EuiText>
 
 ```hbs template
 <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>
-        </: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>
-        </: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>
-        </: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>
-        </: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>
+  <EuiPopover
+    @ownFocus={{true}}
+    @isOpen={{this.popover}}
+    @anchorPosition='downLeft'
+    @closePopover={{set this 'popover' false}}
+  >
+    <:button>
+      <EuiButton
+        @iconType='arrowDown'
+        @iconSide='right'
+        {{on 'click' (set this 'popover' true)}}
+      >
+        Show Popover
+      </EuiButton>
+    </:button>
+    <:content>
+      Popover content that’s wider than the default width
+    </:content>
+  </EuiPopover>
 </div>
 ```
 
@@ -302,17 +55,6 @@ 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;
-  @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;
+  @tracked popover = false;
 }
 ```

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

@@ -0,0 +1,72 @@
+---
+order: 10
+---
+
+# Removing the focus trap
+
+<EuiText>
+    If the popover should not trap focus within itself, then you can remove it
+    with
+    <EuiCode @language="jsx">ownFocus={false}</EuiCode>.
+  </EuiText>
+
+```hbs template
+<div>
+  <EuiPopover
+    @ownFocus={{false}}
+    @isOpen={{this.popover}}
+    @anchorPosition='downLeft'
+    @closePopover={{set this 'popover' false}}
+  >
+    <:button>
+      <EuiButton
+        @iconType='arrowDown'
+        @iconSide='right'
+        {{on 'click' (set this 'popover' true)}}
+      >
+        Show popover
+      </EuiButton>
+    </:button>
+    <:content>
+      <EuiFormRow
+        @label='Generate a public snapshot?'
+        @id={{(unique-id)}}
+        @hasChildLabel={{false}}
+      >
+        <EuiSwitch
+          @name='switch'
+          @label='Snapshot data'
+          @checked={{true}}
+          @onChange={{(noop)}}
+        />
+      </EuiFormRow>
+
+      <EuiFormRow
+        @label='Include the following in the embed'
+        @id={{(unique-id)}}
+      >
+        <EuiSwitch
+          @name='switch'
+          @label='Current time range'
+          @checked={{true}}
+          @onChange={{(noop)}}
+        />
+      </EuiFormRow>
+
+      <EuiSpacer />
+
+      <EuiButton @fill={{true}}>Copy IFRAME code</EuiButton>
+    </:content>
+  </EuiPopover>
+</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;
+}
+```