@ember-eui/core 5.0.3 → 5.1.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-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/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-header-links.ts

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

package/app/helpers/merge.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/helpers/merge';

package/docs/layout/{accordion.md → accordion/demo/d01-simple-and-unstyle.md}

@@ -1,31 +1,15 @@
-<EuiPageHeader @pageTitle="Accordion"/>
-<EuiCallOut>
-  <:body>
-    <EuiText>
-      Take care when including flex group content within accordions<br />
-      <strong>EuiFlexGroup's</strong>
-      negative margins can sometimes create scrollbars within
-      <strong>EuiAccordion</strong>
-      because of the overflow tricks used to hide content. If you run into this
-      issue make sure your paddingSize prop is large enough to account for the
-      <EuiCode>gutterSize</EuiCode>
-      of any nested flex groups.
-    </EuiText>
-  </:body>
-</EuiCallOut>
+---
+order: 1
+---
 
-<EuiSpacer />
-<EuiTitle>
-  Simple and unstyled
-</EuiTitle>
-<EuiSpacer />
+# Simple and unstyled
 
 <EuiText>
   <strong>EuiAccordion</strong>
   has been purposely designed with minimal styles, allowing you to visually
   enhance it as needed (see the accordion form example). The only styling
   enforced by EUI is the caret icon, which indicates to users that the item can
-  be opened.<br /><br />
+  be opened.
   A
   <EuiCode>buttonContent</EuiCode>
   prop defines the content of the clickable area. On click it will expose the
@@ -36,4 +20,16 @@
   <EuiCode>buttonClassName</EuiCode>
   (for the clickable area).
 </EuiText>
-<EuiSpacer />
+
+```hbs template
+<EuiAccordion>
+  <:buttonContent>
+    Click me to toggle
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color="subdued" @hasShadow={{false}}>
+      Any content inside of <strong>EuiAccordion</strong> will appear here.
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+```

package/docs/layout/accordion/demo/d02-arrow-display.md

@@ -0,0 +1,34 @@
+---
+order: 2
+---
+
+# Arrow display
+
+<EuiText>
+  The arrow helps indicate the current state of the accordion (open or not) and points to the main triggering button text.
+  If you must hide or change the side in which the arrow appears, use <EuiCode>arrowDisplay: 'right'</EuiCode> or <EuiCode>'none'</EuiCode>
+</EuiText>
+
+```hbs template
+<EuiAccordion @arrowDisplay='right'>
+  <:buttonContent>
+    This accordion has the arrow on the right
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color="subdued" @hasShadow={{false}}>
+      Any content inside of <strong>EuiAccordion</strong> will appear here.
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+<EuiSpacer />
+<EuiAccordion @arrowDisplay='none'>
+  <:buttonContent>
+    This one has it removed entirely
+  </:buttonContent>
+  <:content>
+    <EuiPanel @color="subdued" @hasShadow={{false}}>
+      Any content inside of <strong>EuiAccordion</strong> will appear here.
+    </EuiPanel>
+  </:content>
+</EuiAccordion>
+```

package/docs/layout/{accordion-demo/demo2.md → accordion/demo/d03-multiple-accordions.md}

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 ---
 
 # Multiple accordions
@@ -23,7 +23,7 @@ order: 2
     An accordion with padding applied through props
   </:buttonContent>
   <:content>
-    <EuiText size='s'>
+    <EuiText @size='s'>
       <p>The content inside can be of any height.</p>
       <p>The content inside can be of any height.</p>
       <p>The content inside can be of any height.</p>
@@ -37,7 +37,7 @@ order: 2
     because of eui-textTruncate
   </:buttonContent>
   <:content>
-    <EuiText size='s'>
+    <EuiText @size='s'>
       <p>The content inside can be of any height.</p>
       <p>The content inside can be of any height.</p>
       <p>The content inside can be of any height.</p>
@@ -53,13 +53,14 @@ order: 2
     A third accordion with nested accordion
   </:buttonContent>
   <:content>
-    <EuiText size='s'>
+    <EuiText @size='s'>
       <p>
         This content area will grow to accommodate when the accordion below
         opens
       </p>
     </EuiText>
-    <EuiAccordion @paddingSize='m'>
+    <EuiSpacer/>
+    <EuiAccordion>
       <:buttonContent>
         A fourth nested accordion
       </:buttonContent>

package/docs/layout/{accordion-demo/demo3.md → accordion/demo/d04-extra-actions.md}

@@ -1,5 +1,5 @@
 ---
-order: 3
+order: 4
 ---
 
 # Extra actions
