Break KuiButton apart into KuiButton, KuiLinkButton, and KuiSubmitBut…

…ton.
elastic · Mar 28, 2017 · 020d94c · 020d94c
1 parent a8000c9
commit 020d94c
Show file tree

Hide file tree

Showing 10 changed files with 759 additions and 235 deletions.
diff --git a/ui_framework/components/button/__snapshots__/button.test.js.snap b/ui_framework/components/button/__snapshots__/button.test.js.snap
@@ -31,16 +31,6 @@ exports[`KuiButton Props className renders the classes 1`] = `
 </button>
 `;
 
-exports[`KuiButton Props href changes the element from a button to an anchor tag 1`] = `
-<a
-  className="kuiButton"
-  href="#"
-  onClick={[Function]}
->
-  <span />
-</a>
-`;
-
 exports[`KuiButton Props icon is rendered with children 1`] = `
 <button
   className="kuiButton kuiButton--iconText"
@@ -116,42 +106,6 @@ exports[`KuiButton Props isLoading renders a spinner 1`] = `
 </button>
 `;
 
-exports[`KuiButton Props isSubmit changes the element from a button to an input[type=submit] 1`] = `
-<input
-  className="kuiButton"
-  onClick={[Function]}
-  type="submit"
-/>
-`;
-
-exports[`KuiButton Props isSubmit doesn't throw an error if it receives string children 1`] = `
-<input
-  className="kuiButton"
-  onClick={[Function]}
-  type="submit"
-  value="Hello"
-/>
-`;
-
-exports[`KuiButton Props isSubmit throws an error if it receives icon 1`] = `
-"KuiButton with isSubmit prop set to true can only accept string children, and can't
-        display icons. This is because input is a void element and can't contain children."
-`;
-
-exports[`KuiButton Props isSubmit throws an error if it receives non-string children 1`] = `
-"KuiButton with isSubmit prop set to true can only accept string children, and can't
-        display icons. This is because input is a void element and can't contain children."
-`;
-
-exports[`KuiButton Props target is rendered 1`] = `
-<button
-  className="kuiButton"
-  onClick={[Function]}
->
-  <span />
-</button>
-`;
-
 exports[`KuiButton Props testSubject is rendered 1`] = `
 <button
   className="kuiButton"

