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

package/addon/components/eui-beta-badge/index.hbs

@@ -1,19 +1,171 @@
-{{! TODO: Eui Tooltip and update this component to support it. }}
-<span
-  class={{class-names "euiBetaBadge" (if @iconType "euiBetaBadge--iconOnly")}}
-  title={{@title}}
-  ...attributes
->
-  {{#if (has-block)}}
-    {{yield}}
-  {{else if @iconType}}
-    <EuiIcon
-      @iconClasses="euiBetaBadge__icon"
-      @type={{@iconType}}
-      @size="m"
-      aria-hidden="true"
-    />
-  {{else}}
-    {{@label}}
-  {{/if}}
-</span>
+{{#let
+  (arg-or-default @size "m")
+  (eq @label.length 1)
+  (arg-or-default @tooltipPosition "top")
+  as |size singleLetter tooltipPosition|
+}}
+
+  {{#let
+    (class-names
+      (if @iconType "euiBetaBadge--iconOnly")
+      (if singleLetter "euiBetaBadge--singleLetter")
+      (if (or @onClick @href) "euiBetaBadge-isClickable")
+      componentName="EuiBetaBadge"
+      color=(arg-or-default @color "hollow")
+      size=size
+    )
+    as |classes|
+  }}
+
+    {{#if (or @href @onClick)}}
+      {{#if @href}}
+        <a
+          aria-label={{@onClickAriaLabel}}
+          title={{if @label @label @title}}
+          class={{classes}}
+          href={{@href}}
+          target={{@target}}
+          rel={{@rel}}
+          ...attributes
+        >
+          {{#if (has-block)}}
+            {{yield}}
+          {{else if @iconType}}
+            <EuiIcon
+              @iconClasses="euiBetaBadge__icon"
+              @type={{@iconType}}
+              @size={{if (eq size "m") "m" "s"}}
+              aria-hidden="true"
+              @color="inherit"
+            />
+          {{else}}
+            {{@label}}
+          {{/if}}
+        </a>
+      {{else}}
+        <button
+          type="button"
+          aria-label={{@onClickAriaLabel}}
+          title={{if @label @label @title}}
+          class={{classes}}
+          {{on "click" @onClick}}
+          ...attributes
+        >
+          {{#if (has-block)}}
+            {{yield}}
+          {{else if @iconType}}
+            <EuiIcon
+              @iconClasses="euiBetaBadge__icon"
+              @type={{@iconType}}
+              @size={{if (eq size "m") "m" "s"}}
+              aria-hidden="true"
+              @color="inherit"
+            />
+          {{else}}
+            {{@label}}
+          {{/if}}
+        </button>
+      {{/if}}
+
+      {{#if @tooltipContent}}
+        <EuiToolTip
+          @position={{tooltipPosition}}
+          @title={{or @title @label}}
+          @content={{@tooltipContent}}
+        >
+          {{#if @href}}
+            <a
+              aria-label={{@onClickAriaLabel}}
+              title={{if @label @label @title}}
+              class={{classes}}
+              href={{@href}}
+              target={{@target}}
+              rel={{@rel}}
+              ...attributes
+            >
+              {{#if (has-block)}}
+                {{yield}}
+              {{else if @iconType}}
+                <EuiIcon
+                  @iconClasses="euiBetaBadge__icon"
+                  @type={{@iconType}}
+                  @size={{if (eq size "m") "m" "s"}}
+                  aria-hidden="true"
+                  @color="inherit"
+                />
+              {{else}}
+                {{@label}}
+              {{/if}}
+            </a>
+          {{else}}
+            <button
+              type="button"
+              aria-label={{@onClickAriaLabel}}
+              title={{if @label @label @title}}
+              class={{classes}}
+              {{on "click" @onClick}}
+              ...attributes
+            >
+              {{#if (has-block)}}
+                {{yield}}
+              {{else if @iconType}}
+                <EuiIcon
+                  @iconClasses="euiBetaBadge__icon"
+                  @type={{@iconType}}
+                  @size={{if (eq size "m") "m" "s"}}
+                  aria-hidden="true"
+                  @color="inherit"
+                />
+              {{else}}
+                {{@label}}
+              {{/if}}
+            </button>
+          {{/if}}
+        </EuiToolTip>
+      {{/if}}
+    {{else}}
+      {{#if @tooltipContent}}
+        <EuiToolTip
+          @position={{tooltipPosition}}
+          @title={{or @title @label}}
+          @content={{@tooltipContent}}
+        >
+          <span tabindex="0" class={{classes}} ...attributes>
+            {{#if (has-block)}}
+              {{yield}}
+            {{else if @iconType}}
+              <EuiIcon
+                @iconClasses="euiBetaBadge__icon"
+                @type={{@iconType}}
+                @size={{if (eq size "m") "m" "s"}}
+                aria-hidden="true"
+                @color="inherit"
+              />
+            {{else}}
+              {{@label}}
+            {{/if}}
+          </span>
+        </EuiToolTip>
+      {{else}}
+        <span class={{classes}} title={{@title}} ...attributes>
+          {{#if (has-block)}}
+            {{yield}}
+          {{else if @iconType}}
+            <EuiIcon
+              @iconClasses="euiBetaBadge__icon"
+              @type={{@iconType}}
+              @size={{if (eq size "m") "m" "s"}}
+              aria-hidden="true"
+              @color="inherit"
+            />
+          {{else}}
+            {{@label}}
+          {{/if}}
+        </span>
+      {{/if}}
+
+    {{/if}}
+
+  {{/let}}
+
+{{/let}}

package/addon/components/eui-bottom-bar/index.hbs

@@ -1,29 +1,60 @@
-{{!-- TODO: Add landmarkSupport after having an <EuiI18n> component support --}}
-<EuiPortal>
+{{! TODO: Add landmarkSupport after having an <EuiI18n> component support }}
+{{#if this.usePortal}}
+  <EuiPortal>
+    <section
+      style={{this.bottomBarStyles}}
+      {{resize-observer onResize=(set this "dimensions")}}
+      class={{class-names
+        componentName="EuiBottomBar"
+        paddingSize=(arg-or-default @paddingSize "m")
+        positionType=(arg-or-default this.position "fixed")
+      }}
+      {{this.updateDisplacementModifier
+        affordForDisplacement=this.affordForDisplacement
+        usePortal=this.usePortal
+        dimensions=this.dimensions
+        bodyClassName=@bodyClassName
+      }}
+      ...attributes
+    >
+      {{yield}}
+    </section>
+  </EuiPortal>
+{{else}}
   <section
+    style={{this.bottomBarStyles}}
+    {{resize-observer onResize=(set this "dimensions")}}
     class={{class-names
       componentName="EuiBottomBar"
       paddingSize=(arg-or-default @paddingSize "m")
+      positionType=(arg-or-default this.position "fixed")
+    }}
+    aria-label={{if @landmarkHeading @landmarkHeading "Page level controls"}}
+    {{this.updateDisplacementModifier
+      affordForDisplacement=this.affordForDisplacement
+      usePortal=this.usePortal
+      dimensions=this.dimensions
+      bodyClassName=@bodyClassName
     }}
-    {{!-- aria-label={{if @landmarkHeading @landmarkHeading "Page level controls"}} --}}
-    {{did-insert this.didInsert}}
-    {{did-update this.updateDisplacement this.affordForDisplacement}}
     ...attributes
   >
-    {{!-- <div {{screen-reader-only}}>
+    <div {{screen-reader-only}}>
       <h2>
         {{if @landmarkHeading @landmarkHeading "Page level controls"}}
       </h2>
-    </div> --}}
+    </div>
     {{yield}}
   </section>
-  {{!-- <div {{screen-reader-only}}>
+  <div {{screen-reader-only}}>
     <p aria-live="assertive">
       {{#if @landmarkHeading}}
-        There is a new region landmark called {{@landmarkHeading}} with page level controls at the end of the document.
+        There is a new region landmark called
+        {{@landmarkHeading}}
+        with page level controls at the end of the document.
       {{else}}
-        There is a new region landmark with page level controls at the end of the document.
+        There is a new region landmark with page level controls at the end of
+        the document.
       {{/if}}
     </p>
-  </div> --}}
-</EuiPortal>
+  </div>
+{{/if}}

package/addon/components/eui-bottom-bar/index.ts

@@ -1,51 +1,94 @@
 import GlimmerComponent from '@glimmer/component';
-import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+import { modifier } from 'ember-modifier';
 
-interface EuiButtomBarArgs {
+export interface EuiButtomBarArgs {
   affordForDisplacement: boolean;
   bodyClassName: string;
+  position?: 'fixed' | 'static' | 'sticky';
+  usePortal: boolean;
+  paddingSize?: 'none' | 's' | 'm' | 'l';
+  landmarkHeading?: string;
+  top: number;
+  right: number;
+  left: number;
+  bottom: number;
 }
-export default class EuiBottomBarComponent extends GlimmerComponent<EuiButtomBarArgs> {
-  get affordForDisplacement(): boolean {
-    return this.args.affordForDisplacement ?? true;
+
+const updateDisplacementModifier = modifier(function (
+  _element: Element,
+  _pos: unknown[],
+  {
+    affordForDisplacement,
+    usePortal,
+    bodyClassName,
+    dimensions
+  }: {
+    affordForDisplacement: boolean;
+    usePortal: boolean;
+    bodyClassName: string;
+    dimensions: { height: number };
+  }
+) {
+  if (affordForDisplacement && usePortal) {
+    document.body.style.paddingBottom = `${dimensions.height}px`;
+  }
+
+  if (bodyClassName) {
+    document.body.classList.add(bodyClassName);
   }
 
-  @action
-  didInsert(element: HTMLElement): void {
-    if (this.affordForDisplacement) {
-      const height = element.clientHeight;
-      document.body.style.paddingBottom = `${height}px`;
+  return () => {
+    if (affordForDisplacement && usePortal) {
+      document.body.style.paddingBottom = '';
     }
 
-    if (this.args.bodyClassName) {
-      document.body.classList.add(this.args.bodyClassName);
+    if (bodyClassName) {
+      document.body.classList.remove(bodyClassName);
     }
+  };
+});
+
+export default class EuiBottomBarComponent extends GlimmerComponent<EuiButtomBarArgs> {
+  updateDisplacementModifier = updateDisplacementModifier;
+
+  @tracked dimensions: { height: number; width: number } | undefined;
+
+  get affordForDisplacement(): boolean {
+    return this.position !== 'fixed'
+      ? false
+      : this.args.affordForDisplacement ?? true;
   }
 
-  @action
-  updateDisplacement(element: HTMLElement): void {
-    const prevAffordForDisplacement = document.body.style.paddingBottom !== '';
-    if (prevAffordForDisplacement !== this.affordForDisplacement) {
-      if (this.affordForDisplacement) {
-        // start affording for displacement
-        const height = element.clientHeight;
-        document.body.style.paddingBottom = `${height}px`;
-      } else {
-        // stop affording for displacement
-        document.body.style.paddingBottom = '';
-      }
-    }
+  get usePortal(): boolean {
+    return this.position !== 'fixed' ? false : true;
+  }
 
-    //TODO: Add/Remove bodyClassName prop from body classes when updated
+  get position(): string {
+    return this.args.position || 'fixed';
   }
 
-  willDestroy(): void {
-    if (this.affordForDisplacement) {
-      document.body.style.paddingBottom = '';
-    }
+  get top(): number {
+    return this.args.top ? this.args.top : 0;
+  }
+
+  get right(): number {
+    return this.args.right ? this.args.right : 0;
+  }
+
+  get left(): number {
+    return this.args.left ? this.args.left : 0;
+  }
+
+  get bottom(): number {
+    return this.args.bottom ? this.args.bottom : 0;
+  }
 
-    if (this.args.bodyClassName) {
-      document.body.classList.remove(this.args.bodyClassName);
+  get bottomBarStyles(): string {
+    if (this.position === 'fixed') {
+      return `left:${this.left}px;right:${this.right}px;bottom:${this.bottom}px`;
+    } else {
+      return `top:${this.top}px;left:${this.left}px;right:${this.right}px;bottom:${this.bottom}px`;
     }
   }
 }

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

@@ -0,0 +1,98 @@
+<nav
+  {{this.onWidowResize
+    functionToCallOnWindowResize=this.functionToCallOnWindowResize
+  }}
+  class={{class-names
+    "euiBreadcrumbs"
+    (if this.truncate "euiBreadcrumbs--truncate")
+  }}
+  ...attributes
+>
+  <ol class="euiBreadcrumbs__list">
+
+    {{#each this.limitedBreadcrumbs.breadcrumbs as |breadcrumb index|}}
+
+      {{#if breadcrumb.ellipsis}}
+        {{#let (use-state false) as |popOverState|}}
+          <li class="euiBreadcrumb euiBreadcrumb--collapsed">
+            <EuiPopover
+              @isOpen={{popOverState.value}}
+              @closePopover={{fn popOverState.setState false}}
+            >
+              <:button>
+                <EuiLink
+                  class="euiBreadcrumb__content"
+                  @color="subdued"
+                  @aria-label="See collapsed breadcrumbs"
+                  title="See collapsed breadcrumbs"
+                  {{on "click" (fn popOverState.setState true)}}
+                >
+                  &hellip;<EuiIcon @type="arrowDown" @size="s" />
+                </EuiLink>
+              </:button>
+              <:content>
+                <EuiBreadcrumbs
+                  class="euiBreadcrumbs__inPopover"
+                  @breadcrumbs={{this.limitedBreadcrumbs.overflowBreadcrumbs}}
+                  @responsive={{false}}
+                  @truncate={{false}}
+                  @max={{0}}
+                />
+              </:content>
+            </EuiPopover>
+
+          </li>
+
+        {{/let}}
+      {{else}}
+        <EuiInnerText as |setInnerTextRef innerText|>
+          {{#let
+            (eq index (sub this.limitedBreadcrumbs.breadcrumbs.length 1))
+            (if (eq innerText "") undefined innerText)
+            as |isLastBreadcrumb title|
+          }}
+            <li
+              class={{class-names
+                "euiBreadcrumb"
+                (if isLastBreadcrumb "euiBreadcrumb--last")
+                (if breadcrumb.truncate "euiBreadcrumb--truncate")
+              }}
+            >
+              {{#if (and (not breadcrumb.href) (not breadcrumb.onClick))}}
+                <span
+                  {{did-insert setInnerTextRef}}
+                  title={{title}}
+                  class={{class-names
+                    "euiBreadcrumb__content"
+                    breadcrumb.className
+                  }}
+                  aria-current={{if isLastBreadcrumb "page" undefined}}
+                >
+                  {{breadcrumb.text}}
+                </span>
+              {{else}}
+                <EuiLink
+                  {{did-insert setInnerTextRef}}
+                  @color={{if isLastBreadcrumb "text" "subdued"}}
+                  @onClick={{breadcrumb.onClick}}
+                  @href={{breadcrumb.href}}
+                  title={{title}}
+                  class={{class-names
+                    "euiBreadcrumb__content"
+                    breadcrumb.className
+                  }}
+                  aria-current={{if isLastBreadcrumb "page" undefined}}
+                >
+                  {{breadcrumb.text}}
+                </EuiLink>
+              {{/if}}
+
+            </li>
+          {{/let}}
+        </EuiInnerText>
+      {{/if}}
+
+    {{/each}}
+
+  </ol>
+</nav>

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

@@ -0,0 +1,194 @@
+import { throttle } from '@ember/runloop';
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { EuiBreakpointSize, getBreakpoint } from '../../utils/breakpoint';
+import { cached, tracked } from '@glimmer/tracking';
+
+export type EuiBreadcrumbResponsiveMaxCount = {
+  /**
+   * Any of the following keys are allowed: `'xs' | 's' | 'm' | 'l' | 'xl'`
+   * Omitting a key will display all breadcrumbs at that breakpoint
+   */
+  [key in EuiBreakpointSize]?: number;
+};
+
+const responsiveDefault: EuiBreadcrumbResponsiveMaxCount = {
+  xs: 1,
+  s: 2,
+  m: 4
+};
+
+export type EuiBreadcrumb = {
+  /**
+   * Visible label of the breadcrumb
+   */
+  text: string;
+  href?: string;
+  onClick?: (e: MouseEvent) => void;
+  /**
+   * Force a max-width on the breadcrumb text
+   */
+  truncate?: boolean;
+
+  'aria-current': string;
+};
+
+const onWindowResizeModifier = modifier(
+  (
+    _ele: HTMLElement,
+    _pos,
+    {
+      functionToCallOnWindowResize
+    }: { isDocked: boolean; functionToCallOnWindowResize: () => void }
+  ) => {
+    window.addEventListener('resize', functionToCallOnWindowResize);
+
+    return () => {
+      window.removeEventListener('resize', functionToCallOnWindowResize);
+    };
+  }
+);
+
+const limitedBreadcrumbs = (max: number, breadcrumbs: EuiBreadcrumb[]) => {
+  const breadcrumbsAtStart = [];
+  const breadcrumbsAtEnd = [];
+  const limit = Math.min(max, breadcrumbs.length);
+  const start = Math.floor(limit / 2);
+  const overflowBreadcrumbs = breadcrumbs.slice(
+    start,
+    start + breadcrumbs.length - limit
+  );
+
+  if (overflowBreadcrumbs.length) {
+    overflowBreadcrumbs[overflowBreadcrumbs.length - 1]['aria-current'] =
+      'false';
+  }
+
+  for (let i = 0; i < limit; i++) {
+    // We'll alternate with displaying breadcrumbs at the end and at the start, but be biased
+    // towards breadcrumbs the end so that if max is an odd number, we'll have one more
+    // breadcrumb visible at the end than at the beginning.
+    const isEven = i % 2 === 0;
+
+    // We're picking breadcrumbs from the front AND the back, so we treat each iteration as a
+    // half-iteration.
+    const normalizedIndex = Math.floor(i * 0.5);
+    const indexOfBreadcrumb = isEven
+      ? breadcrumbs.length - 1 - normalizedIndex
+      : normalizedIndex;
+    const breadcrumb = breadcrumbs[indexOfBreadcrumb];
+
+    if (isEven) {
+      breadcrumbsAtEnd.unshift(breadcrumb);
+    } else {
+      breadcrumbsAtStart.push(breadcrumb);
+    }
+  }
+
+  if (max < breadcrumbs.length) {
+    breadcrumbsAtStart.push({ ellipsis: true });
+  }
+
+  return {
+    breadcrumbs: [...breadcrumbsAtStart, ...breadcrumbsAtEnd],
+    overflowBreadcrumbs
+  };
+};
+
+interface EuiBreadcrumbsComponentArgs {
+  /**
+   * Hides extra (above the max) breadcrumbs under a collapsed item as the window gets smaller.
+   * Pass a custom #EuiBreadcrumbResponsiveMaxCount object to change the number of breadcrumbs to show at the particular breakpoints.
+   *
+   * Pass `false` to turn this behavior off.
+   *
+   * Default: `{ xs: 1, s: 2, m: 4 }`
+   */
+  responsive?: boolean | EuiBreadcrumbResponsiveMaxCount;
+
+  /**
+   * Forces all breadcrumbs to single line and
+   * truncates each breadcrumb to a particular width,
+   * except for the last item
+   */
+  truncate?: boolean;
+
+  /**
+   * Collapses the inner items past the maximum set here
+   * into a single ellipses item.
+   * Omitting or passing a `0` value will show all breadcrumbs.
+   */
+  max?: number | null;
+
+  /**
+   * The array of individual #EuiBreadcrumb items
+   */
+  breadcrumbs: EuiBreadcrumb[];
+}
+
+export default class EuiBreadcrumbsComponent extends Component<EuiBreadcrumbsComponentArgs> {
+  onWidowResize = onWindowResizeModifier;
+  @tracked currentBreakpoint;
+
+  constructor(owner: unknown, args: EuiBreadcrumbsComponentArgs) {
+    super(owner, args);
+    this.currentBreakpoint = getBreakpoint(
+      typeof window === 'undefined' ? -Infinity : window.innerWidth
+    );
+  }
+
+  functionToCallOnWindowResize = () => {
+    throttle(() => {
+      const newBreakpoint = getBreakpoint(window.innerWidth);
+      if (newBreakpoint !== this.currentBreakpoint) {
+        this.currentBreakpoint = newBreakpoint;
+      }
+    }, 50);
+  };
+
+  get responsiveObject() {
+    return typeof this.args.responsive === 'object'
+      ? this.args.responsive
+      : responsiveDefault;
+  }
+
+  get max() {
+    if (this.args.max === null) {
+      return null;
+    }
+    return this.args.max ?? 5;
+  }
+
+  get truncate() {
+    return this.args.truncate ?? true;
+  }
+
+  get calculatedMax(): EuiBreadcrumbsComponentArgs['max'] {
+    // The max property collapses any breadcrumbs past the max quantity.
+    // This is the same behavior we want for responsiveness.
+    // So calculate the max value based on the combination of `max` and `responsive`
+    let calculatedMax: EuiBreadcrumbsComponentArgs['max'] = this.max;
+    // Set the calculated max to the number associated with the currentBreakpoint key if it exists
+    if (
+      this.args.responsive &&
+      this.responsiveObject[this.currentBreakpoint as EuiBreakpointSize]
+    ) {
+      calculatedMax =
+        this.responsiveObject[this.currentBreakpoint as EuiBreakpointSize];
+    }
+    // Final check is to make sure max is used over a larger breakpoint value
+    if (this.max && calculatedMax) {
+      calculatedMax = this.max < calculatedMax ? this.max : calculatedMax;
+    }
+
+    return calculatedMax;
+  }
+
+  @cached
+  get limitedBreadcrumbs() {
+    const calculatedMax = this.calculatedMax;
+    return calculatedMax
+      ? limitedBreadcrumbs(calculatedMax, this.args.breadcrumbs)
+      : { breadcrumbs: this.args.breadcrumbs };
+  }
+}