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

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

@@ -0,0 +1,252 @@
+---
+order: 5
+---
+
+# Popover padding sizes
+
+<EuiText>
+    Use the
+    <EuiCode>panelPaddingSize</EuiCode>
+    prop to adjust the padding of the panel content. When using popover titles
+    and footers, this setting will propogate to them. Or you can supply a custom
+    <EuiCode>paddingSize</EuiCode>
+    to either the
+    <strong>EuiPopoverTitle</strong>
+    of
+    <strong>EuiPopoverFooter</strong>.
+  </EuiText>
+
+```hbs template
+<div>
+  <EuiFlexGroup>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop1}}
+        @panelPaddingSize='s'
+        @closePopover={{set this 'pop1' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop1' true)}}
+          >
+            Small panel padding
+          </EuiButton>
+        </:button>
+        <:content>
+          <EuiPopoverTitle>
+            HELLO, I’M A POPOVER TITLE
+          </EuiPopoverTitle>
+          <div style='width: 300px;'>
+            <EuiText size='s'>
+              Only changing the panelPaddingSize will get inherited by the
+              title.
+            </EuiText>
+          </div>
+          <EuiPopoverFooter>
+            <EuiButton @fullWidth={{true}}>
+              Footer button
+            </EuiButton>
+          </EuiPopoverFooter>
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop2}}
+        @panelPaddingSize='none'
+        @closePopover={{set this 'pop2' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop2' true)}}
+          >
+            No panel padding
+          </EuiButton>
+        </:button>
+        <:content>
+          <EuiPopoverTitle>
+            HELLO, I’M A POPOVER TITLE
+          </EuiPopoverTitle>
+          <div style='width: 300px;'>
+            <EuiText size='s'>
+              Removing the panelPaddingSize completely is good for lists that
+              should extend to the edges.
+            </EuiText>
+          </div>
+          <EuiPopoverFooter>
+            <EuiButton @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>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop3' true)}}
+          >
+            No title padding
+          </EuiButton>
+        </:button>
+        <:content>
+          <EuiPopoverTitle @paddingSize='none'>
+            HELLO, I’M A POPOVER TITLE
+          </EuiPopoverTitle>
+          <div style='width: 300px;'>
+            <EuiText size='s'>
+              Removing the padding from titles only with paddingSize on
+              EuiPopoverTitle.
+            </EuiText>
+          </div>
+          <EuiPopoverFooter>
+            <EuiButton @fullWidth={{true}}>
+              Footer button
+            </EuiButton>
+          </EuiPopoverFooter>
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop4}}
+        @panelPaddingSize='none'
+        @closePopover={{set this 'pop4' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop4' true)}}
+          >
+            No panel padding with small title padding
+          </EuiButton>
+        </:button>
+        <:content>
+          <EuiPopoverTitle @paddingSize='m'>
+            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>
+          </div>
+          <EuiPopoverFooter>
+            <EuiButton @fullWidth={{true}}>
+              Footer button
+            </EuiButton>
+          </EuiPopoverFooter>
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer @size='l' />
+
+  <EuiFlexGroup>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop5}}
+        @panelPaddingSize='m'
+        @closePopover={{set this 'pop5' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop5' true)}}
+          >
+            No footer padding (none)
+          </EuiButton>
+        </:button>
+        <:content>
+          <EuiPopoverTitle>
+            HELLO, I’M A POPOVER TITLE
+          </EuiPopoverTitle>
+          <div style='width: 300px;'>
+            <EuiText size='s'>
+              Removing the padding from titles only with paddingSize on
+              EuiPopoverTitle.
+            </EuiText>
+          </div>
+          <EuiPopoverFooter @paddingSize='none'>
+            <EuiButton @fullWidth={{true}}>
+              Footer button
+            </EuiButton>
+          </EuiPopoverFooter>
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+    <EuiFlexItem @grow={{false}}>
+      <EuiPopover
+        @ownFocus={{true}}
+        @isOpen={{this.pop6}}
+        @panelPaddingSize='none'
+        @closePopover={{set this 'pop6' false}}
+      >
+        <:button>
+          <EuiButton
+            @iconType='arrowDown'
+            @iconSide='right'
+            {{on 'click' (set this 'pop6' true)}}
+          >
+            Set each padding individually
+          </EuiButton>
+        </:button>
+        <:content>
+          <EuiPopoverTitle @paddingSize='m'>
+            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>
+          </div>
+          <EuiPopoverFooter @paddingSize='m'>
+            <EuiButton @fullWidth={{true}}>
+              Footer button
+            </EuiButton>
+          </EuiPopoverFooter>
+        </:content>
+      </EuiPopover>
+    </EuiFlexItem>
+  </EuiFlexGroup>
+  <EuiSpacer @size='l' />
+</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 pop1 = false;
+  @tracked pop2 = false;
+  @tracked pop3 = false;
+  @tracked pop4 = false;
+  @tracked pop5 = false;
+  @tracked pop6 = false;
+}
+```

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

