[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 <[email protected]> * removed as EuiRadioProps Co-authored-by: Greg Thompson <[email protected]>
elastic · Apr 27, 2020 · 4582b32 · 4582b32
1 parent 43f0cf6
commit 4582b32
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 8 deletions.
diff --git 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
@@ -24,26 +24,33 @@ import React, {
   ReactNode,
 } from 'react';
 import classNames from 'classnames';
-import { CommonProps } from '../../common';
+import { CommonProps, ExclusiveUnion } from '../../common';
 
 export interface RadioProps {
   autoFocus?: boolean;
   /**
    * When `true` creates a shorter height radio row
    */
   compressed?: boolean;
-  label?: ReactNode;
   name?: string;
   value?: string;
   checked?: boolean;
   disabled?: boolean;
   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
@@ -75,17 +75,21 @@ export const EuiRadioGroup: FunctionComponent<EuiRadioGroupProps> = ({
     const {
       disabled: isOptionDisabled,
       className: optionClass,
+      id,
+      label,
       ...optionRest
     } = option;
     return (
       <EuiRadio
         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}
       />
     );