From 4016eba1a37803ed3b6eef6f952391d15c8ad3c5 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 23 Mar 2017 17:45:00 -0700
Subject: [PATCH] - Update KuiLinkButton to preventDefault on click when
 disabled. - Update getClassName helper to accommodate loading icons. - Update
 tests.

---
 .../button/__snapshots__/button.test.js.snap  | 54 +++++-------
 .../__snapshots__/link_button.test.js.snap    | 59 +++++--------
 .../__snapshots__/submit_button.test.js.snap  | 19 ++---
 ui_framework/components/button/_button.scss   | 42 +++++----
 ui_framework/components/button/button.js      | 46 +++++++---
 ui_framework/components/button/button.test.js | 56 +++---------
 .../__snapshots__/button_group.test.js.snap   |  6 +-
 .../button/button_group/button_group.test.js  |  8 +-
 .../__snapshots__/button_icon.test.js.snap    |  4 +-
 .../button/button_icon/button_icon.test.js    |  5 +-
 .../components/button/link_button.test.js     | 85 ++++---------------
 .../components/button/submit_button.test.js   | 46 ++--------
 ui_framework/dist/ui_framework.css            | 44 +++++-----
 .../doc_site/src/views/button/button_basic.js |  3 +-
 .../src/views/button/button_danger.js         |  2 +-
 .../src/views/button/button_elements.js       | 21 +++++
 .../src/views/button/button_hollow.js         |  2 +-
 .../src/views/button/button_loading.js        |  4 +-
 .../src/views/button/button_primary.js        |  2 +-
 .../src/views/button/buttons_in_tool_bar.js   |  6 +-
 20 files changed, 219 insertions(+), 295 deletions(-)

diff --git a/ui_framework/components/button/__snapshots__/button.test.js.snap b/ui_framework/components/button/__snapshots__/button.test.js.snap
index ae6b5d3e6ae10..df303c082e6ad 100644
--- a/ui_framework/components/button/__snapshots__/button.test.js.snap
+++ b/ui_framework/components/button/__snapshots__/button.test.js.snap
@@ -2,8 +2,7 @@
 
 exports[`KuiButton Baseline is rendered 1`] = `
 <button
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
 >
   <span />
 </button>
@@ -11,8 +10,7 @@ exports[`KuiButton Baseline is rendered 1`] = `
 
 exports[`KuiButton Props children is rendered 1`] = `
 <button
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
 >
   <span>
     <span>
@@ -24,8 +22,7 @@ exports[`KuiButton Props children is rendered 1`] = `
 
 exports[`KuiButton Props className renders the classes 1`] = `
 <button
-  className="kuiButton testClass1 testClass2"
-  onClick={[Function]}
+  class="kuiButton testClass1 testClass2"
 >
   <span />
 </button>
@@ -33,9 +30,17 @@ exports[`KuiButton Props className renders the classes 1`] = `
 
 exports[`KuiButton Props data-test-subj is rendered 1`] = `
 <button
-  className="kuiButton"
+  class="kuiButton"
   data-test-subj="test subject string"
-  onClick={[Function]}
+>
+  <span />
+</button>
+`;
+
+exports[`KuiButton Props disabled sets the disabled attribute and class 1`] = `
+<button
+  class="kuiButton kuiButton-isDisabled"
+  disabled=""
 >
   <span />
 </button>
@@ -43,8 +48,7 @@ exports[`KuiButton Props data-test-subj is rendered 1`] = `
 
 exports[`KuiButton Props icon is rendered with children 1`] = `
 <button
-  className="kuiButton kuiButton--iconText"
-  onClick={[Function]}
+  class="kuiButton kuiButton--iconText"
 >
   <span>
     Icon
@@ -57,8 +61,7 @@ exports[`KuiButton Props icon is rendered with children 1`] = `
 
 exports[`KuiButton Props icon is rendered without children 1`] = `
 <button
-  className="kuiButton kuiButton--iconText"
-  onClick={[Function]}
+  class="kuiButton kuiButton--iconText"
 >
   <span>
     Icon
@@ -68,8 +71,7 @@ exports[`KuiButton Props icon is rendered without children 1`] = `
 
 exports[`KuiButton Props iconPosition moves the icon to the right 1`] = `
 <button
-  className="kuiButton kuiButton--iconText"
-  onClick={[Function]}
+  class="kuiButton kuiButton--iconText"
 >
   <span>
     <span>
@@ -80,24 +82,13 @@ exports[`KuiButton Props iconPosition moves the icon to the right 1`] = `
 </button>
 `;
 
-exports[`KuiButton Props isDisabled sets the disabled attribute 1`] = `
-<button
-  className="kuiButton"
-  disabled={true}
-  onClick={[Function]}
->
-  <span />
-</button>
-`;
-
 exports[`KuiButton Props isLoading doesn't render the icon prop 1`] = `
 <button
-  className="kuiButton kuiButton--iconText"
-  onClick={[Function]}
+  class="kuiButton kuiButton--iconText"
 >
   <span>
-    <KuiButtonIcon
-      type="loading"
+    <span
+      class="kuiButton__icon kuiIcon fa-spinner fa-spin"
     />
   </span>
 </button>
@@ -105,12 +96,11 @@ exports[`KuiButton Props isLoading doesn't render the icon prop 1`] = `
 
 exports[`KuiButton Props isLoading renders a spinner 1`] = `
 <button
-  className="kuiButton kuiButton--iconText"
-  onClick={[Function]}
+  class="kuiButton kuiButton--iconText"
 >
   <span>