@@ -0,0 +1,44 @@
+---
+order: 6
+---
+
+# Panel class name
+
+<EuiText>
+    Use the <EuiCode>panelClassName</EuiCode> prop to pass a custom class to the panel containing the popover contents.
+  </EuiText>
+
+```hbs template
+<div>
+  <EuiPopover
+    @ownFocus={{true}}
+    @isOpen={{this.popover}}
+    @anchorPosition='downLeft'
+    @panelClasses='background-blue'
+    @closePopover={{set this 'popover' false}}
+  >
+    <:button>
+      <EuiButton
+        @iconType='arrowDown'
+        @iconSide='right'
+        {{on 'click' (set this 'popover' true)}}
+      >
+        Text scaling
+      </EuiButton>
+    </:button>
+    <:content>
+      This has a custom class that applies some css.
+    </: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;
+}
+```

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

@@ -0,0 +1,44 @@
+---
+order: 7
+---
+# Popover with block level display
+
+<EuiText>
+    Popover anchors default to <EuiCode>display: inline-block;</EuiCode> so they do not force a display on inline triggers. If you do need to change this, just add <EuiCode>display="block"</EuiCode>
+  </EuiText>
+
+```hbs template
+<div>
+  <EuiPopover
+    @ownFocus={{true}}
+    @isOpen={{this.popover}}
+    @anchorPosition='downLeft'
+    @display='block'
+    @closePopover={{set this 'popover' false}}
+  >
+    <:button>
+      <EuiButton
+        @iconType='arrowDown'
+        @iconSide='right'
+        @fullWidth={{true}}
+        {{on 'click' (set this 'popover' true)}}
+      >
+        This button is expanded
+      </EuiButton>
+    </:button>
+    <:content>
+      This is a popover
+    </: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;
+}
+```

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

@@ -0,0 +1,50 @@
+---
+order: 8
+---
+# Constraining a popover inside a container
+
+<EuiText>
+    <strong>EuiPopover</strong>
+    can accept a DOM element as a
+    <EuiCode>container</EuiCode>
+    prop and restrict the popover from overflowing that container.
+  </EuiText>
+
+```hbs template
+<div>
+  <EuiPanel {{did-insert (set this 'panel')}}>
+    <EuiPopover
+      @ownFocus={{true}}
+      @isOpen={{this.popover}}
+      @closePopover={{set this 'popover' false}}
+      @container={{this.panel}}
+    >
+      <:button>
+        <EuiButton
+          @iconType='arrowDown'
+          @iconSide='right'
+          {{on 'click' (set this 'popover' true)}}
+        >
+          Show constrained popover
+        </EuiButton>
+      </:button>
+      <:content>
+        Popover is positioned <EuiCode>downCenter</EuiCode> but constrained to fit within the
+        panel.
+      </:content>
+    </EuiPopover>
+    <EuiSpacer @size='xl' />
+    <EuiSpacer @size='xl' />
+  </EuiPanel>
+</div>
+```
+
+```javascript component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class PopoverDemo1 extends Component {
+  @tracked popover = false;
+  @tracked panel = null;
+}
+```

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