@@ -9,7 +9,7 @@ order: 3
 </EuiText>
 
 ```hbs template
-<EuiAccordion @paddingSize='m' @extraAction={{true}}>
+<EuiAccordion @paddingSize='l' @extraAction={{true}}>
   <:buttonContent>
     Click to open
   </:buttonContent>

package/docs/layout/{accordion-demo/demo4.md → accordion/demo/d05-opened-on-initial-render.md}

@@ -1,5 +1,5 @@
 ---
-order: 4
+order: 5
 ---
 
 # Opened on initial render
@@ -11,7 +11,7 @@ order: 4
 </EuiText>
 
 ```hbs template
-<EuiAccordion @paddingSize='m' @initialIsOpen={{true}}>
+<EuiAccordion @initialIsOpen={{true}}>
   <:buttonContent>
     I am opened by default. Click me to toggle close / open
   </:buttonContent>

package/docs/layout/{accordion-demo/demo5.md → accordion/demo/d06-controlling-toggled-state.md}

@@ -1,5 +1,5 @@
 ---
-order: 5
+order: 6
 ---
 
 # Controlling toggled state
@@ -8,7 +8,7 @@ order: 5
   Typically, the open and closed state of
   <strong>EuiAccordion</strong>
   is maintained by the component's internal state. Though, you can manually
-  control it with:
+  control it.
   <ul>
     <li><EuiCode>forceState</EuiCode>: Accepts either
       <EuiCode>'open'</EuiCode>
@@ -21,6 +21,7 @@ order: 5
 </EuiText>
 
 ```hbs template
+<TodoText @text="missing EuiButtonGroup component"/>
 <EuiFlexGroup>
   <EuiFlexItem>
     <EuiButton {{on 'click' (fn (mut this.accordionState) 'open')}}>

package/docs/layout/{accordion-demo/demo6.md → accordion/demo/d07-loading-state.md}

@@ -1,5 +1,5 @@
 ---
-order: 6
+order: 7
 ---
 
 # Loading state
@@ -21,6 +21,7 @@ order: 6
 </EuiText> -->
 
 ```hbs template
+<TodoText @text="missing EuiButtonGroup component"/>
 <EuiFlexGroup>
   <EuiFlexItem>
     <EuiText>

package/docs/layout/accordion/demo/d08-when-content-changes-dynamically.md

@@ -0,0 +1,71 @@
+---
+order: 8
+---
+
+# When content changes dynamically
+
+<EuiText>
+  If an accordion’s content changes height while the accordion is open, it will
+  resize dynamically.
+</EuiText>
+ 
+```hbs template
+<EuiAccordion @paddingSize='s' @initialIsOpen={{true}}>
+  <:buttonContent>
+    Click me to toggle close / open
+  </:buttonContent>
+  <:content>
+
+    <EuiPanel @color='subdued'>
+      <EuiText @size="s">
+        <p>
+          <EuiButton
+            @size='s'
+            @iconType='plusInCircleFilled'
+            {{on 'click' (fn this.incrementDecreaseRows 'add')}}
+          >
+            Increase height to
+            {{add this.counter 1}}
+            items
+          </EuiButton>
+          <EuiButton
+            @size='s'
+            @iconType='minusInCircleFilled'
+            {{on 'click' (fn this.incrementDecreaseRows 'sub')}}
+            @isDisabled={{eq this.counter 1}}
+          >
+            Decrease height to
+            {{sub this.counter 1}}
+            items
+          </EuiButton>
+        </p>
+        <ul>
+          {{#each (range 0 this.counter) as |row|}}
+            <li> Row {{add row 1}}</li>
+          {{/each}}
+        </ul>
+      </EuiText>
+    </EuiPanel>
+
+  </:content>
+</EuiAccordion>
+```
+
+```js component
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class AccordionDemo8Component extends Component {
+  @tracked counter = 1;
+
+  @action
+  incrementDecreaseRows(actionType) {
+    if (actionType == 'add') {
+      this.counter++;
+    } else {
+      this.counter--;
+    }
+  }
+}
+```

package/docs/layout/{accordion-demo/demo8.md → accordion/demo/d09-interactive-content-in-the-trigger.md}

@@ -1,5 +1,5 @@
 ---
-order: 8
+order: 9
 ---
 
 # Interactive content in the trigger
@@ -32,12 +32,12 @@ order: 8
 <EuiSpacer />
 <EuiAccordion @paddingSize='s' @buttonElement="div">
   <:buttonContent>
-    <EuiText
+    <EuiLink
       onClick={{this.onClick}}
-      href='#/layout/accordion#interactive-content-in-the-trigger'
+      @href='#docfy-demo-docs-layout-accordion-d09-interactive-content-in-the-trigger'
     >
       This is a nested link
-    </EuiText>
+    </EuiLink>
   </:buttonContent>
   <:content>
     <EuiPanel @color='subdued'>