-    <KuiButtonIcon
-      type="loading"
+    <span
+      class="kuiButton__icon kuiIcon fa-spinner fa-spin"
     />
   </span>
 </button>
diff --git a/ui_framework/components/button/__snapshots__/link_button.test.js.snap b/ui_framework/components/button/__snapshots__/link_button.test.js.snap
index ed009139b98ef..6ac7cfcf1e127 100644
--- a/ui_framework/components/button/__snapshots__/link_button.test.js.snap
+++ b/ui_framework/components/button/__snapshots__/link_button.test.js.snap
@@ -2,8 +2,7 @@
 
 exports[`KuiLinkButton Baseline is rendered 1`] = `
 <a
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
 >
   <span />
 </a>
@@ -11,8 +10,7 @@ exports[`KuiLinkButton Baseline is rendered 1`] = `
 
 exports[`KuiLinkButton Props children is rendered 1`] = `
 <a
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
 >
   <span>
     <span>
@@ -24,8 +22,7 @@ exports[`KuiLinkButton Props children is rendered 1`] = `
 
 exports[`KuiLinkButton Props className renders the classes 1`] = `
 <a
-  className="kuiButton testClass1 testClass2"
-  onClick={[Function]}
+  class="kuiButton testClass1 testClass2"
 >
   <span />
 </a>
@@ -33,9 +30,16 @@ exports[`KuiLinkButton Props className renders the classes 1`] = `
 
 exports[`KuiLinkButton Props data-test-subj is rendered 1`] = `
 <a
-  className="kuiButton"
+  class="kuiButton"
   data-test-subj="test subject string"
-  onClick={[Function]}
+>
+  <span />
+</a>
+`;
+
+exports[`KuiLinkButton Props disabled sets the disabled class 1`] = `
+<a
+  class="kuiButton kuiButton-isDisabled"
 >
   <span />
 </a>
@@ -43,9 +47,8 @@ exports[`KuiLinkButton Props data-test-subj is rendered 1`] = `
 
 exports[`KuiLinkButton Props href is rendered 1`] = `
 <a
-  className="kuiButton"
+  class="kuiButton"
   href="#"
-  onClick={[Function]}
 >
   <span />
 </a>
@@ -53,8 +56,7 @@ exports[`KuiLinkButton Props href is rendered 1`] = `
 
 exports[`KuiLinkButton Props icon is rendered with children 1`] = `
 <a
-  className="kuiButton kuiButton--iconText"
-  onClick={[Function]}
+  class="kuiButton kuiButton--iconText"
 >
   <span>
     Icon
@@ -67,8 +69,7 @@ exports[`KuiLinkButton Props icon is rendered with children 1`] = `
 
 exports[`KuiLinkButton Props icon is rendered without children 1`] = `
 <a
-  className="kuiButton kuiButton--iconText"
-  onClick={[Function]}
+  class="kuiButton kuiButton--iconText"
 >
   <span>
     Icon
@@ -78,8 +79,7 @@ exports[`KuiLinkButton Props icon is rendered without children 1`] = `
 
 exports[`KuiLinkButton Props iconPosition moves the icon to the right 1`] = `
 <a
-  className="kuiButton kuiButton--iconText"
-  onClick={[Function]}
+  class="kuiButton kuiButton--iconText"
 >
   <span>
     <span>
@@ -90,24 +90,13 @@ exports[`KuiLinkButton Props iconPosition moves the icon to the right 1`] = `
 </a>
 `;
 
-exports[`KuiLinkButton Props isDisabled sets the disabled attribute 1`] = `
-<a
-  className="kuiButton"
-  disabled={true}
-  onClick={[Function]}
->
-  <span />
-</a>
-`;
-
 exports[`KuiLinkButton Props isLoading doesn't render the icon prop 1`] = `
 <a
-  className="kuiButton kuiButton--iconText"
-  onClick={[Function]}
+  class="kuiButton kuiButton--iconText"
 >
   <span>
-    <KuiButtonIcon
-      type="loading"
+    <span
+      class="kuiButton__icon kuiIcon fa-spinner fa-spin"
     />
   </span>
 </a>
@@ -115,12 +104,11 @@ exports[`KuiLinkButton Props isLoading doesn't render the icon prop 1`] = `
 
 exports[`KuiLinkButton Props isLoading renders a spinner 1`] = `
 <a
-  className="kuiButton kuiButton--iconText"
-  onClick={[Function]}
+  class="kuiButton kuiButton--iconText"
 >
   <span>
-    <KuiButtonIcon
-      type="loading"
+    <span
+      class="kuiButton__icon kuiIcon fa-spinner fa-spin"
     />
   </span>
 </a>
@@ -128,8 +116,7 @@ exports[`KuiLinkButton Props isLoading renders a spinner 1`] = `
 
 exports[`KuiLinkButton Props target is rendered 1`] = `
 <a
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
   target="_blank"
 >
   <span />
diff --git a/ui_framework/components/button/__snapshots__/submit_button.test.js.snap b/ui_framework/components/button/__snapshots__/submit_button.test.js.snap
index 959f9809fda2a..9b4aa667e0db7 100644
--- a/ui_framework/components/button/__snapshots__/submit_button.test.js.snap
+++ b/ui_framework/components/button/__snapshots__/submit_button.test.js.snap
@@ -2,16 +2,14 @@
 
 exports[`KuiSubmitButton Baseline is rendered 1`] = `
 <input
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
   type="submit"
 />
 `;
 
 exports[`KuiSubmitButton Props children is rendered as value 1`] = `
 <input
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
   type="submit"
   value="Hello"
 />
@@ -19,26 +17,23 @@ exports[`KuiSubmitButton Props children is rendered as value 1`] = `
 
 exports[`KuiSubmitButton Props className renders the classes 1`] = `
 <input
-  className="kuiButton testClass1 testClass2"
-  onClick={[Function]}
+  class="kuiButton testClass1 testClass2"
   type="submit"
 />
 `;
 
 exports[`KuiSubmitButton Props data-test-subj is rendered 1`] = `
 <input
-  className="kuiButton"
+  class="kuiButton"
   data-test-subj="test subject string"
-  onClick={[Function]}
   type="submit"
 />
 `;
 
