Update EuiRange and EuiDualRange

packages/changeset-form/addon/components/eui-changeset-form/fields/field-dual-range-slider/index.hbs

@@ -45,8 +45,8 @@
       @inputRef={{@inputRef}}
       @controlOnly={{@controlOnly}}
       @autoSize={{@autoSize}}
-      @isFakePrependBlock={{not (has-block "prepend")}}
-      @isFakeAppendBlock={{not (has-block "append")}}
+      @isPrependProvided={{has-block "prepend"}}
+      @isAppendProvided={{has-block "append"}}
       @isFakeMinBlock={{not (has-block "min")}}
       @isFakeMaxBlock={{not (has-block "max")}}
       disabled={{@disabled}}
@@ -67,4 +67,4 @@
       </:append>
     </EuiDualRange>
   </EuiFormRow>
-{{/let}}
+{{/let}}

packages/changeset-form/addon/components/eui-changeset-form/fields/field-number/index.hbs

@@ -34,8 +34,8 @@
       {{!template-lint-disable}}
       @id={{theId}}
       @disabled={{@disabled}}
-      @isFakePrependBlock={{not (has-block "prepend")}}
-      @isFakeAppendBlock={{not (has-block "append")}}
+      @isPrependProvided={{has-block "prepend"}}
+      @isAppendProvided={{has-block "append"}}
       autofocus={{@autofocus}}
       placeholder={{@placeholder}}
       {{on "blur" this.validate}}
@@ -50,4 +50,4 @@
       </:append>
     </EuiFieldNumber>
   </EuiFormRow>
-{{/let}}
+{{/let}}

packages/changeset-form/addon/components/eui-changeset-form/fields/field-range-slider/index.hbs

@@ -45,8 +45,8 @@
       @inputRef={{@inputRef}}
       @controlOnly={{@controlOnly}}
       @autoSize={{@autoSize}}
-      @isFakePrependBlock={{not (has-block "prepend")}}
-      @isFakeAppendBlock={{not (has-block "append")}}
+      @isPrependProvided={{has-block "prepend"}}
+      @isAppendProvided={{has-block "append"}}
       @isFakeMinBlock={{not (has-block "min")}}
       @isFakeMaxBlock={{not (has-block "max")}}
       @isFakeValueBlock={{not (has-block "value")}}
@@ -80,4 +80,4 @@
       </:append>
     </EuiRange>
   </EuiFormRow>
-{{/let}}
+{{/let}}

packages/core/addon/components/eui-dual-range/index.hbs

@@ -1,10 +1,9 @@
 {{#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")
-  ) as |hasPrepend hasAppend hasMaxBlock hasMinBlock|
+  (and (not (arg-or-default @isFakeMinBlock false)) (has-block "min"))
+  as |hasPrepend hasAppend hasMaxBlock hasMinBlock|
 }}
   {{#if this.showInputOnly}}
     <EuiInputPopover
@@ -44,8 +43,8 @@
               @autoSize={{false}}
               @fullWidth={{this.fullWidth}}
               @isInvalid={{@isInvalid}}
-              @isFakeAppendBlock={{hasPrepend}}
-              @isFakePrependBlock={{hasAppend}}
+              @isPrependProvided={{hasAppend}}
+              @isAppendProvided={{hasPrepend}}
               @controlOnly={{true}}
               @disable={{@disable}}
               ...attributes
@@ -60,11 +59,16 @@
                 (if this.canShowDropdown this.onInputBlur (optional @onBlur))
               }}
               {{on "input" this.handleLowerInputChange}}
-            />
-            <div class="euiRange__horizontalSpacer"></div>
+            >
+              <:prepend as |classes|>
+                {{yield classes to="prepend"}}
+              </:prepend>
+              <:append as |classes|>
+                {{yield classes to="append"}}
+              </:append>
+            </EuiRangeInput>
           </:startControl>
           <:endControl as |classes|>
