From 9703673450111eb658042cfec82149d7e4ca2bcf Mon Sep 17 00:00:00 2001 From: Rory Hunter Date: Fri, 19 Oct 2018 15:25:28 +0100 Subject: [PATCH 1/2] Add TypeScript defs for EuiRange and EuiRadio Also correct the definitions for EuiRadioGroup. --- CHANGELOG.md | 6 +++++- src/components/form/index.d.ts | 1 + src/components/form/radio/index.d.ts | 17 +++++++++++++++-- src/components/form/range/index.d.ts | 28 ++++++++++++++++++++++++++++ 4 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 src/components/form/range/index.d.ts diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f3c1641d10..5dc42ac27e3 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts index 03e77287856..edfe1915516 100644 --- a/src/components/form/index.d.ts +++ b/src/components/form/index.d.ts @@ -7,6 +7,7 @@ /// /// /// +/// /// /// /// diff --git a/src/components/form/radio/index.d.ts b/src/components/form/radio/index.d.ts index 78c8c2cdb1c..0826be46c52 100644 --- a/src/components/form/radio/index.d.ts +++ b/src/components/form/radio/index.d.ts @@ -1,6 +1,6 @@ /// -import { SFC, HTMLAttributes, ReactNode } from 'react'; +import { SFC, ChangeEventHandler, InputHTMLAttributes, 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, 'onChange'> & { + disabled?: boolean; + name?: string; options?: EuiRadioGroupOption[]; idSelected?: string; onChange: EuiRadioGroupChangeCallback; @@ -23,4 +25,15 @@ declare module '@elastic/eui' { export type x = EuiRadioGroupProps['onChange']; export const EuiRadioGroup: SFC; + + export interface EuiRadioProps { + autoFocus?: boolean; + compressed?: boolean; + label?: ReactNode; + onChange: ChangeEventHandler; // overriding to make it required + } + + export const EuiRadio: SFC< + CommonProps & InputHTMLAttributes & EuiRadioProps + >; } diff --git a/src/components/form/range/index.d.ts b/src/components/form/range/index.d.ts new file mode 100644 index 00000000000..aa6271b1980 --- /dev/null +++ b/src/components/form/range/index.d.ts @@ -0,0 +1,28 @@ +/// + +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 }>; + showInput?: boolean; + showLabels?: boolean; + showRange?: boolean; + showTicks?: boolean; + showValue?: boolean; + tickInterval?: number; + } + + export const EuiRange: SFC< + CommonProps & InputHTMLAttributes & EuiRangeProps + >; +} From b239169f251cc911ceb6f049c9ee4b9de0cb9ee6 Mon Sep 17 00:00:00 2001 From: Rory Hunter Date: Mon, 22 Oct 2018 11:30:12 +0100 Subject: [PATCH 2/2] Fixes from review --- src/components/form/radio/index.d.ts | 8 ++++++-- src/components/form/radio/radio_group.js | 2 ++ src/components/form/range/index.d.ts | 7 +++++++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/components/form/radio/index.d.ts b/src/components/form/radio/index.d.ts index 0826be46c52..915da2ae31b 100644 --- a/src/components/form/radio/index.d.ts +++ b/src/components/form/radio/index.d.ts @@ -1,6 +1,6 @@ /// -import { SFC, ChangeEventHandler, InputHTMLAttributes, HTMLAttributes, ReactNode } from 'react'; +import { SFC, ChangeEventHandler, HTMLAttributes, ReactNode } from 'react'; declare module '@elastic/eui' { /** @@ -30,10 +30,14 @@ declare module '@elastic/eui' { autoFocus?: boolean; compressed?: boolean; label?: ReactNode; + name?: string; + value?: string; + checked?: boolean; + disabled?: boolean; onChange: ChangeEventHandler; // overriding to make it required } export const EuiRadio: SFC< - CommonProps & InputHTMLAttributes & EuiRadioProps + CommonProps & HTMLAttributes & EuiRadioProps >; } diff --git a/src/components/form/radio/radio_group.js b/src/components/form/radio/radio_group.js index 44799023540..d1c976a85b2 100644 --- a/src/components/form/radio/radio_group.js +++ b/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, diff --git a/src/components/form/range/index.d.ts b/src/components/form/range/index.d.ts index aa6271b1980..c1d95ba4c5d 100644 --- a/src/components/form/range/index.d.ts +++ b/src/components/form/range/index.d.ts @@ -14,6 +14,13 @@ declare module '@elastic/eui' { 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;