Add TypeScript definitions for EuiRange and EuiRadio

CHANGELOG.md

@@ -2,11 +2,15 @@
 
 - Increased default font size of tabs in K6 theme ([#1244](https://github.com/elastic/eui/pull/1244))
 
+**Bug fixes**
+
+- Add TypeScript definitions for `EuiRange` and `EuiRadio`, and correct the definitions for `EuiRadioGroup` ([#1253](https://github.com/elastic/eui/pull/1253))
+
 ## [`4.5.2`](https://github.com/elastic/eui/tree/v4.5.2)
 
 **Bug fixes**
 
-* TypeScript definition changes for `EuiAccordion`, `EuiDescriptionList`, `EuiForm`, `EuiFormHelpText` and the accessibility services, plus a number of other TS fixes ([#1247](https://github.com/elastic/eui/pull/1247))
+- TypeScript definition changes for `EuiAccordion`, `EuiDescriptionList`, `EuiForm`, `EuiFormHelpText` and the accessibility services, plus a number of other TS fixes ([#1247](https://github.com/elastic/eui/pull/1247))
 
 ## [`4.5.1`](https://github.com/elastic/eui/tree/v4.5.1)
 

src/components/form/index.d.ts

@@ -7,6 +7,7 @@
 /// <reference path="./form_label/index.d.ts" />
 /// <reference path="./form_row/index.d.ts" />
 /// <reference path="./radio/index.d.ts" />
+/// <reference path="./range/index.d.ts" />
 /// <reference path="./select/index.d.ts" />
 /// <reference path="./switch/index.d.ts" />
 /// <reference path="./text_area/index.d.ts" />

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

@@ -1,6 +1,6 @@
 /// <reference path="../../common.d.ts" />
 
-import { SFC, HTMLAttributes, ReactNode } from 'react';
+import { SFC, ChangeEventHandler, HTMLAttributes, ReactNode } from 'react';
 
 declare module '@elastic/eui' {
   /**
@@ -11,10 +11,12 @@ declare module '@elastic/eui' {
     label?: ReactNode;
   }
 
-  export type EuiRadioGroupChangeCallback = (id: string) => void;
+  export type EuiRadioGroupChangeCallback = (id: string, value: string) => void;
 
   export type EuiRadioGroupProps = CommonProps &
     Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+      disabled?: boolean;
+      name?: string;
       options?: EuiRadioGroupOption[];
       idSelected?: string;
       onChange: EuiRadioGroupChangeCallback;
@@ -23,4 +25,19 @@ declare module '@elastic/eui' {
   export type x = EuiRadioGroupProps['onChange'];
 
   export const EuiRadioGroup: SFC<EuiRadioGroupProps>;
+
+  export interface EuiRadioProps {
+    autoFocus?: boolean;
+    compressed?: boolean;
+    label?: ReactNode;
+    name?: string;
+    value?: string;
+    checked?: boolean;
+    disabled?: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>; // overriding to make it required
+  }
+
+  export const EuiRadio: SFC<
+    CommonProps & HTMLAttributes<HTMLDivElement> & EuiRadioProps
+  >;
 }

src/components/form/radio/radio_group.js

@@ -36,6 +36,8 @@ export const EuiRadioGroup = ({
 );
 
 EuiRadioGroup.propTypes = {
+  disabled: PropTypes.bool,
+  name: PropTypes.string,
   options: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,

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

@@ -0,0 +1,35 @@
+/// <reference path="../../common.d.ts" />
+
+import { SFC, ReactNode, HTMLAttributes, ChangeEventHandler, InputHTMLAttributes } from 'react';
+
+declare module '@elastic/eui' {
+  /**
+   * @see './range.js'
+   */
+
+  export type EuiRangeLevelColor = 'primary' | 'success' | 'warning' | 'danger';
+
+  export interface EuiRangeProps {
+    compressed?: boolean;
+    fullWidth?: boolean;
+    id?: string;
+    levels?: Array<{ min?: number; max?: number; color?: EuiRangeLevelColor }>;
+    // `min` and `max` are optional in HTML but required for our component,
+    // so we override them.
+    max: number;
+    min: number;
+    // The spec allows string values for `step` but the component requires
+    // a number.
+    step?: number;
+    showInput?: boolean;
+    showLabels?: boolean;
+    showRange?: boolean;
+    showTicks?: boolean;
+    showValue?: boolean;
+    tickInterval?: number;
+  }
+
+  export const EuiRange: SFC<
+    CommonProps & InputHTMLAttributes<HTMLInputElement> & EuiRangeProps
+  >;
+}