-            <div class="euiRange__horizontalSpacer"></div>
             <EuiRangeInput
               class={{classes}}
               aria-label={{@maxInputProps.ariaLabel}}
@@ -81,8 +85,8 @@
               @autoSize={{false}}
               @fullWidth={{this.fullWidth}}
               @isInvalid={{@isInvalid}}
-              @isFakeAppendBlock={{hasPrepend}}
-              @isFakePrependBlock={{hasAppend}}
+              @isPrependProvided={{hasAppend}}
+              @isAppendProvided={{hasPrepend}}
               @controlOnly={{true}}
               @disable={{@disable}}
               ...attributes
@@ -97,7 +101,14 @@
                 (if this.canShowDropdown this.onInputBlur (optional @onBlur))
               }}
               {{on "input" this.handleUpperInputChange}}
-            />
+            >
+              <:prepend as |classes|>
+                {{yield classes to="prepend"}}
+              </:prepend>
+              <:append as |classes|>
+                {{yield classes to="append"}}
+              </:append>
+            </EuiRangeInput>
           </:endControl>
           <:append as |appendClasses|>
             {{yield appendClasses to="append"}}
@@ -109,6 +120,7 @@
           class="euiDualRange"
           @fullWidth={{this.fullWidth}}
           @compressed={{this.compressed}}
