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

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

@@ -8,30 +8,34 @@
   )
   as |inlineStyles|
 }}
-  <div
-    class={{class-names
-      "euiModal"
-      (if (eq @maxWidth true) "euiModal--maxWidth-default")
-    }}
-    tabindex="0"
-    ...attributes
-    {{style inlineStyles}}
-    {{focus-trap
-      isActive=(arg-or-default @isFocusTrapActive true)
-      shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
-      isPaused=(arg-or-default @isFocusTrapPaused false)
-      focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
-    }}
-    {{on-key "Escape" @onClose}}
+  <EuiOverlayMask
+    @onClick={{if @clickOutsideToClose (optional @onClose) (noop)}}
   >
-    <EuiButtonIcon
-      class="euiModal__closeIcon"
-      @iconType="cross"
-      @color="text"
-      {{on "click" @onClose}}
-    />
-    <div class="euiModal__flex">
-      {{yield}}
+    <div
+      class={{class-names
+        "euiModal"
+        (if (eq @maxWidth true) "euiModal--maxWidth-default")
+      }}
+      tabindex="0"
+      ...attributes
+      {{style inlineStyles}}
+      {{focus-trap
+        isActive=(arg-or-default @isFocusTrapActive true)
+        shouldSelfFocus=(arg-or-default @shouldSelfFocus true)
+        isPaused=(arg-or-default @isFocusTrapPaused false)
+        focusTrapOptions=(arg-or-default @focusTrapOptions (hash))
+      }}
+      {{on-key "Escape" (prevent-default (stop-propagation @onClose))}}
+    >
+      <EuiButtonIcon
+        class="euiModal__closeIcon"
+        @iconType="cross"
+        @color="text"
+        {{on "click" @onClose}}
+      />
+      <div class="euiModal__flex">
+        {{yield}}
+      </div>
     </div>
-  </div>
+  </EuiOverlayMask>
 {{/let}}

package/addon/components/eui-overlay-mask/index.hbs

@@ -1,8 +1,5 @@
 {{set-body-class "euiBody-hasOverlayMask"}}
