From 4582b324c277ac6afa969e5daf8c94debee5da4e Mon Sep 17 00:00:00 2001
From: Anish Aggarwal <43617894+anishagg17@users.noreply.github.com>
Date: Mon, 27 Apr 2020 23:06:34 +0530
Subject: [PATCH] [EuiRadio] Make `id` required if `label` is present (#3382)

* id is required if lable is passed

* Update CHANGELOG.md

* Update CHANGELOG.md

* Update radio.tsx

* Update CHANGELOG.md

Co-Authored-By: Greg Thompson <thompson.glowe@gmail.com>

* removed as EuiRadioProps

Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
---
 CHANGELOG.md                              |  1 +
 src/components/form/radio/radio.tsx       | 19 +++++++++++++------
 src/components/form/radio/radio_group.tsx |  8 ++++++--
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ca6927f2ac6..5c32daa39a2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,7 @@
 
 **Bug Fixes**
 
+- 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))
diff --git a/src/components/form/radio/radio.tsx b/src/components/form/radio/radio.tsx
index 264549baaed..d77ca7ed6d7 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<HTMLInputElement>;
 }
 
-export interface EuiRadioProps
-  extends CommonProps,
-    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>,
-    RadioProps {}
+interface idWithLabel extends RadioProps {
+  label: ReactNode;
+  id: string;
+}
+
+interface withId extends RadioProps {
+  id: string;
+}
+
+export type EuiRadioProps = CommonProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> &
+  ExclusiveUnion<ExclusiveUnion<RadioProps, idWithLabel>, withId>;
 
 export const EuiRadio: FunctionComponent<EuiRadioProps> = ({
   className,
diff --git a/src/components/form/radio/radio_group.tsx b/src/components/form/radio/radio_group.tsx
index 3823e8491f3..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<EuiRadioGroupProps> = ({
     const {
       disabled: isOptionDisabled,
       className: optionClass,
+      id,
+      label,
       ...optionRest
     } = option;
     return (
@@ -82,10 +84,12 @@ export const EuiRadioGroup: FunctionComponent<EuiRadioGroupProps> = ({
         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}
+        id={id}
+        label={label}
         {...optionRest}
       />
     );