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

package/addon/components/eui-page-template/index.ts

@@ -0,0 +1,89 @@
+import Component from '@glimmer/component';
+import { EuiButtomBarArgs } from '../eui-bottom-bar';
+// import { action } from '@ember/object';
+// import { tracked } from '@glimmer/tracking';
+// import {
+//   getTransitionTimings,
+//   getWaitDuration,
+//   performOnFrame
+// } from '../../utils/transition';
+// import { findPopoverPosition, getElementZIndex } from '../../utils/popover';
+// import { EuiPopoverPosition } from '../../utils/popover/types';
+// import { cascadingMenuKeys } from '../../utils/accesibility';
+import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
+// import { tabbable } from 'tabbable';
+// import {
+//   anchorPositionMapping,
+//   displayMapping
+// } from '../../utils/css-mappings/eui-popover';
+// import { paddingSizeMapping } from '../../utils/css-mappings/eui-panel';
+// import { scheduleOnce, later, cancel } from '@ember/runloop';
+// import { assert } from '@ember/debug';
+// import { htmlSafe } from '@ember/template';
+
+export const TEMPLATES = [
+  'default',
+  'centeredBody',
+  'centeredContent',
+  'empty'
+] as const;
+
+export type EuiPageTemplateProps = {
+  template?: typeof TEMPLATES[number];
+  /**
+  //  * Gets passed along to the #EuiBottomBar component if `bottomBar` has contents
+  //  */
+  bottomBarProps?: EuiButtomBarArgs;
+  //  * Stretches or restricts the height to 100% of the parent;
+  //  * `true`: scrolls the EuiPageContentBody;
+  //  * `noscroll`: removes all scroll ability;
+  //  * Only works when `template = 'default | empty'` and breakpoint is `m` and above
+  //  */
+  fullHeight?: boolean;
+  /**
+   * Minimum height in which to enforce scrolling
+   */
+  minHeight?: number;
+};
+
+export default class EuiPageTemplate extends Component<EuiPageTemplateProps> {
+  // Defaults
+  @argOrDefault(460) minHeight!: number;
+  @argOrDefault(false) fullHeight!: boolean;
+  @argOrDefault('l') paddingSize!: string;
+  @argOrDefault('default') template!: typeof TEMPLATES[number];
+
+  get classes() {
+    return 'euiPageTemplate '.concat(this.fullHeightClass);
+  }
+
+  get fullHeightClass() {
+    return this.fullHeight && this.canFullHeight ? 'eui-fullHeight ' : '';
+  }
+
+  get yScrollClass() {
+    return this.fullHeight && this.canFullHeight ? 'eui-yScroll ' : '';
+  }
+
+  get canFullHeight() {
+    return this.template === 'default' || this.template === 'empty';
+  }
+
+  get pageBodyProps() {
+    return this.fullHeightClass;
+    // ...pageBodyProps,
+    // className: classNames(fullHeightClass, pageBodyProps?.className),
+  }
+
+  get pageContentProps() {
+    return this.yScrollClass;
+    // ...pageContentProps,
+    // className: classNames(yScrollClass, pageContentProps?.className),
+  }
+
+  get pageContentBodyProps() {
+    return this.fullHeightClass;
+    // ...pageContentBodyProps,
+    //className: classNames(fullHeightClass, pageContentBodyProps?.className),
+  }
+}

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

