From efa0a264aeb7de2fe9cdaed27197888c32f09966 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 2 Mar 2017 09:26:16 -0800
Subject: [PATCH] Integrate button icon variations into button_icon.js.
 Integrate button variations inbot button.js. - Rename classes prop to
 className.

---
 .../components/button/basic_button.js         | 20 ------
 ui_framework/components/button/button.js      | 63 ++++++++++++++++---
 ui_framework/components/button/button_icon.js | 43 +++++--------
 .../components/button/danger_button.js        | 20 ------
 .../components/button/hollow_button.js        | 20 ------
 ui_framework/components/button/index.js       |  7 +--
 .../components/button/primary_button.js       | 20 ------
 .../src/views/button/button_group_united.js   |  7 ++-
 .../src/views/button/button_with_icon.js      | 14 +++--
 9 files changed, 84 insertions(+), 130 deletions(-)
 delete mode 100644 ui_framework/components/button/basic_button.js
 delete mode 100644 ui_framework/components/button/danger_button.js
 delete mode 100644 ui_framework/components/button/hollow_button.js
 delete mode 100644 ui_framework/components/button/primary_button.js

diff --git a/ui_framework/components/button/basic_button.js b/ui_framework/components/button/basic_button.js
deleted file mode 100644
index ca2b64ecd9bb3..0000000000000
--- a/ui_framework/components/button/basic_button.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import { KuiButton } from './button';
-
-const KuiBasicButton = props => {
-  const classes = classNames('kuiButton--basic', props.classes);
-
-  const extendedProps = Object.assign({}, props, {
-    classes,
-  });
-
-  return (
-    <KuiButton {...extendedProps} />
-  );
-};
-
-KuiBasicButton.propTypes = Object.assign({}, KuiButton.propTypes);
-
-export { KuiBasicButton };
diff --git a/ui_framework/components/button/button.js b/ui_framework/components/button/button.js
index 2fa5f84a03b19..5093a0dcbc422 100644
--- a/ui_framework/components/button/button.js
+++ b/ui_framework/components/button/button.js
@@ -1,4 +1,5 @@
 import React, {
+  Component,
   PropTypes,
 } from 'react';
 
@@ -28,7 +29,7 @@ const KuiButton = props => {
     props.onClick(props.data);
   }
 
