- Update KuiLinkButton to preventDefault on click when disabled.

- Update getClassName helper to accommodate loading icons. - Update tests.
elastic · Mar 28, 2017 · 4016eba · 4016eba
1 parent a2d045e
commit 4016eba
Show file tree

Hide file tree

Showing 20 changed files with 219 additions and 295 deletions.
diff --git a/ui_framework/components/button/__snapshots__/button.test.js.snap b/ui_framework/components/button/__snapshots__/button.test.js.snap
@@ -2,17 +2,15 @@
 
 exports[`KuiButton Baseline is rendered 1`] = `
 <button
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
 >
   <span />
 </button>
 `;
 
 exports[`KuiButton Props children is rendered 1`] = `
 <button
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
 >
   <span>
     <span>
@@ -24,27 +22,33 @@ 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>
 `;
 
 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>
 `;
 
 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,37 +82,25 @@ 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>
 `;
 
 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
@@ -2,17 +2,15 @@
 
 exports[`KuiLinkButton Baseline is rendered 1`] = `
 <a
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
 >
   <span />
 </a>
 `;
 
 exports[`KuiLinkButton Props children is rendered 1`] = `
 <a
-  className="kuiButton"
-  onClick={[Function]}
+  class="kuiButton"
 >
   <span>
     <span>
@@ -24,37 +22,41 @@ 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>
 `;
 
 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>
 `;
 
 exports[`KuiLinkButton Props href is rendered 1`] = `
 <a
-  className="kuiButton"
+  class="kuiButton"
   href="#"
-  onClick={[Function]}
 >
   <span />
 </a>
 `;
 
 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,46 +90,33 @@ 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>
 `;
 
 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>
 `;
 
 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
@@ -2,43 +2,38 @@
 
 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"
 />
 `;
 
 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"
 />
 `;