[breaking change] Remove findDOMNode

CHANGELOG.md

@@ -1,6 +1,12 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `4.8.0`.
+- Removed calls to deprecated `findDOMNode` ([#1285](https://github.com/elastic/eui/pull/1285))
+
+**Breaking changes**
+
+- Changed `EuiMutationObserver` to a render prop component ([#1285](https://github.com/elastic/eui/pull/1285))
+- `EuiPortal` no longer accepts a React node for `insert.sibling` value ([#1285](https://github.com/elastic/eui/pull/1285))
+- `popover_positioning` service's methods no longer accept React node values ([#1285](https://github.com/elastic/eui/pull/1285))
 
 ## [`4.8.0`](https://github.com/elastic/eui/tree/v4.8.0)
 
@@ -9,6 +15,10 @@ No public interface changes since `4.8.0`.
 
 **Bug fixes**
 
+- Added TypeScript definitions for `EuiToolTip`'s `delay` prop. ([#1284](https://github.com/elastic/eui/pull/1284))
+
+**Bug fixes**
+
 - Added TypeScript definitions for `EuiToolTip`'s `delay` prop. ([#1284](https://github.com/elastic/eui/pull/1284))
 - Added TypeScript definitions for step components, and some checkbox definition fixes ([#1263](https://github.com/elastic/eui/pull/1263))
 

src-docs/src/views/mutation_observer/mutation_observer.js

@@ -54,25 +54,29 @@ export class MutationObserver extends Component {
           observerOptions={{ subtree: true, attributes: true, childList: true }}
           onMutation={this.onMutation}
         >
+          {mutationRef => (
+            <div ref={mutationRef}>
 
-          <EuiButton color={this.state.buttonColor} fill={true} onClick={this.toggleButtonColor}>
-            Toggle button color
-          </EuiButton>
+              <EuiButton color={this.state.buttonColor} fill={true} onClick={this.toggleButtonColor}>
+                Toggle button color
+              </EuiButton>
 
-          <EuiSpacer/>
+              <EuiSpacer/>
 
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <EuiPanel grow={false}>
-                <ul>
-                  {this.state.items.map(item => <li key={item}>{item}</li>)}
-                </ul>
-                <EuiSpacer size="s"/>
-                <EuiButtonEmpty onClick={this.addItem}>add item</EuiButtonEmpty>
-              </EuiPanel>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+              <EuiFlexGroup>
+                <EuiFlexItem grow={false}>
+                  <EuiPanel grow={false}>
+                    <ul>
+                      {this.state.items.map(item => <li key={item}>{item}</li>)}
+                    </ul>
+                    <EuiSpacer size="s"/>
+                    <EuiButtonEmpty onClick={this.addItem}>add item</EuiButtonEmpty>
+                  </EuiPanel>
+                </EuiFlexItem>
+              </EuiFlexGroup>
 
+            </div>
+          )}
         </EuiMutationObserver>
       </div>
     );

src-docs/src/views/mutation_observer/mutation_observer_example.js

@@ -28,14 +28,20 @@ export const MutationObserverExample = {
       code: mutationObserverHtml,
     }],
     text: (
-      <p>
-        <EuiCode>MutationObserver</EuiCode> is a wrapper around the
-        <EuiLink href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"> Mutation Observer API </EuiLink>
-        which allows watching for DOM changes to elements and their children.
-        <EuiCode>MutationObserver</EuiCode> takes the same configuration object
-        as the browser API to describe what to watch for, and fires the
-        callback when that mutation happens.
-      </p>
+      <React.Fragment>
+        <p>
+          <EuiCode>MutationObserver</EuiCode> is a wrapper around the
+          <EuiLink href="https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver"> Mutation Observer API </EuiLink>
+          which allows watching for DOM changes to elements and their children.
+          <EuiCode>MutationObserver</EuiCode> takes the same configuration object
+          as the browser API to describe what to watch for, and fires the
+          callback when that mutation happens.
+        </p>
+        <p>
+          This is a render prop component, <EuiCode>MutationObserver</EuiCode> will pass a <EuiCode>ref</EuiCode>
+          callback which you must put on the element you wish to observe the mutations.
+        </p>
+      </React.Fragment>
     ),
     components: { EuiMutationObserver },
     demo: <MutationObserver />,

src-docs/src/views/popover/popover_htmlelement_anchor.js

@@ -3,7 +3,7 @@ import React, {
   Component,
 } from 'react';
 
-import { findDOMNode, render, unmountComponentAtNode } from 'react-dom';
+import { render, unmountComponentAtNode } from 'react-dom';
 
 import {
   EuiWrappingPopover,
@@ -49,9 +49,9 @@ class PopoverApp extends Component {
 }
 
 export default class extends Component {
+
   componentDidMount() {
-    const thisNode = findDOMNode(this);
-    const thisAnchor = thisNode.querySelector('button');
+    const thisAnchor = document.querySelector('#popoverAnchorButton');
 
     // `container` can be created here or use an existing DOM element
     // the popover DOM is positioned independently of where the container exists
@@ -71,7 +71,7 @@ export default class extends Component {
   render() {
     return (
       <div dangerouslySetInnerHTML={{ __html: `
-<button class="euiButton euiButton--primary">
+<button id="popoverAnchorButton" class="euiButton euiButton--primary">
   <span class="euiButton__content">This is an HTML button</span>
 </button>
       ` }}

src/components/accordion/accordion.js

@@ -152,11 +152,13 @@ export class EuiAccordion extends Component {
             observerOptions={{ childList: true, subtree: true }}
             onMutation={this.setChildContentHeight}
           >
-            <div ref={this.setChildContentRef}>
-              <div className={paddingClass}>
-                {children}
+            {mutationRef => (
+              <div ref={ref => {this.setChildContentRef(ref); mutationRef(ref);}}>
+                <div className={paddingClass}>
+                  {children}
+                </div>
               </div>
-            </div>
+            )}
           </EuiMutationObserver>
         </div>
       </div>