@@ -1,13 +1,59 @@
-<div
-  class={{class-names
-    (if (not-eq @hasShadow false) "euiPanel--shadow")
-    (if (eq @grow false) "euiPanel--flexGrowZero")
-    componentName="EuiPanel"
-    paddingSize=(arg-or-default @paddingSize "m")
-    borderRadius=(arg-or-default @borderRadius "m")
-    color=(arg-or-default @color "plain")
+{{#let
+  (arg-or-default @hasShadow true)
+  (arg-or-default @color "plain")
+  (arg-or-default @grow true)
+  as |hasShadow color grow|
+}}
+  {{#let
+    (eq color "plain")
+    (or (eq color "plain") (eq color "transparent"))
+    as |canHaveShadow canHaveBorder|
   }}
-  ...attributes
->
-  {{yield}}
-</div>
+    {{#if @onClick}}
+      <div
+        role="button"
+        class={{class-names
+          (if (arg-or-default @isClickable true) "euiPanel--isClickable")
+          (if (and canHaveShadow (eq hasShadow true)) "euiPanel--hasShadow")
+          (if
+            (and (not canHaveShadow) (eq hasShadow false)) "euiPanel--noShadow"
+          )
+          (if (and canHaveBorder (eq @hasBorder true)) "euiPanel--hasBorder")
+          (if
+            (and (not canHaveBorder) (eq @hasBorder false)) "euiPanel--noBorder"
+          )
+          (unless grow "euiPanel--flexGrowZero")
+          componentName="EuiPanel"
+          paddingSize=(arg-or-default @paddingSize "m")
+          borderRadius=(arg-or-default @borderRadius "m")
+          color=color
+        }}
+        {{on "click" @onClick}}
+        ...attributes
+      >
+        {{yield}}
+      </div>
+    {{else}}
+      <div
+        class={{class-names
+          (if (and canHaveShadow (eq hasShadow true)) "euiPanel--hasShadow")
+          (if
+            (and (not canHaveShadow) (eq hasShadow false)) "euiPanel--noShadow"
+          )
+          (if (and canHaveBorder (eq @hasBorder true)) "euiPanel--hasBorder")
+          (if
+            (and (not canHaveBorder) (eq @hasBorder false)) "euiPanel--noBorder"
+          )
+          (unless grow "euiPanel--flexGrowZero")
+          componentName="EuiPanel"
+          paddingSize=(arg-or-default @paddingSize "m")
+          borderRadius=(arg-or-default @borderRadius "m")
+          color=color
+        }}
+        ...attributes
+      >
+        {{yield}}
+      </div>
+    {{/if}}
+  {{/let}}
+{{/let}}

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

@@ -10,11 +10,12 @@
     (if (or (not this.hasArrow) @attachToAnchor) "euiPopover__panel-noArrow")
     (if @attachToAnchor "euiPopover__panel-isAttached")
     @panelClasses
-  ) as |descriptionId classes panelClasses|
+  )
+  as |descriptionId classes panelClasses|
 }}
   {{#if this.ownFocus}}
     <div
-      class="{{if this.isOpening "euiPopover-isOpen"}} {{classes}}"
+      class="{{if this.isOpening 'euiPopover-isOpen'}} {{classes}}"
       ...attributes
       {{did-insert this.didInsertPopover}}
       {{did-insert (optional @popoverRef)}}
@@ -33,9 +34,9 @@
         )
       }}
         <EuiPortal @insert={{@insert}}>
+          {{! template-lint-disable no-positive-tabindex }}
           <EuiPanel
             class={{panelClasses}}
-            tabindex={{if this.ownFocus "0"}}
             aria-live={{if this.ownFocus "off" "assertive"}}
             role="dialog"
             aria-label={{@ariaLabel}}