-exports[`KuiSubmitButton Props isDisabled sets the disabled attribute 1`] = `
+exports[`KuiSubmitButton Props disabled sets the disabled attribute and class 1`] = `
 <input
-  className="kuiButton"
-  disabled={true}
-  onClick={[Function]}
+  class="kuiButton kuiButton-isDisabled"
+  disabled=""
   type="submit"
 />
 `;
diff --git a/ui_framework/components/button/_button.scss b/ui_framework/components/button/_button.scss
index 8d72454122215..8aa11b3409754 100644
--- a/ui_framework/components/button/_button.scss
+++ b/ui_framework/components/button/_button.scss
@@ -1,8 +1,10 @@
 /**
  * 1. Setting to inline-block guarantees the same height when applied to both
  *    button elements and anchor tags.
- * 2. Disable for Angular.
- * 3. Safari won't respect :enabled:active on links.
+ * 2. Safari won't respect :enabled:active on links.
+ * 3. disabled isn't a valid attribute for links, so we also need to use this class.
+ * 4. Links can be focused when they're "disabled", so at least make them look like they're not
+ *    focused.
  */
 .kuiButton {
   display: inline-block; /* 1 */
@@ -16,17 +18,21 @@
   border: none;
   border-radius: $buttonBorderRadius;
 
+  &.kuiButton-isDisabled, /* 3 */
   &:disabled {
     cursor: default;
-    pointer-events: none; /* 2 */
   }
 
-  &:active { /* 3 */
+  &:active:not(.kuiButton-isDisabled) { /* 2 */
     transform: translateY(1px);
   }
 
   &:focus {
-    @include focus;
+    outline: none; /* 4 */
+  }
+
+  &:focus:not(.kuiButton-isDisabled) {
+    @include focus; /* 4 */
   }
 }
 
@@ -53,16 +59,17 @@
   background-color: #F2F2F2;
 
   // Goes before hover, so that hover can override it.
-  &:focus {
+  &:focus:not(.kuiButton-isDisabled) {
     color: #5a5a5a !important; /* 1 */
   }
 
-  &:hover, /* 2 */
-  &:active { /* 2 */
+  &:hover:not(.kuiButton-isDisabled), /* 2 */
+  &:active:not(.kuiButton-isDisabled) { /* 2 */
     color: #ffffff !important; /* 1 */
     background-color: #9B9B9B !important;
   }
 
+  &.kuiButton-isDisabled,
   &:disabled {
     color: #9B9B9B;
   }
@@ -76,17 +83,18 @@
   color: #FFFFFF;
   background-color: #6EADC1;
 
-  &:hover, /* 2 */
-  &:active { /* 2 */
+  &:hover:not(.kuiButton-isDisabled), /* 2 */
+  &:active:not(.kuiButton-isDisabled) { /* 2 */
     color: #FFFFFF !important; /* 1 */
     background-color: #006E8A;
   }
 
+  &.kuiButton-isDisabled,
   &:disabled {
     background-color: #B6D6E0;
   }
 
-  &:focus {
+  &:focus:not(.kuiButton-isDisabled) {
     color: #FFFFFF !important; /* 1 */
   }
 }
@@ -99,17 +107,18 @@
   color: #FFFFFF;
   background-color: #D76051;
 
-  &:hover, /* 2 */
-  &:active { /* 2 */
+  &:hover:not(.kuiButton-isDisabled), /* 2 */
+  &:active:not(.kuiButton-isDisabled) { /* 2 */
     color: #FFFFFF !important; /* 1 */
     background-color: #A52E1F;
   }
 
+  &.kuiButton-isDisabled,
   &:disabled {
     background-color: #efc0ba;
   }
 
-  &:focus {
+  &:focus:not(.kuiButton-isDisabled) {
     @include focus($focusDangerColor);
     color: #FFFFFF !important; /* 1 */
   }
@@ -124,12 +133,13 @@
   color: $linkColor !important; /* 2 */
   background-color: transparent;
 
-  &:hover, /* 3 */
-  &:active { /* 3 */
+  &:hover:not(.kuiButton-isDisabled), /* 3 */
+  &:active:not(.kuiButton-isDisabled) { /* 3 */
     color: $linkHoverColor !important; /* 1 */
     text-decoration: underline;
   }
 
+  &.kuiButton-isDisabled,
   &:disabled {
     color: #dddddd !important; /* 1 */
   }
diff --git a/ui_framework/components/button/button.js b/ui_framework/components/button/button.js
index 8d4ce926c4a6a..13e1481e3828a 100644
--- a/ui_framework/components/button/button.js
+++ b/ui_framework/components/button/button.js
@@ -11,11 +11,13 @@ const BUTTON_TYPES = [
   'danger',
   'primary',
 ];
+
 const ICON_POSITIONS = [
   'left',
   'right',
 ];
-const defaultIconPosition = ICON_POSITIONS[0];
+
+const DEFAULT_ICON_POSITION = 'left';
 
 const buttonTypeToClassNameMap = {
   basic: 'kuiButton--basic',
@@ -24,9 +26,10 @@ const buttonTypeToClassNameMap = {
   primary: 'kuiButton--primary',
 };
 
-const getClassName = ({ className, type, icon }) =>
+const getClassName = ({ className, type, hasIcon = false, isDisabled }) =>
   classNames('kuiButton', className, buttonTypeToClassNameMap[type], {
-    'kuiButton--iconText': icon != null,
+    'kuiButton--iconText': hasIcon,
+    'kuiButton-isDisabled': isDisabled,
   });
 
 const ContentWithIcon = ({ children, icon, iconPosition, isLoading }) => {
@@ -59,8 +62,9 @@ const ContentWithIcon = ({ children, icon, iconPosition, isLoading }) => {
 
 const KuiButton = ({
   isLoading,
-  iconPosition = defaultIconPosition,
+  iconPosition = DEFAULT_ICON_POSITION,
   className,
+  disabled,
   type,
   icon,
   children,
@@ -68,15 +72,21 @@ const KuiButton = ({
 }) => {
   return (
     <button
-      className={getClassName({ className, type, icon })}
+      className={getClassName({
+        className,
+        type,
+        hasIcon: icon || isLoading,
+        isDisabled: disabled,
+      })}
+      disabled={disabled}
       { ...rest }
     >
       <ContentWithIcon
         icon={icon}
         iconPosition={iconPosition}
-        isLoading={ isLoading }
+        isLoading={isLoading}
       >
-        { children }
+        {children}
       </ContentWithIcon>
     </button>
   );
@@ -94,15 +104,28 @@ KuiButton.propTypes = {
 const KuiLinkButton = ({
   isLoading,
   icon,
-  iconPosition = defaultIconPosition,
+  iconPosition = DEFAULT_ICON_POSITION,
   className,
+  disabled,
   type,
   children,
   ...rest
 }) => {
+  const onClick = e => {
+    if (disabled) {
+      e.preventDefault();
+    }
+  };
+
   return (
     <a
-      className={getClassName({ className, type, icon })}
+      className={getClassName({
+        className,
+        type,
+        hasIcon: icon || isLoading,
+        isDisabled: disabled,
+      })}
+      onClick={onClick}
       {...rest}
     >
       <ContentWithIcon
@@ -127,15 +150,18 @@ KuiLinkButton.propTypes = {
 
 const KuiSubmitButton = ({
   className,
+  disabled,
   type,
   children,
   ...rest
 }) => {
+  // NOTE: The `input` element is a void element and can't contain children.
   return (
     <input
       type="submit"
       value={children}
-      className={getClassName({ className, type })}
+      className={getClassName({ className, type, isDisabled: disabled })}
+      disabled={disabled}
       { ...rest }
     />
   );
diff --git a/ui_framework/components/button/button.test.js b/ui_framework/components/button/button.test.js
index 8bd0623be1fe6..8693706d50fca 100644
--- a/ui_framework/components/button/button.test.js
+++ b/ui_framework/components/button/button.test.js
@@ -1,8 +1,5 @@
 import React from 'react';
-import {
-  shallow,
-  render,
-} from 'enzyme';
+import { render, shallow } from 'enzyme';
 import sinon from 'sinon';
 
 import {
@@ -13,7 +10,7 @@ import {
 describe('KuiButton', () => {
   describe('Baseline', () => {
     test('is rendered', () => {
-      const $button = shallow(
+      const $button = render(
         <KuiButton />
       );
 
@@ -36,7 +33,7 @@ describe('KuiButton', () => {
 
     describe('data-test-subj', () => {
       test('is rendered', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiButton data-test-subj="test subject string" />
         );
 
@@ -47,7 +44,7 @@ describe('KuiButton', () => {
 
     describe('icon', () => {
       test('is rendered with children', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiButton icon="Icon">
             Hello
           </KuiButton>
@@ -58,7 +55,7 @@ describe('KuiButton', () => {
       });
 
       test('is rendered without children', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiButton icon="Icon" />
         );
 
@@ -69,7 +66,7 @@ describe('KuiButton', () => {
 
     describe('iconPosition', () => {
       test('moves the icon to the right', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiButton
             icon="Icon"
             iconPosition="right"
@@ -85,7 +82,7 @@ describe('KuiButton', () => {
 
     describe('children', () => {
       test('is rendered', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiButton>
             Hello
           </KuiButton>
@@ -118,47 +115,22 @@ describe('KuiButton', () => {
 
         sinon.assert.calledOnce(onClickHandler);
       });
-
-      test('receives the data prop', () => {
-        const onClickHandler = sinon.stub();
-        const data = 'data';
-
-        const $button = shallow(
-          <KuiButton onClick={onClickHandler} data={data} />
-        );
-
-        $button.simulate('click');
-
-        sinon.assert.calledWith(onClickHandler, data);
-      });
     });
 
-    describe('isDisabled', () => {
-      test('sets the disabled attribute', () => {
-        const $button = shallow(
-          <KuiButton isDisabled />
+    describe('disabled', () => {
+      test('sets the disabled attribute and class', () => {
+        const $button = render(
+          <KuiButton disabled />
         );
 
         expect($button)
           .toMatchSnapshot();
       });
-
-      test(`prevents onClick from being called`, () => {
-        const onClickHandler = sinon.stub();
-
-        const $button = shallow(
-          <KuiButton isDisabled onClick={onClickHandler} />
-        );
-
-        $button.simulate('click');
-
-        sinon.assert.notCalled(onClickHandler);
-      });
     });
 
     describe('isLoading', () => {
       test('renders a spinner', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiButton isLoading />
         );
 
@@ -167,7 +139,7 @@ describe('KuiButton', () => {
       });
 
       test(`doesn't render the icon prop`, () => {
