Allow accordions to change height while open, and permit value on rad…

…io inputs

CHANGELOG.md

@@ -4,7 +4,7 @@
 
 - Visual fix for the focus state of disabled `EuiButton` ([603](https://github.com/elastic/eui/pull/603))
 - `EuiSelect` can pass any node as a value rather than just a string ([603](https://github.com/elastic/eui/pull/603))
-
+- Allow accordions to dynamically change height, and support values on radio inputs ([#613](https://github.com/elastic/eui/pull/613))
 
 # [`0.0.37`](https://github.com/elastic/eui/tree/v0.0.37)
 

src/components/accordion/accordion.js

@@ -24,18 +24,20 @@ export class EuiAccordion extends Component {
     this.onToggle = this.onToggle.bind(this);
   }
 
+  componentDidUpdate() {
+    const height = this.state.isOpen ? this.childContent.clientHeight: 0
+
+    this.childWrapper.setAttribute('style', `height: ${height}px`);
+  }
+
   onToggle() {
-    const currentState = this.state.isOpen;
-    const height = this.childContent.clientHeight;
+    const isOpen = !this.state.isOpen;
     this.setState({
-      isOpen: !currentState,
+      isOpen: isOpen,
     });
 
-    if (!currentState) {
-      this.childWrapper.setAttribute('style', `height: ${height}px`);
-    } else {
-      this.childWrapper.setAttribute('style', `height: 0px`);
-    }
+    const height = isOpen ? this.childContent.clientHeight : 0;
+    this.childWrapper.setAttribute('style', `height: ${height}px`);
   }
 
   render() {

src/components/form/radio/__snapshots__/radio.test.js.snap

@@ -71,3 +71,19 @@ exports[`EuiRadio props label is rendered 1`] = `
   </label>
 </div>
 `;
+
+exports[`EuiRadio props value is rendered 1`] = `
+<div
+  class="euiRadio euiRadio--noLabel"
+>
+  <input
+    class="euiRadio__input"
+    id="id"
+    type="radio"
+    value="bobbins"
+  />
+  <div
+    class="euiRadio__circle"
+  />
+</div>
+`;

src/components/form/radio/__snapshots__/radio_group.test.js.snap

@@ -133,3 +133,48 @@ exports[`EuiRadioGroup props options are rendered 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiRadioGroup props value is propagated to radios 1`] = `
+<div>
+  <div
+    class="euiRadio euiRadioGroup__item"
+  >
+    <input
+      class="euiRadio__input"
+      id="1"
+      name="radiogroupname"
+      type="radio"
+      value="Value #1"
+    />
+    <div
+      class="euiRadio__circle"
+    />
+    <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"
+      value="Value #2"
+    />
+    <div
+      class="euiRadio__circle"
+    />
+    <label
+      class="euiRadio__label"
+      for="2"
+    >
+      Option #2
+    </label>
+  </div>
+</div>
+`;

src/components/form/radio/radio.js

@@ -8,6 +8,7 @@ export const EuiRadio = ({
   name,
   checked,
   label,
+  value,
   onChange,
   disabled,
   ...rest
@@ -43,6 +44,7 @@ export const EuiRadio = ({
         type="radio"
         id={id}
         name={name}
+        value={value}
         checked={checked}
         onChange={onChange}
         disabled={disabled}
@@ -60,6 +62,7 @@ EuiRadio.propTypes = {
   id: PropTypes.string.isRequired,
   checked: PropTypes.bool.isRequired,
   label: PropTypes.node,
+  value: PropTypes.string,
   onChange: PropTypes.func.isRequired,
   disabled: PropTypes.bool,
 };

src/components/form/radio/radio.test.js

@@ -33,6 +33,15 @@ describe('EuiRadio', () => {
         .toMatchSnapshot();
     });
 
+    test('value is rendered', () => {
+      const component = render(
+        <EuiRadio id="id" onChange={() => {}} value={'bobbins'}/>
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+
     test('disabled is rendered', () => {
       const component = render(
         <EuiRadio id="id" onChange={() => {}} disabled/>

src/components/form/radio/radio_group.js

@@ -22,8 +22,9 @@ export const EuiRadioGroup = ({
           name={name}
           checked={option.id === idSelected}
           label={option.label}
+          value={option.value}
           disabled={disabled}
-          onChange={onChange.bind(null, option.id)}
+          onChange={onChange.bind(null, option.value || option.id)}
         />
       );
     })}
@@ -35,6 +36,7 @@ EuiRadioGroup.propTypes = {
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       label: PropTypes.node,
+      value: PropTypes.string,
     }),
   ).isRequired,
   idSelected: PropTypes.string,

src/components/form/radio/radio_group.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from 'enzyme';
+import { render, mount } from 'enzyme';
 import { requiredProps } from '../../../test';
 
 import { EuiRadioGroup } from './radio_group';
@@ -63,5 +63,69 @@ describe('EuiRadioGroup', () => {
       expect(component)
         .toMatchSnapshot();
     });
+
+    test('value is propagated to radios', () => {
+      const component = render(
+        <EuiRadioGroup
+          name="radiogroupname"
+          options={[
+            { id: '1', label: 'Option #1', value: 'Value #1' },
+            { id: '2', label: 'Option #2', value: 'Value #2' }
+          ]}
+          onChange={() => {}}
+        />
+      );
+
+      expect(component)
+        .toMatchSnapshot();
+    });
+  });
+
+  describe('callbacks', () => {
+    test('id is used in callbacks when no value is available', () => {
+      const callback = jest.fn()
+
+      const component = mount(
+        <EuiRadioGroup
+          name="radiogroupname"
+          options={[
+            { id: '1', label: 'Option #1' },
+            { id: '2', label: 'Option #2' }
+          ]}
+          onChange={callback}
+        />
+      );
+
+      component.find('input[id="2"]').simulate('change')
+
+      expect(callback.mock.calls.length).toEqual(1);
+      expect(callback.mock.calls[0].length).toBeGreaterThan(0);
+      // Only check the first argument - the callback is also invoked with
+      // the event, but that's not assert-able.
+      expect(callback.mock.calls[0][0]).toEqual('2');
+    });
+
+    test('value is used in callbacks when available', () => {
+      const callback = jest.fn()
+
+      const component = mount(
+        <EuiRadioGroup
+          name="radiogroupname"
+          options={[
+            { id: '1', label: 'Option #1', value: 'Value #1' },
+            { id: '2', label: 'Option #2', value: 'Value #2' }
+          ]}
+          onChange={callback}
+        />
+      );
+
+      component.find('input[id="2"]').simulate('change')
+
+      expect(callback.mock.calls.length).toEqual(1);
+      expect(callback.mock.calls[0].length).toBeGreaterThan(0);
+      // Only check the first argument - the callback is also invoked with
+      // the event, but that's not assert-able.
+      expect(callback.mock.calls[0][0]).toEqual('Value #2');
+    });
   });
 });