EuiAccordion onToggle callback

CHANGELOG.md

@@ -2,8 +2,9 @@
 
 - Converted `EuiTableRowCellCheckbox` to TS ([#1964](https://github.com/elastic/eui/pull/1964))
 - Updated `caniuse-lite` version resolution ([#1970](https://github.com/elastic/eui/pull/1970))
-- Added a webpack directive for naming icon chunks ([#1944])(https://github.com/elastic/eui/pull/1944))
+- Added a webpack directive for naming icon chunks ([#1944](https://github.com/elastic/eui/pull/1944))
 - Added ability to update `EuiInMemoryTable` `sorting` prop and remove columns after sorting is applied ([#1972](https://github.com/elastic/eui/pull/1972))
+- Added `onToggle` callback to `EuiAccordion` ([#1974](https://github.com/elastic/eui/pull/1974))
 
 **Bug fixes**
 

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

@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { EuiAccordion, EuiText, EuiCode } from '../../../../src/components';
+
+export default () => (
+  <div>
+    <EuiAccordion
+      id="accordion1"
+      buttonContent="I have an `onToggle` callback"
+      onToggle={isOpen =>
+        console.log(`EuiAccordion is now ${isOpen ? 'open' : 'closed'}`)
+      }
+      paddingSize="l">
+      <EuiText>
+        <p>
+          Any content inside of <EuiCode>EuiAccordion</EuiCode> will appear
+          here.
+        </p>
+      </EuiText>
+    </EuiAccordion>
+  </div>
+);

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

@@ -71,6 +71,18 @@ const accordionOpenSnippet = `<EuiAccordion
 </EuiAccordion>
 `;
 
+import AccordionCallback from './accordion_callback';
+const accordionCallbackSource = require('!!raw-loader!./accordion_callback');
+const accordionCallbackHtml = renderToHtml(AccordionCallback);
+const accordionCallbackSnippet = `<EuiAccordion
+  id={accordionId}
+  buttonContent="Clickable title"
+  onToggle={isOpen => handleOnToggle(isOpen)}
+  >
+    <!-- Content to show when expanded -->
+</EuiAccordion>
+`;
+
 import AccordionGrow from './accordion_grow';
 const accordionGrowSource = require('!!raw-loader!./accordion_grow');
 const accordionGrowHtml = renderToHtml(AccordionGrow);
@@ -204,6 +216,27 @@ export const AccordionExample = {
       snippet: accordionOpenSnippet,
       demo: <AccordionOpen />,
     },
+    {
+      title: 'Accordion can call a function on open and close',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: accordionCallbackSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: accordionCallbackHtml,
+        },
+      ],
+      text: (
+        <p>
+          Use the <EuiCode>onToggle</EuiCode> prop to pass a callback method
+          that will be called on open and close.
+        </p>
+      ),
+      snippet: accordionCallbackSnippet,
+      demo: <AccordionCallback />,
+    },
     {
       title: 'Accordion content can dynamically change height',
       source: [

src/components/accordion/accordion.js

@@ -50,9 +50,14 @@ export class EuiAccordion extends Component {
   }
 
   onToggle() {
-    this.setState(prevState => ({
-      isOpen: !prevState.isOpen,
-    }));
+    this.setState(
+      prevState => ({
+        isOpen: !prevState.isOpen,
+      }),
+      () => {
+        this.props.onToggle && this.props.onToggle(this.state.isOpen);
+      }
+    );
   }
 
   setChildContentRef = node => {
@@ -183,6 +188,10 @@ EuiAccordion.propTypes = {
    * The padding around the exposed accordion content.
    */
   paddingSize: PropTypes.oneOf(PADDING_SIZES),
+  /**
+   * Optional callback method called on open and close with a single `isOpen` parameter
+   */
+  onToggle: PropTypes.func,
 };
 
 EuiAccordion.defaultProps = {

src/components/accordion/accordion.test.js

@@ -84,5 +84,20 @@ describe('EuiAccordion', () => {
 
       expect(component).toMatchSnapshot();
     });
+
+    it('accepts and calls an optional callback on open and close', () => {
+      const onToggleHandler = jest.fn();
+      const component = mount(
+        <EuiAccordion id={getId()} onToggle={onToggleHandler} />
+      );
+
+      component.find('button').simulate('click');
+      expect(onToggleHandler).toBeCalled();
+      expect(onToggleHandler).toBeCalledWith(true);
+
+      component.find('button').simulate('click');
+      expect(onToggleHandler).toBeCalled();
+      expect(onToggleHandler).toBeCalledWith(false);
+    });
   });
 });

src/components/accordion/index.d.ts

@@ -11,10 +11,11 @@ declare module '@elastic/eui' {
     buttonContent?: ReactNode;
     extraAction?: ReactNode;
     initialIsOpen?: boolean;
+    onToggle?: (isOpen: boolean) => void;
     paddingSize?: EuiAccordionSize;
   }
 
   export class EuiAccordion extends Component<
     CommonProps & HTMLAttributes<HTMLDivElement> & EuiAccordionProps
-    > {}
+  > {}
 }