-        const $button = shallow(
+        const $button = render(
           <KuiButton isLoading icon="Icon" />
         );
 
@@ -178,7 +150,7 @@ describe('KuiButton', () => {
 
     describe('className', () => {
       test('renders the classes', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiButton className="testClass1 testClass2" />
         );
 
diff --git a/ui_framework/components/button/button_group/__snapshots__/button_group.test.js.snap b/ui_framework/components/button/button_group/__snapshots__/button_group.test.js.snap
index d63b2c0191488..1bb2afd901f39 100644
--- a/ui_framework/components/button/button_group/__snapshots__/button_group.test.js.snap
+++ b/ui_framework/components/button/button_group/__snapshots__/button_group.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`KuiButtonGroup Baseline is rendered 1`] = `
 <div
-  className="kuiButtonGroup"
+  class="kuiButtonGroup"
 />
 `;
 
 exports[`KuiButtonGroup Props children is rendered 1`] = `
 <div
-  className="kuiButtonGroup"
+  class="kuiButtonGroup"
 >
   Hello
 </div>
@@ -16,6 +16,6 @@ exports[`KuiButtonGroup Props children is rendered 1`] = `
 
 exports[`KuiButtonGroup Props isUnited renders the united class 1`] = `
 <div
-  className="kuiButtonGroup kuiButtonGroup--united"
+  class="kuiButtonGroup kuiButtonGroup--united"
 />
 `;
diff --git a/ui_framework/components/button/button_group/button_group.test.js b/ui_framework/components/button/button_group/button_group.test.js
index 7657aff921404..c543b19e16c55 100644
--- a/ui_framework/components/button/button_group/button_group.test.js
+++ b/ui_framework/components/button/button_group/button_group.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from 'enzyme';
 import sinon from 'sinon';
 
 import { KuiButtonGroup } from './button_group';
@@ -7,7 +7,7 @@ import { KuiButtonGroup } from './button_group';
 describe('KuiButtonGroup', () => {
   describe('Baseline', () => {
     test('is rendered', () => {
-      const $buttonGroup = shallow(
+      const $buttonGroup = render(
         <KuiButtonGroup />
       );
 
@@ -19,7 +19,7 @@ describe('KuiButtonGroup', () => {
   describe('Props', () => {
     describe('children', () => {
       test('is rendered', () => {
-        const $buttonGroup = shallow(
+        const $buttonGroup = render(
           <KuiButtonGroup>
             Hello
           </KuiButtonGroup>
@@ -32,7 +32,7 @@ describe('KuiButtonGroup', () => {
 
     describe('isUnited', () => {
       test('renders the united class', () => {
-        const $buttonGroup = shallow(
+        const $buttonGroup = render(
           <KuiButtonGroup isUnited />
         );
 
diff --git a/ui_framework/components/button/button_icon/__snapshots__/button_icon.test.js.snap b/ui_framework/components/button/button_icon/__snapshots__/button_icon.test.js.snap
index c3e3588a050fd..6c63973e9d240 100644
--- a/ui_framework/components/button/button_icon/__snapshots__/button_icon.test.js.snap
+++ b/ui_framework/components/button/button_icon/__snapshots__/button_icon.test.js.snap
@@ -2,13 +2,13 @@
 
 exports[`KuiButtonIcon Baseline is rendered 1`] = `
 <span
-  className="kuiButton__icon kuiIcon"
+  class="kuiButton__icon kuiIcon"
 />
 `;
 
 exports[`KuiButtonIcon Props className renders the classes 1`] = `
 <span
-  className="kuiButton__icon kuiIcon testClass1 testClass2"
+  class="kuiButton__icon kuiIcon testClass1 testClass2"
 />
 `;
 
diff --git a/ui_framework/components/button/button_icon/button_icon.test.js b/ui_framework/components/button/button_icon/button_icon.test.js
index d51478a57e7e4..b20a8e72dab08 100644
--- a/ui_framework/components/button/button_icon/button_icon.test.js
+++ b/ui_framework/components/button/button_icon/button_icon.test.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import {
-  shallow,
   render,
 } from 'enzyme';
 import sinon from 'sinon';
@@ -13,7 +12,7 @@ import {
 describe('KuiButtonIcon', () => {
   describe('Baseline', () => {
     test('is rendered', () => {
-      const $buttonIcon = shallow(
+      const $buttonIcon = render(
         <KuiButtonIcon />
       );
 
@@ -36,7 +35,7 @@ describe('KuiButtonIcon', () => {
 
     describe('className', () => {
       test('renders the classes', () => {
-        const $buttonIcon = shallow(
+        const $buttonIcon = render(
           <KuiButtonIcon className="testClass1 testClass2" />
         );
 
diff --git a/ui_framework/components/button/link_button.test.js b/ui_framework/components/button/link_button.test.js
index 035619b063a59..e3f9351d612c3 100644
--- a/ui_framework/components/button/link_button.test.js
+++ b/ui_framework/components/button/link_button.test.js
@@ -1,9 +1,5 @@
 import React from 'react';
-import {
-  shallow,
-  render,
-} from 'enzyme';
-import sinon from 'sinon';
+import { render } from 'enzyme';
 
 import {
   KuiLinkButton,
@@ -12,7 +8,7 @@ import {
 describe('KuiLinkButton', () => {
   describe('Baseline', () => {
     test('is rendered', () => {
-      const $button = shallow(
+      const $button = render(
         <KuiLinkButton />
       );
 
@@ -70,7 +66,7 @@ describe('KuiLinkButton', () => {
 
     describe('data-test-subj', () => {
       test('is rendered', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiLinkButton data-test-subj="test subject string" />
         );
 
@@ -81,7 +77,7 @@ describe('KuiLinkButton', () => {
 
     describe('icon', () => {
       test('is rendered with children', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiLinkButton icon="Icon">
             Hello
           </KuiLinkButton>
@@ -92,7 +88,7 @@ describe('KuiLinkButton', () => {
       });
 
       test('is rendered without children', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiLinkButton icon="Icon" />
         );
 
@@ -103,7 +99,7 @@ describe('KuiLinkButton', () => {
 
     describe('iconPosition', () => {
       test('moves the icon to the right', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiLinkButton
             icon="Icon"
             iconPosition="right"
@@ -119,7 +115,7 @@ describe('KuiLinkButton', () => {
 
     describe('children', () => {
       test('is rendered', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiLinkButton>
             Hello
           </KuiLinkButton>
@@ -132,7 +128,7 @@ describe('KuiLinkButton', () => {
 
     describe('href', () => {
       test('is rendered', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiLinkButton href="#" />
         );
 
@@ -143,7 +139,7 @@ describe('KuiLinkButton', () => {
 
     describe('target', () => {
       test('is rendered', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiLinkButton target="_blank" />
         );
 
@@ -152,69 +148,20 @@ describe('KuiLinkButton', () => {
       });
     });
 
-    describe('onClick', () => {
-      test(`isn't called upon instantiation`, () => {
-        const onClickHandler = sinon.stub();
-
-        const $button = shallow(
-          <KuiLinkButton onClick={onClickHandler} />
-        );
-
-        sinon.assert.notCalled(onClickHandler);
-      });
-
-      test('is called when the button is clicked', () => {
-        const onClickHandler = sinon.stub();
-
-        const $button = shallow(
-          <KuiLinkButton onClick={onClickHandler} />
-        );
-
-        $button.simulate('click');
-
-        sinon.assert.calledOnce(onClickHandler);
-      });
-
-      test('receives the data prop', () => {
-        const onClickHandler = sinon.stub();
-        const data = 'data';
-
-        const $button = shallow(
-          <KuiLinkButton onClick={onClickHandler} data={data} />
-        );
-
-        $button.simulate('click');
-
-        sinon.assert.calledWith(onClickHandler, data);
-      });
-    });
-
-    describe('isDisabled', () => {
-      test('sets the disabled attribute', () => {
-        const $button = shallow(
-          <KuiLinkButton isDisabled />
+    describe('disabled', () => {
+      test('sets the disabled class', () => {
+        const $button = render(
+          <KuiLinkButton disabled />
         );
 
         expect($button)
           .toMatchSnapshot();
       });
-
-      test(`prevents onClick from being called`, () => {
-        const onClickHandler = sinon.stub();
-
-        const $button = shallow(
-          <KuiLinkButton isDisabled onClick={onClickHandler} />
-        );
-
-        $button.simulate('click');
-
-        sinon.assert.notCalled(onClickHandler);
-      });
     });
 
     describe('isLoading', () => {
       test('renders a spinner', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiLinkButton isLoading />
         );
 
@@ -223,7 +170,7 @@ describe('KuiLinkButton', () => {
       });
 
       test(`doesn't render the icon prop`, () => {
-        const $button = shallow(
+        const $button = render(
           <KuiLinkButton isLoading icon="Icon" />
         );
 
@@ -234,7 +181,7 @@ describe('KuiLinkButton', () => {
 
     describe('className', () => {
       test('renders the classes', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiLinkButton className="testClass1 testClass2" />
         );
 
diff --git a/ui_framework/components/button/submit_button.test.js b/ui_framework/components/button/submit_button.test.js
index 7f4f682c76e56..d4a6c7ef9c2ec 100644
--- a/ui_framework/components/button/submit_button.test.js
+++ b/ui_framework/components/button/submit_button.test.js
@@ -1,8 +1,5 @@
 import React from 'react';
-import {
-  shallow,
-  render,
-} from 'enzyme';
+import { render, shallow } from 'enzyme';
 import sinon from 'sinon';
 
 import {
@@ -12,7 +9,7 @@ import {
 describe('KuiSubmitButton', () => {
   describe('Baseline', () => {
     test('is rendered', () => {
-      const $button = shallow(
+      const $button = render(
         <KuiSubmitButton />
       );
 
@@ -70,7 +67,7 @@ describe('KuiSubmitButton', () => {
 
     describe('data-test-subj', () => {
       test('is rendered', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiSubmitButton data-test-subj="test subject string" />
         );
 
@@ -81,7 +78,7 @@ describe('KuiSubmitButton', () => {
 
     describe('children', () => {
       test('is rendered as value', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiSubmitButton>
             Hello
           </KuiSubmitButton>
@@ -114,47 +111,22 @@ describe('KuiSubmitButton', () => {
 
         sinon.assert.calledOnce(onClickHandler);
       });
-
-      test('receives the data prop', () => {
-        const onClickHandler = sinon.stub();
-        const data = 'data';
-
-        const $button = shallow(
-          <KuiSubmitButton onClick={onClickHandler} data={data} />
-        );
-
-        $button.simulate('click');
-
-        sinon.assert.calledWith(onClickHandler, data);
-      });
     });
 
-    describe('isDisabled', () => {
-      test('sets the disabled attribute', () => {
-        const $button = shallow(
-          <KuiSubmitButton isDisabled />
+    describe('disabled', () => {
+      test('sets the disabled attribute and class', () => {
+        const $button = render(
+          <KuiSubmitButton disabled />
         );
 
         expect($button)
           .toMatchSnapshot();
       });
-
-      test(`prevents onClick from being called`, () => {
-        const onClickHandler = sinon.stub();
-
-        const $button = shallow(
-          <KuiSubmitButton isDisabled onClick={onClickHandler} />
-        );
-
-        $button.simulate('click');
-
-        sinon.assert.notCalled(onClickHandler);
-      });
     });
 
     describe('className', () => {
       test('renders the classes', () => {
-        const $button = shallow(
+        const $button = render(
           <KuiSubmitButton className="testClass1 testClass2" />
         );
 
diff --git a/ui_framework/dist/ui_framework.css b/ui_framework/dist/ui_framework.css
index ca473cc2f052b..306d6444599c9 100644
--- a/ui_framework/dist/ui_framework.css
+++ b/ui_framework/dist/ui_framework.css
@@ -119,8 +119,10 @@ body {
 /**
  * 1. Setting to inline-block guarantees the same height when applied to both
  *    button elements and anchor tags.
- * 2. Disable for Angular.
- * 3. Safari won't respect :enabled:active on links.
+ * 2. Safari won't respect :enabled:active on links.
+ * 3. disabled isn't a valid attribute for links, so we also need to use this class.
+ * 4. Links can be focused when they're "disabled", so at least make them look like they're not
+ *    focused.
  */
 .kuiButton {
   display: inline-block;
@@ -136,21 +138,23 @@ body {
   text-decoration: none;
   border: none;
   border-radius: 4px; }
-  .kuiButton:disabled {
-    cursor: default;
-    pointer-events: none;
-    /* 2 */ }
-  .kuiButton:active {
-    /* 3 */
+  .kuiButton.kuiButton-isDisabled, .kuiButton:disabled {
+    cursor: default; }
+  .kuiButton:active:not(.kuiButton-isDisabled) {
+    /* 2 */
     -webkit-transform: translateY(1px);
             transform: translateY(1px); }
   .kuiButton:focus {
+    outline: none;
+    /* 4 */ }
+  .kuiButton:focus:not(.kuiButton-isDisabled) {
     z-index: 1;
     /* 1 */
     outline: none !important;
     /* 2 */
     box-shadow: 0 0 0 1px #ffffff, 0 0 0 2px #6EADC1;
-    /* 3 */ }
+    /* 3 */
+    /* 4 */ }
 
 .kuiButton--iconText .kuiButton__icon:first-child:not(:only-child) {
   margin-right: 8px; }
@@ -165,15 +169,15 @@ body {
 .kuiButton--basic {
   color: #5a5a5a;
   background-color: #F2F2F2; }
-  .kuiButton--basic:focus {
+  .kuiButton--basic:focus:not(.kuiButton-isDisabled) {
     color: #5a5a5a !important;
     /* 1 */ }
-  .kuiButton--basic:hover, .kuiButton--basic:active {
+  .kuiButton--basic:hover:not(.kuiButton-isDisabled), .kuiButton--basic:active:not(.kuiButton-isDisabled) {
     /* 2 */
     color: #ffffff !important;
     /* 1 */
     background-color: #9B9B9B !important; }
-  .kuiButton--basic:disabled {
+  .kuiButton--basic.kuiButton-isDisabled, .kuiButton--basic:disabled {
     color: #9B9B9B; }
 
 /**
@@ -183,14 +187,14 @@ body {
 .kuiButton--primary {
   color: #FFFFFF;
   background-color: #6EADC1; }
-  .kuiButton--primary:hover, .kuiButton--primary:active {
+  .kuiButton--primary:hover:not(.kuiButton-isDisabled), .kuiButton--primary:active:not(.kuiButton-isDisabled) {
     /* 2 */
     color: #FFFFFF !important;
     /* 1 */
     background-color: #006E8A; }
-  .kuiButton--primary:disabled {
+  .kuiButton--primary.kuiButton-isDisabled, .kuiButton--primary:disabled {
     background-color: #B6D6E0; }
-  .kuiButton--primary:focus {
+  .kuiButton--primary:focus:not(.kuiButton-isDisabled) {
     color: #FFFFFF !important;
     /* 1 */ }
 
@@ -201,14 +205,14 @@ body {
 .kuiButton--danger {
   color: #FFFFFF;
   background-color: #D76051; }
-  .kuiButton--danger:hover, .kuiButton--danger:active {
+  .kuiButton--danger:hover:not(.kuiButton-isDisabled), .kuiButton--danger:active:not(.kuiButton-isDisabled) {
     /* 2 */
     color: #FFFFFF !important;
     /* 1 */
     background-color: #A52E1F; }
-  .kuiButton--danger:disabled {
+  .kuiButton--danger.kuiButton-isDisabled, .kuiButton--danger:disabled {
     background-color: #efc0ba; }
-  .kuiButton--danger:focus {
+  .kuiButton--danger:focus:not(.kuiButton-isDisabled) {
     z-index: 1;
     /* 1 */
     outline: none !important;
@@ -227,12 +231,12 @@ body {
   color: #3CAED2 !important;
   /* 2 */
   background-color: transparent; }
-  .kuiButton--hollow:hover, .kuiButton--hollow:active {
+  .kuiButton--hollow:hover:not(.kuiButton-isDisabled), .kuiButton--hollow:active:not(.kuiButton-isDisabled) {
     /* 3 */
     color: #006E8A !important;
     /* 1 */
     text-decoration: underline; }
-  .kuiButton--hollow:disabled {
+  .kuiButton--hollow.kuiButton-isDisabled, .kuiButton--hollow:disabled {
     color: #dddddd !important;
     /* 1 */ }
 
diff --git a/ui_framework/doc_site/src/views/button/button_basic.js b/ui_framework/doc_site/src/views/button/button_basic.js
index de9c8ac3f7bc5..2dcd6357ba23e 100644
--- a/ui_framework/doc_site/src/views/button/button_basic.js
+++ b/ui_framework/doc_site/src/views/button/button_basic.js
@@ -17,7 +17,8 @@ export default () => (
 
     <KuiButton
       type="basic"
-      isDisabled
+      onClick={() => window.alert('Button clicked')}
+      disabled
     >
       Basic button, disabled
     </KuiButton>
diff --git a/ui_framework/doc_site/src/views/button/button_danger.js b/ui_framework/doc_site/src/views/button/button_danger.js
index e6c9fc17cd123..7650dfe989ab5 100644
--- a/ui_framework/doc_site/src/views/button/button_danger.js
+++ b/ui_framework/doc_site/src/views/button/button_danger.js
@@ -14,7 +14,7 @@ export default () => (
 
     <KuiButton
       type="danger"
-      isDisabled
+      disabled
     >
       Danger button, disabled
     </KuiButton>
diff --git a/ui_framework/doc_site/src/views/button/button_elements.js b/ui_framework/doc_site/src/views/button/button_elements.js
index 4470a5790e308..2891b20f63699 100644
--- a/ui_framework/doc_site/src/views/button/button_elements.js
+++ b/ui_framework/doc_site/src/views/button/button_elements.js
@@ -23,6 +23,16 @@ export default () => (
       </KuiSubmitButton>
     </form>
 
+
+    <form onSubmit={e => {
+      e.preventDefault();
+      window.alert('Submit');
+    }}>
+      <KuiSubmitButton type="basic" disabled>
+        Submit input element, disabled
+      </KuiSubmitButton>
+    </form>
+
     &nbsp;
 
     <KuiLinkButton
@@ -32,5 +42,16 @@ export default () => (
     >
       Anchor element
     </KuiLinkButton>
+
+    &nbsp;
+
+    <KuiLinkButton
+      type="basic"
+      href="http://www.google.com"
+      target="_blank"
+      disabled
+    >
+      Anchor element, disabled
+    </KuiLinkButton>
   </div>
 );
diff --git a/ui_framework/doc_site/src/views/button/button_hollow.js b/ui_framework/doc_site/src/views/button/button_hollow.js
index 8780b4eac789c..6532e6af1eaf9 100644
--- a/ui_framework/doc_site/src/views/button/button_hollow.js
+++ b/ui_framework/doc_site/src/views/button/button_hollow.js
@@ -14,7 +14,7 @@ export default () => (
 
     <KuiButton
       type="hollow"
-      isDisabled
+      disabled
     >
       Hollow button, disabled
     </KuiButton>
diff --git a/ui_framework/doc_site/src/views/button/button_loading.js b/ui_framework/doc_site/src/views/button/button_loading.js
index f27b1d7f8631e..6b140bb5983e3 100644
--- a/ui_framework/doc_site/src/views/button/button_loading.js
+++ b/ui_framework/doc_site/src/views/button/button_loading.js
@@ -37,7 +37,7 @@ export default class LoadingButton extends Component {
           type="basic"
           onClick={this.onClick}
           isLoading={this.state.isLoading}
-          isDisabled={this.state.isLoading}
+          disabled={this.state.isLoading}
         >
           {this.state.isLoading ? 'Loading...' : 'Load more'}
         </KuiButton>
@@ -49,7 +49,7 @@ export default class LoadingButton extends Component {
           onClick={this.onClick}
           icon={<KuiButtonIcon type="create" />}
           isLoading={this.state.isLoading}
-          isDisabled={this.state.isLoading}
+          disabled={this.state.isLoading}
         >
           {this.state.isLoading ? 'Creating...' : 'Create'}
         </KuiButton>
diff --git a/ui_framework/doc_site/src/views/button/button_primary.js b/ui_framework/doc_site/src/views/button/button_primary.js
index 3b7b0bc894c50..dbbf1e242208f 100644
--- a/ui_framework/doc_site/src/views/button/button_primary.js
+++ b/ui_framework/doc_site/src/views/button/button_primary.js
@@ -14,7 +14,7 @@ export default () => (
 
     <KuiButton
       type="primary"
-      isDisabled
+      disabled
     >
       Primary button, disabled
     </KuiButton>
diff --git a/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.js b/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.js
index 66c8cf599e582..91c62478ad356 100644
--- a/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.js
+++ b/ui_framework/doc_site/src/views/button/buttons_in_tool_bar.js
@@ -12,7 +12,7 @@ export default () => (
 
     <KuiButton
       type="basic"
-      isDisabled
+      disabled
     >
       Basic button, disabled
     </KuiButton>
@@ -23,7 +23,7 @@ export default () => (
 
     <KuiButton
       type="primary"
-      isDisabled
+      disabled
     >
       Primary button, disabled
     </KuiButton>
@@ -34,7 +34,7 @@ export default () => (
 
     <KuiButton
       type="danger"
-      isDisabled
+      disabled
     >
       Danger button, disabled
     </KuiButton>