-{{#in-element
-  this.destinationElement
-  insertBefore=null
-}}
+{{#in-element this.destinationElement insertBefore=null}}
   <div
     class={{class-names
       "euiOverlayMask"
@@ -12,6 +9,9 @@
         "euiOverlayMask--belowHeader"
       )
     }}
+    {{did-insert (set this "overlayMaskNode")}}
+    {{! template-lint-disable }}
+    {{on "click" this.onClick}}
     ...attributes
   >
     {{yield}}

package/addon/components/eui-overlay-mask/index.ts

@@ -1,6 +1,19 @@
 import GlimmerComponent from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-interface EuiOverlayMaskArgs {}
+interface EuiOverlayMaskArgs {
+  onClick(): void;
+}
 export default class EuiOverlayMaskComponent extends GlimmerComponent<EuiOverlayMaskArgs> {
+  @tracked overlayMaskNode: HTMLDivElement | undefined;
+
   destinationElement = document.body;
+
+  @action
+  onClick(e: MouseEvent) {
+    if (e.target === this.overlayMaskNode) {
+      this.args.onClick?.();
+    }
+  }
 }

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

@@ -14,6 +14,7 @@
   }}
     <div
       class={{class-names
+        (if @grow "euiPage--grow" "")
         styling.widthClassName
         componentName="EuiPage"
         paddingSize=(arg-or-default @paddingSize "m")
@@ -21,14 +22,10 @@
       ...attributes
       {{style
         (if styling.widthStyle (inline-styles max-width=styling.widthStyle))
+        (inline-styles min-height="460px;")
       }}
     >
-      {{yield
-        (hash
-          Sidebar=(component "eui-page-side-bar")
-          Body=(component "eui-page-body")
-        )
-      }}
+      {{yield}}
     </div>
   {{/let}}
 {{/let}}

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

@@ -1,34 +1,66 @@
 {{#let
   (arg-or-default @tagName "div")
-  (arg-or-default @restrictWidth false) as |tagName restrictWidth|
+  (arg-or-default @restrictWidth false)
+  (arg-or-default @borderRadius "none")
+  (arg-or-default @paddingSize (if @panelled "l" "none"))
+  as |tagName restrictWidth borderRadius paddingSize|
 }}
+
   {{#let
     (if
       (eq restrictWidth true)
-      (hash widthClassName="euiPageBody--restrictWidth-default")
+      (hash widthClassName="euiPageBody--restrictWidth-custom")
       (if
-        (not-eq restrictWidth false)
-        (hash widthClassName="euiPageBody--restrictWidth-custom" widthStyle=restrictWidth)
+        (eq restrictWidth false)
+        (hash
+          widthClassName="euiPageBody--restrictWidth-default"
+          widthStyle=restrictWidth
+        )
       )
-    ) as |styling|
+    )
+    as |styling|
   }}
-    {{#if (eq tagName "div")}}
-      <div
-        class={{class-names styling.widthClassName "euiPageBody"}}
+    {{#if @panelled}}
+      <EuiPanel
+        class={{class-names
+          componentName="EuiPageBody"
+          borderRadiusSize=borderRadius
+          paddingSize=@paddingSize
+        }}
+        @paddingSize={{paddingSize}}
+        @borderRadius={{borderRadius}}
+        {{!-- @paddingSize={{arg-or-default @paddingSize "none"}} --}}
+        {{!-- @restrictWidth={{@restrictWidth}} --}}
         ...attributes
-        {{style (if styling.widthStyle (inline-styles max-width=styling.widthStyle))}}
+        {{style
+          (if styling.widthStyle (inline-styles max-width=styling.widthStyle))
+        }}
       >
-        {{yield (hash Header=(component "eui-page-header") Content=(component "eui-page-content"))}}
-      </div>
+        {{!-- <div
+          class={{class-names
+            componentName="EuiPageBody"
+            borderRadiusSize=borderRadius
+            paddingSize=paddingSize
+          }}
+        > --}}
+        {{yield}}
+        {{! </div> }}
+      </EuiPanel>
     {{else}}
       {{#let (element tagName) as |Tag|}}
         <Tag
-          class={{class-names styling.widthClassName "euiPageBody"}}
-          style={{if styling.widthStyle (inline-styles max-width=styling.widthStyle)}}
+          class={{class-names
+            componentName="EuiPageBody"
+            borderRadiusSize=borderRadius
+            paddingSize=paddingSize
+          }}
+          style={{if
+            styling.widthStyle
+            (inline-styles max-width=styling.widthStyle)
+          }}
           ...attributes
         >
-          {{yield (hash Header=(component "eui-page-header") Content=(component "eui-page-content"))
-          }}
+          {{yield}}
         </Tag>
       {{/let}}
     {{/if}}

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

@@ -1,19 +1,17 @@
-{{! TODO: Add Beta Badge Component for Beta Label props}}
 <EuiPanel
   class={{class-names
     componentName="EuiPageContent"
     verticalPosition=@verticalPosition
     horizontalPosition=@horizontalPosition
+    borderRadius=@borderRadius
   }}
   @hasShadow={{@hasShadow}}
-  @paddingSize={{@paddingSize}}
+  @hasBorder={{@hasBorder}}
+  @paddingSize={{arg-or-default @paddingSize "l"}}
+  @borderRadius={{@borderRadius}}
+  @color={{@color}}
   @grow={{@grow}}
   ...attributes
 >
-  {{yield
-    (hash
-      Header=(component "eui-page-content-header")
-      Body=(component "eui-page-content-body")
-    )
-  }}
+  {{yield}}
 </EuiPanel>

package/addon/components/eui-page-content-body/index.hbs

@@ -1,3 +1,15 @@
-<div class="euiPageContentBody" ...attributes>
+<div
+  class={{class-names
+    (if
+      @restrictWidth
+      "euiPage--restrictWidth-custom"
+      "euiPage--restrictWidth-default"
+    )
+    componentName="EuiPageContentBody"
+    paddingSize=@paddingSize
+  }}
+  {{style (inline-styles width=@restrictWidth)}}
+  ...attributes
+>
   {{yield}}
 </div>

package/addon/components/eui-page-content-header/index.hbs

@@ -2,7 +2,13 @@
   class={{class-names
     "euiPageContentHeader"
     (if @responsive "euiPageContentHeader--responsive")
+    (if
+      @restrictWidth
+      "euiPanel--restrictWidth-custom"
+      "euiPanel--restrictWidth-default"
+    )
   }}
+  {{style (inline-styles width=@restrictWidth)}}
   ...attributes
 >
   {{yield

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

@@ -1,11 +1,36 @@
-<div
+<header
   class={{class-names
-    "euiPageHeader"
+    (if @bottomBorder "euiPageHeader--bottomBorder")
     (if @responsive "euiPageHeader--responsive")
+    (if (and @pageTitle @tabs) "euiPageHeader--tabsAtBottom")
+    (if
+      (and @tabs (not @pageTitle) (not @rightSideItems) (not @description))
+      "euiPageHeader--onlyTabs"
+    )
+    (if (eq @responsive "reverse") "euiPageHeader--responsiveReverse")
+    (if
+      @alignItems (concat "euiPageHeader--" @alignItems) "euiPageHeader--center"
+    )
+    (if
+      @restrictWidth
+      "euiPageHeader--restrictWidth-custom"
+      "euiPageHeader--restrictWidth-default"
+    )
+    componentName="EuiPageHeader"
+    paddingSize=@paddingSize
   }}
   ...attributes
 >
-  {{yield
-    (hash Section=(component "eui-page-header-section"))
-  }}
-</div>
+  <EuiPageHeaderContent
+    @alignItems={{@alignItems}}
+    @responsive={{@responsive}}
+    @pageTitle={{@pageTitle}}
+    @iconType={{@iconType}}
+    @tabs={{@tabs}}
+    @description={{@description}}
+    @rightSideItems={{@rightSideItems}}
+    @restrictWidth={{@restrictWidth}}
+  >
+    {{yield}}
+  </EuiPageHeaderContent>
+</header>

package/addon/components/eui-page-header-content/index.hbs

@@ -0,0 +1,219 @@
+<div
+  class={{class-names
+    "euiPageHeaderContent"
+    (if @restrictWidth "euiPanel--restrictWidth-custom" "")
+  }}
+  {{style (inline-styles width=@restrictWidth)}}
+  ...attributes
+>
+
+  {{#if (eq @alignItems "top")}}
+    <EuiFlexGroup
+      class="euiPageHeaderContent__top"
+      @responsive={{@responsive}}
+      @alignItems={{if @pageTitle "flexStart" "baseline"}}
+      @gutterSize="l"
+    >
+      {{#if (eq @responsive "reverse")}}
+        {{#if @rightSideItems}}
+          <EuiFlexItem @grow={{false}}>
+            <EuiFlexGroup
+              @wrap={{true}}
+              @responsive={{false}}
+              {{! {...rightSideGroupProps} }}
+              class="euiPageHeaderContent__rightSideItems"
+            >
+              {{!-- {{#each @rightSideItems as |rightSideItem|}}
+                {{component rightSideItem}}
+              {{/each}} --}}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        {{/if}}
+        <EuiFlexItem>
+          <EuiTitle {{! {...pageTitleProps}  }} @size="l">
+            <h1>
+              {{#if @iconType}}
+                <EuiIcon
+                  @size="xl"
+                  {{! {...iconProps} }}
+                  @type={{@iconType}}
+                  class="euiPageHeaderContent__titleIcon"
+                />
+              {{/if}}
+              {{#if @pageTitle}}
+                {{@pageTitle}}
+              {{/if}}
+            </h1>
+          </EuiTitle>
+
+          {{#if @tabs}}
+            <EuiSpacer />
+            <EuiTabs>
+              {{#each @tabs as |tab|}}
+                <EuiTab
+                  @isSelected={{tab.isSelected}}
+                  @onClick={{optional tab.onClick}}
+                >
+                  {{tab.label}}
+                </EuiTab>
+              {{/each}}
+            </EuiTabs>
+          {{/if}}
+        </EuiFlexItem>
+      {{else}}
+        <EuiFlexItem>
+          <EuiTitle {{! {...pageTitleProps}  }} @size="l">
+            <h1>
+              {{#if @iconType}}
+                <EuiIcon
+                  @size="xl"
+                  {{! {...iconProps} }}
+                  @type={{@iconType}}
+                  class="euiPageHeaderContent__titleIcon"
+                />
+              {{/if}}
+              {{#if @pageTitle}}
+                {{@pageTitle}}
+              {{/if}}
+            </h1>
+          </EuiTitle>
+
+          {{#if @tabs}}
+            <EuiSpacer />
+            <EuiTabs>
+              {{#each @tabs as |tab|}}
+                <EuiTab
+                  @isSelected={{tab.isSelected}}
+                  @onClick={{optional tab.onClick}}
+                >
+                  {{tab.label}}
+                </EuiTab>
+              {{/each}}
+            </EuiTabs>
+          {{/if}}
+        </EuiFlexItem>
+        {{#if @rightSideItems}}
+          <EuiFlexItem @grow={{false}}>
+            <EuiFlexGroup
+              @wrap={{true}}
+              @responsive={{false}}
+              {{! {...rightSideGroupProps} }}
+              class="euiPageHeaderContent__rightSideItems"
+            >
+              {{!-- {{#each @rightSideItems as |rightSideItem|}}
+                {{component rightSideItem}}
+              {{/each}} --}}
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        {{/if}}
+      {{/if}}
+    </EuiFlexGroup>
+    {{#if @bottomContent}}
+      <div class="euiPageHeaderContent__bottom">
+        {{@bottomContent}}
+      </div>
+    {{/if}}
+  {{else}}
+    <EuiFlexGroup
+      @responsive={{@responsive}}
+      class="euiPageHeaderContent__top"
+      @alignItems={{if (eq @alignItems "bottom") "flexEnd" @alignItems}}
+      gutterSize="l"
+    >
+      <EuiFlexItem>
+        {{#if @bottomContent}}
+          <div class="euiPageHeaderContent__bottom">
+            {{@bottomContent}}
+            <EuiTitle {{! {...pageTitleProps}  }} @size="l">
+              <h1>
+                {{#if @iconType}}
+                  <EuiIcon
+                    @size="xl"
+                    {{! {...iconProps} }}
+                    @type={{@iconType}}
+                    class="euiPageHeaderContent__titleIcon"
+                  />
+                {{/if}}
+                {{#if @pageTitle}}
+                  {{@pageTitle}}
+                {{/if}}
+              </h1>
+            </EuiTitle>
+
+            {{#if @tabs}}
+              <EuiSpacer />
+              <EuiTabs>
+                {{#each @tabs as |tab|}}
+                  <EuiTab
+                    @isSelected={{tab.isSelected}}
+                    @onClick={{optional tab.onClick}}
+                  >
+                    {{tab.label}}
+                  </EuiTab>
+                {{/each}}
+              </EuiTabs>
+            {{/if}}
+            {{#if @description}}
+              <EuiSpacer />
+              <EuiText @grow={{false}}>
+                <p>{{@description}}</p>
+              </EuiText>
+            {{/if}}
+          </div>
+        {{else}}
+          <EuiTitle {{! {...pageTitleProps}  }} @size="l">
+            <h1>
+              {{#if @iconType}}
+                <EuiIcon
+                  @size="xl"
+                  {{! {...iconProps} }}
+                  @type={{@iconType}}
+                  class="euiPageHeaderContent__titleIcon"
+                />
+              {{/if}}
+              {{#if @pageTitle}}
+                {{@pageTitle}}
+              {{/if}}
+            </h1>
+          </EuiTitle>
+
+          {{#if @tabs}}
+            <EuiSpacer />
+            <EuiTabs>
+              {{#each @tabs as |tab|}}
+                <EuiTab
+                  @isSelected={{tab.isSelected}}
+                  @onClick={{optional tab.onClick}}
+                >
+                  {{tab.label}}
+                </EuiTab>
+              {{/each}}
+            </EuiTabs>
+          {{/if}}
+          {{#if @description}}
+            <EuiSpacer />
+            <EuiText @grow={{false}}>
+              <p>{{@description}}</p>
+            </EuiText>
+          {{/if}}
+        {{/if}}
+      </EuiFlexItem>
+      {{#if @rightSideItems}}
+        <EuiFlexItem @grow={{false}}>
+          <EuiFlexGroup
+            @wrap={{true}}
+            @responsive={{false}}
+            {{! {...rightSideGroupProps} }}
+            class="euiPageHeaderContent__rightSideItems"
+          >
+            {{#each @rightSideItems as |rightSideItem|}}
+              <EuiFlexItem @grow={{false}}>
+                {{rightSideItem}}
+              </EuiFlexItem>
+            {{/each}}
+          </EuiFlexGroup>
+        </EuiFlexItem>
+      {{/if}}
+    </EuiFlexGroup>
+  {{/if}}
+</div>

package/addon/components/eui-page-header-content/index.ts

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { EuiButtomBarArgs } from '../eui-bottom-bar';
+import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
+
+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('default') template!: typeof TEMPLATES[number];
+
+  get classes() {
+    return 'euiPageTemplate '.concat(this.fullHeightClass);
+  }
+
+  get fullHeightClass() {
+    return this.fullHeight && this.canFullHeight
+      ? 'eui-fullHeight eui-yScroll'
+      : '';
+  }
+
+  get canFullHeight() {
+    return this.template === 'default' || this.template === 'empty';
+  }
+}

package/addon/components/eui-page-side-bar/index.hbs

@@ -1,3 +1,10 @@
-<div class="euiPageSideBar" ...attributes>
+<div
+  class={{class-names
+    (if @sticky "euiPageSideBar--sticky" "")
+    componentName="EuiPageSideBar"
+    paddingSize=(arg-or-default @paddingSize "l")
+  }}
+  ...attributes
+>
   {{yield}}
 </div>