Add support for radio names (#348)

* Add support for radio names * Add PR link
elastic · Jan 30, 2018 · bf1fe70 · bf1fe70
1 parent 5a7c352
commit bf1fe70
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
+- `EuiRadio` now supports the `input` tag's `name` attribute. `EuiRadioGroup` accepts a `name` prop that will propagate to its `EuiRadio`s. ([#348](https://github.com/elastic/eui/pull/348))
 - Machine learning create jobs icon set. ([#338](https://github.com/elastic/eui/pull/338))
 - Initial commit of `EuiTableOfRecords` - a higher level table component to take away all your table listings frustrations. ([#250](https://github.com/elastic/eui/pull/250))
 

diff --git a/src/components/form/radio/__snapshots__/radio_group.test.js.snap b/src/components/form/radio/__snapshots__/radio_group.test.js.snap
@@ -58,6 +58,57 @@ exports[`EuiRadioGroup props idSelected is rendered 1`] = `
 </div>
 `;
 
+exports[`EuiRadioGroup props name is propagated to radios 1`] = `
+<div>
+  <div
+    class="euiRadio euiRadioGroup__item"
+  >
+    <input
+      class="euiRadio__input"
+      id="1"
+      name="radiogroupname"
+      type="radio"
+    />
+    <div
+      class="euiRadio__circle"
+    >
+      <div
+        class="euiRadio__check"
+      />
+    </div>
+    <label
+      class="euiRadio__label"
+      for="1"
+    >
+      Option #1
+    </label>
+  </div>
+  <div
+    class="euiRadio euiRadioGroup__item"
+  >
+    <input
+      class="euiRadio__input"
+      id="2"
+      name="radiogroupname"
+      type="radio"
+    />
+    <div
+      class="euiRadio__circle"
+    >
+      <div
+        class="euiRadio__check"
+      />
+    </div>
+    <label
+      class="euiRadio__label"
+      for="2"
+    >
+      Option #2
+    </label>
+  </div>
+</div>
+`;
+
 exports[`EuiRadioGroup props options are rendered 1`] = `
 <div>
   <div

diff --git a/src/components/form/radio/radio.js b/src/components/form/radio/radio.js
@@ -5,6 +5,7 @@ import classNames from 'classnames';
 export const EuiRadio = ({
   className,
   id,
+  name,
   checked,
   label,
   onChange,
@@ -38,6 +39,7 @@ export const EuiRadio = ({
         className="euiRadio__input"
         type="radio"
         id={id}
+        name={name}
         checked={checked}
         onChange={onChange}
         disabled={disabled}

diff --git a/src/components/form/radio/radio_group.js b/src/components/form/radio/radio_group.js
@@ -7,6 +7,7 @@ export const EuiRadioGroup = ({
   options,
   idSelected,
   onChange,
+  name,
   className,
   disabled,
   ...rest
@@ -18,6 +19,7 @@ export const EuiRadioGroup = ({
           className="euiRadioGroup__item"
           key={index}
           id={option.id}
+          name={name}
           checked={option.id === idSelected}
           label={option.label}
           disabled={disabled}

diff --git a/src/components/form/radio/radio_group.test.js b/src/components/form/radio/radio_group.test.js
@@ -32,6 +32,22 @@ describe('EuiRadioGroup', () => {
         .toMatchSnapshot();
     });
 
+    test('name is propagated to radios', () => {
+      const component = render(
+        <EuiRadioGroup
+          name="radiogroupname"
+          options={[
+            { id: '1', label: 'Option #1' },
+            { id: '2', label: 'Option #2' }
+          ]}
+          onChange={() => {}}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
     test('idSelected is rendered', () => {
       const component = render(
         <EuiRadioGroup