@@ -0,0 +1,80 @@
+---
+order: 9
+---
+
+# Popover attached to input element
+
+ <EuiText>
+    <strong>EuiInputPopover</strong>
+    is a specialized popover component intended to be used with form elements.
+    Stylistically, the popover panel is"attached" to the input. Functionally,
+    consumers have control over what events open and close the popover, and it
+    can allow for natural tab order. Although some assumptions are made about
+    keyboard behavior, consumers should provide specific key event handlers
+    depending on the use case. For instance, a
+    <EuiCode>type=text</EuiCode>
+    input could use the down key to trigger popover opening, but this
+    interaction would not be appropriate for
+    <EuiCode>type=number</EuiCode>
+    inputs as they natively bind to the down key.
+  </EuiText>
+
+```hbs template
+<div>
+  <EuiInputPopover
+    @isOpen={{this.popover}}
+    @closePopover={{set this 'popover' false}}
+  >
+    <:input>
+      <EuiFieldText
+        @value={{this.num1}}
+        {{on 'input' (pick 'target.value' (set this 'num1'))}}
+        {{on 'focus' (set this 'popover' true)}}
+      />
+    </:input>
+    <:content>
+      This is a popover
+    </:content>
+  </EuiInputPopover>
+  <EuiSpacer @size='l' />
+  <EuiInputPopover
+    @isOpen={{this.popover2}}
+    @closePopover={{set this 'popover2' false}}
+  >
+    <:input>
+      <EuiFieldText
+        @value={{this.num2}}
+        style={{concat 'width: ' this.width 'px'}}
+        {{on 'input' (pick 'target.value' (set this 'num2'))}}
+        {{on
+          'focus'
+          (queue (set this 'popover2' true) (fn this.setInputWidth 400))
+        }}
+        {{on 'blur' (fn this.setInputWidth 200)}}
+      />
+    </:input>
+    <:content>
+      This is a popover that modifies inputs width
+    </:content>
+  </EuiInputPopover>
+</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;
+  @tracked popover2 = false;
+  @tracked width = 200;
+  @tracked num1 = '';
+  @tracked num2 = '';
+
+  @action
+  setInputWidth(width) {
+    this.width = width;
+  }
+}
+```

package/docs/layout/popover.md

@@ -1 +1 @@
-# Popover
+<EuiPageHeader @pageTitle="Popover"/>

package/docs/navigation/breadcrumbs-demo/demo1.md

@@ -0,0 +1,77 @@
+---
+order: 1
+---
+
+<EuiText>
+	<p>
+		<strong>EuiBreadcrumbs</strong> let the user track their progress within and back out of a UX flow and work well when used in combination with <strong>EuiPageHeader</strong>. They are meant to be used at lower page level flows, while <strong>EuiHeaderBreadcrumbs</strong> should be used for application-wide navigation.
+  </p>
+
+  <p>
+  <strong>EuiBreadcrumbs</strong> requires an array of <strong>EuiBreadcrumb</strong> objects as <EuiCode>breadcrumbs</EuiCode> and handles truncation, including middle-truncation in the case of many items, and mobile responsiveness. Each item accepts an <EuiCode>href</EuiCode> prop, though we recommend the last item represent the current page and therefore the link is unnecessary.
+  </p>
+
+</EuiText>
+<EuiSpacer/>
+
+<EuiCallOut @iconType='accessibility' @color='warning'>
+  <:title>
+    For accessibility, it is highly recommended to provide a descriptive
+    <EuiCode>aria-label</EuiCode>
+    for each set of breadcrumbs.
+  </:title>
+</EuiCallOut>
+
+# Basic
+
+```hbs template
+<EuiPageContent role={{null}}>
+  <EuiBreadcrumbs
+    @breadcrumbs={{this.breadcrumbs}}
+    @truncate={{false}}
+    aria-label='An example of EuiBreadcrumbs'
+  />
+  <EuiSpacer size='xs' />
+  <EuiPageHeader>
+    <EuiPageHeaderSection>
+      <EuiTitle>
+        Boa constrictor
+      </EuiTitle>
+    </EuiPageHeaderSection>
+  </EuiPageHeader>
+</EuiPageContent>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoSideNavComponent extends Component {
+  breadcrumbs = [
+    {
+      text: 'Animals',
+      href: '#',
+      onClick: (e) => {
+        e.preventDefault();
+      },
+      'data-test-subj': 'breadcrumbsAnimals'
+    },
+    {
+      text: 'Reptiles'
+    },
+    {
+      text: 'Boa constrictor',
+      href: '#',
+      onClick: (e) => {
+        e.preventDefault();
+      }
+    },
+    {
+      text: 'Edit',
+      href: '#',
+      onClick: (e) => {
+        e.preventDefault();
+      }
+    }
+  ];
+}
+```

