Give close button on flyout a data-test-subj (#1000)

* Give close button on flyout a data-test-subj * update changelog * Update jest snapshots and improve changelod message * add space
elastic · Jul 11, 2018 · 43a82b3 · 43a82b3
1 parent 1082089
commit 43a82b3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `1.2.1`.
+- Gave `EuiFlyout` close button a data-test-subj ([#1000](https://github.com/elastic/eui/pull/1000/files))
 
 ## [`1.2.1`](https://github.com/elastic/eui/tree/v1.2.1)
 

diff --git a/src/components/flyout/__snapshots__/flyout.test.js.snap b/src/components/flyout/__snapshots__/flyout.test.js.snap
@@ -13,6 +13,7 @@ exports[`EuiFlyout is rendered 1`] = `
       <button
         aria-label="Closes this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
         <svg
@@ -65,6 +66,7 @@ exports[`EuiFlyout size l is rendered 1`] = `
       <button
         aria-label="Closes this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
         <svg
@@ -105,6 +107,7 @@ exports[`EuiFlyout size m is rendered 1`] = `
       <button
         aria-label="Closes this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
         <svg
@@ -145,6 +148,7 @@ exports[`EuiFlyout size s is rendered 1`] = `
       <button
         aria-label="Closes this dialog"
         class="euiButtonIcon euiButtonIcon--text euiFlyout__closeButton"
+        data-test-subj="euiFlyoutCloseButton"
         type="button"
       >
         <svg

diff --git a/src/components/flyout/flyout.js b/src/components/flyout/flyout.js
@@ -1,6 +1,4 @@
-import React, {
-  Component,
-} from 'react';
+import React, { Component } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import FocusTrap from 'focus-trap-react';
@@ -28,21 +26,9 @@ export class EuiFlyout extends Component {
   };
 
   render() {
-    const {
-      className,
-      children,
-      hideCloseButton,
-      onClose,
-      ownFocus,
-      size,
-      ...rest
-    } = this.props;
+    const { className, children, hideCloseButton, onClose, ownFocus, size, ...rest } = this.props;
 
-    const classes = classnames(
-      'euiFlyout',
-      sizeToClassNameMap[size],
-      className
-    );
+    const classes = classnames('euiFlyout', sizeToClassNameMap[size], className);
 
     let closeButton;
     if (onClose && !hideCloseButton) {
@@ -53,14 +39,17 @@ export class EuiFlyout extends Component {
           color="text"
           aria-label="Closes this dialog"
           onClick={onClose}
+          data-test-subj="euiFlyoutCloseButton"
         />
       );
     }
 
     const flyoutContent = (
       <div
         role="dialog"
-        ref={node => { this.flyout = node; }}
+        ref={node => {
+          this.flyout = node;
+        }}
         className={classes}
         tabIndex={0}
         onKeyDown={this.onKeyDown}
@@ -75,9 +64,7 @@ export class EuiFlyout extends Component {
     // to click it to close it.
     let optionalOverlay;
     if (ownFocus) {
-      optionalOverlay = (
-        <EuiOverlayMask onClick={onClose} />
-      );
+      optionalOverlay = <EuiOverlayMask onClick={onClose} />;
     }
 
     return (