Convert a range of EuiRange* components to TypeScript

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

@@ -427,7 +427,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="0"
         type="button"
         value="0"
       >
@@ -437,7 +436,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="20"
         type="button"
         value="20"
       >
@@ -447,7 +445,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="40"
         type="button"
         value="40"
       >
@@ -457,7 +454,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="60"
         type="button"
         value="60"
       >
@@ -467,7 +463,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="80"
         type="button"
         value="80"
       >
@@ -477,7 +472,6 @@ exports[`EuiDualRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="100"
         type="button"
         value="100"
       >

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

@@ -321,7 +321,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="0"
         type="button"
         value="0"
       >
@@ -331,7 +330,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="20"
         type="button"
         value="20"
       >
@@ -341,7 +339,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="40"
         type="button"
         value="40"
       >
@@ -351,7 +348,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="60"
         type="button"
         value="60"
       >
@@ -361,7 +357,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="80"
         type="button"
         value="80"
       >
@@ -371,7 +366,6 @@ exports[`EuiRange props ticks should render 1`] = `
         class="euiRangeTick"
         style="width:16.666666666666664%"
         tabindex="-1"
-        title="100"
         type="button"
         value="100"
       >

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

@@ -13,7 +13,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="0"
       type="button"
       value="0"
     >
@@ -23,7 +22,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="10"
       type="button"
       value="10"
     >
@@ -33,7 +31,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="20"
       type="button"
       value="20"
     >
@@ -43,7 +40,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="30"
       type="button"
       value="30"
     >
@@ -53,7 +49,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="40"
       type="button"
       value="40"
     >
@@ -63,7 +58,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="50"
       type="button"
       value="50"
     >
@@ -73,7 +67,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="60"
       type="button"
       value="60"
     >
@@ -83,7 +76,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="70"
       type="button"
       value="70"
     >
@@ -93,7 +85,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="80"
       type="button"
       value="80"
     >
@@ -103,7 +94,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="90"
       type="button"
       value="90"
     >
@@ -113,7 +103,6 @@ exports[`EuiRangeTrack is rendered 1`] = `
       class="euiRangeTick"
       style="width:9.090909090909092%"
       tabindex="-1"
-      title="100"
       type="button"
       value="100"
     >

src/components/form/range/dual_range.js

@@ -297,7 +297,7 @@ export class EuiDualRange extends Component {
             showTicks={showTicks}
             hasFocus={this.state.hasFocus}
             aria-hidden={true}
-            tabIndex={'-1'}
+            tabIndex={-1}
             showRange={showRange}
             {...rest}
           />

src/components/form/range/index.d.ts

@@ -2,9 +2,29 @@ import { CommonProps, Omit } from '../../common';
 
 import { ReactNode, FunctionComponent, InputHTMLAttributes } from 'react';
 
+import { EuiRangeHighlightProps } from './range_highlight';
+import { EuiRangeLabelProps } from './range_label';
+import { EuiRangeLevelsProps, EuiRangeLevel } from './range_levels';
+import { EuiRangeSliderProps } from './range_slider';
+import { EuiRangeThumbProps } from './range_thumb';
+import { EuiRangeTicksProps } from './range_ticks';
+import { EuiRangeTooltipProps } from './range_tooltip';
+import { EuiRangeTrackProps } from './range_track';
+import { EuiRangeWrapperProps } from './range_wrapper';
+
 declare module '@elastic/eui' {
   export type EuiRangeLevelColor = 'primary' | 'success' | 'warning' | 'danger';
 
+  export const EuiRangeHighlight: FunctionComponent<EuiRangeHighlightProps>;
+  export const EuiRangeLabel: FunctionComponent<EuiRangeLabelProps>;
+  export const EuiRangeLevels: FunctionComponent<EuiRangeLevelsProps>;
+  export const EuiRangeSlider: FunctionComponent<EuiRangeSliderProps>;
+  export const EuiRangeThumb: FunctionComponent<EuiRangeThumbProps>;
+  export const EuiRangeTicks: FunctionComponent<EuiRangeTicksProps>;
+  export const EuiRangeTooltip: FunctionComponent<EuiRangeTooltipProps>;
+  export const EuiRangeTrack: FunctionComponent<EuiRangeTrackProps>;
+  export const EuiRangeWrapper: FunctionComponent<EuiRangeWrapperProps>;
+
   /**
    * single range type def
    *
@@ -15,7 +35,7 @@ declare module '@elastic/eui' {
     compressed?: boolean;
     fullWidth?: boolean;
     id?: string;
-    levels?: Array<{ min?: number; max?: number; color?: EuiRangeLevelColor }>;
+    levels?: EuiRangeLevel[];
     // `min` and `max` are optional in HTML but required for our component,
     // so we override them.
     max: number;

src/components/form/range/range.js

@@ -87,7 +87,7 @@ export class EuiRange extends Component {
             style={style}
             showTicks={showTicks}
             showRange={showRange}
-            tabIndex={showInput ? '-1' : tabIndex || null}
+            tabIndex={showInput ? -1 : tabIndex || null}
             {...rest}
           />
 

src/components/form/range/range_highlight.js → src/components/form/range/range_highlight.tsx

@@ -1,8 +1,16 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
-export const EuiRangeHighlight = ({
+export interface EuiRangeHighlightProps {
+  hasFocus?: boolean;
+  showTicks?: boolean;
+  lowerValue: number;
+  upperValue: number;
+  max: number;
+  min: number;
+}
+
+export const EuiRangeHighlight: FunctionComponent<EuiRangeHighlightProps> = ({
   hasFocus,
   showTicks,
   lowerValue,
@@ -33,12 +41,3 @@ export const EuiRangeHighlight = ({
     </div>
   );
 };
-
-EuiRangeHighlight.propTypes = {
-  hasFocus: PropTypes.bool,
-  showTicks: PropTypes.bool,
-  lowerValue: PropTypes.number.isRequired,
-  upperValue: PropTypes.number.isRequired,
-  max: PropTypes.number.isRequired,
-  min: PropTypes.number.isRequired,
-};

src/components/form/range/range_label.tsx

@@ -0,0 +1,19 @@
+import React, { FunctionComponent } from 'react';
+import classNames from 'classnames';
+
+export interface EuiRangeLabelProps {
+  children: string | number;
+  disabled?: boolean;
+  side?: 'min' | 'max';
+}
+
+export const EuiRangeLabel: FunctionComponent<EuiRangeLabelProps> = ({
+  children,
+  disabled,
+  side = 'max',
+}) => {
+  const classes = classNames('euiRangeLabel', `euiRangeLabel--${side}`, {
+    'euiRangeLabel--isDisabled': disabled,
+  });
+  return <label className={classes}>{children}</label>;
+};

src/components/form/range/range_levels.js → src/components/form/range/range_levels.tsx

@@ -1,11 +1,35 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
-export const LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
+export type EuiRangeLevelColor = 'primary' | 'success' | 'warning' | 'danger';
 
-export const EuiRangeLevels = ({ levels, max, min, showTicks }) => {
-  const validateLevelIsInRange = level => {
+export const LEVEL_COLORS: EuiRangeLevelColor[] = [
+  'primary',
+  'success',
+  'warning',
+  'danger',
+];
+
+export interface EuiRangeLevel {
+  min: number;
+  max: number;
+  color: EuiRangeLevelColor;
+}
+
+export interface EuiRangeLevelsProps {
+  levels?: EuiRangeLevel[];
+  max: number;
+  min: number;
+  showTicks?: boolean;
+}
+
+export const EuiRangeLevels: FunctionComponent<EuiRangeLevelsProps> = ({
+  levels = [],
+  max,
+  min,
+  showTicks,
+}) => {
+  const validateLevelIsInRange = (level: EuiRangeLevel) => {
     if (level.min < min) {
       throw new Error(
         `The level min of ${level.min} is lower than the min value of ${min}.`
@@ -40,16 +64,3 @@ export const EuiRangeLevels = ({ levels, max, min, showTicks }) => {
     </div>
   );
 };
-
-EuiRangeLevels.propTypes = {
-  levels: PropTypes.arrayOf(
-    PropTypes.shape({
-      min: PropTypes.number.isRequired,
-      max: PropTypes.number.isRequired,
-      color: PropTypes.oneOf(LEVEL_COLORS).isRequired,
-    })
-  ),
-  max: PropTypes.number.isRequired,
-  min: PropTypes.number.isRequired,
-  showTicks: PropTypes.bool,
-};