+          @showInput={{this.showInput}}
         >
           {{#if this.showLabels}}
             <EuiRangeLabel @side="min" @disabled={{@disabled}}>
@@ -231,8 +243,8 @@
           @readOnly={{@readOnly}}
           @fullWidth={{this.fullWidth}}
           @isInvalid={{@isInvalid}}
-          @isFakeAppendBlock={{true}}
-          @isFakePrependBlock={{true}}
+          @isPrependProvided={{false}}
+          @isAppendProvided={{false}}
           @controlOnly={{true}}
           @disable={{@disable}}
           ...attributes
@@ -357,8 +369,8 @@
           @fullWidth={{this.fullWidth}}
           @isInvalid={{@isInvalid}}
           @controlOnly={{this.showInputOnly}}
-          @isFakeAppendBlock={{true}}
-          @isFakePrependBlock={{true}}
+          @isPrependProvided={{false}}
+          @isAppendProvided={{false}}
           @disable={{@disable}}
           ...attributes
           {{on-key "_all" this.handleInputKeyDown}}
@@ -369,4 +381,4 @@
       {{/if}}
     </EuiRangeWrapper>
   {{/if}}
-{{/let}}
+{{/let}}

packages/core/addon/components/eui-dual-range/index.ts

@@ -13,6 +13,7 @@ import { EuiRangeTick } from '../eui-range-ticks';
 import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-default';
 import { later } from '@ember/runloop';
 import { keys } from '../../utils/keys';
+import { EUI_THUMB_SIZE } from '../../utils/range';
 type ValueMember = number | string;
 
 export interface EuiDualRangeArgs
@@ -177,16 +178,28 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
     // Determine thumb movement based on slider interaction
     if (!this.isValid) {
       // Non-standard positioning follows
-      this._determineInvalidThumbMovement(newVal, this.lowerValue, this.upperValue, e);
+      this._determineInvalidThumbMovement(
+        newVal,
+        this.lowerValue,
+        this.upperValue,
+        e
+      );
     } else {
       // Standard positioning based on click event proximity to thumb locations
-      this._determineValidThumbMovement(newVal, this.lowerValue, this.upperValue, e);
+      this._determineValidThumbMovement(
+        newVal,
+        this.lowerValue,
+        this.upperValue,
+        e
+      );
     }
   }
 
   @action
   _handleOnChange(lower: ValueMember, upper: ValueMember, e: Event): void {
-    const isValid = isWithinRange(this.min, upper, lower) && isWithinRange(lower, this.max, upper);
+    const isValid =
+      isWithinRange(this.min, upper, lower) &&
+      isWithinRange(lower, this.max, upper);
     this.args.onChange([lower, upper], isValid, e);
   }
 
@@ -198,15 +211,23 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
   @action
   _resetToRangeEnds(e: KeyboardEvent): void {
     // Arbitrary decision to pass `min` instead of `max`. Result is the same.
-    this._determineInvalidThumbMovement(this.min, this.lowerValue, this.upperValue, e);
+    this._determineInvalidThumbMovement(
+      this.min,
+      this.lowerValue,
+      this.upperValue,
+      e
+    );
   }
 
   @action
   _isDirectionalKeyPress(event: KeyboardEvent): boolean {
     return (
-      [keys.ARROW_UP, keys.ARROW_RIGHT, keys.ARROW_DOWN, keys.ARROW_LEFT].indexOf(
-        event.key as keys
-      ) > -1
+      [
+        keys.ARROW_UP,
+        keys.ARROW_RIGHT,
+        keys.ARROW_DOWN,
+        keys.ARROW_LEFT
+      ].indexOf(event.key as keys) > -1
     );
   }
 
@@ -303,7 +324,6 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
     let valuePosition = decimal <= 1 ? decimal : 1;
     valuePosition = valuePosition >= 0 ? valuePosition : 0;
 
-    const EUI_THUMB_SIZE = 16;
     const trackWidth =
       this.args.showInput === 'inputWithPopover' && !!width
         ? width
@@ -325,11 +345,17 @@ export default class EuiDualRangeComponent extends Component<EuiDualRangeArgs> {
   }
 
   get calculateLowerValueThumbPositionStyle(): { left: string } {
-    return this.calculateThumbPositionStyle(Number(this.lowerValue) || this.min, this.rangeWidth);
+    return this.calculateThumbPositionStyle(
+      Number(this.lowerValue) || this.min,
+      this.rangeWidth
+    );
   }
 
   get calculateUpperValueThumbPositionStyle(): { left: string } {
-    return this.calculateThumbPositionStyle(Number(this.upperValue) || this.max, this.rangeWidth);
+    return this.calculateThumbPositionStyle(
+      Number(this.upperValue) || this.max,
+      this.rangeWidth
+    );
   }
 
   @action

packages/core/addon/components/eui-field-number/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"))
   (arg-or-default @id (unique-id)) as |hasPrepend hasAppend inputId|
 }}
   {{#let
@@ -59,4 +59,4 @@
       </EuiFormControlLayout>
     {{/if}}
   {{/let}}
-{{/let}}
+{{/let}}

packages/core/addon/components/eui-input-popover/index.ts

@@ -6,7 +6,8 @@ import { argOrDefaultDecorator as argOrDefault } from '../../helpers/arg-or-defa
 import { tabbable } from 'tabbable';
 import { EuiPopoverArgs } from '../eui-popover';
 
-export interface EuiInputPopoverArgs extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {
+export interface EuiInputPopoverArgs
+  extends Omit<EuiPopoverArgs, 'button' | 'buttonRef'> {
   disableFocusTrap?: boolean;
   fullWidth?: boolean;
   input: EuiPopoverArgs['button'];
@@ -44,8 +45,8 @@ export default class EuiInputPopoverComponent extends Component<EuiInputPopoverA
   @action
   setPanelWidth(width?: number): void {
     const { panel, inputWidth } = this;
-    if (panel && (!!inputWidth || !!width)) {
-      const newWidth = !width ? width : inputWidth;
+    const newWidth = width || inputWidth;
+    if (panel && !!newWidth) {
       panel.style.width = `${newWidth}px`;
       this.args.onPanelResize?.(newWidth);
     }
@@ -74,7 +75,8 @@ export default class EuiInputPopoverComponent extends Component<EuiInputPopoverA
       });
       if (
         this.args.disableFocusTrap ||
-        (tabbableItems.length && tabbableItems[tabbableItems.length - 1] === document.activeElement)
+        (tabbableItems.length &&
+          tabbableItems[tabbableItems.length - 1] === document.activeElement)
       ) {
         this.args.closePopover?.();
       }

packages/core/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}}

packages/core/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>