@ember-eui/core 5.0.0-alpha.3 → 5.0.0-alpha.6

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

@@ -40,12 +40,12 @@
         {{on "click" this.onToggle}}
       >
         <span class={{this.buttonContentClasses}}>
-          {{yield to="buttonContent"}}
+          {{yield this.isOpen to="buttonContent"}}
         </span>
       </ButtonElement>
       {{#if (and @extraAction (not this.isLoading))}}
         <div class="euiAccordion__optionalAction">
-          {{yield to="extraAction"}}
+          {{yield this.isOpen to="extraAction"}}
         </div>
       {{else if this.isLoading}}
         <div class="euiAccordion__optionalAction">

package/addon/components/eui-code-block/controls/index.hbs

@@ -11,7 +11,7 @@
     {{/if}}
 
     {{#if @showCopyButton}}
-      <div className="euiCodeBlock__copyButton">
+      <div class="euiCodeBlock__copyButton">
         <EuiCopy @textToCopy={{@textToCopy}} @afterMessage="Copied" as |copy|>
           <EuiButtonIcon
             {{on "click" copy}}

package/addon/components/eui-loading-logo/index.hbs

@@ -8,7 +8,7 @@
     )
   }}
 >
-  <span className="euiLoadingLogo__icon">
+  <span class="euiLoadingLogo__icon">
     <EuiIcon @type={{arg-or-default @logo "logoKibana"}} @size={{arg-or-default @size "m"}} />
   </span>
 </span>

package/addon/components/eui-notification-event/index.hbs

@@ -0,0 +1,92 @@
+{{#let (unique-id) as |id|}}
+  <article
+    aria-labelledby={{id}}
+    key={{@id}}
+    class={{class-names
+      'euiNotificationEvent'
+      (if (eq (type-of @isRead) "boolean") 'euiNotificationEvent--withReadState')
+    }}
+    ...attributes
+  >
+
+    {{#if (eq (type-of @isRead) "boolean")}}
+      <div class="euiNotificationEvent__readButton">
+        {{#if @onRead}}
+          <EuiNotificationEventReadButton
+            @id={{@id}}
+            @isRead={{@isRead}}
+            @eventName={{@title}}
+            {{on "click" @onRead}}
+          />
+        {{else}}
+          <EuiNotificationEventReadIcon
+            @id={{@id}}
+            @isRead={{@isRead}}
+            @eventName={{@title}}
+            @readIconColor={{@readIconColor}}
+          />
+        {{/if}}
+      </div>
+    {{/if}}
+
+    <div class="euiNotificationEvent__content">
+      <EuiNotificationEventMeta
+        @id={{@id}}
+        @type={{@type}}
+        @event={{@title}}
+        @severity={{@severity}}
+        @badgeColor={{@badgeColor}}
+        @iconType={{@iconType}}
+        @iconAriaLabel={{@iconAriaLabel}}
+        @time={{@time}}
+        @onOpenContextMenu={{@onOpenContextMenu}}
+        @eventName={{@title}}
+        @hasContextMenu={{has-block 'contextMenu'}}
+        @iconColor={{@iconColor}}
+      >
+        {{yield to='contextMenu'}}
+      </EuiNotificationEventMeta>
+
+      {{#let
+        (class-names
+          'euiNotificationEvent__title'
+          (if @isRead 'euiNotificationEvent__title--isRead')
+        )
+        (arg-or-default
+          @headingLevel
+          'h2'
+        )
+      as |classNames headingLevel|}}
+        {{#if (or @href @onClickTitle)}}
+          <EuiLink
+            @onClick={{@onClickTitle}}
+            @href={{@href}}
+          >
+            <TextBlock @tagName={{headingLevel}} id={{id}} class={{classNames}}>
+              {{@title}}
+            </TextBlock>
+          </EuiLink>
+        {{else if @title}}
+          <TextBlock @tagName={{headingLevel}} id={{id}} class={{classNames}}>
+            {{@title}}
+          </TextBlock>
+        {{/if}}
+      {{/let}}
+
+      <EuiNotificationEventMessages
+        @messages={{@messages}}
+        @eventName={{@title}}
+        @accordionButtonText={{@accordionButtonText}}
+        @accordionHideText={{@accordionHideText}}
+      />
+
+      {{#if (has-block 'primaryAction')}}
+        <div class="euiNotificationEvent__primaryAction">
+          {{yield to='primaryAction'}}
+        </div>
+      {{/if}}
+
+    </div>
+
+  </article>
+{{/let}}

package/addon/components/eui-notification-event-messages/index.hbs

@@ -0,0 +1,49 @@
+<div
+  class="euiNotificationEventMessages"
+  ...attributes
+>
+  {{#let
+    (object-at 0 @messages)
+    (without (object-at 0 @messages) @messages)
+  as |first rest|}}
+    
+    {{#if first}}
+      <EuiText @size="s" @color="subdued">
+        <p>{{first}}</p>
+      </EuiText>
+    {{/if}}
+
+    {{#if rest}}
+
+      <EuiAccordion
+        {{!-- onToggle={{@onToggle}} --}}
+        {{!-- @buttonProps={{hash
+          aria-label = accordionAriaLabelButtonText
+        }} --}}
+        id={{concat 'euiNotificationEventMessagesAccordion' (unique-id)}}
+        class="euiNotificationEventMessages__accordion"
+        @buttonClassName="euiNotificationEventMessages__accordionButton"
+        @arrowDisplay="none"
+      >
+        <:buttonContent as |isOpen|>
+          {{@accordionButtonText}}
+          {{#unless isOpen}}
+            ({{@accordionHideText}})
+          {{/unless}}
+        </:buttonContent>
+
+        <:content>
+          <div class="euiNotificationEventMessages__accordionContent">
+            {{#each rest as |msg|}}
+              <EuiText @size="s" @color="subdued">
+                <p>{{msg}}</p>
+              </EuiText>
+            {{/each}}
+          </div>
+        </:content>
+
+      </EuiAccordion>
+    {{/if}}
+
+  {{/let}}
+</div>

package/addon/components/eui-notification-event-meta/index.hbs

@@ -0,0 +1,84 @@
+<div
+  class={{class-names
+    'euiNotificationEventMeta'
+    (if @hasContextMenu 'euiNotificationEventMeta--hasContextMenu')
+  }}
+  ...attributes
+>
+  <div class="euiNotificationEventMeta__section">
+
+    {{#if @iconType}}
+      <EuiIcon
+        @iconClasses="euiNotificationEventMeta__icon"
+        @type={{@iconType}}
+        @color={{@iconColor}}
+        {{!-- TODO only add one of the following html attributes --}}
+        aria-label={{@iconAriaLabel}}
+        aria-hidden={{if @iconAriaLabel false true}}
+      />
+    {{/if}}
+
+    {{#if @type}}
+        <EuiBadge
+          class="euiNotificationEventMeta__badge"
+          @color={{@badgeColor}}
+        >
+          {{#if @severity}}
+            {{@type}}: {{@severity}}
+          {{else}}
+            {{@type}}
+          {{/if}}
+        </EuiBadge>
+    {{/if}}
+
+  </div>
+
+  <div class="euiNotificationEventMeta__section">
+    <span class="euiNotificationEventMeta__time">{{@time}}</span>
+  </div>
+
+  {{#if @hasContextMenu}}
+    {{#let (unique-id) (use-state false) as |randomPopoverId isPopoverOpen|}}
+      <div class="euiNotificationEventMeta__contextMenuWrapper">
+        <EuiPopover
+          id={{randomPopoverId}}
+          @ownFocus={{true}}
+          @repositionOnScroll={{true}}
+          @isOpen={{isPopoverOpen.value}}
+          @panelPaddingSize="none"
+          @anchorPosition="leftUp"
+          @closePopover={{fn isPopoverOpen.setState false}}
+        >
+
+          <:button>
+            <EuiButtonIcon
+              {{!-- aria-label={contextMenuButton} --}}
+              aria-controls={{randomPopoverId}}
+              aria-expanded={{this.isPopoverOpen}}
+              aria-haspopup="true"
+              @iconType="boxesVertical"
+              @color="text"
+              data-test-subj={{concat @id '-notificationEventMetaButton'}}
+              {{on 'click' (fn isPopoverOpen.setState true)}}
+            />
+          </:button>
+
+          {{!-- The EuiContextMenu is wrapped with a div so it closes after an item is clicked --}}
+          <:content>
+            <div
+              {{on 'click' (queue
+                (optional @onOpenContextMenu)
+                (fn isPopoverOpen.setState false)
+              )}}
+              role="button"
+            >
+              {{yield}}
+            </div>
+          </:content>
+
+        </EuiPopover>
+      </div>
+    {{/let}}
+  {{/if}}
+
+</div>

package/addon/components/eui-notification-event-read-button/index.hbs

@@ -0,0 +1,13 @@
+{{!-- ToDo: title and aria-label translations --}}
+<EuiButtonIcon
+  @iconType="dot"
+  aria-label={{if @isRead (concat 'Mark ' @eventName ' as unread') (concat 'Mark ' @eventName ' as read')}}
+  title={{if @isRead 'Read' 'Unread'}}
+  class={{class-names
+    'euiNotificationEventReadButton'
+    (if @isRead 'euiNotificationEventReadButton--isRead')
+  }}
+  data-test-subj={{concat @id '-notificationEventReadButton'}}
+  id={{@id}}
+  ...attributes
+/>

package/addon/components/eui-notification-event-read-icon/index.hbs

@@ -0,0 +1,21 @@
+{{!-- ToDo: title and aria-label translations --}}
+<div
+  class={{class-names
+    'euiNotificationEventReadIcon'
+    (if @isRead 'euiNotificationEventReadIcon--isRead')
+  }}
+   ...attributes
+  >
+  <EuiIcon
+    @type="dot"
+    aria-label={{if
+      @isRead
+      (concat @eventName ' is read')
+      (concat @eventName ' is unread')
+    }}
+    title={{if @isRead 'Read' 'Unread'}}
+    @color={{arg-or-default @readIconColor 'primary'}}
+    data-test-subj={{concat @id '-notificationEventReadIcon'}}
+    id={{@id}}
+  />
+</div>

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

@@ -14,7 +14,7 @@
       ...attributes
     >
       {{#if (has-block "prepend")}}
-        <span className="euiTab__prepend">
+        <span class="euiTab__prepend">
           {{yield to="prepend"}}
         </span>
       {{/if}}
@@ -24,7 +24,7 @@
       </span>
 
       {{#if (has-block "append")}}
-        <span className="euiTab__append">
+        <span class="euiTab__append">
           {{yield to="append"}}
         </span>
       {{/if}}
@@ -44,7 +44,7 @@
       ...attributes
     >
       {{#if (has-block "prepend")}}
-        <span className="euiTab__prepend">
+        <span class="euiTab__prepend">
           {{yield to="prepend"}}
         </span>
       {{/if}}
@@ -54,7 +54,7 @@
       </span>
 
       {{#if (has-block "append")}}
-        <span className="euiTab__append">
+        <span class="euiTab__append">
           {{yield to="append"}}
         </span>
       {{/if}}

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

@@ -1,45 +1,32 @@
-{{#let
-  (unique-id)
-  (optional @onTabClick)
-  (arg-or-default @autoFocus 'initial')
-  (use-state
-    (get-tab-id
-      (arg-or-default (or @selectedTab @initialSelectedTab) (object-at 0 @tabs))
-    )
-  )
-  as |id onTabClick autoFocus selectedTab|
-}}
+{{#let (unique-id) as |rootId|}}
   <div class={{@className}} ...attributes>
     <EuiTabs
-      @selectedTab={{selectedTab.value}}
       @expand={{@expand}}
       @display={{@display}}
       @size={{@size}}
-      as |EuiTab|
+      {{on "focus" this.initializeFocus}}
+      {{did-insert this.setTabsRef}}
     >
       {{#each @tabs as |tab|}}
         <EuiTab
           @id={{tab.id}}
-          aria-controls={{id}}
-          @selectedTabId={{selectedTab.value}}
-          @onClick={{pipe selectedTab.setState (fn onTabClick tab)}}
-          @focusFn={{selectedTab.setState}}
+          aria-controls={{rootId}}
+          @isSelected={{eq tab.id this.selectedTab.id}}
           @disabled={{tab.disabled}}
+          {{on "click" (fn this.onTabClick tab)}}
         >
           {{tab.name}}
         </EuiTab>
       {{/each}}
     </EuiTabs>
-    {{#let (find-by "id" selectedTab.value @tabs) as |currentTab|}}
-      {{#if currentTab}}
-        <div role="tabpanel" id={{id}} aria-labelledby={{currentTab.id}}>
-          {{#if (has-block "selectedTabContent")}}
-            {{yield currentTab to="selectedTabContent"}}
-          {{else}}
-            {{currentTab.content}}
-          {{/if}}
-        </div>
-      {{/if}}
+    {{#let (find-by "id" this.selectedTab.id @tabs) as |currentTab|}}
+      <div role="tabpanel" id={{rootId}} aria-labelledby={{currentTab.id}}>
+        {{#if (has-block "selectedTabContent")}}
+          {{yield currentTab to="selectedTabContent"}}
+        {{else}}
+          {{currentTab.content}}
+        {{/if}}
+      </div>
     {{/let}}
   </div>
 {{/let}}

package/addon/components/eui-tabbed-content/index.ts

@@ -0,0 +1,134 @@
+import { scheduleOnce } from '@ember/runloop';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { CommonArgs } from '../common';
+
+export interface EuiTabbedContentTab {
+  id: string;
+  name: string;
+  content: Component;
+}
+
+export type EuiTabbedContentArgs = CommonArgs & {
+  /**
+   * When tabbing into the tabs, set the focus on `initial` for the first tab,
+   * or `selected` for the currently selected tab. Best use case is for inside of
+   * overlay content like popovers or flyouts.
+   */
+  autoFocus?: 'initial' | 'selected';
+  /**
+   * Choose `default` or alternative `condensed` display styles
+   */
+  display?: string;
+  /**
+   * Evenly stretches each tab to fill the horizontal space
+   */
+  expand?: boolean;
+  /**
+   * Use this prop to set the initially selected tab while letting the tabbed content component
+   * control selection state internally
+   */
+  initialSelectedTab?: EuiTabbedContentTab;
+  onTabClick?: (selectedTab: EuiTabbedContentTab) => void;
+  /**
+   * Use this prop if you want to control selection state within the owner component
+   */
+  selectedTab?: EuiTabbedContentTab;
+  size?: string;
+  /**
+   * Each tab needs id and content properties, so we can associate it with its panel for accessibility.
+   * The name property (a node) is also required to display to the user.
+   */
+  tabs: EuiTabbedContentTab[];
+};
+
+export default class EuiTabbedContentComponent extends Component<EuiTabbedContentArgs> {
+  @tracked selectedTabId;
+  @tracked inFocus: boolean = false;
+  tabsRef?: Element;
+
+  get autoFocus() {
+    return this.args.autoFocus || 'initial';
+  }
+
+  constructor(owner: unknown, args: EuiTabbedContentArgs) {
+    super(owner, args);
+
+    const { initialSelectedTab, selectedTab, tabs } = this.args;
+
+    // Only track selection state if it's not controlled externally.
+    if (!selectedTab) {
+      this.selectedTabId =
+        (initialSelectedTab && initialSelectedTab.id) || tabs[0].id;
+    }
+  }
+
+  get selectedTab() {
+    const { selectedTab: externalSelectedTab, tabs } = this.args;
+    return (
+      externalSelectedTab ||
+      tabs.find((tab: EuiTabbedContentTab) => tab.id === this.selectedTabId)
+    );
+  }
+
+  setTabsRef = (element: Element) => {
+    this.tabsRef = element;
+    // Current short-term solution for event listener (see https://github.com/elastic/eui/pull/2717)
+    this.tabsRef.addEventListener('focusout' as 'blur', this.removeFocus);
+  };
+
+  willDestroy(): void {
+    super.willDestroy();
+    if (this.tabsRef) {
+      this.tabsRef.removeEventListener('focusout' as 'blur', this.removeFocus);
+    }
+  }
+
+  removeFocus = (blurEvent: FocusEvent) => {
+    // only set inFocus to false if the wrapping div doesn't contain the now-focusing element
+    const currentTarget = blurEvent.currentTarget! as HTMLElement;
+    const relatedTarget = blurEvent.relatedTarget! as HTMLElement;
+    if (currentTarget.contains(relatedTarget) === false) {
+      this.inFocus = true;
+    }
+  };
+
+  onTabClick = (selectedTab: EuiTabbedContentTab) => {
+    const { onTabClick, selectedTab: externalSelectedTab } = this.args;
+
+    if (onTabClick) {
+      onTabClick(selectedTab);
+    }
+
+    // Only track selection state if it's not controlled externally.
+    if (!externalSelectedTab) {
+      this.selectedTabId = selectedTab.id;
+      const focusTab = () => {
+        this.focusTab();
+      };
+      scheduleOnce('afterRender', this, focusTab);
+    }
+  };
+
+  focusTab = () => {
+    if (this.tabsRef) {
+      const targetTab: HTMLDivElement | null = this.tabsRef.querySelector(
+        `#${this.selectedTabId}`
+      );
+      targetTab!.focus();
+    }
+  };
+
+  initializeFocus = () => {
+    if (!this.inFocus && this.autoFocus === 'selected') {
+      // Must wait for setState to finish before calling `.focus()`
+      // as the focus call triggers a blur on the first tab
+      this.inFocus = true;
+
+      const focusTab = () => {
+        this.focusTab();
+      };
+      scheduleOnce('afterRender', this, focusTab);
+    }
+  };
+}

package/addon/styles/ember-eui.css

@@ -21,3 +21,7 @@
 .ember-basic-dropdown-content {
   z-index: 99999
 }
+
+.euiBadge__iconButton svg {
+  pointer-events: none;
+}

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

@@ -6,7 +6,7 @@ export const sizeMapping = {
   l: `${baseClass}--large`,
   xl: `${baseClass}--xlarge`,
   fullWidth: `${baseClass}--fullWidth`,
-  original: `${baseClass}----original`
+  original: `${baseClass}--original`
 };
 
 export const marginMapping = {

package/app/components/eui-notification-event/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-notification-event';

package/app/components/eui-notification-event-messages/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-notification-event-messages';

package/app/components/eui-notification-event-meta/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-notification-event-meta';

package/app/components/eui-notification-event-read-button/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-notification-event-read-button';

package/app/components/eui-notification-event-read-icon/index.js

@@ -0,0 +1 @@
+export { default } from '@ember-eui/core/components/eui-notification-event-read-icon';

package/docs/display/avatar-demo/demo1.md

@@ -4,14 +4,6 @@ order: 1
 
 # Basic
 
-<EuiText>
-  <p>
-
-The <strong>EuiAvatar</strong> component typically creates a user icon. It will accept <EuiCode>name</EuiCode> (required) and <EuiCode>image</EuiCode> props and will configure the display and accessibility as needed. By default, the background colors come from the set of colors used for visualizations. Otherwise you can pass a hex value to the <EuiCode>color</EuiCode> prop.
-
-  </p>
-</EuiText>
-
 ```hbs template
 <div>
   <EuiAvatar @size='s' @name='Raphael' />

package/docs/display/avatar.md

@@ -1 +1,10 @@
 <EuiPageHeader @pageTitle="Avatar"/>
+<EuiHorizontalRule />
+<EuiText>
+
+  <p>
+
+The <strong>EuiAvatar</strong> component typically creates a user icon. It will accept <EuiCode>name</EuiCode> (required) and <EuiCode>image</EuiCode> props and will configure the display and accessibility as needed. By default, the background colors come from the set of colors used for visualizations. Otherwise you can pass a hex value to the <EuiCode>color</EuiCode> prop.
+
+  </p>
+</EuiText>

package/docs/display/badge-demo/demo1.md

@@ -2,14 +2,6 @@
 order: 1
 ---
 
-<EuiText>
-  <p>
-
-<strong>EuiBadges</strong> are used to focus on important bits of information. Although they will automatically space themselves if you use them in a repetitive fashion it is good form to wrap them using a <strong>EuiBadgeGroup</strong> so that they will wrap when width is constrained (as seen below).
-
-  </p>
-</EuiText>
-
 ```hbs template
 <EuiTitle @size='xs'>
   Accepted color names

package/docs/display/badge.md

@@ -1 +1,8 @@
 <EuiPageHeader @pageTitle="Badge"/>
+<EuiHorizontalRule />
+<EuiText>
+
+  <p>
+<strong>EuiBadges</strong> are used to focus on important bits of information. Although they will automatically space themselves if you use them in a repetitive fashion it is good form to wrap them using a <strong>EuiBadgeGroup</strong> so that they will wrap when width is constrained (as seen below).
+  </p>
+</EuiText>

package/docs/display/comment-list.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Comment List"/>
+<EuiPageHeader @pageTitle="Comment List"/>
+<EuiHorizontalRule />

package/docs/display/description-list.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Description list"/>
+<EuiPageHeader @pageTitle="Description list"/>
+<EuiHorizontalRule />

package/docs/display/empty-prompt.md

@@ -1 +1,2 @@
-<EuiPageHeader @pageTitle="Empty Prompt"/>
+<EuiPageHeader @pageTitle="Empty Prompt"/>
+<EuiHorizontalRule />

package/docs/display/icons.md

@@ -1 +1,2 @@
 <EuiPageHeader @pageTitle="Icons"/>
+<EuiHorizontalRule />