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

package/addon/components/eui-side-nav/index.hbs

@@ -1,36 +1,161 @@
-<nav class={{class-names "euiSideNav" (if @isOpenMobile "euiSideNav-isOpenMobile")}} ...attributes>
-  <button
-    type="button"
-    class="euiSideNav__mobileToggle euiLink"
-    {{on "click" (fn (optional @toggleOpenOnMobile) (not @isOpenMobile))}}
-  >
-    <span class="euiSideNav__mobileWrap">
-      <span class="euiSideNav__mobileTitle">
-        {{@mobileTitle}}
-      </span>
-      <EuiIcon @iconClasses="euiSideNav__mobileIcon" @type="apps" @size="m" aria-hidden="true" />
-    </span>
-  </button>
-  <div class="euiSideNav__content">
-    {{#each @items as |item|}}
-      <EuiSideNavItem
-        @selectedItem={{@selectedItem}}
-        @isOpen={{is-item-open item @selectedItem}}
-        @isSelected={{eq item.id item.isSelected}}
-        @isParent={{not (not item.items)}}
-        @icon={{item.icon}}
-        @onClick={{item.onClick}}
-        @href={{item.href}}
-        @className={{item.className}}
-        @rel={{item.rel}}
-        @target={{item.target}}
-        @items={{item.items}}
-        @key={{item.id}}
-        @depth={{0}}
-        @renderItem={{item.renderItem}}
-      >
-        {{item.name}}
-      </EuiSideNavItem>
-    {{/each}}
-  </div>
-</nav>
+{{#let
+  (class-names "euiSideNav" (if @isOpenMobile "euiSideNav-isOpenMobile"))
+  (element (arg-or-default @headingProps.element "h2"))
+  (arg-or-default @headingProps.id (unique-id))
+  (unique-id)
+  (or (has-block "heading") (not (not @heading)))
+  as |classes HeadingElement headingId sideNavContentId hasHeader|
+}}
+  {{#if this.hasMobileVersion}}
+    <EuiShowFor @sizes={{this.mobileBreakpoints}}>
+      <nav aria-labelledby={{headingId}} class={{classes}} ...attributes>
+        <HeadingElement id={{headingId}} class={{@headingProps.className}}>
+          <EuiButtonEmpty
+            type="button"
+            class="euiSideNav__mobileToggle"
+            @contentClasses="euiSideNav__mobileToggleContent"
+            @textClasses="euiSideNav__mobileToggleText"
+            {{on
+              "click"
+              (fn (optional @toggleOpenOnMobile) (not @isOpenMobile))
+            }}
+            @iconType="apps"
+            @iconSide="right"
+            aria-controls={{sideNavContentId}}
+            aria-expanded={{@isOpenMobile}}
+          >
+            {{#if @mobileTitle}}
+              {{@mobileTitle}}
+            {{else if (has-block "heading")}}
+              {{yield to="heading"}}
+            {{else}}
+              {{@heading}}
+            {{/if}}
+          </EuiButtonEmpty>
+        </HeadingElement>
+        <div id={{sideNavContentId}} class={{this.contentClasses}}>
+          {{#each @items as |item|}}
+            {{#let
+              (and (not item.onClick) (not item.href) (not (not item.items)))
+              as |childrenOnly|
+            }}
+              <EuiSideNavItem
+                @selectedItem={{@selectedItem}}
+                @isOpen={{is-item-open item @selectedItem}}
+                @isSelected={{and
+                  (not childrenOnly)
+                  (eq item.id item.isSelected)
+                }}
+                @isParent={{not (not item.items)}}
+                @icon={{item.icon}}
+                @onClick={{item.onClick}}
+                @href={{item.href}}
+                @className={{item.className}}
+                @rel={{item.rel}}
+                @target={{item.target}}
+                @items={{item.items}}
+                @key={{item.id}}
+                @depth={{0}}
+                @renderItem={{item.renderItem}}
+                @disabled={{item.disabled}}
+                @truncate={{item.truncate}}
+                @emphasize={{item.emphasize}}
+                @buttonClassName={{item.buttonClassName}}
+                @childrenOnly={{childrenOnly}}
+              >
+                {{item.name}}
+              </EuiSideNavItem>
+            {{/let}}
+          {{/each}}
+        </div>
+      </nav>
+    </EuiShowFor>
+  {{/if}}
+
+  <EuiHideFor @sizes={{this.mobileBreakpoints}}>
+    <nav
+      aria-labelledby={{if hasHeader headingId}}
+      class={{classes}}
+      ...attributes
+    >
+      {{#if hasHeader}}
+        {{#let
+          (arg-or-default @headingProps.screenReaderOnly false)
+          as |screenReaderOnly|
+        }}
+          {{#if (has-block "heading")}}
+            {{#if screenReaderOnly}}
+              <HeadingElement {{screen-reader-only}}>
+                {{yield to="heading"}}
+              </HeadingElement>
+            {{else}}
+              <EuiTitle
+                class={{class-names
+                  "euiSideNav__heading"
+                  @headingProps.className
+                }}
+                @size="xs"
+              >
+                <HeadingElement>
+                  {{yield to="heading"}}
+                </HeadingElement>
+              </EuiTitle>
+            {{/if}}
+          {{else}}
+            {{#if screenReaderOnly}}
+              <HeadingElement {{screen-reader-only}}>
+                {{@heading}}
+              </HeadingElement>
+            {{else}}
+              <EuiTitle
+                class={{class-names
+                  "euiSideNav__heading"
+                  @headingProps.className
+                }}
+                @size="xs"
+              >
+                {{@heading}}
+              </EuiTitle>
+            {{/if}}
+          {{/if}}
+        {{/let}}
+      {{/if}}
+      <div id={{sideNavContentId}} class={{this.contentClasses}}>
+        {{#each @items as |item|}}
+          {{#let
+            (and (not item.onClick) (not item.href) (not (not item.items)))
+            as |childrenOnly|
+          }}
+            <EuiSideNavItem
+              @selectedItem={{@selectedItem}}
+              @isOpen={{is-item-open item @selectedItem}}
+              @isSelected={{and
+                (not childrenOnly)
+                (eq item.id item.isSelected)
+              }}
+              @isParent={{not (not item.items)}}
+              @icon={{item.icon}}
+              @onClick={{item.onClick}}
+              @href={{item.href}}
+              @className={{item.className}}
+              @rel={{item.rel}}
+              @target={{item.target}}
+              @items={{item.items}}
+              @key={{item.id}}
+              @depth={{0}}
+              @renderItem={{item.renderItem}}
+              @disabled={{item.disabled}}
+              @truncate={{item.truncate}}
+              @emphasize={{item.emphasize}}
+              @buttonClassName={{item.buttonClassName}}
+              @childrenOnly={{childrenOnly}}
+            >
+              {{item.name}}
+            </EuiSideNavItem>
+          {{/let}}
+        {{/each}}
+      </div>
+    </nav>
+  </EuiHideFor>
+
+{{/let}}

package/addon/components/eui-side-nav/index.ts

@@ -0,0 +1,28 @@
+import Component from '@glimmer/component';
+
+export interface EuiSideNavArgs {
+  /**
+   * Required otherwise nothing ever gets returned
+   */
+  children: Component;
+
+  mobileBreakpoints?: string[];
+}
+
+export default class EuiSideNavComponent extends Component<EuiSideNavArgs> {
+  get mobileBreakpoints() {
+    return this.args.mobileBreakpoints || ['xs', 's'];
+  }
+
+  get contentClasses() {
+    return `euiSideNav__content ${this.mobileBreakpoints
+      .map?.((breakpointName) => {
+        return `euiSideNav__contentMobile-${breakpointName}`;
+      })
+      .join(' ')}`;
+  }
+
+  get hasMobileVersion() {
+    return this.mobileBreakpoints?.length > 0;
+  }
+}

package/addon/components/eui-side-nav-item/button/index.hbs

@@ -1,15 +1,27 @@
-<span class="euiSideNavItemButton__content">
-  {{#if @icon}}
-    <EuiIcon
-      @type={{@icon}}
-      @size="m"
-      @iconClasses={{class-names "euiSideNavItemButton__icon" @buttonIconClasses}}
-    />
-  {{/if}}
-  <span class="euiSideNavItemButton__label">
-    {{yield}}
+{{#let (arg-or-default @truncate true) as |truncate|}}
+  <span class="euiSideNavItemButton__content">
+    {{#if @icon}}
+      <EuiIcon
+        @type={{@icon}}
+        @size="m"
+        class={{class-names "euiSideNavItemButton__icon" @buttonIconClasses}}
+      />
+    {{/if}}
+
+    <EuiInnerText as |setRef innerText|>
+      <span
+        class={{class-names
+          "euiSideNavItemButton__label"
+          (if truncate "euiSideNavItemButton__label--truncated")
+        }}
+        {{did-insert setRef}}
+        title={{if truncate innerText}}
+      >
+        {{yield}}
+      </span>
+    </EuiInnerText>
+    {{#if @caret}}
+      <EuiIcon @type="arrowDown" @color="subdued" @size="s" />
+    {{/if}}
   </span>
-  {{#if @caret}}
-    <EuiIcon @type="arrowDown" @color="subdued" @size="s" />
-  {{/if}}
-</span>
+{{/let}}

package/addon/components/eui-side-nav-item/index.hbs

@@ -6,19 +6,24 @@
     (if (and (eq @depth 0) @icon) "euiSideNavItem--rootIcon")
     (if (gt @depth 1) "euiSideNavItem--branch")
     (if @items.length "euiSideNavItem--hasChildItems")
+    (if @emphasize "euiSideNavItem--emphasized")
   }}
 >
   {{#let
     (class-names
       "euiSideNavItemButton"
       (if (or @onClick @href) "euiSideNavItemButton--isClickable")
-      (if (and (gt @depth 0) @isOpen (not @isSelected)) "euiSideNavItemButton-isOpen")
+      (if
+        (and (gt @depth 0) @isOpen (not @isSelected))
+        "euiSideNavItemButton-isOpen"
+      )
       (if @isSelected "euiSideNavItemButton-isSelected")
-      @className
+      @buttonClassName
     )
-    (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected)) as |className caret|
+    (and (gt @depth 0) @isParent (not @isOpen) (not @isSelected))
+    as |className caret|
   }}
-    {{#if @href}}
+    {{#if (and @href (not @disabled))}}
       <a
         class={{className}}
         href={{@href}}
@@ -34,10 +39,16 @@
           {{yield}}
         </EuiSideNavItem::Button>
       </a>
-    {{else if @onClick}}
-      <button type="button" class={{className}} {{on "click" @onClick}}>
+    {{else if (or @onClick @disabled)}}
+      <button
+        type="button"
+        class={{className}}
+        disabled={{@disabled}}
+        {{on "click" @onClick}}
+      >
         <EuiSideNavItem::Button
           @icon={{@icon}}
+          @truncate={{@truncate}}
           @buttonIconClasses={{@buttonIconClasses}}
           @caret={{caret}}
         >
@@ -48,6 +59,7 @@
       <div class={{className}}>
         <EuiSideNavItem::Button
           @icon={{@icon}}
+          @truncate={{@truncate}}
           @buttonIconClasses={{@buttonIconClasses}}
           @caret={{caret}}
         >
@@ -59,25 +71,40 @@
   {{#if (or (eq @depth 0) (and @items.length @isOpen))}}
     <div class="euiSideNavItem__items">
       {{#each @items as |item|}}
-        <EuiSideNavItem
-          @selectedItem={{@selectedItem}}
-          @isOpen={{is-item-open item @selectedItem}}
-          @isSelected={{eq item.id @selectedItem}}
-          @isParent={{not (not item.items)}}
-          @icon={{item.icon}}
-          @onClick={{item.onClick}}
-          @href={{item.href}}
-          @className={{item.className}}
-          @rel={{item.rel}}
-          @target={{item.target}}
-          @items={{item.items}}
-          @key={{item.id}}
-          @depth={{add @depth 1}}
-          @name={{item.name}}
-          @renderItem={{item.renderItem}}
-        >
-          {{item.name}}
-        </EuiSideNavItem>
+        {{#let
+          (and
+            (gt @depth 0)
+            (not item.onClick)
+            (not item.href)
+            (not (not item.items))
+          )
+          as |childrenOnly|
+        }}
+          <EuiSideNavItem
+            @selectedItem={{@selectedItem}}
+            @isOpen={{is-item-open item @selectedItem}}
+            @isSelected={{and (not childrenOnly) (eq item.id @selectedItem)}}
+            @isParent={{not (not item.items)}}
+            @icon={{item.icon}}
+            @onClick={{item.onClick}}
+            @href={{item.href}}
+            @className={{item.className}}
+            @rel={{item.rel}}
+            @target={{item.target}}
+            @items={{item.items}}
+            @key={{item.id}}
+            @depth={{add @depth 1}}
+            @name={{item.name}}
+            @renderItem={{item.renderItem}}
+            @disabled={{item.disabled}}
+            @truncate={{item.truncate}}
+            @emphasize={{item.emphasize}}
+            @buttonClassName={{item.buttonClassName}}
+            @childrenOnly={{childrenOnly}}
+          >
+            {{item.name}}
+          </EuiSideNavItem>
+        {{/let}}
       {{/each}}
     </div>
   {{/if}}

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

@@ -0,0 +1,10 @@
+<EuiPanel
+  class="euiSplitPanel__inner"
+  @hasShadow={{arg-or-default @hasShadow false}}
+  @color={{arg-or-default @color "transparent"}}
+  @borderRadius={{arg-or-default @borderRadius "none"}}
+  @hasBorder={{arg-or-default @hasBorder false}}
+  ...attributes
+>
+	{{yield}}
+</EuiPanel>

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

@@ -0,0 +1,27 @@
+{{#let
+  (arg-or-default @direction "column")
+  (arg-or-default @responsive (array "xs" "s"))
+  as |direction responsive|
+}}
+  <EuiPanel
+    class={{class-names
+      "euiSplitPanel"
+      (if (eq direction "row") "euiSplitPanel--row")
+      (if this.isResponsive "euiSplitPanel-isResponsive")
+    }}
+    @grow={{arg-or-default @grow false}}
+    @paddingSize={{arg-or-default @paddingSize "none"}}
+    @hasShadow={{@hasShadow}}
+    @color={{@color}}
+    @borderRadius={{@borderRadius}}
+    @hasBorder={{@hasBorder}}
+    {{this.isWithinBreakpointsModifier
+      sizes=responsive
+      isActive=(not (not responsive))
+      setIsWithinBreakpointsValue=(set this "isResponsive")
+    }}
+    ...attributes
+  >
+    {{yield}}
+  </EuiPanel>
+{{/let}}

package/addon/components/eui-split-panel/outer/index.ts

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import {
+  EuiBreakpointSize,
+  isWithinBreakpoints
+} from '../../../utils/breakpoint';
+import { modifier } from 'ember-modifier';
+import { tracked } from '@glimmer/tracking';
+
+const isWithinBreakpointsModifier = modifier(function (
+  _element: Element,
+  _pos: unknown[],
+  {
+    sizes,
+    isActive = true,
+    setIsWithinBreakpointsValue
+  }: {
+    sizes: EuiBreakpointSize[];
+    isActive: boolean;
+    setIsWithinBreakpointsValue: (value: boolean) => void;
+  }
+) {
+  function handleResize() {
+    setIsWithinBreakpointsValue(isWithinBreakpoints(window.innerWidth, sizes));
+  }
+
+  if (isActive) {
+    window.removeEventListener('resize', handleResize);
+    window.addEventListener('resize', handleResize);
+    handleResize();
+  }
+
+  return () => window.removeEventListener('resize', handleResize);
+});
+export default class EuiSplitPanelOuterComponent extends Component {
+  isWithinBreakpointsModifier = isWithinBreakpointsModifier;
+  @tracked isResponsive = false;
+}

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

@@ -8,14 +8,31 @@
     ...attributes
   >
     {{#if (eq @status "complete")}}
-      <EuiIcon @iconClasses="euiStepNumber__icon" @type="check" @size={{iconSize}} />
+      <EuiIcon
+        @iconClasses="euiStepNumber__icon"
+        @type="check"
+        @size={{iconSize}}
+      />
     {{else if (eq @status "warning")}}
-      <EuiIcon @iconClasses="euiStepNumber__icon" @type="alert" @size={{iconSize}} />
+      <EuiIcon
+        @iconClasses="euiStepNumber__icon"
+        @type="alert"
+        @size={{iconSize}}
+      />
     {{else if (eq @status "danger")}}
-      <EuiIcon @iconClasses="euiStepNumber__icon" @type="cross" @size={{iconSize}} />
+      <EuiIcon
+        @iconClasses="euiStepNumber__icon"
+        @type="cross"
+        @size={{iconSize}}
+      />
     {{else if (eq @status "loading")}}
-      <EuiLoadingSpinner class="euiStepNumber__loader" @size={{if (eq iconSize "s") "l" "xl"}} />
+      <span {{screen-reader-only}}>{{@stepAriaLabel}}</span>
+      <EuiLoadingSpinner
+        class="euiStepNumber__loader"
+        @size={{if (eq iconSize "s") "l" "xl"}}
+      />
     {{else}}
+      <span {{screen-reader-only}}>{{@stepAriaLabel}}</span>
       <span class="euiStepNumber__number" aria-hidden="true">
         {{@number}}
       </span>

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

@@ -1,3 +1,9 @@
-<div class="euiSteps" ...attributes>
+<div 
+
+   class={{class-names
+        "euiSteps"
+        status=(arg-or-default @status "incomplete")
+      }}
+ ...attributes>
   {{yield}}
 </div>

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

@@ -2,7 +2,8 @@
   {{#let
     (eq @selectedTabId id)
     (fn @onClick id)
-    (fn (optional @focusFn) id) as |isSelected onClick focusFn|
+    (fn (optional @focusFn) id)
+    as |isSelected onClick focusFn|
   }}
     {{#if (and @href (not @disabled))}}
       <a
@@ -18,11 +19,23 @@
         disabled={{@disabled}}
         ...attributes
         {{on "click" onClick}}
-        {{focus-tab @selectedTabId @disabled focusFn}}
+        {{this.focusTabModifier @selectedTabId @disabled focusFn}}
       >
+        {{#if (has-block "prepend")}}
+          <span className="euiTab__prepend">
+            {{yield to="prepend"}}
+          </span>
+        {{/if}}
+
         <span class="euiTab__content">
           {{yield}}
         </span>
+
+        {{#if (has-block "append")}}
+          <span className="euiTab__append">
+            {{yield to="append"}}
+          </span>
+        {{/if}}
       </a>
     {{else}}
       <button
@@ -38,11 +51,23 @@
         disabled={{@disabled}}
         ...attributes
         {{on "click" onClick}}
-        {{focus-tab @selectedTabId @disabled focusFn}}
+        {{this.focusTabModifier @selectedTabId @disabled focusFn}}
       >
+        {{#if (has-block "prepend")}}
+          <span className="euiTab__prepend">
+            {{yield to="prepend"}}
+          </span>
+        {{/if}}
+
         <span class="euiTab__content">
           {{yield}}
         </span>
+
+        {{#if (has-block "append")}}
+          <span className="euiTab__append">
+            {{yield to="append"}}
+          </span>
+        {{/if}}
       </button>
     {{/if}}
   {{/let}}

package/addon/{modifiers/focus-tab.ts → components/eui-tab/index.ts}

@@ -1,7 +1,8 @@
+import Component from '@glimmer/component';
 import { scheduleOnce } from '@ember/runloop';
 import { modifier } from 'ember-modifier';
 
-export default modifier(function focusTab(
+const focusTabModifier = modifier(function focusTab(
   _element: HTMLElement,
   [selectedTabId, isDisabled, focusFn]: [
     Tab,
@@ -17,3 +18,7 @@ export default modifier(function focusTab(
     scheduleOnce('afterRender', null, fn);
   }
 });
+
+export default class EuiTabComponent extends Component {
+  focusTabModifier = focusTabModifier;
+}

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

@@ -1,8 +1,13 @@
-{{#let (use-state (get-tab-id @selectedTab)) as |selectedTab|}}
+{{#let
+  (use-state (get-tab-id @selectedTab))
+  (if (eq @display "condensed") false (arg-or-default @bottomBorder true))
+  as |selectedTab bottomBorder|
+}}
   <div
     role="tablist"
     class={{class-names
       (if (arg-or-default @expand false) "euiTabs--expand")
+      (if bottomBorder "euiTabs--bottomBorder")
       @className
       componentName="EuiTabs"
       display=(arg-or-default @display "default")

package/addon/components/eui-tool-tip/index.hbs

@@ -7,8 +7,8 @@
     <span
       {{did-insert this.updateAttachTo}}
       {{did-update this.updateAttachTo @attachTo}}
-      {{did-update (if (eq @isShown true) this.showToolTip this.hideToolTip) @isShown}}
-      {{did-insert (if (eq @isShown true) this.showToolTip this.hideToolTip)}}
+      {{did-update (if (eq @isShown true) this.onFocus this.onBlur) @isShown}}
+      {{did-insert (if (eq @isShown true) this.onFocus this.onBlur)}}
     ></span>
   {{else}}
     <span
@@ -20,12 +20,11 @@
       }}
       {{did-insert this.didInsertAnchor}}
       {{on "mouseover" this.showToolTip}}
-      {{on "keyup" this.onKeyUp}}
-      {{on "focusin" this.showToolTip}}
-      {{on "focusout" this.hideToolTip}}
+      {{on "focusin" this.onFocus}}
+      {{on "focusout" this.onBlur}}
       {{on "mouseout" this.onMouseOut}}
-      {{did-update (if (eq @isShown true) this.showToolTip this.hideToolTip) @isShown}}
-      {{did-insert (if (eq @isShown true) this.showToolTip this.hideToolTip)}}
+      {{did-update (if (eq @isShown true) this.onFocus this.onBlur) @isShown}}
+      {{did-insert (if (eq @isShown true) this.onFocus this.onBlur)}}
     >
       {{#if hasAnchorBlock}}
         {{yield this.id to="anchor"}}