-  const classes = classNames('kuiButton', props.classes, {
+  const className = classNames('kuiButton', props.className, {
     'kuiButton--iconText': props.icon || props.iconRight,
   });
 
@@ -42,19 +43,34 @@ const KuiButton = props => {
     );
   }
 
-  const elementType = props.isSubmit ? 'input' : props.href ? 'a' : 'button';
+  const elementType =
+    props.isSubmit
+    ? 'input'
+    : props.href
+    ? 'a'
+    : 'button';
+
+  const children =
+    props.isSubmit
+    ? null
+    : (
+      <span>
+        {props.icon}
+        {wrappedChildren}
+        {props.iconRight}
+      </span>
+    );
 
   return React.createElement(elementType, {
     'data-test-subj': props.testSubject,
-    className: classes,
+    className,
     href: props.href,
     target: props.target,
     type: props.isSubmit ? 'submit' : null,
     disabled: props.isDisabled,
     onClick,
     value: props.isSubmit ? props.children : null,
-    children: props.isSubmit ? null : [props.icon, wrappedChildren, props.iconRight],
-  });
+  }, children);
 };
 
 KuiButton.propTypes = {
@@ -63,18 +79,49 @@ KuiButton.propTypes = {
   icon: PropTypes.node,
   iconRight: PropTypes.node,
   children: PropTypes.node,
-  type: PropTypes.string,
   isSubmit: PropTypes.bool,
   href: PropTypes.string,
   target: PropTypes.string,
   onClick: PropTypes.func,
   isDisabled: PropTypes.bool,
   hasIcon: PropTypes.bool,
-  classes: PropTypes.oneOfType([
+  className: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.array,
     PropTypes.object,
   ]),
 };
 
-export { KuiButton };
+function createButtonVariation(hardCodedProps) {
+  const ButtonVariation = props => {
+    return React.createElement(KuiButton, Object.assign({}, props, hardCodedProps));
+  };
+
+  ButtonVariation.propTypes = Object.assign({}, KuiButton.propTypes);
+
+  return ButtonVariation;
+}
+
+const KuiBasicButton = createButtonVariation({
+  className: 'kuiButton--basic',
+});
+
+const KuiHollowButton = createButtonVariation({
+  className: 'kuiButton--hollow',
+});
+
+const KuiDangerButton = createButtonVariation({
+  className: 'kuiButton--danger',
+});
+
+const KuiPrimaryButton = createButtonVariation({
+  className: 'kuiButton--primary',
+});
+
+export {
+  KuiButton,
+  KuiBasicButton,
+  KuiHollowButton,
+  KuiDangerButton,
+  KuiPrimaryButton,
+};
diff --git a/ui_framework/components/button/button_icon.js b/ui_framework/components/button/button_icon.js
index 854f221efdce6..c5650f907939b 100644
--- a/ui_framework/components/button/button_icon.js
+++ b/ui_framework/components/button/button_icon.js
@@ -6,27 +6,9 @@ import classNames from 'classnames';
 import keyMirror from 'keymirror';
 
 const KuiButtonIcon = props => {
-  const typeToIconClassMap = {
-    [KuiButtonIcon.TYPE.CREATE]: 'fa-plus',
-    [KuiButtonIcon.TYPE.DELETE]: 'fa-trash',
-    [KuiButtonIcon.TYPE.PREVIOUS]: 'fa-chevron-left',
-    [KuiButtonIcon.TYPE.NEXT]: 'fa-chevron-right',
-  };
-
-  let iconType;
-
-  if (props.type) {
-    iconType = typeToIconClassMap[props.type];
-
-    if (iconType === undefined) {
-      throw new Error(`KuiButtonIcon type not defined: ${props.type}`);
-    }
-  }
-
   const iconClasses = classNames(
     'kuiButton__icon kuiIcon',
-    iconType,
-    props.classes,
+    props.className,
   );
 
   return (
@@ -34,16 +16,19 @@ const KuiButtonIcon = props => {
   );
 };
 
-KuiButtonIcon.TYPE = keyMirror({
-  CREATE: null,
-  DELETE: null,
-  PREVIOUS: null,
-  NEXT: null,
-});
-
 KuiButtonIcon.propTypes = {
-  type: PropTypes.string,
-  classes: PropTypes.string,
+  className: PropTypes.string,
 };
 
-export { KuiButtonIcon };
+const KuiCreateButtonIcon = () => <KuiButtonIcon className="fa-plus" />;
+const KuiDeleteButtonIcon = () => <KuiButtonIcon className="fa-trash" />;
+const KuiPreviousButtonIcon = () => <KuiButtonIcon className="fa-chevron-left" />;
+const KuiNextButtonIcon = () => <KuiButtonIcon className="fa-chevron-right" />;
+
+export {
+  KuiButtonIcon,
+  KuiCreateButtonIcon,
+  KuiDeleteButtonIcon,
+  KuiPreviousButtonIcon,
+  KuiNextButtonIcon,
+};
diff --git a/ui_framework/components/button/danger_button.js b/ui_framework/components/button/danger_button.js
deleted file mode 100644
index 9b7cc46416790..0000000000000
--- a/ui_framework/components/button/danger_button.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import { KuiButton } from './button';
-
-const KuiDangerButton = props => {
-  const classes = classNames('kuiButton--danger', props.classes);
-
-  const extendedProps = Object.assign({}, props, {
-    classes,
-  });
-
-  return (
-    <KuiButton {...extendedProps} />
-  );
-};
-
-KuiDangerButton.propTypes = Object.assign({}, KuiButton.propTypes);
-
-export { KuiDangerButton };
diff --git a/ui_framework/components/button/hollow_button.js b/ui_framework/components/button/hollow_button.js
deleted file mode 100644
index a16fab84f35f3..0000000000000
--- a/ui_framework/components/button/hollow_button.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import { KuiButton } from './button';
-
-const KuiHollowButton = props => {
-  const classes = classNames('kuiButton--hollow', props.classes);
-
-  const extendedProps = Object.assign({}, props, {
-    classes,
-  });
-
-  return (
-    <KuiButton {...extendedProps} />
-  );
-};
-
-KuiHollowButton.propTypes = Object.assign({}, KuiButton.propTypes);
-
-export { KuiHollowButton };
diff --git a/ui_framework/components/button/index.js b/ui_framework/components/button/index.js
index 82396e96b46dd..081cf952076ff 100644
--- a/ui_framework/components/button/index.js
+++ b/ui_framework/components/button/index.js
@@ -1,6 +1,3 @@
-export { KuiBasicButton } from './basic_button';
+export * from './button';
+export * from './button_icon';
 export { KuiButtonGroup } from './button_group';
-export { KuiButtonIcon } from './button_icon';
-export { KuiDangerButton } from './danger_button';
-export { KuiHollowButton } from './hollow_button';
-export { KuiPrimaryButton } from './primary_button';
diff --git a/ui_framework/components/button/primary_button.js b/ui_framework/components/button/primary_button.js
deleted file mode 100644
index 7339ecbc6a5bc..0000000000000
--- a/ui_framework/components/button/primary_button.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import { KuiButton } from './button';
-
-const KuiPrimaryButton = props => {
-  const classes = classNames('kuiButton--primary', props.classes);
-
-  const extendedProps = Object.assign({}, props, {
-    classes,
-  });
-
-  return (
-    <KuiButton {...extendedProps} />
-  );
-};
-
-KuiPrimaryButton.propTypes = Object.assign({}, KuiButton.propTypes);
-
-export { KuiPrimaryButton };
diff --git a/ui_framework/doc_site/src/views/button/button_group_united.js b/ui_framework/doc_site/src/views/button/button_group_united.js
index de881c4569439..4d8d542f38167 100644
--- a/ui_framework/doc_site/src/views/button/button_group_united.js
+++ b/ui_framework/doc_site/src/views/button/button_group_united.js
@@ -3,7 +3,8 @@ import React from 'react';
 import {
   KuiBasicButton,
   KuiButtonGroup,
-  KuiButtonIcon,
+  KuiNextButtonIcon,
+  KuiPreviousButtonIcon,
 } from '../../../../components';
 
 export default () => (
@@ -23,8 +24,8 @@ export default () => (
     <br />
 
     <KuiButtonGroup isUnited>
-      <KuiBasicButton icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.PREVIOUS} />}/>
-      <KuiBasicButton iconRight={<KuiButtonIcon type={KuiButtonIcon.TYPE.NEXT} />}/>
+      <KuiBasicButton icon={<KuiPreviousButtonIcon />}/>
+      <KuiBasicButton iconRight={<KuiNextButtonIcon />}/>
     </KuiButtonGroup>
   </div>
 );
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 b7d6f8a5309af..218154a03dd09 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
@@ -3,36 +3,40 @@ import React from 'react';
 import {
   KuiBasicButton,
   KuiButtonIcon,
+  KuiCreateButtonIcon,
   KuiDangerButton,
+  KuiDeleteButtonIcon,
+  KuiNextButtonIcon,
+  KuiPreviousButtonIcon,
   KuiPrimaryButton,
 } from '../../../../components';
 
 export default () => (
   <div>
-    <KuiPrimaryButton icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.CREATE} />}>
+    <KuiPrimaryButton icon={<KuiCreateButtonIcon />}>
       Create
     </KuiPrimaryButton>
 
     <br />
 
-    <KuiDangerButton icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.DELETE} />}>
+    <KuiDangerButton icon={<KuiDeleteButtonIcon />}>
       Delete
     </KuiDangerButton>
 
     <br />
 
-    <KuiBasicButton icon={<KuiButtonIcon type={KuiButtonIcon.TYPE.PREVIOUS} />}>
+    <KuiBasicButton icon={<KuiPreviousButtonIcon />}>
       Previous
     </KuiBasicButton>
 
     <br />
 
-    <KuiBasicButton iconRight={<KuiButtonIcon type={KuiButtonIcon.TYPE.NEXT} />}>
+    <KuiBasicButton iconRight={<KuiNextButtonIcon />}>
       Next
     </KuiBasicButton>
 
     <br />
 
-    <KuiBasicButton icon={<KuiButtonIcon classes="fa-plane" />}/>
+    <KuiBasicButton icon={<KuiButtonIcon className="fa-plane" />}/>
   </div>
 );