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

package/addon/components/eui-page-template/index.hbs

@@ -0,0 +1,417 @@
+{{#if (eq this.template "centeredBody")}}
+  <EuiPage
+    class={{this.classes}}
+    @paddingSize={{if
+      (or @pageSideBar (has-block "pageSideBar"))
+      "none"
+      @paddingSize
+    }}
+    @grow={{arg-or-default @grow true}}
+    {{style (inline-styles min-height=(concat this.minHeight "px"))}}
+    {{! {...rest} }}
+    {{! style={pageStyle} }}
+  >
+    {{#if (has-block "pageSideBar")}}
+      {{yield to="pageSideBar"}}
+    {{else if @pageSideBar}}
+      <EuiPageSideBar @sticky={{true}} @paddingSize={{@paddingSize}}>
+        {{@pageSideBar}}
+      </EuiPageSideBar>
+    {{/if}}
+    <EuiPageBody
+      @paddingSize={{if
+        (or @pageSideBar (has-block "pageSideBar"))
+        (arg-or-default @paddingSize "l")
+        "none"
+      }}
+      @restrictWidth={{if
+        (or @pageSideBar (has-block "pageSideBar"))
+        "false"
+        @restrictWidth
+      }}
+      {{! {...pageBodyProps} }}
+    >
+      {{#if (has-block "pageHeader")}}
+        {{yield to="pageHeader"}}
+      {{else if @pageHeader}}
+        <EuiPageHeader
+          @restrictWidth={{if
+            (or @pageSideBar (has-block "pageSideBar"))
+            @restrictWidth
+            false
+          }}
+          @bottomBorder={{if
+            (or @pageSideBar (has-block "pageSideBar"))
+            false
+            @bottomBorder
+          }}
+          @paddingSize={{@paddingSize}}
+          @responsive={{arg-or-default @responsive true}}
+          @rightSideItems={{@pageHeader.rightSideItems}}
+          @iconType={{@pageHeader.iconType}}
+          @tabs={{@pageHeader.tabs}}
+          @pageTitle={{@pageHeader.pageTitle}}
+        />
+      {{/if}}
+      <EuiPageContent
+        @verticalPosition="center"
+        @horizontalPosition="center"
+        @paddingSize={{arg-or-default @paddingSize "none"}}
+        {{! {...pageContentProps} }}
+      >
+        <EuiPageContentBody
+          @paddingSize={{if
+            (or @pageSideBar (has-block "pageSideBar"))
+            @paddingSize
+            "none"
+          }}
+          @restrictWidth={{@restrictWidth}}
+          {{! {...pageContentBodyProps} }}
+        >
+          {{yield to="default"}}
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
+  </EuiPage>
+{{else if (eq this.template "centeredContent")}}
+  <EuiPage
+    class={{this.classes}}
+    @paddingSize="none"
+    @grow={{arg-or-default @grow true}}
+    {{style (inline-styles min-height=(concat this.minHeight "px"))}}
+    {{! {...rest} }}
+    {{! style={pageStyle} }}
+  >
+    {{#if (has-block "pageSideBar")}}
+      {{yield to="pageSideBar"}}
+    {{else if @pageSideBar}}
+      <EuiPageSideBar @sticky={{true}} @paddingSize={{@paddingSize}}>
+        {{@pageSideBar}}
+      </EuiPageSideBar>
+    {{/if}}
+    {{#if (or (has-block "pageSideBar") @pageSideBar)}}
+      <EuiPageBody
+        @panelled={{true}}
+        @paddingSize={{arg-or-default @paddingSize "l"}}
+        class={{this.pageBodyProps}}
+      >
+        {{#if (has-block "pageHeader")}}
+          {{yield to="pageHeader"}}
+        {{else if @pageHeader}}
+          <EuiPageHeader
+            @restrictWidth={{@restrictWidth}}
+            @paddingSize={{if
+              (or @pageHeader (has-block "pageHeader"))
+              ""
+              this.paddingSize
+            }}
+            @responsive={{arg-or-default @responsive true}}
+            @rightSideItems={{@pageHeader.rightSideItems}}
+            @iconType={{@pageHeader.iconType}}
+            @tabs={{@pageHeader.tabs}}
+            @pageTitle={{@pageHeader.pageTitle}}
+          />
+        {{/if}}
+        <EuiPageContent
+          @verticalPosition="center"
+          @horizontalPosition="center"
+          @hasShadow={{false}}
+          @color="subdued"
+          @paddingSize={{@pageContentProps.paddingSize}}
+          style={{if
+            (or @pageHeader (has-block "pageHeader"))
+            ""
+            "display: flex"
+          }}
+          class={{this.pageContentProps}}
+        >
+          <EuiPageContentBody
+            @restrictWidth={{@restrictWidth}}
+            class={{this.pageContentBodyProps}}
+          >
+            {{yield to="default"}}
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPageBody>
+    {{else}}
+      <EuiPageBody class={{this.pageBodyProps}} @paddingSize="l">
+        {{#if (has-block "pageHeader")}}
+          {{yield to="pageHeader"}}
+        {{else if @pageHeader}}
+          <EuiPageHeader
+            @restrictWidth={{@restrictWidth}}
+            @paddingSize={{this.paddingSize}}
+            @responsive={{arg-or-default @responsive true}}
+            @rightSideItems={{@pageHeader.rightSideItems}}
+            @iconType={{@pageHeader.iconType}}
+            @tabs={{@pageHeader.tabs}}
+            @pageTitle={{@pageHeader.pageTitle}}
+          />
+        {{/if}}
+        <EuiPageContent
+          @borderRadius="none"
+          @hasShadow={{false}}
+          @paddingSize={{@paddingSize}}
+          style="display: flex"
+        >
+          <EuiPageContent
+            @verticalPosition="center"
+            @horizontalPosition="center"
+            @hasShadow={{false}}
+            @color="subdued"
+            @paddingSize={{@pageContentProps.paddingSize}}
+            class={{this.pageContentProps}}
+          >
+            <EuiPageContentBody
+              @restrictWidth={{@restrictWidth}}
+              class={{this.pageContentBodyProps}}
+            >
+              {{yield to="default"}}
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPageContent>
+      </EuiPageBody>
+    {{/if}}
+  </EuiPage>
+{{else if (eq this.template "empty")}}
+  <EuiPage
+    class={{this.classes}}
+    @paddingSize={{if
+      (or (has-block "pageSideBar") @pageSideBar)
+      "none"
+      @paddingSize
+    }}
+    @grow={{arg-or-default @grow true}}
+    {{style (inline-styles min-height=(concat this.minHeight "px"))}}
+    {{! {...rest} }}
+    {{! style={pageStyle} }}
+  >
+    {{#if (has-block "pageSideBar")}}
+      {{yield to="pageSideBar"}}
+    {{else if @pageSideBar}}
+      <EuiPageSideBar @sticky={{true}} @paddingSize={{@paddingSize}}>
+        {{@pageSideBar}}
+      </EuiPageSideBar>
+    {{/if}}
+    <EuiPageBody
+      @restrictWidth={{if
+        (or (has-block "pageSideBar") @pageSideBar)
+        "none"
+        @restrictWidth
+      }}
+      @paddingSize={{if
+        (or (has-block "pageSideBar") @pageSideBar)
+        @paddingSize
+        "none"
+      }}
+      class={{this.pageBodyProps}}
+    >
+      {{#if (has-block "pageHeader")}}
+        {{yield to="pageHeader"}}
+      {{else if @pageHeader}}
+        <EuiPageHeader
+          @restrictWidth={{if
+            (or (has-block "pageSideBar") @pageSideBar)
+            @restrictWidth
+            false
+          }}
+          @paddingSize={{if
+            (or (has-block "pageSideBar") @pageSideBar)
+            @paddingSize
+            "none"
+          }}
+          @bottomBorder={{@bottomBorder}}
+          @responsive={{arg-or-default @responsive true}}
+          @rightSideItems={{@pageHeader.rightSideItems}}
+          @iconType={{@pageHeader.iconType}}
+          @tabs={{@pageHeader.tabs}}
+          @pageTitle={{@pageHeader.pageTitle}}
+        />
+      {{/if}}
+      <EuiPageContent
+        @hasBorder={{false}}
+        @hasShadow={{false}}
+        @paddingSize={{"none"}}
+        @color={{"transparent"}}
+        @borderRadius={{"none"}}
+        class={{this.pageContentProps}}
+      >
+        <EuiPageContentBody
+          @paddingSize={{if
+            (or (has-block "pageSideBar") @pageSideBar)
+            @paddingSize
+            "none"
+          }}
+          @restrictWidth={{if
+            (or (has-block "pageSideBar") @pageSideBar)
+            @restrictWidth
+            false
+          }}
+          class={{this.pageContentBodyProps}}
+        >
+          {{#if (and this.fullHeight this.canFullHeight)}}
+            <EuiFlexGroup
+              class="eui-fullHeight"
+              @gutterSize="none"
+              @direction="column"
+              @responsive={{false}}
+            >
+              <EuiFlexItem
+                class={{class-names
+                  (if
+                    (eq this.fullHeight "noscroll")
+                    "eui-fullHeight "
+                    (if (eq this.fullHeight true) "eui-yScroll")
+                  )
+                }}
+                @grow={{true}}
+              >
+                {{yield to="default"}}
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          {{else}}
+            {{yield to="default"}}
+          {{/if}}
+        </EuiPageContentBody>
+      </EuiPageContent>
+    </EuiPageBody>
+  </EuiPage>
+{{else}}
+  <EuiPage
+    class={{this.classes}}
+    @paddingSize="none"
+    @grow={{arg-or-default @grow true}}
+    {{style (inline-styles min-height=(concat this.minHeight "px"))}}
+    {{!-- @style={{@pageStyle}} --}}
+  >
+    {{#if (has-block "pageSideBar")}}
+      {{yield to="pageSideBar"}}
+    {{else if @pageSideBar}}
+      <EuiPageSideBar @sticky={{true}} @paddingSize={{@paddingSize}}>
+        {{@pageSideBar}}
+      </EuiPageSideBar>
+    {{/if}}
+    {{! <EuiPageBody {...pageBodyProps}> }}
+    {{#if (or (has-block "bottomBar") @bottomBar)}}
+      <EuiPageBody
+        @panelled={{true}}
+        @paddingSize="none"
+        class={{this.pageBodyProps}}
+      >
+        <EuiPageBody @paddingSize="l">
+          {{#if (has-block "pageHeader")}}
+            {{yield to="pageHeader"}}
+          {{else if @pageHeader}}
+            <EuiPageHeader
+              @restrictWidth={{@restrictWidth}}
+              @paddingSize={{@paddingSize}}
+              @responsive={{arg-or-default @responsive true}}
+              @rightSideItems={{@pageHeader.rightSideItems}}
+              @iconType={{@pageHeader.iconType}}
+              @tabs={{@pageHeader.tabs}}
+              @pageTitle={{@pageHeader.pageTitle}}
+            />
+          {{/if}}
+
+          <EuiPageContent
+            {{! @hasBorder={pageHeader === undefined ? false : undefined} }}
+            @hasBorder={{false}}
+            @hasShadow={{false}}
+            @paddingSize={{"none"}}
+            @color={{"plain"}}
+            @borderRadius={{"none"}}
+            class={{this.pageContentProps}}
+          >
+            <EuiPageContentBody
+              @restrictWidth={{@restrictWidth}}
+              @paddingSize={{@paddingSize}}
+              @borderRadius={{@borderRadius}}
+              class={{this.pageContentBodyProps}}
+            >
+              {{yield to="default"}}
+            </EuiPageContentBody>
+          </EuiPageContent>
+        </EuiPageBody>
+        {{#if (has-block "bottomBar")}}
+          {{yield to="bottomBar"}}
+        {{else if @bottomBar}}
+          <EuiBottomBar
+            @paddingSize={{@paddingSize}}
+            @position={{if
+              (and this.canFullHeight this.fullHeight)
+              "static"
+              "sticky"
+            }}
+            {{! {...(bottomBarProps as unknown)} }}
+          >
+            {{! {/* Wrapping the contents with EuiPageContentBody allows us to match the restrictWidth to keep the contents aligned */} }}
+            <EuiPageContentBody
+              @paddingSize={{"none"}}
+              @restrictWidth={{@restrictWidth}}
+            >
+              {{@bottomBar}}
+            </EuiPageContentBody>
+          </EuiBottomBar>
+        {{/if}}
+      </EuiPageBody>
+    {{else}}
+      <EuiPageBody @paddingSize="l">
+        {{#if (has-block "pageHeader")}}
+          {{yield to="pageHeader"}}
+        {{else if @pageHeader}}
+          <EuiPageHeader
+            @restrictWidth={{@restrictWidth}}
+            @paddingSize={{@paddingSize}}
+            @responsive={{arg-or-default @responsive true}}
+            @rightSideItems={{@pageHeader.rightSideItems}}
+            @iconType={{@pageHeader.iconType}}
+            @tabs={{@pageHeader.tabs}}
+            @pageTitle={{@pageHeader.pageTitle}}
+            @description={{@pageHeader.description}}
+          />
+        {{/if}}
+
+        <EuiPageContent
+          {{! @hasBorder={pageHeader === undefined ? false : undefined} }}
+          @hasBorder={{false}}
+          @hasShadow={{false}}
+          @paddingSize={{"none"}}
+          @color={{"plain"}}
+          @borderRadius={{"none"}}
+          class={{this.pageContentProps}}
+        >
+          <EuiPageContentBody
+            @restrictWidth={{@restrictWidth}}
+            @paddingSize={{@paddingSize}}
+            @borderRadius={{@borderRadius}}
+            class={{this.pageContentBodyProps}}
+          >
+            {{#if (and this.fullHeight this.canFullHeight)}}
+              <EuiFlexGroup
+                class="eui-fullHeight"
+                @gutterSize="none"
+                @direction="column"
+                @responsive={{false}}
+              >
+                <EuiFlexItem
+                  class={{class-names
+                    (if
+                      (eq this.fullHeight "noscroll")
+                      "eui-fullHeight "
+                      (if (eq this.fullHeight true) "eui-yScroll")
+                    )
+                  }}
+                  @grow={{true}}
+                >
+                  {{yield to="default"}}
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            {{else}}
+              {{yield to="default"}}
+            {{/if}}
+          </EuiPageContentBody>
+        </EuiPageContent>
+      </EuiPageBody>
+    {{/if}}
+  </EuiPage>
+{{/if}}

package/addon/components/eui-page-template/index.ts

@@ -0,0 +1,89 @@
+import Component from '@glimmer/component';
+import { EuiButtomBarArgs } from '../eui-bottom-bar';
+// import { action } from '@ember/object';
+// import { tracked } from '@glimmer/tracking';
+// import {
+//   getTransitionTimings,
+//   getWaitDuration,
+//   performOnFrame
+// } from '../../utils/transition';
+// import { findPopoverPosition, getElementZIndex } from '../../utils/popover';
+// import { EuiPopoverPosition } from '../../utils/popover/types';
+// import { cascadingMenuKeys } from '../../utils/accesibility';
+import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
+// import { tabbable } from 'tabbable';
+// import {
+//   anchorPositionMapping,
+//   displayMapping
+// } from '../../utils/css-mappings/eui-popover';
+// import { paddingSizeMapping } from '../../utils/css-mappings/eui-panel';
+// import { scheduleOnce, later, cancel } from '@ember/runloop';
+// import { assert } from '@ember/debug';
+// import { htmlSafe } from '@ember/template';
+
+export const TEMPLATES = [
+  'default',
+  'centeredBody',
+  'centeredContent',
+  'empty',
+] as const;
+
+export type EuiPageTemplateProps = {
+  template?: typeof TEMPLATES[number];
+  /**
+  //  * Gets passed along to the #EuiBottomBar component if `bottomBar` has contents
+  //  */
+  bottomBarProps?: EuiButtomBarArgs;
+  //  * Stretches or restricts the height to 100% of the parent;
+  //  * `true`: scrolls the EuiPageContentBody;
+  //  * `noscroll`: removes all scroll ability;
+  //  * Only works when `template = 'default | empty'` and breakpoint is `m` and above
+  //  */
+  fullHeight?: boolean;
+  /**
+   * Minimum height in which to enforce scrolling
+   */
+  minHeight?: number;
+};
+
+export default class EuiPageTemplate extends Component<EuiPageTemplateProps> {
+  // Defaults
+  @argOrDefault(460) minHeight!: number;
+  @argOrDefault(false) fullHeight!: boolean;
+  @argOrDefault('l') paddingSize!: string;
+  @argOrDefault('default') template!: typeof TEMPLATES[number];
+
+  get classes() {
+    return 'euiPageTemplate '.concat(this.fullHeightClass);
+  }
+
+  get fullHeightClass() {
+    return this.fullHeight && this.canFullHeight ? 'eui-fullHeight ' : '';
+  }
+
+  get yScrollClass() {
+    return this.fullHeight && this.canFullHeight ? 'eui-yScroll ' : '';
+  }
+
+  get canFullHeight() {
+    return this.template === 'default' || this.template === 'empty';
+  }
+
+  get pageBodyProps() {
+    return this.fullHeightClass;
+    // ...pageBodyProps,
+    // className: classNames(fullHeightClass, pageBodyProps?.className),
+  }
+
+  get pageContentProps() {
+    return this.yScrollClass;
+    // ...pageContentProps,
+    // className: classNames(yScrollClass, pageContentProps?.className),
+  }
+
+  get pageContentBodyProps() {
+    return this.fullHeightClass;
+    // ...pageContentBodyProps,
+    //className: classNames(fullHeightClass, pageContentBodyProps?.className),
+  }
+}

package/addon/components/eui-panel/index.hbs

@@ -1,13 +1,59 @@
-<div
-  class={{class-names
-    (if (not-eq @hasShadow false) "euiPanel--shadow")
-    (if (eq @grow false) "euiPanel--flexGrowZero")
-    componentName="EuiPanel"
-    paddingSize=(arg-or-default @paddingSize "m")
-    borderRadius=(arg-or-default @borderRadius "m")
-    color=(arg-or-default @color "plain")
+{{#let
+  (arg-or-default @hasShadow true)
+  (arg-or-default @color "plain")
+  (arg-or-default @grow true)
+  as |hasShadow color grow|
+}}
+  {{#let
+    (eq color "plain")
+    (or (eq color "plain") (eq color "transparent"))
+    as |canHaveShadow canHaveBorder|
   }}
-  ...attributes
->
-  {{yield}}
-</div>
+    {{#if @onClick}}
+      <div
+        role="button"
+        class={{class-names
+          (if (arg-or-default @isClickable true) "euiPanel--isClickable")
+          (if (and canHaveShadow (eq hasShadow true)) "euiPanel--hasShadow")
+          (if
+            (and (not canHaveShadow) (eq hasShadow false)) "euiPanel--noShadow"
+          )
+          (if (and canHaveBorder (eq @hasBorder true)) "euiPanel--hasBorder")
+          (if
+            (and (not canHaveBorder) (eq @hasBorder false)) "euiPanel--noBorder"
+          )
+          (unless grow "euiPanel--flexGrowZero")
+          componentName="EuiPanel"
+          paddingSize=(arg-or-default @paddingSize "m")
+          borderRadius=(arg-or-default @borderRadius "m")
+          color=color
+        }}
+        {{on "click" @onClick}}
+        ...attributes
+      >
+        {{yield}}
+      </div>
+    {{else}}
+      <div
+        class={{class-names
+          (if (and canHaveShadow (eq hasShadow true)) "euiPanel--hasShadow")
+          (if
+            (and (not canHaveShadow) (eq hasShadow false)) "euiPanel--noShadow"
+          )
+          (if (and canHaveBorder (eq @hasBorder true)) "euiPanel--hasBorder")
+          (if
+            (and (not canHaveBorder) (eq @hasBorder false)) "euiPanel--noBorder"
+          )
+          (unless grow "euiPanel--flexGrowZero")
+          componentName="EuiPanel"
+          paddingSize=(arg-or-default @paddingSize "m")
+          borderRadius=(arg-or-default @borderRadius "m")
+          color=color
+        }}
+        ...attributes
+      >
+        {{yield}}
+      </div>
+    {{/if}}
+  {{/let}}
+{{/let}}

package/addon/components/eui-popover/index.hbs

@@ -10,11 +10,12 @@
     (if (or (not this.hasArrow) @attachToAnchor) "euiPopover__panel-noArrow")
     (if @attachToAnchor "euiPopover__panel-isAttached")
     @panelClasses
-  ) as |descriptionId classes panelClasses|
+  )
+  as |descriptionId classes panelClasses|
 }}
   {{#if this.ownFocus}}
     <div
-      class="{{if this.isOpening "euiPopover-isOpen"}} {{classes}}"
+      class="{{if this.isOpening 'euiPopover-isOpen'}} {{classes}}"
       ...attributes
       {{did-insert this.didInsertPopover}}
       {{did-insert (optional @popoverRef)}}
@@ -33,9 +34,9 @@
         )
       }}
         <EuiPortal @insert={{@insert}}>
+          {{! template-lint-disable no-positive-tabindex }}
           <EuiPanel
             class={{panelClasses}}
-            tabindex={{if this.ownFocus "0"}}
             aria-live={{if this.ownFocus "off" "assertive"}}
             role="dialog"
             aria-label={{@ariaLabel}}
@@ -48,6 +49,7 @@
             {{did-insert this.registerPanel}}
             {{outside-click-detector onOutsideClick=this.onClickOutside}}
             {{on-key "Escape" this.onEscapeKey}}
+            tabindex={{this.tabindex}}
             {{focus-trap
               isActive=(not
                 (or (not this.ownFocus) (not this.isOpenStable) this.isClosing)
@@ -77,6 +79,7 @@
               </p>
             {{/if}}
             <div
+              tabindex={{this.tabindex}}
               {{mutation-observer
                 onMutation=this.onMutation
                 observerOptions=(hash
@@ -106,7 +109,8 @@
       >
         {{yield to="button"}}
       </div>
-      {{#if (and (not this.suppressingPopover) (or this.isOpen this.isClosing))
+      {{#if
+        (and (not this.suppressingPopover) (or this.isOpen this.isClosing))
       }}
         <EuiPortal @insert={{@insert}}>
           <EuiPanel