From 5649395ce6c123a92ae2320c3531a19f5ef575bb Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Fri, 24 Apr 2020 02:08:35 +0530 Subject: [PATCH 1/6] id is required if lable is passed --- CHANGELOG.md | 1 + src/components/form/radio/radio.tsx | 19 +++++++++++++------ src/components/form/radio/radio_group.tsx | 2 +- 3 files changed, 15 insertions(+), 7 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 888c37bbca1..6113c98fb37 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ **Bug Fixes** +- Added need of `id` if `lable` is passed to issue in `EuiRadio` ([#3376](https://github.com/elastic/eui/pull/3376)) - Fixed z-index issue in `EuiDatePicker` where it's popover would sit beneath other DOM siblings that had z-index applied ([#3376](https://github.com/elastic/eui/pull/3376)) - Added `download` glyph to `EuiIcon` ([#3364](https://github.com/elastic/eui/pull/3364)) - Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers ([#3375](https://github.com/elastic/eui/pull/3375)) diff --git a/src/components/form/radio/radio.tsx b/src/components/form/radio/radio.tsx index 264549baaed..21eacdd1c1e 100644 --- a/src/components/form/radio/radio.tsx +++ b/src/components/form/radio/radio.tsx @@ -24,7 +24,7 @@ import React, { ReactNode, } from 'react'; import classNames from 'classnames'; -import { CommonProps } from '../../common'; +import { CommonProps, ExclusiveUnion } from '../../common'; export interface RadioProps { autoFocus?: boolean; @@ -32,7 +32,6 @@ export interface RadioProps { * When `true` creates a shorter height radio row */ compressed?: boolean; - label?: ReactNode; name?: string; value?: string; checked?: boolean; @@ -40,10 +39,18 @@ export interface RadioProps { onChange: ChangeEventHandler; } -export interface EuiRadioProps - extends CommonProps, - Omit, 'onChange'>, - RadioProps {} +interface idWithLable extends RadioProps { + label: ReactNode; + id: string; +} + +interface withId extends RadioProps { + id: string; +} + +export type EuiRadioProps = CommonProps & + Omit, 'onChange'> & + ExclusiveUnion, withId>; export const EuiRadio: FunctionComponent = ({ className, diff --git a/src/components/form/radio/radio_group.tsx b/src/components/form/radio/radio_group.tsx index 3823e8491f3..a7b002a04f2 100644 --- a/src/components/form/radio/radio_group.tsx +++ b/src/components/form/radio/radio_group.tsx @@ -86,7 +86,7 @@ export const EuiRadioGroup: FunctionComponent = ({ disabled={disabled || isOptionDisabled} onChange={onChange.bind(null, option.id, option.value)} compressed={compressed} - {...optionRest} + {...optionRest as EuiRadioProps} /> ); }); From 4bdbd2e898edd087896629f3c1068cf22b94e3ec Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Fri, 24 Apr 2020 02:11:42 +0530 Subject: [PATCH 2/6] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6113c98fb37..ffe3f0290a5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ **Bug Fixes** -- Added need of `id` if `lable` is passed to issue in `EuiRadio` ([#3376](https://github.com/elastic/eui/pull/3376)) +- Added need of `id` if `lable` is passed to issue in `EuiRadio` ([#3382](https://github.com/elastic/eui/pull/3382)) - Fixed z-index issue in `EuiDatePicker` where it's popover would sit beneath other DOM siblings that had z-index applied ([#3376](https://github.com/elastic/eui/pull/3376)) - Added `download` glyph to `EuiIcon` ([#3364](https://github.com/elastic/eui/pull/3364)) - Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers ([#3375](https://github.com/elastic/eui/pull/3375)) From ac95feb8a8941db43e85f12499a1dfb16988a68b Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Fri, 24 Apr 2020 20:16:34 +0530 Subject: [PATCH 3/6] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ffe3f0290a5..f49264bcbc4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ **Bug Fixes** -- Added need of `id` if `lable` is passed to issue in `EuiRadio` ([#3382](https://github.com/elastic/eui/pull/3382)) +- Added need of `id` if `label` is passed to issue in `EuiRadio` ([#3382](https://github.com/elastic/eui/pull/3382)) - Fixed z-index issue in `EuiDatePicker` where it's popover would sit beneath other DOM siblings that had z-index applied ([#3376](https://github.com/elastic/eui/pull/3376)) - Added `download` glyph to `EuiIcon` ([#3364](https://github.com/elastic/eui/pull/3364)) - Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers ([#3375](https://github.com/elastic/eui/pull/3375)) From c04ae6cab9d86ea6f83763a721344b2c52fd025a Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Fri, 24 Apr 2020 20:17:22 +0530 Subject: [PATCH 4/6] Update radio.tsx --- src/components/form/radio/radio.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/form/radio/radio.tsx b/src/components/form/radio/radio.tsx index 21eacdd1c1e..d77ca7ed6d7 100644 --- a/src/components/form/radio/radio.tsx +++ b/src/components/form/radio/radio.tsx @@ -39,7 +39,7 @@ export interface RadioProps { onChange: ChangeEventHandler; } -interface idWithLable extends RadioProps { +interface idWithLabel extends RadioProps { label: ReactNode; id: string; } @@ -50,7 +50,7 @@ interface withId extends RadioProps { export type EuiRadioProps = CommonProps & Omit, 'onChange'> & - ExclusiveUnion, withId>; + ExclusiveUnion, withId>; export const EuiRadio: FunctionComponent = ({ className, From 9fd068e725a62caf23775d0739571ab6adbd8cdb Mon Sep 17 00:00:00 2001 From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com> Date: Mon, 27 Apr 2020 22:16:49 +0530 Subject: [PATCH 5/6] Update CHANGELOG.md Co-Authored-By: Greg Thompson --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f49264bcbc4..a3a4bb717c6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,7 +6,7 @@ **Bug Fixes** -- Added need of `id` if `label` is passed to issue in `EuiRadio` ([#3382](https://github.com/elastic/eui/pull/3382)) +- Added `id` requirement if `label` is used in `EuiRadio` ([#3382](https://github.com/elastic/eui/pull/3382)) - Fixed z-index issue in `EuiDatePicker` where it's popover would sit beneath other DOM siblings that had z-index applied ([#3376](https://github.com/elastic/eui/pull/3376)) - Added `download` glyph to `EuiIcon` ([#3364](https://github.com/elastic/eui/pull/3364)) - Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers ([#3375](https://github.com/elastic/eui/pull/3375)) From 61b358b32af5b0e9180b87cf95301a13e537104f Mon Sep 17 00:00:00 2001 From: Anish Aggarwal Date: Mon, 27 Apr 2020 22:22:02 +0530 Subject: [PATCH 6/6] removed as EuiRadioProps --- src/components/form/radio/radio_group.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/form/radio/radio_group.tsx b/src/components/form/radio/radio_group.tsx index a7b002a04f2..e63654a4b8c 100644 --- a/src/components/form/radio/radio_group.tsx +++ b/src/components/form/radio/radio_group.tsx @@ -75,6 +75,8 @@ export const EuiRadioGroup: FunctionComponent = ({ const { disabled: isOptionDisabled, className: optionClass, + id, + label, ...optionRest } = option; return ( @@ -82,11 +84,13 @@ export const EuiRadioGroup: FunctionComponent = ({ className={classNames('euiRadioGroup__item', optionClass)} key={index} name={name} - checked={option.id === idSelected} + checked={id === idSelected} disabled={disabled || isOptionDisabled} - onChange={onChange.bind(null, option.id, option.value)} + onChange={onChange.bind(null, id, option.value)} compressed={compressed} - {...optionRest as EuiRadioProps} + id={id} + label={label} + {...optionRest} /> ); });