From 95bdcff4b30b897c6692e15c909e0f884ce45ee9 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Wed, 2 Aug 2017 11:00:58 -0700
Subject: [PATCH] [UI Framework] [K7] Upgrade linter to 0.9.0. (#13290)

* Upgrade eslint to 0.9.0.
* Fix linting errors in UI Framework.
---
 .../src/views/button/button_with_icon.js      | 16 +--
 .../doc_site/src/views/header/header.js       | 13 ++-
 .../doc_site/src/views/kibana/kibana.js       | 10 +-
 .../doc_site/src/views/page/page_example.js   |  4 +-
 .../views/popover/popover_anchor_position.js  |  2 +-
 .../src/views/typography/medium_title.js      |  2 +-
 .../doc_site/src/views/typography/text.js     |  2 +-
 .../src/views/typography/typography.js        |  2 +-
 .../views/typography/typography_example.js    |  6 +-
 ui_framework/src/components/button/button.js  | 97 +++++++++----------
 .../src/components/button/button.test.js      |  2 +-
 .../src/components/header/header.test.js      |  2 +-
 .../header_breadcrumb.test.js                 |  2 +-
 .../header_breadcrumb_collapsed.test.js       |  2 +-
 .../header_breadcrumbs.test.js                |  2 +-
 .../src/components/header/header_logo.test.js |  2 +-
 .../header_section/header_section.test.js     |  2 +-
 .../header_section_item.test.js               |  2 +-
 .../header_section_item_button.test.js        |  2 +-
 ui_framework/src/components/icon/icon.test.js |  2 +-
 .../key_pad_menu/key_pad_menu.test.js         |  2 +-
 .../key_pad_menu/key_pad_menu_item.test.js    |  4 +-
 .../src/components/loading/loading.test.js    | 16 ---
 .../loading/loading_spinner.test.js           |  2 +-
 .../src/components/modal/confirm_modal.js     | 16 +--
 .../components/modal/confirm_modal.test.js    | 18 ++--
 ui_framework/src/components/modal/modal.js    |  2 +-
 .../src/components/modal/modal.test.js        |  2 +-
 .../src/components/modal/modal_body.js        |  2 +-
 .../src/components/modal/modal_body.test.js   |  2 +-
 .../src/components/modal/modal_body_text.js   |  2 +-
 .../components/modal/modal_body_text.test.js  |  2 +-
 .../src/components/modal/modal_footer.js      |  2 +-
 .../src/components/modal/modal_footer.test.js |  2 +-
 .../src/components/modal/modal_header.js      |  2 +-
 .../src/components/modal/modal_header.test.js |  2 +-
 .../components/modal/modal_header_title.js    |  2 +-
 .../modal/modal_header_title.test.js          |  2 +-
 .../src/components/modal/modal_overlay.js     |  4 +-
 .../components/modal/modal_overlay.test.js    |  2 +-
 ui_framework/src/components/page/page.test.js |  2 +-
 .../page/page_body/page_body.test.js          |  2 +-
 .../page/page_content/page_content.test.js    |  2 +-
 .../page_content/page_content_body.test.js    |  2 +-
 .../page_content/page_content_header.test.js  |  2 +-
 .../page_content_header_section.test.js       |  2 +-
 .../page/page_header/page_header.test.js      |  2 +-
 .../page_header/page_header_section.test.js   |  2 +-
 .../page/page_sidebar/page_sidebar.test.js    |  2 +-
 .../src/components/table/table.test.js        |  2 +-
 .../src/components/table/table_body.js        |  2 +-
 .../src/components/table/table_header.js      |  2 +-
 .../src/components/table/table_row.test.js    |  2 +-
 ui_framework/src/components/tabs/tab.test.js  |  4 +-
 ui_framework/src/components/tabs/tabs.test.js |  2 +-
 .../components/typography/typography.test.js  |  4 +-
 56 files changed, 136 insertions(+), 162 deletions(-)
 delete mode 100644 ui_framework/src/components/loading/loading.test.js

diff --git a/ui_framework/doc_site/src/views/button/button_with_icon.js b/ui_framework/doc_site/src/views/button/button_with_icon.js
index 5cb876123a822..da9168564b3cd 100644
--- a/ui_framework/doc_site/src/views/button/button_with_icon.js
+++ b/ui_framework/doc_site/src/views/button/button_with_icon.js
@@ -8,7 +8,7 @@ export default () => (
   <div>
     <KuiButton
       onClick={() => window.alert('Button clicked')}
-      icon = "arrowUp"
+      icon="arrowUp"
     >
       Default
     </KuiButton>
@@ -17,7 +17,7 @@ export default () => (
 
     <KuiButton
       fill
-      icon = "arrowDown"
+      icon="arrowDown"
       onClick={() => window.alert('Button clicked')}
     >
       Filled
@@ -26,7 +26,7 @@ export default () => (
     &nbsp;&nbsp;
 
     <KuiButton
-      icon = "arrowLeft"
+      icon="arrowLeft"
       size="small"
       onClick={() => window.alert('Button clicked')}
     >
@@ -36,7 +36,7 @@ export default () => (
     &nbsp;&nbsp;
 
     <KuiButton
-      icon = "arrowRight"
+      icon="arrowRight"
       size="small"
       fill
       onClick={() => window.alert('Button clicked')}
@@ -49,7 +49,7 @@ export default () => (
     <KuiButton
       iconReverse
       onClick={() => window.alert('Button clicked')}
-      icon = "arrowUp"
+      icon="arrowUp"
     >
       Default
     </KuiButton>
@@ -59,7 +59,7 @@ export default () => (
     <KuiButton
       iconReverse
       fill
-      icon = "arrowDown"
+      icon="arrowDown"
       onClick={() => window.alert('Button clicked')}
     >
       Filled
@@ -69,7 +69,7 @@ export default () => (
 
     <KuiButton
       iconReverse
-      icon = "arrowLeft"
+      icon="arrowLeft"
       size="small"
       onClick={() => window.alert('Button clicked')}
     >
@@ -80,7 +80,7 @@ export default () => (
 
     <KuiButton
       iconReverse
-      icon = "arrowRight"
+      icon="arrowRight"
       size="small"
       fill
       onClick={() => window.alert('Button clicked')}
diff --git a/ui_framework/doc_site/src/views/header/header.js b/ui_framework/doc_site/src/views/header/header.js
index a157d2f3ddad4..3291bff79089f 100644
--- a/ui_framework/doc_site/src/views/header/header.js
+++ b/ui_framework/doc_site/src/views/header/header.js
@@ -107,8 +107,7 @@ export default class extends Component {
       >
         <div className="kuiHeaderProfile kui--flexRow kui--flexAlignItemsCenter">
           <div className="kui--flexShrink1 kui--paddingRight">
-            <div className="kuiAvatar kuiAvatar--large" style={{ background: `url('http://lorempixel.com/64/64/cats/')` }}>
-            </div>
+            <div className="kuiAvatar kuiAvatar--large" style={{ background: `url('http://lorempixel.com/64/64/cats/')` }} />
           </div>
           <div className="kui--flexGrow1">
             <p className="kui--marginBottom">John Username</p>
@@ -126,8 +125,8 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a notification title</p>
-          <p className="kuiHeaderAlert__text">I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat.</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a notification title</p>
+          <p className="kuiHeaderAlert__text">I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat.</p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">
               <a href="" className="kuiHeaderAlert__action kuiLink">Download your thing here</a>
@@ -141,7 +140,7 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a really long notification title with nonsense beneath it.</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a really long notification title with nonsense beneath it.</p>
           <p className="kuiHeaderAlert__text">Walk the cow through a warm room, and then bring it to my plate.</p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">
@@ -156,10 +155,10 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a notification title</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a notification title</p>
           <p className="kuiHeaderAlert__text">
             Only usable on grilled cheese sandwiches.
-            That is the only application of Kraft Singles as far as I'm concerned.
+            That is the only application of Kraft Singles as far as I&rsquo;m concerned.
           </p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">
diff --git a/ui_framework/doc_site/src/views/kibana/kibana.js b/ui_framework/doc_site/src/views/kibana/kibana.js
index ef11644b79494..9d40b042bf07f 100644
--- a/ui_framework/doc_site/src/views/kibana/kibana.js
+++ b/ui_framework/doc_site/src/views/kibana/kibana.js
@@ -138,8 +138,8 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a notification title</p>
-          <p className="kuiHeaderAlert__text">I am the hat judge. Show me a hat and I will tell you if it's a good hat or bad hat.</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a notification title</p>
+          <p className="kuiHeaderAlert__text">I am the hat judge. Show me a hat and I will tell you if it&rsquo;s a good hat or bad hat.</p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">
               <a href="" className="kuiHeaderAlert__action kuiLink">Download your thing here</a>
@@ -153,7 +153,7 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a really long notification title with nonsense beneath it.</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a really long notification title with nonsense beneath it.</p>
           <p className="kuiHeaderAlert__text">Walk the cow through a warm room, and then bring it to my plate.</p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">
@@ -168,10 +168,10 @@ export default class extends Component {
           <svg tabIndex="0" className="kuiIcon kuiIcon--medium kuiHeaderAlert__dismiss">
             <use href="#cross" />
           </svg>
-          <p className="kuiHeaderAlert__title">Here's a notification title</p>
+          <p className="kuiHeaderAlert__title">Here&rsquo;s a notification title</p>
           <p className="kuiHeaderAlert__text">
             Only usable on grilled cheese sandwiches.
-            That is the only application of Kraft Singles as far as I'm concerned.
+            That is the only application of Kraft Singles as far as I&rsquo;m concerned.
           </p>
           <div className="kui--flexRow">
             <div className="kui--flexGrow1">
diff --git a/ui_framework/doc_site/src/views/page/page_example.js b/ui_framework/doc_site/src/views/page/page_example.js
index 1534ac7db71bc..b71f3e0fefdfd 100644
--- a/ui_framework/doc_site/src/views/page/page_example.js
+++ b/ui_framework/doc_site/src/views/page/page_example.js
@@ -64,7 +64,7 @@ export default props => (
       }]}
     >
       <GuideText>
-        Most pages don't have sidebars. A lot of our pages don't have extra abilities next to the title.
+        Most pages don&rsquo;t have sidebars. A lot of our pages don&rsquo;t have extra abilities next to the title.
         Simply exclude those components and everything will still line up.
       </GuideText>
 
@@ -124,7 +124,7 @@ export default props => (
     >
       <GuideText>
         Centering the content can happen regardless of layout configuration.
-        In this example, we're cetnering within a complex sidebar layout.
+        In this example, we&rsquo;re cetnering within a complex sidebar layout.
       </GuideText>
 
       <GuideDemo>
diff --git a/ui_framework/doc_site/src/views/popover/popover_anchor_position.js b/ui_framework/doc_site/src/views/popover/popover_anchor_position.js
index 3aeac78c5d4bf..786f1f2af5934 100644
--- a/ui_framework/doc_site/src/views/popover/popover_anchor_position.js
+++ b/ui_framework/doc_site/src/views/popover/popover_anchor_position.js
@@ -61,7 +61,7 @@ export default class extends Component {
         <KuiPopover
           button={(
             <button onClick={this.onButtonClick2.bind(this)}>
-              Popover anchored to the right.
+              Popover anchored to the left.
             </button>
           )}
           isOpen={this.state.isPopoverOpen2}
diff --git a/ui_framework/doc_site/src/views/typography/medium_title.js b/ui_framework/doc_site/src/views/typography/medium_title.js
index 4f1faaf2a4d67..a90f9cb983d24 100644
--- a/ui_framework/doc_site/src/views/typography/medium_title.js
+++ b/ui_framework/doc_site/src/views/typography/medium_title.js
@@ -6,6 +6,6 @@ import {
 
 export default () => (
   <KuiTitle>
-    <h2>Here's the title of a section</h2>
+    <h2>Here&rsquo;s the title of a section</h2>
   </KuiTitle>
 );
diff --git a/ui_framework/doc_site/src/views/typography/text.js b/ui_framework/doc_site/src/views/typography/text.js
index 26cdc90735b94..80532a321808b 100644
--- a/ui_framework/doc_site/src/views/typography/text.js
+++ b/ui_framework/doc_site/src/views/typography/text.js
@@ -7,7 +7,7 @@ import {
 export default () => (
   <KuiText>
     <p>
-      The quick brown fox jumped over the lazy dog. But the lazy dog wasn't lazy, it was {
+      The quick brown fox jumped over the lazy dog. But the lazy dog wasn&rsquo;t lazy, it was {
       // react/jsx-closing-tag-location
       } <strong>just practicing mindfulness</strong>, so really in the long run it was much more {
       // react/jsx-closing-tag-location
diff --git a/ui_framework/doc_site/src/views/typography/typography.js b/ui_framework/doc_site/src/views/typography/typography.js
index 7b38493da33d4..0ee1db3ceb045 100644
--- a/ui_framework/doc_site/src/views/typography/typography.js
+++ b/ui_framework/doc_site/src/views/typography/typography.js
@@ -27,7 +27,7 @@ export default () => (
 
     <KuiText>
       <p>
-        But the dog wasn't lazy, it was just
+        But the dog wasn&rsquo;t lazy, it was just
         practicing mindfulness, so it had a greater sense of
         life-satisfaction than that fox with all its jumping.
       </p>
diff --git a/ui_framework/doc_site/src/views/typography/typography_example.js b/ui_framework/doc_site/src/views/typography/typography_example.js
index a0c73ad360954..0b45633b6e3ed 100644
--- a/ui_framework/doc_site/src/views/typography/typography_example.js
+++ b/ui_framework/doc_site/src/views/typography/typography_example.js
@@ -58,7 +58,7 @@ export default props => (
       }]}
     >
       <GuideText>
-        The large size is usually used to identify the page you're on. Generally, there should
+        The large size is usually used to identify the page you&rsquo;re on. Generally, there should
         only be one of these used at a time.
       </GuideText>
 
@@ -83,7 +83,7 @@ export default props => (
       }]}
     >
       <GuideText>
-        This size is commonly used to identify sections within a page. It's also the default size.
+        This size is commonly used to identify sections within a page. It&rsquo;s also the default size.
       </GuideText>
 
       <GuideDemo>
@@ -121,7 +121,7 @@ export default props => (
       }]}
     >
       <GuideText>
-        You'll generally use this component for paragraphs.
+        You&rsquo;ll generally use this component for paragraphs.
       </GuideText>
 
       <GuideDemo>
diff --git a/ui_framework/src/components/button/button.js b/ui_framework/src/components/button/button.js
index b199f9de108b5..70d41d76e5f7d 100644
--- a/ui_framework/src/components/button/button.js
+++ b/ui_framework/src/components/button/button.js
@@ -1,5 +1,4 @@
 import React, {
-  Component,
   PropTypes,
 } from 'react';
 import classNames from 'classnames';
@@ -20,61 +19,53 @@ const sizeToClassNameMap = {
 export const TYPES = Object.keys(typeToClassNameMap);
 export const SIZES = Object.keys(sizeToClassNameMap);
 
-export class KuiButton extends Component {
-  constructor(props) {
-    super(props);
-  }
-
-  render() {
-    const {
-      children,
-      className,
-      icon,
-      iconReverse,
-      type,
-      size,
-      fill,
-      ...rest,
-    } = this.props;
+export const KuiButton = ({
+  children,
+  className,
+  icon,
+  iconReverse,
+  type,
+  size,
+  fill,
+  ...rest,
+}) => {
+  const classes = classNames(
+    'kuiButton',
+    typeToClassNameMap[type],
+    sizeToClassNameMap[size],
+    className,
+    {
+      'kuiButton--fill': fill,
+      'kuiButton--reverse': iconReverse,
+    },
+  );
 
-    const classes = classNames(
-      'kuiButton',
-      typeToClassNameMap[type],
-      sizeToClassNameMap[size],
-      className,
-      {
-        'kuiButton--fill': fill,
-        'kuiButton--reverse': iconReverse,
-      },
-    );
-
-    // Add an icon to the button if one exists.
-    let buttonIcon = null;
-    if (icon) {
-      buttonIcon = (
-        <span aria-hidden="true">
-          <KuiIcon
-            className="kuiButton__icon"
-            type={icon}
-            size="medium"
-          />
-        </span>
-      );
-    }
-
-    return (
-      <button
-        className={classes}
-        {...rest}
-      >
-        <span className="kuiButton__content">
-          {buttonIcon}
-          <span>{children}</span>
-        </span>
-      </button>
+  // Add an icon to the button if one exists.
+  let buttonIcon = null;
+  if (icon) {
+    buttonIcon = (
+      <span aria-hidden="true">
+        <KuiIcon
+          className="kuiButton__icon"
+          type={icon}
+          size="medium"
+        />
+      </span>
     );
   }
-}
+
+  return (
+    <button
+      className={classes}
+      {...rest}
+    >
+      <span className="kuiButton__content">
+        {buttonIcon}
+        <span>{children}</span>
+      </span>
+    </button>
+  );
+};
 
 KuiButton.propTypes = {
   iconReverse: React.PropTypes.bool,
diff --git a/ui_framework/src/components/button/button.test.js b/ui_framework/src/components/button/button.test.js
index cdeb380962ae6..53663e4401bd1 100644
--- a/ui_framework/src/components/button/button.test.js
+++ b/ui_framework/src/components/button/button.test.js
@@ -7,7 +7,7 @@ import { KuiButton } from './button';
 describe('KuiButton', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiButton { ...requiredProps } />
+      <KuiButton {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/header/header.test.js b/ui_framework/src/components/header/header.test.js
index b42448bc96b86..ead6f14c49d53 100644
--- a/ui_framework/src/components/header/header.test.js
+++ b/ui_framework/src/components/header/header.test.js
@@ -7,7 +7,7 @@ import { KuiHeader } from './header';
 describe('KuiHeader', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeader { ...requiredProps } />
+      <KuiHeader {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.test.js b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.test.js
index 222b6f9076203..363b911e660e3 100644
--- a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.test.js
+++ b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb.test.js
@@ -7,7 +7,7 @@ import { KuiHeaderBreadcrumb } from './header_breadcrumb';
 describe('KuiHeaderBreadcrumb', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderBreadcrumb { ...requiredProps }>
+      <KuiHeaderBreadcrumb {...requiredProps}>
         content
       </KuiHeaderBreadcrumb>
     );
diff --git a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb_collapsed.test.js b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb_collapsed.test.js
index 31d61526d063a..930eb15c61f2d 100644
--- a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb_collapsed.test.js
+++ b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumb_collapsed.test.js
@@ -7,7 +7,7 @@ import { KuiHeaderBreadcrumbCollapsed } from './header_breadcrumb_collapsed';
 describe('KuiHeaderBreadcrumbCollapsed', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderBreadcrumbCollapsed { ...requiredProps } />
+      <KuiHeaderBreadcrumbCollapsed {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js
index 77f1157fc95ba..c29fc2f9b093f 100644
--- a/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js
+++ b/ui_framework/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js
@@ -7,7 +7,7 @@ import { KuiHeaderBreadcrumbs } from './header_breadcrumbs';
 describe('KuiHeaderBreadcrumbs', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderBreadcrumbs { ...requiredProps } />
+      <KuiHeaderBreadcrumbs {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/header/header_logo.test.js b/ui_framework/src/components/header/header_logo.test.js
index a2c28c999da49..42ce33cc3e05f 100644
--- a/ui_framework/src/components/header/header_logo.test.js
+++ b/ui_framework/src/components/header/header_logo.test.js
@@ -7,7 +7,7 @@ import { KuiHeaderLogo } from './header_logo';
 describe('KuiHeaderLogo', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderLogo { ...requiredProps } />
+      <KuiHeaderLogo {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/header/header_section/header_section.test.js b/ui_framework/src/components/header/header_section/header_section.test.js
index 5efe335105637..3fdc1a6227057 100644
--- a/ui_framework/src/components/header/header_section/header_section.test.js
+++ b/ui_framework/src/components/header/header_section/header_section.test.js
@@ -7,7 +7,7 @@ import { KuiHeaderSection } from './header_section';
 describe('KuiHeaderSection', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderSection { ...requiredProps } />
+      <KuiHeaderSection {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/header/header_section/header_section_item.test.js b/ui_framework/src/components/header/header_section/header_section_item.test.js
index c817f5bafe684..1a96ca05b6a68 100644
--- a/ui_framework/src/components/header/header_section/header_section_item.test.js
+++ b/ui_framework/src/components/header/header_section/header_section_item.test.js
@@ -7,7 +7,7 @@ import { KuiHeaderSectionItem } from './header_section_item';
 describe('KuiHeaderSectionItem', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderSectionItem { ...requiredProps } />
+      <KuiHeaderSectionItem {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/header/header_section/header_section_item_button.test.js b/ui_framework/src/components/header/header_section/header_section_item_button.test.js
index 3da2b9ee8485c..865612ef4964f 100644
--- a/ui_framework/src/components/header/header_section/header_section_item_button.test.js
+++ b/ui_framework/src/components/header/header_section/header_section_item_button.test.js
@@ -8,7 +8,7 @@ import { KuiHeaderSectionItemButton } from './header_section_item_button';
 describe('KuiHeaderSectionItemButton', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiHeaderSectionItemButton { ...requiredProps } />
+      <KuiHeaderSectionItemButton {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/icon/icon.test.js b/ui_framework/src/components/icon/icon.test.js
index 63831ba501453..ef5db20c5b279 100644
--- a/ui_framework/src/components/icon/icon.test.js
+++ b/ui_framework/src/components/icon/icon.test.js
@@ -11,7 +11,7 @@ import {
 describe('KuiIcon', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiIcon type="search" { ...requiredProps } />
+      <KuiIcon type="search" {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/key_pad_menu/key_pad_menu.test.js b/ui_framework/src/components/key_pad_menu/key_pad_menu.test.js
index 0e4aee2e33617..cc1353e5708cc 100644
--- a/ui_framework/src/components/key_pad_menu/key_pad_menu.test.js
+++ b/ui_framework/src/components/key_pad_menu/key_pad_menu.test.js
@@ -7,7 +7,7 @@ import { KuiKeyPadMenu } from './key_pad_menu';
 describe('KuiKeyPadMenu', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiKeyPadMenu { ...requiredProps } />
+      <KuiKeyPadMenu {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/key_pad_menu/key_pad_menu_item.test.js b/ui_framework/src/components/key_pad_menu/key_pad_menu_item.test.js
index f671a676dc7ee..a0040de653490 100644
--- a/ui_framework/src/components/key_pad_menu/key_pad_menu_item.test.js
+++ b/ui_framework/src/components/key_pad_menu/key_pad_menu_item.test.js
@@ -11,7 +11,7 @@ import {
 describe('KuiKeyPadMenuItem', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiKeyPadMenuItem label="Label" { ...requiredProps }>
+      <KuiKeyPadMenuItem label="Label" {...requiredProps}>
         Icon
       </KuiKeyPadMenuItem>
     );
@@ -35,7 +35,7 @@ describe('KuiKeyPadMenuItem', () => {
 describe('KuiKeyPadMenuItemButton', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiKeyPadMenuItemButton label="Label" { ...requiredProps }>
+      <KuiKeyPadMenuItemButton label="Label" {...requiredProps}>
         Icon
       </KuiKeyPadMenuItemButton>
     );
diff --git a/ui_framework/src/components/loading/loading.test.js b/ui_framework/src/components/loading/loading.test.js
deleted file mode 100644
index c9556d68094b1..0000000000000
--- a/ui_framework/src/components/loading/loading.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from 'react';
-import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-
-import { KuiLoading } from './loading';
-
-describe('KuiLoading', () => {
-  test('is rendered', () => {
-    const component = render(
-      <KuiLoading { ...requiredProps } />
-    );
-
-    expect(component)
-      .toMatchSnapshot();
-  });
-});
diff --git a/ui_framework/src/components/loading/loading_spinner.test.js b/ui_framework/src/components/loading/loading_spinner.test.js
index 42695782c9465..659b9f181a7e6 100644
--- a/ui_framework/src/components/loading/loading_spinner.test.js
+++ b/ui_framework/src/components/loading/loading_spinner.test.js
@@ -7,7 +7,7 @@ import { KuiLoadingSpinner } from './loading_spinner';
 describe('KuiLoadingSpinner', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiLoadingSpinner { ...requiredProps } />
+      <KuiLoadingSpinner {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/modal/confirm_modal.js b/ui_framework/src/components/modal/confirm_modal.js
index c58fd5703fa86..4299bb59458e3 100644
--- a/ui_framework/src/components/modal/confirm_modal.js
+++ b/ui_framework/src/components/modal/confirm_modal.js
@@ -41,10 +41,10 @@ export function KuiConfirmModal({
   return (
     <KuiModal
       style={{ 'width': '450px' }}
-      data-tests-subj={ dataTestSubj }
-      aria-label={ ariaLabel }
-      className={ className }
-      onKeyDown={ onKeyDown }
+      data-tests-subj={dataTestSubj}
+      aria-label={ariaLabel}
+      className={className}
+      onKeyDown={onKeyDown}
     >
       {
         title ?
@@ -63,16 +63,16 @@ export function KuiConfirmModal({
 
       <KuiModalFooter>
         <button
-          autoFocus={ defaultFocusedButton === CANCEL_BUTTON }
+          autoFocus={defaultFocusedButton === CANCEL_BUTTON}
           data-test-subj="confirmModalCancelButton"
-          onClick={ onCancel }
+          onClick={onCancel}
         >
           {cancelButtonText}
         </button>
         <button
-          autoFocus={ defaultFocusedButton === CONFIRM_BUTTON }
+          autoFocus={defaultFocusedButton === CONFIRM_BUTTON}
           data-test-subj="confirmModalConfirmButton"
-          onClick={ onConfirm }
+          onClick={onConfirm}
         >
           {confirmButtonText}
         </button>
diff --git a/ui_framework/src/components/modal/confirm_modal.test.js b/ui_framework/src/components/modal/confirm_modal.test.js
index 8cf857f3c620e..0ad5e87fce803 100644
--- a/ui_framework/src/components/modal/confirm_modal.test.js
+++ b/ui_framework/src/components/modal/confirm_modal.test.js
@@ -24,7 +24,7 @@ test('renders KuiConfirmModal', () => {
     onConfirm={onConfirm}
     cancelButtonText="Cancel Button Text"
     confirmButtonText="Confirm Button Text"
-    { ...requiredProps }
+    {...requiredProps}
   />);
   expect(component).toMatchSnapshot();
 });
@@ -37,7 +37,7 @@ test('onConfirm', () => {
     onConfirm={onConfirm}
     cancelButtonText="Cancel"
     confirmButtonText="Confirm"
-    { ...requiredProps }
+    {...requiredProps}
   />);
   component.find('[data-test-subj="confirmModalConfirmButton"]').simulate('click');
   sinon.assert.calledOnce(onConfirm);
@@ -53,7 +53,7 @@ describe('onCancel', () => {
       onConfirm={onConfirm}
       cancelButtonText="Cancel"
       confirmButtonText="Confirm"
-      { ...requiredProps }
+      {...requiredProps}
     />);
     component.find('[data-test-subj="confirmModalCancelButton"]').simulate('click');
     sinon.assert.notCalled(onConfirm);
@@ -68,7 +68,7 @@ describe('onCancel', () => {
       onConfirm={onConfirm}
       cancelButtonText="Cancel"
       confirmButtonText="Confirm"
-      { ...requiredProps }
+      {...requiredProps}
     />);
     component.simulate('keydown', { keyCode: 27 });
     sinon.assert.notCalled(onConfirm);
@@ -85,8 +85,8 @@ describe('defaultFocusedButton', () => {
       onConfirm={onConfirm}
       cancelButtonText="Cancel"
       confirmButtonText="Confirm"
-      defaultFocusedButton={ CANCEL_BUTTON }
-      { ...requiredProps }
+      defaultFocusedButton={CANCEL_BUTTON}
+      {...requiredProps}
     />);
     const button = component.find('[data-test-subj="confirmModalCancelButton"]').getDOMNode();
     expect(document.activeElement).toEqual(button);
@@ -100,8 +100,8 @@ describe('defaultFocusedButton', () => {
       onConfirm={onConfirm}
       cancelButtonText="Cancel"
       confirmButtonText="Confirm"
-      defaultFocusedButton={ CONFIRM_BUTTON }
-      { ...requiredProps }
+      defaultFocusedButton={CONFIRM_BUTTON}
+      {...requiredProps}
     />);
     const button = component.find('[data-test-subj="confirmModalConfirmButton"]').getDOMNode();
     expect(document.activeElement).toEqual(button);
@@ -115,7 +115,7 @@ describe('defaultFocusedButton', () => {
       onConfirm={onConfirm}
       cancelButtonText="Cancel"
       confirmButtonText="Confirm"
-      { ...requiredProps }
+      {...requiredProps}
     />);
     const button = component.find('[data-test-subj="confirmModalConfirmButton"]').getDOMNode();
     expect(document.activeElement).toEqual(button);
diff --git a/ui_framework/src/components/modal/modal.js b/ui_framework/src/components/modal/modal.js
index 8ea7a08b96869..da89951ebae90 100644
--- a/ui_framework/src/components/modal/modal.js
+++ b/ui_framework/src/components/modal/modal.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 export function KuiModal({ className, children, ...rest }) {
   const classes = classnames('kuiModal', className);
   return (
-    <div className={ classes } { ...rest }>
+    <div className={classes} {...rest}>
       { children }
     </div>
   );
diff --git a/ui_framework/src/components/modal/modal.test.js b/ui_framework/src/components/modal/modal.test.js
index 4a393c27a008d..948c7da07f99c 100644
--- a/ui_framework/src/components/modal/modal.test.js
+++ b/ui_framework/src/components/modal/modal.test.js
@@ -7,6 +7,6 @@ import {
 } from './modal';
 
 test('renders KuiModal', () => {
-  const component = <KuiModal { ...requiredProps }>children</KuiModal>;
+  const component = <KuiModal {...requiredProps}>children</KuiModal>;
   expect(render(component)).toMatchSnapshot();
 });
diff --git a/ui_framework/src/components/modal/modal_body.js b/ui_framework/src/components/modal/modal_body.js
index efd954b834f12..e43d7ab5af189 100644
--- a/ui_framework/src/components/modal/modal_body.js
+++ b/ui_framework/src/components/modal/modal_body.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 export function KuiModalBody({ className, children, ...rest }) {
   const classes = classnames('kuiModalBody', className);
   return (
-    <div className={ classes } { ...rest }>
+    <div className={classes} {...rest}>
       { children }
     </div>
   );
diff --git a/ui_framework/src/components/modal/modal_body.test.js b/ui_framework/src/components/modal/modal_body.test.js
index b8b4d8e02d802..985b2cdb5a2b4 100644
--- a/ui_framework/src/components/modal/modal_body.test.js
+++ b/ui_framework/src/components/modal/modal_body.test.js
@@ -7,6 +7,6 @@ import {
 } from './modal_body';
 
 test('renders KuiModalBody', () => {
-  const component = <KuiModalBody { ...requiredProps }>children</KuiModalBody>;
+  const component = <KuiModalBody {...requiredProps}>children</KuiModalBody>;
   expect(render(component)).toMatchSnapshot();
 });
diff --git a/ui_framework/src/components/modal/modal_body_text.js b/ui_framework/src/components/modal/modal_body_text.js
index 197bf7f0a7975..55efdc723fa88 100644
--- a/ui_framework/src/components/modal/modal_body_text.js
+++ b/ui_framework/src/components/modal/modal_body_text.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 export function KuiModalBodyText({ className, children, ...rest }) {
   const classes = classnames('kuiModalBodyText', className);
   return (
-    <div className={ classes } { ...rest }>
+    <div className={classes} {...rest}>
       { children }
     </div>
   );
diff --git a/ui_framework/src/components/modal/modal_body_text.test.js b/ui_framework/src/components/modal/modal_body_text.test.js
index f71a5f6ed0bee..a8d6af9df7352 100644
--- a/ui_framework/src/components/modal/modal_body_text.test.js
+++ b/ui_framework/src/components/modal/modal_body_text.test.js
@@ -7,6 +7,6 @@ import {
 } from './modal_body_text';
 
 test('renders KuiModalBodyText', () => {
-  const component = <KuiModalBodyText { ...requiredProps }>children</KuiModalBodyText>;
+  const component = <KuiModalBodyText {...requiredProps}>children</KuiModalBodyText>;
   expect(render(component)).toMatchSnapshot();
 });
diff --git a/ui_framework/src/components/modal/modal_footer.js b/ui_framework/src/components/modal/modal_footer.js
index a62ba3dccef2e..b91240efe570d 100644
--- a/ui_framework/src/components/modal/modal_footer.js
+++ b/ui_framework/src/components/modal/modal_footer.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 export function KuiModalFooter({ className, children, ...rest }) {
   const classes = classnames('kuiModalFooter', className);
   return (
-    <div className={ classes } { ...rest }>
+    <div className={classes} {...rest}>
       { children }
     </div>
   );
diff --git a/ui_framework/src/components/modal/modal_footer.test.js b/ui_framework/src/components/modal/modal_footer.test.js
index ab80fa6b14079..9a54e5d8cae5f 100644
--- a/ui_framework/src/components/modal/modal_footer.test.js
+++ b/ui_framework/src/components/modal/modal_footer.test.js
@@ -7,6 +7,6 @@ import {
 } from './modal_footer';
 
 test('renders KuiModalFooter', () => {
-  const component = <KuiModalFooter { ...requiredProps }>children</KuiModalFooter>;
+  const component = <KuiModalFooter {...requiredProps}>children</KuiModalFooter>;
   expect(render(component)).toMatchSnapshot();
 });
diff --git a/ui_framework/src/components/modal/modal_header.js b/ui_framework/src/components/modal/modal_header.js
index c6ccc30e2e110..7aa74a1cff9f2 100644
--- a/ui_framework/src/components/modal/modal_header.js
+++ b/ui_framework/src/components/modal/modal_header.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 export function KuiModalHeader({ className, children, ...rest }) {
   const classes = classnames('kuiModalHeader', className);
   return (
-    <div className={ classes } { ...rest }>
+    <div className={classes} {...rest}>
       { children }
     </div>
   );
diff --git a/ui_framework/src/components/modal/modal_header.test.js b/ui_framework/src/components/modal/modal_header.test.js
index 0caaaa07ae896..f3a603bcb2567 100644
--- a/ui_framework/src/components/modal/modal_header.test.js
+++ b/ui_framework/src/components/modal/modal_header.test.js
@@ -7,6 +7,6 @@ import {
 } from './modal_header';
 
 test('renders KuiModalHeader', () => {
-  const component = <KuiModalHeader { ...requiredProps }>children</KuiModalHeader>;
+  const component = <KuiModalHeader {...requiredProps}>children</KuiModalHeader>;
   expect(render(component)).toMatchSnapshot();
 });
diff --git a/ui_framework/src/components/modal/modal_header_title.js b/ui_framework/src/components/modal/modal_header_title.js
index a4a237ad8f1d3..5baa3bd0be1eb 100644
--- a/ui_framework/src/components/modal/modal_header_title.js
+++ b/ui_framework/src/components/modal/modal_header_title.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 export function KuiModalHeaderTitle({ className, children, ...rest }) {
   const classes = classnames('kuiModalHeader__title', className);
   return (
-    <div className={ classes } { ...rest }>
+    <div className={classes} {...rest}>
       { children }
     </div>
   );
diff --git a/ui_framework/src/components/modal/modal_header_title.test.js b/ui_framework/src/components/modal/modal_header_title.test.js
index 35fbbca89c95c..7f0632ad5b60b 100644
--- a/ui_framework/src/components/modal/modal_header_title.test.js
+++ b/ui_framework/src/components/modal/modal_header_title.test.js
@@ -7,6 +7,6 @@ import {
 } from './modal_header_title';
 
 test('renders KuiModalHeaderTitle', () => {
-  const component = <KuiModalHeaderTitle { ...requiredProps }>children</KuiModalHeaderTitle>;
+  const component = <KuiModalHeaderTitle {...requiredProps}>children</KuiModalHeaderTitle>;
   expect(render(component)).toMatchSnapshot();
 });
diff --git a/ui_framework/src/components/modal/modal_overlay.js b/ui_framework/src/components/modal/modal_overlay.js
index 34334e1a75072..4467bdee3667f 100644
--- a/ui_framework/src/components/modal/modal_overlay.js
+++ b/ui_framework/src/components/modal/modal_overlay.js
@@ -6,8 +6,8 @@ export function KuiModalOverlay({ className,  ...rest }) {
   const classes = classnames('kuiModalOverlay', className);
   return (
     <div
-      className={ classes }
-      { ...rest}
+      className={classes}
+      {...rest}
     />
   );
 }
diff --git a/ui_framework/src/components/modal/modal_overlay.test.js b/ui_framework/src/components/modal/modal_overlay.test.js
index 94f5015de662c..0600b5a45187a 100644
--- a/ui_framework/src/components/modal/modal_overlay.test.js
+++ b/ui_framework/src/components/modal/modal_overlay.test.js
@@ -7,6 +7,6 @@ import {
 } from './modal_overlay';
 
 test('renders KuiModalOverlay', () => {
-  const component = <KuiModalOverlay { ...requiredProps }>children</KuiModalOverlay>;
+  const component = <KuiModalOverlay {...requiredProps}>children</KuiModalOverlay>;
   expect(render(component)).toMatchSnapshot();
 });
diff --git a/ui_framework/src/components/page/page.test.js b/ui_framework/src/components/page/page.test.js
index 2417ab2ebeb66..d7c1eb86d6e10 100644
--- a/ui_framework/src/components/page/page.test.js
+++ b/ui_framework/src/components/page/page.test.js
@@ -7,7 +7,7 @@ import { KuiPage } from './page';
 describe('KuiPage', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiPage { ...requiredProps } />
+      <KuiPage {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/page/page_body/page_body.test.js b/ui_framework/src/components/page/page_body/page_body.test.js
index d92d578f2dbe9..8456d88bf9411 100644
--- a/ui_framework/src/components/page/page_body/page_body.test.js
+++ b/ui_framework/src/components/page/page_body/page_body.test.js
@@ -7,7 +7,7 @@ import { KuiPageBody } from './page_body';
 describe('KuiPageBody', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiPageBody { ...requiredProps } />
+      <KuiPageBody {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/page/page_content/page_content.test.js b/ui_framework/src/components/page/page_content/page_content.test.js
index 76386a6785409..366b024ab14e7 100644
--- a/ui_framework/src/components/page/page_content/page_content.test.js
+++ b/ui_framework/src/components/page/page_content/page_content.test.js
@@ -7,7 +7,7 @@ import { KuiPageContent } from './page_content';
 describe('KuiPageContent', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiPageContent { ...requiredProps } />
+      <KuiPageContent {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/page/page_content/page_content_body.test.js b/ui_framework/src/components/page/page_content/page_content_body.test.js
index 1ad219807ed39..e955cbf20093a 100644
--- a/ui_framework/src/components/page/page_content/page_content_body.test.js
+++ b/ui_framework/src/components/page/page_content/page_content_body.test.js
@@ -7,7 +7,7 @@ import { KuiPageContentBody } from './page_content_body';
 describe('KuiPageContentBody', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiPageContentBody { ...requiredProps } />
+      <KuiPageContentBody {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/page/page_content/page_content_header.test.js b/ui_framework/src/components/page/page_content/page_content_header.test.js
index 5bb5cdbcfedd8..02fdc6ac8780c 100644
--- a/ui_framework/src/components/page/page_content/page_content_header.test.js
+++ b/ui_framework/src/components/page/page_content/page_content_header.test.js
@@ -7,7 +7,7 @@ import { KuiPageContentHeader } from './page_content_header';
 describe('KuiPageContentHeader', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiPageContentHeader { ...requiredProps } />
+      <KuiPageContentHeader {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/page/page_content/page_content_header_section.test.js b/ui_framework/src/components/page/page_content/page_content_header_section.test.js
index 292d2c8e88b00..e3ecca5459057 100644
--- a/ui_framework/src/components/page/page_content/page_content_header_section.test.js
+++ b/ui_framework/src/components/page/page_content/page_content_header_section.test.js
@@ -7,7 +7,7 @@ import { KuiPageContentHeaderSection } from './page_content_header_section';
 describe('KuiPageContentHeaderSection', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiPageContentHeaderSection { ...requiredProps } />
+      <KuiPageContentHeaderSection {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/page/page_header/page_header.test.js b/ui_framework/src/components/page/page_header/page_header.test.js
index 4f3b707f1fc10..0d724dfbbfc93 100644
--- a/ui_framework/src/components/page/page_header/page_header.test.js
+++ b/ui_framework/src/components/page/page_header/page_header.test.js
@@ -7,7 +7,7 @@ import { KuiPageHeader } from './page_header';
 describe('KuiPageHeader', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiPageHeader { ...requiredProps } />
+      <KuiPageHeader {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/page/page_header/page_header_section.test.js b/ui_framework/src/components/page/page_header/page_header_section.test.js
index c95515d26a9c3..8c3350cffc691 100644
--- a/ui_framework/src/components/page/page_header/page_header_section.test.js
+++ b/ui_framework/src/components/page/page_header/page_header_section.test.js
@@ -7,7 +7,7 @@ import { KuiPageHeaderSection } from './page_header_section';
 describe('KuiPageHeaderSection', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiPageHeaderSection { ...requiredProps } />
+      <KuiPageHeaderSection {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/page/page_sidebar/page_sidebar.test.js b/ui_framework/src/components/page/page_sidebar/page_sidebar.test.js
index 35def8245cf71..1c38be10f0a09 100644
--- a/ui_framework/src/components/page/page_sidebar/page_sidebar.test.js
+++ b/ui_framework/src/components/page/page_sidebar/page_sidebar.test.js
@@ -7,7 +7,7 @@ import { KuiPageSidebar } from './page_sidebar';
 describe('KuiPageSidebar', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiPageSidebar { ...requiredProps } />
+      <KuiPageSidebar {...requiredProps} />
     );
 
     expect(component)
diff --git a/ui_framework/src/components/table/table.test.js b/ui_framework/src/components/table/table.test.js
index 253239d20e43f..4a384bef13547 100644
--- a/ui_framework/src/components/table/table.test.js
+++ b/ui_framework/src/components/table/table.test.js
@@ -11,7 +11,7 @@ import { KuiTableHeaderCell } from './table_header_cell';
 
 test('renders KuiTable', () => {
   const component = (
-    <KuiTable { ...requiredProps }>
+    <KuiTable {...requiredProps}>
       <KuiTableHeader>
         <KuiTableHeaderCell>
           Hi Title
diff --git a/ui_framework/src/components/table/table_body.js b/ui_framework/src/components/table/table_body.js
index a7be63f8fb576..1de09d5a9564b 100644
--- a/ui_framework/src/components/table/table_body.js
+++ b/ui_framework/src/components/table/table_body.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 export const KuiTableBody = ({ children, className, ...rest }) => {
   return (
-    <tbody className={ className } { ...rest }>
+    <tbody className={className} {...rest}>
       { children }
     </tbody>
   );
diff --git a/ui_framework/src/components/table/table_header.js b/ui_framework/src/components/table/table_header.js
index 288028399d75d..cef0d95af0af7 100644
--- a/ui_framework/src/components/table/table_header.js
+++ b/ui_framework/src/components/table/table_header.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 export const KuiTableHeader = ({ children, className, ...rest }) => {
   return (
-    <thead className={ className } { ...rest }>
+    <thead className={className} {...rest}>
       <tr>{ children }</tr>
     </thead>
   );
diff --git a/ui_framework/src/components/table/table_row.test.js b/ui_framework/src/components/table/table_row.test.js
index 7041008fe9547..9aace89527b12 100644
--- a/ui_framework/src/components/table/table_row.test.js
+++ b/ui_framework/src/components/table/table_row.test.js
@@ -12,7 +12,7 @@ import {
 
 test('renders KuiTableRow', () => {
   const component = (
-    <KuiTableRow { ...requiredProps }>
+    <KuiTableRow {...requiredProps}>
       <KuiTableRowCell>hi</KuiTableRowCell>
     </KuiTableRow>
   );
diff --git a/ui_framework/src/components/tabs/tab.test.js b/ui_framework/src/components/tabs/tab.test.js
index e820d148755b5..66311c4f90b8e 100644
--- a/ui_framework/src/components/tabs/tab.test.js
+++ b/ui_framework/src/components/tabs/tab.test.js
@@ -9,12 +9,12 @@ import {
 
 describe('KuiTab', () => {
   test('renders', () => {
-    const component = <KuiTab onClick={()=>{}} { ...requiredProps }>children</KuiTab>;
+    const component = <KuiTab onClick={()=>{}} {...requiredProps}>children</KuiTab>;
     expect(render(component)).toMatchSnapshot();
   });
 
   test('renders isSelected', () => {
-    const component = <KuiTab onClick={()=>{}} isSelected { ...requiredProps }>children</KuiTab>;
+    const component = <KuiTab onClick={()=>{}} isSelected {...requiredProps}>children</KuiTab>;
     expect(render(component)).toMatchSnapshot();
   });
 
diff --git a/ui_framework/src/components/tabs/tabs.test.js b/ui_framework/src/components/tabs/tabs.test.js
index 24e934021a43d..947bd1394da44 100644
--- a/ui_framework/src/components/tabs/tabs.test.js
+++ b/ui_framework/src/components/tabs/tabs.test.js
@@ -9,7 +9,7 @@ import {
 describe('KuiTabs', () => {
   test('renders', () => {
     const component = (
-      <KuiTabs { ...requiredProps } />
+      <KuiTabs {...requiredProps} />
     );
 
     expect(render(component)).toMatchSnapshot();
diff --git a/ui_framework/src/components/typography/typography.test.js b/ui_framework/src/components/typography/typography.test.js
index 4e2d0959e54f0..d0fd054cba873 100644
--- a/ui_framework/src/components/typography/typography.test.js
+++ b/ui_framework/src/components/typography/typography.test.js
@@ -11,7 +11,7 @@ import {
 describe('KuiTitle', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiTitle { ...requiredProps }>
+      <KuiTitle {...requiredProps}>
         <h1>Hello</h1>
       </KuiTitle>
     );
@@ -39,7 +39,7 @@ describe('KuiTitle', () => {
 describe('KuiText', () => {
   test('is rendered', () => {
     const component = render(
-      <KuiText { ...requiredProps }>
+      <KuiText {...requiredProps}>
         <h1>Hello</h1>
       </KuiText>
     );