package/docs/navigation/breadcrumbs-demo/demo2.md

@@ -0,0 +1,61 @@
+---
+order: 2
+---
+
+# Limit the number of breadcrumbs
+
+<EuiText>
+	<p>
+		Use the <EuiCode>max</EuiCode> prop to collapse breadcrumbs beyond a certain number. The center breadcrumbs will collpase into a single item allowing the user to navigate these items from within a popover.
+  </p>
+
+</EuiText>
+
+```hbs template
+<EuiBreadcrumbs
+  @max={{4}}
+  @breadcrumbs={{this.breadcrumbs}}
+  @truncate={{false}}
+  aria-label='An example of EuiBreadcrumbs with specifying max prop'
+/>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoSideNavComponent extends Component {
+  breadcrumbs = [
+    {
+      text: 'Animals',
+      href: '#',
+    },
+    {
+      text: 'Metazoans',
+      href: '#',
+    },
+    {
+      text: 'Chordates',
+      href: '#',
+    },
+    {
+      text: 'Vertebrates',
+      href: '#',
+    },
+    {
+      text: 'Tetrapods',
+      href: '#',
+    },
+    {
+      text: 'Reptiles',
+      href: '#',
+    },
+    {
+      text: 'Boa constrictor',
+      href: '#',
+    },
+    {
+      text: 'Nebulosa subspecies',
+    },
+  ];
+}
+```

package/docs/navigation/breadcrumbs-demo/demo3.md

@@ -0,0 +1,61 @@
+---
+order: 3
+---
+
+# Truncate each breadcrumb
+
+<EuiText>
+	<p>
+		<strong>EuiBreadcrumbs</strong> will truncate the full set by default, forcing it to a single line and setting a max width on all items except for the last. You can turn this off by setting <EuiCode @language="jsx">truncate={false}</EuiCode>.
+  </p>
+
+</EuiText>
+
+```hbs template
+<EuiBreadcrumbs
+  @breadcrumbs={{this.breadcrumbs}}
+  @truncate={{true}}
+  aria-label='An example of EuiBreadcrumbs with truncate prop'
+/>
+```
+
+```js component
+import Component from '@glimmer/component';
+
+export default class DemoSideNavComponent extends Component {
+  breadcrumbs = [
+    {
+      text: 'Animals',
+      href: '#'
+    },
+    {
+      text: 'Metazoans is a real mouthful, especially for creatures without mouths',
+      href: '#',
+      truncate: true
+    },
+    {
+      text: 'Chordates',
+      href: '#'
+    },
+    {
+      text: 'Vertebrates',
+      href: '#'
+    },
+    {
+      text: 'Tetrapods',
+      href: '#'
+    },
+    {
+      text: 'Reptiles',
+      href: '#'
+    },
+    {
+      text: 'Boa constrictor',
+      href: '#'
+    },
+    {
+      text: 'Nebulosa subspecies is also a real mouthful, especially for creatures without mouths'
+    }
+  ];
+}
+```