@@ -48,6 +49,7 @@
             {{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)
@@ -77,6 +79,7 @@
               </p>
             {{/if}}
             <div
+              tabindex={{this.tabindex}}
               {{mutation-observer
                 onMutation=this.onMutation
                 observerOptions=(hash
@@ -106,7 +109,8 @@
       >
         {{yield to="button"}}
       </div>
-      {{#if (and (not this.suppressingPopover) (or this.isOpen this.isClosing))
+      {{#if
+        (and (not this.suppressingPopover) (or this.isOpen this.isClosing))
       }}
         <EuiPortal @insert={{@insert}}>
           <EuiPanel

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

@@ -78,7 +78,7 @@ export type EuiPopoverArgs = {
    * document.querySelector() to find the DOM node), or a function that
    * returns a DOM node
    */
-  initialFocus?: FocusTarget;
+  initialFocus?: FocusTarget | false;
   /**
    * Passed directly to EuiPortal for DOM positioning. Both properties are
    * required if prop is specified
@@ -147,6 +147,8 @@ export type EuiPopoverArgs = {
    * Usually takes the `id` of the popover title
    */
   'aria-labelledby'?: string;
+
+  tabindex?: string | number;
 };
 
 type AnchorPosition = 'up' | 'right' | 'down' | 'left';
@@ -234,7 +236,7 @@ type CssProps = {
 export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
   // Defaults
   @argOrDefault(false) isOpen!: boolean;
-  @argOrDefault(false) ownFocus!: boolean;
+  @argOrDefault(true) ownFocus!: boolean;
   @argOrDefault('downCenter') anchorPosition!: PopoverAnchorPosition;
   @argOrDefault('m') panelPaddingSize!: PanelPaddingSize;
   @argOrDefault(true) hasArrow!: boolean;
@@ -257,6 +259,7 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
   private closingTransitionTimeout: ReturnType<typeof later> | null = null;
   private closingTransitionAnimationFrame: number | undefined;
   private updateFocusAnimationFrame: number | undefined;
+  private hasSetInitialFocus: boolean = false;
   @tracked button: HTMLElement | null = null;
   @tracked panel: HTMLElement | null = null;
 
@@ -287,7 +290,7 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
   @action
   onKeyDown(event: KeyboardEvent): void {
     if (event.key === cascadingMenuKeys.ESCAPE) {
-      this.onEscapeKey((event as unknown) as Event);
+      this.onEscapeKey(event as unknown as Event);
     }
   }
 
@@ -303,12 +306,15 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
   updateFocus(): void {
     // Wait for the DOM to update.
     this.updateFocusAnimationFrame = window.requestAnimationFrame(() => {
-      if (!this.ownFocus || !this.panel) {
+      if (!this.ownFocus || !this.panel || this.args.initialFocus === false) {
         return;
       }
 
       // If we've already focused on something inside the panel, everything's fine.
-      if (this.panel.contains(document.activeElement)) {
+      if (
+        this.hasSetInitialFocus &&
+        this.panel.contains(document.activeElement)
+      ) {
         return;
       }
 
@@ -331,8 +337,8 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
         // there isn't a focus target, one of two reasons:
         // #1 is the whole panel hidden? If so, schedule another check
         // #2 panel is visible but no tabbables exist, move focus to the panel
-        const panelVisibility = window.getComputedStyle(this.panel).visibility;
-        if (panelVisibility === 'hidden') {
+        const panelVisibility = window.getComputedStyle(this.panel).opacity;
+        if (panelVisibility === '0') {
           // #1
           this.updateFocus();
         } else {
@@ -348,7 +354,10 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
         }
       }
 
-      if (focusTarget != null) focusTarget.focus();
+      if (focusTarget != null) {
+        this.hasSetInitialFocus = true;
+        focusTarget.focus();
+      }
     });
   }
 
@@ -411,7 +420,7 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
     }
 
     if (this.args.repositionOnScroll) {
-      window.addEventListener('scroll', this.positionPopoverFixed);
+      window.addEventListener('scroll', this.positionPopoverFixed, true);
     }
 
     this.updateFocus();
@@ -420,9 +429,9 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
   @action
   didUpdateRepositionOnScroll(): void {
     if (this.args.repositionOnScroll) {
-      window.addEventListener('scroll', this.positionPopoverFixed);
+      window.addEventListener('scroll', this.positionPopoverFixed, true);
     } else {
-      window.removeEventListener('scroll', this.positionPopoverFixed);
+      window.removeEventListener('scroll', this.positionPopoverFixed, true);
     }
   }
 
@@ -451,7 +460,7 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
 
   willDestroy(): void {
     super.willDestroy();
-    window.removeEventListener('scroll', this.positionPopoverFixed);
+    window.removeEventListener('scroll', this.positionPopoverFixed, true);
     cancel(this.respositionTimeout as ReturnType<typeof later>);
     cancel(this.closingTransitionTimeout as ReturnType<typeof later>);
     cancelAnimationFrame(this.closingTransitionAnimationFrame as number);
@@ -552,6 +561,13 @@ export default class EuiPopoverComponent extends Component<EuiPopoverArgs> {
     };
   }
 
+  get tabindex() {
+    if (this.ownFocus) {
+      return this.args.tabindex ?? '0';
+    }
+    return '-1';
+  }
+
   @action
   positionPopoverFixed(): void {
     this.positionPopover(true);

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

@@ -13,7 +13,8 @@ export const insertPositions: InsertPositionsMap = {
   before: 'beforebegin'
 };
 
-export const INSERT_POSITIONS: EuiPortalInsertPosition[] = keysOf(insertPositions);
+export const INSERT_POSITIONS: EuiPortalInsertPosition[] =
+  keysOf(insertPositions);
 
 type EuiPortalInsertPosition = keyof typeof insertPositions;
 

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

@@ -4,13 +4,13 @@
       class={{class-names
         (if (eq @size "l") "euiProgress__data--l")
         componentName="EuiProgressData"
-        color=(arg-or-default @color "secondary")
+        color=(arg-or-default @color "success")
       }}
     >
       {{#if (has-block "label")}}
-          <span class="euiProgress__label">
-            {{yield to="label"}}
-          </span>
+        <span class="euiProgress__label">
+          {{yield to="label"}}
+        </span>
       {{/if}}
       {{#if (or (has-block "valueText") @valueText)}}
         <span class="euiProgress__valueText {{@labelClasses}}">
@@ -27,24 +27,27 @@
     class={{class-names
       "euiProgress--native"
       componentName="EuiProgress"
-      size=(arg-or-default @size 'm')
-      position=(arg-or-default @position 'static')
-      color=(arg-or-default @color 'secondary')
+      size=(arg-or-default @size "m")
+      position=(arg-or-default @position "static")
+      color=(arg-or-default @color "success")
     }}
     max={{@max}}
     value={{@value}}
-    aria-hidden={{and (has-block "label") (or @valueText (has-block "valueText"))}}
+    aria-hidden={{and
+      (has-block "label")
+      (or @valueText (has-block "valueText"))
+    }}
     ...attributes
-  />
+  ></progress>
 {{else}}
   <div
     class={{class-names
       "euiProgress--indeterminate"
       componentName="EuiProgress"
-      size=(arg-or-default @size 'm')
-      position=(arg-or-default @position 'static')
-      color=(arg-or-default @color 'secondary')
+      size=(arg-or-default @size "m")
+      position=(arg-or-default @position "static")
+      color=(arg-or-default @color "success")
     }}
     ...attributes
-  />
+  ></div>
 {{/if}}

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

@@ -1,13 +1,16 @@
 {{#let
   (and (has-block "label") (not (arg-or-default @isFakeLabelBlock false)))
-  (arg-or-default @id (unique-id)) as |hasLabelBlock id|
+  (arg-or-default @id (unique-id))
+  as |hasLabelBlock id|
 }}
   {{#let
     (class-names
+      @containerClass
       (if (not (or hasLabelBlock @label)) "euiRadio--noLabel")
       (if @compressed "euiRadio--compressed")
       "euiRadio"
-    ) as |classes|
+    )
+    as |classes|
   }}
     <div class={{classes}}>
       <input
@@ -22,7 +25,10 @@
       />
       <div class="euiRadio__circle"></div>
       {{#if (or hasLabelBlock @label)}}
-        <label class="euiRadio__label" for={{id}}>
+        <label
+          class={{class-names "euiRadio__label" @labelProps.className}}
+          for={{id}}
+        >
           {{#if hasLabelBlock}}
             {{yield to="label"}}
           {{else}}

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

@@ -1,6 +1,6 @@
 {{#let
-  (and (not (arg-or-default @isFakePrependBlock false)) (has-block "prepend"))
-  (and (not (arg-or-default @isFakeAppendBlock false)) (has-block "append"))
+  (and (arg-or-default @isPrependProvided true) (has-block "prepend"))
+  (and (arg-or-default @isAppendProvided true) (has-block "append"))
   (and (not (arg-or-default @isFakeMaxBlock false)) (has-block "max"))
   (and (not (arg-or-default @isFakeMinBlock false)) (has-block "min"))
   (and (not (arg-or-default @isFakeValueBlock false)) (has-block "value"))
@@ -38,8 +38,8 @@
           @isLoading={{and @showInputOnly @isLoading}}
           @isInvalid={{@isInvalid}}
           @autoSize={{not this.showInputOnly}}
-          @isFakePrependBlock={{hasPrepend}}
-          @isFakeAppendBlock={{hasAppend}}
+          @isPrependProvided={{hasPrepend}}
+          @isAppendProvided={{hasAppend}}
           ...attributes
           {{on
             "focus"
@@ -61,7 +61,10 @@
       </:input>
       <:content>
         <EuiRangeWrapper
-          class="euiRange"
+          class={{class-names
+            "euiRange"
+            (if this.showInput "euiRange--hasInput")
+          }}
           @fullWidth={{@fullWidth}}
           @compressed={{@compressed}}
         >
@@ -191,6 +194,8 @@
                 @isLoading={{and @showInputOnly @isLoading}}
                 @isInvalid={{@isInvalid}}
                 @autoSize={{not this.showInputOnly}}
+                @isPrependProvided={{hasPrepend}}
+                @isAppendProvided={{hasAppend}}
                 ...attributes
                 {{on
                   "focus"
@@ -203,7 +208,14 @@
                   (if this.canShowDropdown this.onInputBlur (optional @onBlur))
                 }}
                 {{on "input" this.handleOnChange}}
-              />
+              >
+                <:prepend as |classes|>
+                  {{yield classes to="prepend"}}
+                </:prepend>
+                <:append as |classes|>
+                  {{yield classes to="append"}}
+                </:append>
+              </EuiRangeInput>
             {{/if}}
           {{/if}}
         </EuiRangeWrapper>
@@ -211,7 +223,10 @@
     </EuiInputPopover>
   {{else}}
     <EuiRangeWrapper
-      class="euiRange"
+      class={{class-names
+        "euiRange"
+        (if this.showInput "euiRange--hasInput")
+      }}
       @fullWidth={{@fullWidth}}
       @compressed={{@compressed}}
     >
@@ -337,8 +352,8 @@
             @isLoading={{and @showInputOnly @isLoading}}
             @isInvalid={{@isInvalid}}
             @autoSize={{not this.showInputOnly}}
-            @isFakePrependBlock={{hasPrepend}}
-            @isFakeAppendBlock={{hasAppend}}
+            @isPrependProvided={{hasPrepend}}
+            @isAppendProvided={{hasAppend}}
             ...attributes
             {{on
               "focus"
@@ -349,9 +364,16 @@
               (if this.canShowDropdown this.onInputBlur (optional @onBlur))
             }}
             {{on "input" this.handleOnChange}}
-          />
+          >
+            <:prepend as |classes|>
+              {{yield classes to="prepend"}}
+            </:prepend>
+            <:append as |classes|>
+              {{yield classes to="append"}}
+            </:append>
+          </EuiRangeInput>
         {{/if}}
       {{/if}}
     </EuiRangeWrapper>
   {{/if}}
-{{/let}}
+{{/let}}

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

@@ -3,15 +3,14 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import { uniqueId } from '../../helpers/unique-id';
 import { isWithinRange } from '../../utils/number';
-import { CommonArgs } from '../common';
 import { EuiRangeInputArgs } from '../eui-range-input/types';
 import { EuiRangeLevel } from '../eui-range-levels';
 import { EuiRangeTick } from '../eui-range-ticks';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { later } from '@ember/runloop';
+
 export interface EuiRangeArgs
-  extends CommonArgs,
-    Omit<EuiRangeInputArgs, 'onChange' | 'digitTolerance'> {
+  extends Omit<EuiRangeInputArgs, 'onChange' | 'digitTolerance'> {
   compressed?: boolean;
   readOnly?: boolean;
   fullWidth?: boolean;
@@ -111,7 +110,11 @@ export default class EuiRangeComponent extends Component<EuiRangeArgs> {
   }
 
   get showRangeTooltip(): boolean {
-    return this.showValue && !!String(this.args.value).length && this.args.value !== undefined;
+    return (
+      this.showValue &&
+      !!String(this.args.value).length &&
+      this.args.value !== undefined
+    );
   }
 
   @action

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

@@ -1,32 +1,38 @@
-<EuiFieldNumber
-  class="euiRangeInput euiRangeInput--{{arg-or-default @side "max"}}"
-  name={{@name}}
-  min={{cast-to @min to="number"}}
-  max={{cast-to @max to="number"}}
-  @step={{@step}}
-  @value={{if (eq @value "") "" (cast-to @value to="number")}}
-  @disabled={{@disabled}}
-  @compressed={{@compressed}}
-  @fullWidth={{@fullWidth}}
-  @controlOnly={{@controlOnly}}
-  @isFakeAppendBlock={{@isFakeAppendBlock}}
-  @isFakePrependBlock={{@isFakePrependBlock}}
-  @isInvalid={{@isInvalid}}
-  @disable={{@disable}}
-  ...attributes
-  {{simple-style
-    (inline-styles
-      componentName="EuiRangeInput"
-      componentArgs=(hash
-        autoSize=(arg-or-default @autoSize true) digitTolerance=@digitTolerance
+{{#let
+  (and (arg-or-default @isPrependProvided true) (has-block "prepend"))
+  (and (arg-or-default @isAppendProvided true) (has-block "append"))
+  as |hasAppend hasPrepend|
+}}
+  <EuiFieldNumber
+    class="euiRangeInput euiRangeInput--{{arg-or-default @side "max"}}"
+    name={{@name}}
+    min={{cast-to @min to="number"}}
+    max={{cast-to @max to="number"}}
+    @step={{@step}}
+    @value={{if (eq @value "") "" (cast-to @value to="number")}}
+    @disabled={{@disabled}}
+    @compressed={{@compressed}}
+    @fullWidth={{@fullWidth}}
+    @controlOnly={{@controlOnly}}
+    @isPrependProvided={{hasAppend}}
+    @isAppendProvided={{hasPrepend}}
+    @isInvalid={{@isInvalid}}
+    @disable={{@disable}}
+    ...attributes
+    {{simple-style
+      (inline-styles
+        componentName="EuiRangeInput"
+        componentArgs=(hash
+          autoSize=(arg-or-default @autoSize true) digitTolerance=@digitTolerance
+        )
       )
-    )
-  }}
->
-  <:prepend as |classes|>
-    {{yield classes to="prepend"}}
-  </:prepend>
-  <:append as |classes|>
-    {{yield classes to="append"}}
-  </:append>
-</EuiFieldNumber>
+    }}
+  >
+    <:prepend as |classes|>
+      {{yield classes to="prepend"}}
+    </:prepend>
+    <:append as |classes|>
+      {{yield classes to="append"}}
+    </:append>
+  </EuiFieldNumber>
+{{/let}}

package/addon/components/eui-range-input/types.ts

@@ -1,6 +1,7 @@
 import { EuiFieldNumberArgs } from '../eui-field-number/types';
 
-export interface EuiRangeInputArgs extends Omit<EuiFieldNumberArgs, 'max' | 'min' | 'value'> {
+export interface EuiRangeInputArgs
+  extends Omit<EuiFieldNumberArgs, 'max' | 'min' | 'value'> {
   autoSize?: boolean;
   digitTolerance: number;
   max: number;

package/addon/components/eui-range-levels/index.hbs

@@ -2,7 +2,7 @@
   class={{class-names
     "euiRangeLevels"
     (if @showTicks "euiRangeLevels--hasTicks")
-    (if @compresses "euiRangeLevels--compressed")
+    (if @compressed "euiRangeLevels--compressed")
   }}
   {{did-insert this.validateLevels}}
   {{did-update this.validateLevels @levels}}
@@ -14,9 +14,9 @@
       class="euiRangeLevel euiRangeLevel--{{level.color}}"
       {{simple-style
         (inline-styles
-          componentName="EuiRangeLevels" componentArgs=(hash level=level max=@max min=@min)
+          componentName="EuiRangeLevels" componentArgs=(hash level=level max=@max min=@min trackWidth=@trackWidth)
         )
       }}
     ></span>
   {{/each}}
-</div>
+</div>