Allow accordions to change height while open, and permit value on radio inputs

CHANGELOG.md

@@ -1,6 +1,13 @@
 # [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.38`.
+**Bug fixes**
+
+- Allow accordions to dynamically change height, and support values on radio inputs ([#613](https://github.com/elastic/eui/pull/613))
+- Accordion toggle layout is no longer flagged responsive, in order to prevent unwanted stacking on mobile ([#613](https://github.com/elastic/eui/pull/613))
+
+**Breaking changes**
+
+- Support values on radio inputs. This is breaking because now the second argument to the radio `onChange` callback is the value, which bumps the change event to the third argument ([#613](https://github.com/elastic/eui/pull/613))
 
 # [`0.0.38`](https://github.com/elastic/eui/tree/v0.0.38)
 

src-docs/src/views/accordion/accordion_example.js

@@ -27,6 +27,10 @@ import AccordionOpen from './accordion_open';
 const accordionOpenSource = require('!!raw-loader!./accordion_open');
 const accordionOpenHtml = renderToHtml(AccordionOpen);
 
+import AccordionGrow from './accordion_grow';
+const accordionGrowSource = require('!!raw-loader!./accordion_grow');
+const accordionGrowHtml = renderToHtml(AccordionGrow);
+
 export const AccordionExample = {
   title: 'Accordion',
   sections: [{
@@ -94,6 +98,22 @@ export const AccordionExample = {
       </p>
     ),
     demo: <AccordionOpen />,
+  }, {
+    title: 'Accordion content can dynamically change height',
+    source: [{
+      type: GuideSectionTypes.JS,
+      code: accordionGrowSource,
+    }, {
+      type: GuideSectionTypes.HTML,
+      code: accordionGrowHtml,
+    }],
+    text: (
+      <p>
+        If an accordion&rsquo;s content changes height while the accordion is open,
+        it will resize dynamically.
+      </p>
+    ),
+    demo: <AccordionGrow />,
   }, {
     title: 'Accordion for forms',
     source: [{

src-docs/src/views/accordion/accordion_grow.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+
+import {
+  EuiAccordion,
+  EuiButton,
+  EuiSpacer,
+  EuiText,
+} from '../../../../src/components';
+
+
+class AccordionGrow extends Component {
+  state = {
+    counter: 1
+  }
+
+  render() {
+    const rows = [];
+    for (let i = 1; i <= this.state.counter; i++) {
+      rows.push(<p key={i}>Row {i}</p>);
+    }
+
+    return (
+      <EuiAccordion
+        id="accordion1"
+        buttonContent="Click me to toggle close / open"
+        initialIsOpen={true}
+      >
+        <EuiText>
+          <EuiSpacer size='s' />
+          <p>
+            <EuiButton onClick={() => this.onIncrease()}>Increase height</EuiButton>
+            {' '}
+            <EuiButton onClick={() => this.onDecrease()}>Decrease height</EuiButton>
+          </p>
+          { rows }
+        </EuiText>
+      </EuiAccordion>
+    );
+  }
+
+  onIncrease() {
+    this.setState(prevState => ({
+      counter: prevState.counter + 1
+    }));
+  }
+
+  onDecrease() {
+    this.setState(prevState => ({
+      counter: Math.max(0, prevState.counter - 1)
+    }));
+  }
+}
+
+export default AccordionGrow;

src/components/accordion/__snapshots__/accordion.test.js.snap

@@ -37,11 +37,11 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
                 component="div"
                 gutterSize="s"
                 justifyContent="flexStart"
-                responsive={true}
+                responsive={false}
                 wrap={false}
               >
                 <div
-                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
+                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter"
                 >
                   <EuiFlexItem
                     component="div"
@@ -159,11 +159,11 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
                 component="div"
                 gutterSize="s"
                 justifyContent="flexStart"
-                responsive={true}
+                responsive={false}
                 wrap={false}
               >
                 <div
-                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
+                  className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter"
                 >
                   <EuiFlexItem
                     component="div"
@@ -261,7 +261,7 @@ exports[`EuiAccordion is rendered 1`] = `
         class="euiAccordion__button"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter"
         >
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -319,7 +319,7 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
         class="euiAccordion__button"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter"
         >
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -381,7 +381,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
         class="euiAccordion__button"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter"
         >
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -439,7 +439,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
         class="euiAccordion__button"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter"
         >
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
@@ -504,7 +504,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
         class="euiAccordion__button"
       >
         <div
-          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--responsive"
+          class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter"
         >
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"

src/components/accordion/accordion.js

@@ -24,18 +24,16 @@ 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;
-    this.setState({
-      isOpen: !currentState,
-    });
-
-    if (!currentState) {
-      this.childWrapper.setAttribute('style', `height: ${height}px`);
-    } else {
-      this.childWrapper.setAttribute('style', `height: 0px`);
-    }
+    this.setState(prevState => ({
+      isOpen: !prevState.isOpen
+    }));
   }
 
   render() {
@@ -96,7 +94,7 @@ export class EuiAccordion extends Component {
               onClick={this.onToggle}
               className={buttonClasses}
             >
-              <EuiFlexGroup gutterSize="s" alignItems="center">
+              <EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   {icon}
                 </EuiFlexItem>

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.id, option.value)}
         />
       );
     })}
@@ -35,6 +36,7 @@ EuiRadioGroup.propTypes = {
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       label: PropTypes.node,
+      value: PropTypes.string,
     }),
   ).isRequired,
   idSelected: PropTypes.string,