diff --git a/ui_framework/components/button/__snapshots__/link_button.test.js.snap b/ui_framework/components/button/__snapshots__/link_button.test.js.snap
@@ -0,0 +1,169 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiLinkButton Baseline is rendered 1`] = `
+<a
+  className="kuiButton"
+  onClick={[Function]}
+>
+  <span />
+</a>
+`;
+
+exports[`KuiLinkButton Props children is rendered 1`] = `
+<a
+  className="kuiButton"
+  onClick={[Function]}
+>
+  <span>
+    <span>
+      Hello
+    </span>
+  </span>
+</a>
+`;
+
+exports[`KuiLinkButton Props className renders the classes 1`] = `
+<a
+  className="kuiButton testClass1 testClass2"
+  onClick={[Function]}
+>
+  <span />
+</a>
+`;
+
+exports[`KuiLinkButton Props href is rendered 1`] = `
+<a
+  className="kuiButton"
+  href="#"
+  onClick={[Function]}
+>
+  <span />
+</a>
+`;
+
+exports[`KuiLinkButton Props icon is rendered with children 1`] = `
+<a
+  className="kuiButton kuiButton--iconText"
+  onClick={[Function]}
+>
+  <span>
+    Icon
+    <span>
+      Hello
+    </span>
+  </span>
+</a>
+`;
+
+exports[`KuiLinkButton Props icon is rendered without children 1`] = `
+<a
+  className="kuiButton kuiButton--iconText"
+  onClick={[Function]}
+>
+  <span>
+    Icon
+  </span>
+</a>
+`;
+
+exports[`KuiLinkButton Props isDisabled sets the disabled attribute 1`] = `
+<a
+  className="kuiButton"
+  disabled={true}
+  onClick={[Function]}
+>
+  <span />
+</a>
+`;
+
+exports[`KuiLinkButton Props isIconOnRight moves the icon to the right 1`] = `
+<a
+  className="kuiButton kuiButton--iconText"
+  onClick={[Function]}
+>
+  <span>
+    <span>
+      Hello
+    </span>
+    Icon
+  </span>
+</a>
+`;
+
+exports[`KuiLinkButton Props isLoading doesn't render the icon prop 1`] = `
+<a
+  className="kuiButton kuiButton--iconText"
+  onClick={[Function]}
+>
+  <span>
+    <KuiButtonIcon
+      type="LOADING"
+    />
+  </span>
+</a>
+`;
+
+exports[`KuiLinkButton Props isLoading renders a spinner 1`] = `
+<a
+  className="kuiButton kuiButton--iconText"
+  onClick={[Function]}
+>
+  <span>
+    <KuiButtonIcon
+      type="LOADING"
+    />
+  </span>
+</a>
+`;
+
+exports[`KuiLinkButton Props target is rendered 1`] = `
+<a
+  className="kuiButton"
+  onClick={[Function]}
+  target="_blank"
+>
+  <span />
+</a>
+`;
+
+exports[`KuiLinkButton Props testSubject is rendered 1`] = `
+<a
+  className="kuiButton"
+  data-test-subj="test subject string"
+  onClick={[Function]}
+>
+  <span />
+</a>
+`;
+
+exports[`KuiLinkButton Props type basic renders the basic class 1`] = `
+<a
+  class="kuiButton kuiButton--basic"
+>
+  <span />
+</a>
+`;
+
+exports[`KuiLinkButton Props type danger renders the danger class 1`] = `
+<a
+  class="kuiButton kuiButton--danger"
+>
+  <span />
+</a>
+`;
+
+exports[`KuiLinkButton Props type hollow renders the hollow class 1`] = `
+<a
+  class="kuiButton kuiButton--hollow"
+>
+  <span />
+</a>
+`;
+
+exports[`KuiLinkButton Props type primary renders the primary class 1`] = `
+<a
+  class="kuiButton kuiButton--primary"
+>
+  <span />
+</a>
+`;
diff --git a/ui_framework/components/button/__snapshots__/submit_button.test.js.snap b/ui_framework/components/button/__snapshots__/submit_button.test.js.snap
@@ -0,0 +1,72 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`KuiSubmitButton Baseline is rendered 1`] = `
+<input
+  className="kuiButton"
+  onClick={[Function]}
+  type="submit"
+/>
+`;
+
+exports[`KuiSubmitButton Props children is rendered as value 1`] = `
+<input
+  className="kuiButton"
+  onClick={[Function]}
+  type="submit"
+  value="Hello"
+/>
+`;
+
+exports[`KuiSubmitButton Props className renders the classes 1`] = `
+<input
+  className="kuiButton testClass1 testClass2"
+  onClick={[Function]}
+  type="submit"
+/>
+`;
+
+exports[`KuiSubmitButton Props isDisabled sets the disabled attribute 1`] = `
+<input
+  className="kuiButton"
+  disabled={true}
+  onClick={[Function]}
+  type="submit"
+/>
+`;
+
+exports[`KuiSubmitButton Props testSubject is rendered 1`] = `
+<input
+  className="kuiButton"
+  data-test-subj="test subject string"
+  onClick={[Function]}
+  type="submit"
+/>
+`;
+
+exports[`KuiSubmitButton Props type basic renders the basic class 1`] = `
+<input
+  class="kuiButton kuiButton--basic"
+  type="submit"
+/>
+`;
+
+exports[`KuiSubmitButton Props type danger renders the danger class 1`] = `
+<input
+  class="kuiButton kuiButton--danger"
+  type="submit"
+/>
+`;
+
+exports[`KuiSubmitButton Props type hollow renders the hollow class 1`] = `
+<input
+  class="kuiButton kuiButton--hollow"
+  type="submit"
+/>
+`;
+
+exports[`KuiSubmitButton Props type primary renders the primary class 1`] = `
+<input
+  class="kuiButton kuiButton--primary"
+  type="submit"
+/>
+`;