Convert remaining range components to TS

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `18.0.0`.
+- Converted `EuiRange` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
+- Converted `EuiDualRange` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
+- Converted `EuiRangeInput` to TypeScript ([#2732](https://github.com/elastic/eui/pull/2732))
 
 ## [`18.0.0`](https://github.com/elastic/eui/tree/v18.0.0)
 

src/components/form/form_control_layout/form_control_layout_delimited.tsx

@@ -7,9 +7,12 @@ import React, {
 import classNames from 'classnames';
 
 import { EuiText } from '../../text';
-import { EuiFormControlLayout } from './form_control_layout';
+import {
+  EuiFormControlLayout,
+  EuiFormControlLayoutProps,
+} from './form_control_layout';
 
-type EuiFormControlLayoutDelimitedProps = Partial<EuiFormControlLayout> & {
+type EuiFormControlLayoutDelimitedProps = Partial<EuiFormControlLayoutProps> & {
   /**
    * Left side control
    */

src/components/form/index.d.ts

@@ -1,7 +1,6 @@
 import { CommonProps } from '../common';
 /// <reference path="./field_search/index.d.ts" />
 /// <reference path="./form_row/index.d.ts" />
-/// <reference path="./range/index.d.ts" />
 /// <reference path="./select/index.d.ts" />
 /// <reference path="./super_select/index.d.ts" />
 

src/components/form/range/__snapshots__/dual_range.test.js.snap → src/components/form/range/__snapshots__/dual_range.test.tsx.snap

@@ -77,7 +77,7 @@ exports[`EuiDualRange is rendered 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:77.77777777777779%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -86,8 +86,8 @@ exports[`EuiDualRange is rendered 1`] = `
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
       data-test-subj="test subject string"
       id="id"
-      max="10"
-      min="1"
+      max="100"
+      min="0"
       name="name"
       step="1"
       tabindex="-1"
@@ -115,7 +115,7 @@ exports[`EuiDualRange props compressed should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -175,7 +175,7 @@ exports[`EuiDualRange props custom ticks should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:20%;width:80%"
       />
     </div>
     <input
@@ -210,7 +210,7 @@ exports[`EuiDualRange props disabled should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -246,7 +246,7 @@ exports[`EuiDualRange props fullWidth should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -280,10 +280,10 @@ exports[`EuiDualRange props inputs should render 1`] = `
         aria-label="aria-label"
         class="euiFieldNumber euiRangeInput euiRangeInput--min"
         max="8"
-        min="1"
+        min="0"
         name="name-minValue"
         step="1"
-        style="width:3.6em"
+        style="width:4.4em"
         type="number"
         value="1"
       />
@@ -300,7 +300,7 @@ exports[`EuiDualRange props inputs should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:77.77777777777779%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -309,8 +309,8 @@ exports[`EuiDualRange props inputs should render 1`] = `
       class="euiRangeSlider euiRangeSlider--hasRange euiDualRange__slider"
       data-test-subj="test subject string"
       id="id"
-      max="10"
-      min="1"
+      max="100"
+      min="0"
       name="name"
       step="1"
       tabindex="-1"
@@ -329,11 +329,11 @@ exports[`EuiDualRange props inputs should render 1`] = `
       <input
         aria-label="aria-label"
         class="euiFieldNumber euiRangeInput euiRangeInput--max"
-        max="10"
+        max="100"
         min="1"
         name="name-maxValue"
         step="1"
-        style="width:3.6em"
+        style="width:4.4em"
         type="number"
         value="8"
       />
@@ -362,7 +362,7 @@ exports[`EuiDualRange props labels should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -414,7 +414,7 @@ exports[`EuiDualRange props levels should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input
@@ -487,7 +487,7 @@ exports[`EuiDualRange props slider should display in popover 1`] = `
             aria-label="aria-label"
             class="euiFieldNumber euiFormControlLayoutDelimited__input"
             max="8"
-            min="1"
+            min="0"
             name="name-minValue"
             step="1"
             type="number"
@@ -505,7 +505,7 @@ exports[`EuiDualRange props slider should display in popover 1`] = `
           <input
             aria-label="aria-label"
             class="euiFieldNumber euiFormControlLayoutDelimited__input"
-            max="10"
+            max="100"
             min="1"
             name="name-maxValue"
             step="1"
@@ -594,7 +594,7 @@ exports[`EuiDualRange props ticks should render 1`] = `
     >
       <div
         class="euiRangeHighlight__progress"
-        style="margin-left:0%;width:100%"
+        style="margin-left:1%;width:7.000000000000001%"
       />
     </div>
     <input

src/components/form/range/__snapshots__/range.test.js.snap → src/components/form/range/__snapshots__/range.test.tsx.snap

@@ -68,8 +68,8 @@ exports[`EuiRange is rendered 1`] = `
       class="euiRangeSlider"
       data-test-subj="test subject string"
       id="id"
-      max="10"
-      min="1"
+      max="100"
+      min="0"
       name="name"
       step="1"
       type="range"
@@ -96,6 +96,7 @@ exports[`EuiRange props compressed should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <div
@@ -143,6 +144,7 @@ exports[`EuiRange props custom ticks should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <div
@@ -166,6 +168,7 @@ exports[`EuiRange props disabled should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <div
@@ -188,6 +191,7 @@ exports[`EuiRange props fullWidth should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <div
@@ -207,8 +211,8 @@ exports[`EuiRange props input should render 1`] = `
       aria-label="aria-label"
       class="euiRangeSlider"
       data-test-subj="test subject string"
-      max="10"
-      min="1"
+      max="100"
+      min="0"
       name="name"
       step="1"
       tabindex="-1"
@@ -230,11 +234,11 @@ exports[`EuiRange props input should render 1`] = `
         class="euiFieldNumber euiRangeInput euiRangeInput--max"
         data-test-subj="test subject string"
         id="id"
-        max="10"
-        min="1"
+        max="100"
+        min="0"
         name="name"
         step="1"
-        style="width:3.6em"
+        style="width:4.4em"
         type="number"
         value="8"
       />
@@ -262,6 +266,7 @@ exports[`EuiRange props labels should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <label
@@ -301,6 +306,7 @@ exports[`EuiRange props levels should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="20"
     />
   </div>
   <div
@@ -359,8 +365,8 @@ exports[`EuiRange props slider should display in popover 1`] = `
             class="euiFieldNumber euiRangeInput euiRangeInput--max"
             data-test-subj="test subject string"
             id="id"
-            max="10"
-            min="1"
+            max="100"
+            min="0"
             name="name"
             step="1"
             type="number"
@@ -447,6 +453,7 @@ exports[`EuiRange props ticks should render 1`] = `
       min="0"
       step="1"
       type="range"
+      value="8"
     />
   </div>
   <div