@ember-eui/core 5.0.2 → 5.2.0

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

@@ -43,7 +43,7 @@
           {{yield this.isOpen to="buttonContent"}}
         </span>
       </ButtonElement>
-      {{#if (and @extraAction (not this.isLoading))}}
+      {{#if (and @extraAction (has-block "extraAction") (not this.isLoading))}}
         <div class="euiAccordion__optionalAction">
           {{yield this.isOpen to="extraAction"}}
         </div>

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

@@ -73,7 +73,15 @@
               {{else}}
                 <EuiLink
                   {{did-insert setInnerTextRef}}
-                  @color={{if isLastBreadcrumb "text" "subdued"}}
+                  @color={{if
+                    breadcrumb.color
+                    breadcrumb.color
+                    (if
+                      isLastBreadcrumb
+                      "text"
+                      "subdued"
+                    )
+                  }}
                   @onClick={{breadcrumb.onClick}}
                   @href={{breadcrumb.href}}
                   title={{title}}

package/addon/components/eui-context-menu-item/index.hbs

@@ -0,0 +1,60 @@
+{{#let
+  (class-names
+    "euiContextMenuItem"
+    componentName="EuiContextMenuItem"
+    disabled=@disabled
+    layoutAlign=(arg-or-default @layoutAlign "center")
+    size=@size
+  )
+as |classes|}}
+  {{#if (and @href (not @disabled))}}
+    <a
+      class={{classes}}
+      href={{@href}}
+      target={{@target}}
+      {{did-insert this.registerLink}}
+      ...attributes
+    />
+
+  {{else}}
+    <button
+      class={{classes}}
+      disabled={{@disabled}}
+      type="button"
+      {{did-insert this.registerLink}}
+      ...attributes
+    />
+  {{/if}}
+{{/let}}
+
+
+{{!-- shared code that will be rendered inside the button or anchor --}}
+{{#if this.link}}
+  {{#in-element this.link}}
+    <span
+      class={{class-names
+        'euiContextMenu__itemLayout'
+        componentName="EuiContextMenuItem"
+        layoutAlign=(arg-or-default @layoutAlign "center")
+      }}
+    >
+      {{#if @isLoading}}
+        {{!-- spinner is not part of eui spec --}}
+        <EuiLoadingSpinner class="euiContextMenu__icon"/>
+      {{else}}
+        <EuiIcon
+          @iconClasses={{concat "euiContextMenu__icon " @iconClasses}}
+          @type={{@icon}}
+          @size="m"
+          @color="inherit"
+        />
+      {{/if}}
+      <span class="euiContextMenuItem__text">
+        {{yield}}
+      </span>
+      {{#if @hasPanel}}
+        <EuiIcon @type="arrowRight" @size="m" class="euiContextMenu__arrow"/>
+      {{/if}}
+    </span>
+  {{/in-element}}
+{{/if}}

package/addon/components/eui-context-menu-item/index.ts

@@ -0,0 +1,12 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class EuiContextMenuItemComponent extends Component {
+  @tracked link: HTMLAnchorElement | HTMLButtonElement | null = null;
+
+  @action
+  registerLink(e: HTMLAnchorElement | HTMLButtonElement) {
+    this.link = e;
+  }
+}

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

@@ -0,0 +1,5 @@
+{{!-- ToDo not yet implemented, only created to avoid creating divs with euiContextMenuPanel class --}}
+
+<div class="euiContextMenuPanel" tabindex="-1">
+  {{yield}}
+</div>

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

@@ -16,7 +16,7 @@
       <EuiPopover
         @isOpen={{this.pop1}}
         @anchorPosition="downRight"
-        @panelPaddingSize={{@panelPaddingSize}}
+        @panelPaddingSize={{arg-or-default @panelPaddingSize 'none'}}
         @closePopover={{set this "pop1" false}}
       >
         <:button>

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

@@ -1,31 +1,37 @@
-<EuiPopover
-  class="euiInputPopover {{if this.fullWidth "euiInputPopover--fullWidth"}}"
-  @ownFocus={{false}}
-  @buttonRef={{this.didInsertInput}}
-  @panelRef={{this.didInsertPanel}}
-  @anchorPosition={{this.anchorPosition}}
-  @panelPaddingSize={{this.panelPaddingSize}}
-  @attachToAnchor={{this.attachToAnchor}}
-  @display={{this.display}}
-  @closePopover={{@closePopover}}
-  @isOpen={{@isOpen}}
-  ...attributes
->
-  <:button>
-    <div {{resize-observer onResize=this.onResize}}>
-      {{yield to="input"}}
-    </div>
-  </:button>
-  <:content>
-    <div
-      tabindex="-1"
-      {{on-key "_all" this.onKeyDown}}
-      {{focus-trap
-        isActive=(not this.disableFocusTrap)
-        focusTrapOptions=(hash clickOutsideDeactivates=true returnFocusOnDeactivate=false)
-      }}
-    >
-      {{yield to="content"}}
-    </div>
-  </:content>
-</EuiPopover>
+{{#let (unique-id) as |id|}}
+  <EuiPopover
+    class="euiInputPopover {{if this.fullWidth "euiInputPopover--fullWidth"}}"
+    @ownFocus={{false}}
+    @buttonRef={{this.didInsertInput}}
+    @panelRef={{this.didInsertPanel}}
+    @anchorPosition={{this.anchorPosition}}
+    @panelPaddingSize={{this.panelPaddingSize}}
+    @attachToAnchor={{this.attachToAnchor}}
+    @display={{this.display}}
+    @closePopover={{@closePopover}}
+    @isOpen={{@isOpen}}
+    ...attributes
+  >
+    <:button>
+      <div {{resize-observer onResize=this.onResize}}>
+        {{yield to="input"}}
+      </div>
+    </:button>
+    <:content>
+      <div
+        id={{id}}
+        {{on-key "_all" this.onKeyDown}}
+        {{focus-trap
+          isActive=(not this.disableFocusTrap)
+          focusTrapOptions=(hash
+            clickOutsideDeactivates=true
+            returnFocusOnDeactivate=false
+            fallbackFocus=(concat '#' id)
+          )
+        }}
+      >
+        {{yield to="content"}}
+      </div>
+    </:content>
+  </EuiPopover>
+{{/let}}

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

@@ -1,7 +1,10 @@
 {{#let
   (unique-id)
   (class-names
-    position=this.anchorPosition display=this.display componentName="EuiPopover"
+    (if this.isOpening 'euiPopover-isOpen')
+    position=this.anchorPosition
+    display=this.display
+    componentName="EuiPopover"
   )
   (class-names
     "euiPopover__panel"
@@ -13,29 +16,35 @@
   )
   as |descriptionId classes panelClasses|
 }}
-  {{#if this.ownFocus}}
+  <div
+    class={{classes}}
+    ...attributes
+    {{on-key "_all" this.onKeyDown}}
+    {{did-insert this.didInsertPopover}}
+    {{did-update this.didUpdateIsOpen @isOpen}}
+    {{did-update this.didUpdateRepositionOnScroll @repositionOnScroll}}
+    {{did-insert (optional @popoverRef)}}
+  >
+
+    {{!-- button --}}
     <div
-      class="{{if this.isOpening 'euiPopover-isOpen'}} {{classes}}"
-      ...attributes
-      {{did-insert this.didInsertPopover}}
-      {{did-insert (optional @popoverRef)}}
-      {{did-update this.didUpdateIsOpen @isOpen}}
-      {{did-update this.didUpdateRepositionOnScroll @repositionOnScroll}}
+      class="euiPopover__anchor {{@anchorClassName}}"
+      {{did-insert this.registerButton}}
     >
-      <div
-        class="euiPopover__anchor {{@anchorClassName}}"
-        {{did-insert this.registerButton}}
-      >
-        {{yield to="button"}}
-      </div>
-      {{#if
-        (and
-          (not this.suppressingPopover) (or this.isCurrentlyOpen this.isClosing)
-        )
-      }}
-        <EuiPortal @insert={{@insert}}>
-          {{! template-lint-disable no-positive-tabindex }}
+      {{yield to="button"}}
+    </div>
+
+    {{!-- content --}}
+    {{#if
+      (and
+        (not this.suppressingPopover)
+        (or this.isCurrentlyOpen this.isClosing)
+      )
+    }}
+      <EuiPortal @insert={{@insert}}>
+        {{#let (unique-id) as |panelId|}}
           <EuiPanel
+            id={{panelId}}
             class={{panelClasses}}
             aria-live={{if this.ownFocus "off" "assertive"}}
             role="dialog"
@@ -43,24 +52,32 @@
             aria-labelledby={{@ariaLabelledBy}}
             aria-modal="true"
             aria-describedby={{if this.ownFocus descriptionId}}
+            tabindex={{this.tabindex}}
             @hasShadow={{false}}
             @paddingSize={{this.panelPaddingSize}}
             {{simple-style this._popoverStyles}}
             {{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)
+                (or
+                  (not this.ownFocus)
+                  (not this.isOpenStable)
+                  this.isClosing
+                )
               )
-              focusTrapOptions=(hash
-                shouldSelfFocus=true
-                returnFocusOnDeactivate=this.isOpenStable
-                initialFocus=(or @initialFocus this.panel)
-                onDeactivate=(optional @onTrapDeactivation)
-                preventScroll=true
-                clickOutsideDeactivates=true
+              focusTrapOptions=(merge
+                (hash
+                  shouldSelfFocus=true
+                  returnFocusOnDeactivate=this.isOpenStable
+                  initialFocus=(or @initialFocus this.panel)
+                  onDeactivate=(optional @onTrapDeactivation)
+                  preventScroll=true
+                  clickOutsideDeactivates=true
+                  fallbackFocus=(concat '#' panelId)
+                )
+                @focusTrapOptions
               )
             }}
           >
@@ -75,87 +92,29 @@
             </div>
             {{#if this.ownFocus}}
               <p id={{descriptionId}} {{screen-reader-only}}>
-                "You are in a dialog. To close this dialog, hit escape."
-              </p>
-            {{/if}}
-            <div
-              tabindex={{this.tabindex}}
-              {{mutation-observer
-                onMutation=this.onMutation
-                observerOptions=(hash
-                  attributes=true childList=true characterData=true subtree=true
-                )
-              }}
-            >
-              {{yield to="content"}}
-            </div>
-          </EuiPanel>
-        </EuiPortal>
-      {{/if}}
-    </div>
-  {{else}}
-    <div
-      class={{classes}}
-      ...attributes
-      tabindex="-1"
-      {{on-key "_all" this.onKeyDown}}
-      {{did-insert this.didInsertPopover}}
-      {{did-update this.didUpdateIsOpen @isOpen}}
-      {{did-update this.didUpdateRepositionOnScroll @repositionOnScroll}}
-    >
-      <div
-        class="euiPopover__anchor {{@anchorClassName}}"
-        {{did-insert this.registerButton}}
-      >
-        {{yield to="button"}}
-      </div>
-      {{#if
-        (and (not this.suppressingPopover) (or this.isOpen this.isClosing))
-      }}
-        <EuiPortal @insert={{@insert}}>
-          <EuiPanel
-            class={{panelClasses}}
-            tabindex={{if this.ownFocus "0"}}
-            aria-live={{if this.ownFocus "off" "assertive"}}
-            role="dialog"
-            aria-label={{@ariaLabel}}
-            aria-labelledby={{@ariaLabelledBy}}
-            aria-modal="true"
-            aria-describedby={{if this.ownFocus descriptionId}}
-            @hasShadow={{false}}
-            @paddingSize={{this.panelPaddingSize}}
-            {{simple-style this._popoverStyles}}
-            {{did-insert this.registerPanel}}
-            {{outside-click-detector onOutsideClick=this.onClickOutside}}
-            {{on-key "Escape" this.onEscapeKey}}
-          >
-            <div
-              class={{concat
-                "euiPopover__panelArrow euiPopover__panelArrow--"
-                this.arrowPosition
-              }}
-              style={{this._arrowStyles}}
-            >
-              {{yield to="arrowChildren"}}
-            </div>
-            {{#if this.ownFocus}}
-              <p id={{descriptionId}} {{screen-reader-only}}>
-                "You are in a dialog. To close this dialog, hit escape."
+                You are in a dialog. To close this dialog, hit escape.
               </p>
             {{/if}}
             <div
               {{mutation-observer
                 onMutation=this.onMutation
-                observerOptions=(hash
-                  attributes=true childList=true characterData=true subtree=true
+                observerOptions=(merge
+                  (hash
+                    attributes=true
+                    childList=true
+                    characterData=true
+                    subtree=true
+                  )
+                  @mutationObserverOptions
                 )
               }}
             >
               {{yield to="content"}}
             </div>
           </EuiPanel>
-        </EuiPortal>
-      {{/if}}
-    </div>
-  {{/if}}
+        {{/let}}
+      </EuiPortal>
+    {{/if}}
+
+  </div>
 {{/let}}

package/addon/components/eui-step-horizontal/index.hbs

@@ -2,18 +2,23 @@
   (if
     @disabled
     "disabled"
-    (if @isComplete "complete" (if @isSelected @status (unless @status "incomplete")))
-  ) as |status|
+    (if
+      @isComplete
+      "complete"
+      (if @isSelected "current" (arg-or-default @status "incomplete"))
+    )
+  )
+  as |status|
 }}
   <li class="euiStepHorizontal__item" aria-current={{if @isSelected "step"}}>
     <button
       type="button"
       class={{class-names
         "euiStepHorizontal"
-        (if @isSelected "euiStepHorizontal-isSelected")
-        (if @isDisabled "isDisabled")
-        (if @isComplete "euiStepHorizontal-isComplete")
-        (if (and (not @isSelected) (not @isComplete)) "euiStepHorizontal-isIncomplete")
+        (if (eq status "current") "euiStepHorizontal-isSelected")
+        (if (eq status "complete") "euiStepHorizontal-isComplete")
+        (if (eq status "incomplete") "euiStepHorizontal-isIncomplete")
+        (if (eq status "disabled") "euiStepHorizontal-isDisabled")
       }}
       title={{@title}}
       disabled={{@disabled}}

package/addon/helpers/merge.ts

@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function (hashes: Array<object>, hash: object) {
+  return Object.assign({}, ...hashes, hash);
+});

package/addon/utils/css-mappings/eui-avatar.ts

@@ -50,6 +50,7 @@ export function inlineStyles({
   if (!isNamedColor) {
     checkValidColor(color);
 
+    name = name.length ? name : '';
     assignedColor =
       color || VIS_COLORS[Math.floor(name.length % VIS_COLORS.length)];
 

package/addon/utils/css-mappings/eui-context-menu-item.ts

@@ -0,0 +1,26 @@
+export const baseClass = '';
+
+const disabledMapping = {
+  true: 'euiContextMenuItem-isDisabled'
+};
+
+const layoutAlignMapping = {
+  primary: `${baseClass}--primary`,
+  accent: `${baseClass}--accent`,
+  text: `${baseClass}--text`
+};
+
+const sizeMapping = {
+  s: 'euiContextMenuItem--small'
+};
+
+const mapping: ComponentMapping = {
+  base: baseClass,
+  properties: {
+    disabled: disabledMapping,
+    layoutAlign: layoutAlignMapping,
+    size: sizeMapping,
+  }
+};
+
+export default mapping;

package/addon/utils/css-mappings/eui-header-links.ts

@@ -17,7 +17,7 @@ export const mobileGutterSizeMapping = {
 };
 
 const mapping: ComponentMapping = {
-  base: baseClass,
+  base: '',
   properties: {
     gutterSize: gutterSizeMapping,
     mobileGutterSize: mobileGutterSizeMapping