From 224cb63a300e517980dd061d796fadbab509bea5 Mon Sep 17 00:00:00 2001 From: Kim Joar Bekkelund Date: Thu, 23 Mar 2017 08:57:03 -0400 Subject: [PATCH 1/2] button idea --- ui_framework/components/button/button.js | 188 +++++++++++------------ 1 file changed, 89 insertions(+), 99 deletions(-) diff --git a/ui_framework/components/button/button.js b/ui_framework/components/button/button.js index f6896f642bf96a..52641a4283f702 100644 --- a/ui_framework/components/button/button.js +++ b/ui_framework/components/button/button.js @@ -1,9 +1,7 @@ import React, { PropTypes, } from 'react'; - import classNames from 'classnames'; -import keyMirror from 'keymirror'; import { KuiButtonIcon } from './button_icon/button_icon'; @@ -13,63 +11,38 @@ const BUTTON_TYPES = [ 'danger', 'primary', ]; +const ICON_POSITIONS = [ + 'left', + 'right', +]; +const defaultIconPosition = ICON_POSITIONS[0]; -const commonPropTypes = { - type: PropTypes.oneOf(BUTTON_TYPES), - 'data-test-subj': PropTypes.string, - isDisabled: PropTypes.bool, - onClick: PropTypes.func, - data: PropTypes.any, - className: PropTypes.string, -}; - -// KuiSubmitButton is an `input` element, which is a void element and can't contain children. But -// the regular KuiButton and KuiLink button are non-void elements, so they can contain children. -// These propTypes will only apply to these components. -const nonVoidPropTypes = { - icon: PropTypes.node, - iconPosition: PropTypes.oneOf([ - 'left', - 'right', - ]), - children: PropTypes.node, - isLoading: PropTypes.bool, +const buttonTypeToClassNameMap = { + basic: 'kuiButton--basic', + hollow: 'kuiButton--hollow', + danger: 'kuiButton--danger', + primary: 'kuiButton--primary', }; -const nonVoidDefaultProps = { - iconPosition: 'left', -}; +const getClassName = ({ className, type, icon }) => + classNames('kuiButton', className, buttonTypeToClassNameMap[type], { + 'kuiButton--iconText': icon != null, + }); -const getIcon = props => ( - props.isLoading +const ContentWithIcon = ({ children, icon, iconPosition, isLoading }) => { + const iconOrLoading = isLoading ? - : props.icon -); - -const getClassName = (props, icon) => { - const typeToClassNameMap = { - basic: 'kuiButton--basic', - hollow: 'kuiButton--hollow', - danger: 'kuiButton--danger', - primary: 'kuiButton--primary', - }; - - return classNames('kuiButton', props.className, { - [typeToClassNameMap[props.type]]: props.type, - 'kuiButton--iconText': icon, - }); -}; + : icon; -const getChildren = (props, icon) => { - // We need to wrap the text so that the icon's :first-child etc. seudo-selectors get applied + // We need to wrap the children so that the icon's :first-child etc. pseudo-selectors get applied // correctly. - const wrappedChildren = props.children ? {props.children} : undefined; + const wrappedChildren = children ? {children} : undefined; - switch(props.iconPosition) { + switch(iconPosition) { case 'left': return ( - {icon} + {iconOrLoading} {wrappedChildren} ); @@ -78,89 +51,106 @@ const getChildren = (props, icon) => { return ( {wrappedChildren} - {icon} + {iconOrLoading} ); } }; -const getOnClick = props => ( - // onClick is optional, so don't even call it if it's not passed in, or if we're disabled. - props.onClick && !props.isDisabled - ? () => props.onClick(props.data) - : () => {} -); - -const getCommonProps = (props, icon) => ({ - 'data-test-subj': props['data-test-subj'], - className: getClassName(props, icon), - onClick: getOnClick(props), - disabled: props.isDisabled, -}); - -const KuiButton = props => { - const icon = getIcon(props); - const children = getChildren(props, icon); - const commonProps = getCommonProps(props, icon); - +const KuiButton = ({ + isLoading, + iconPosition = defaultIconPosition, + className, + type, + icon, + onClick, + children, + ...rest +}) => { return ( - ); }; KuiButton.propTypes = { - ...nonVoidPropTypes, - ...commonPropTypes, -}; - -KuiButton.defaultProps = { - ...nonVoidDefaultProps, + icon: PropTypes.node, + iconPosition: PropTypes.oneOf(ICON_POSITIONS), + children: PropTypes.node, + isLoading: PropTypes.bool, + type: PropTypes.oneOf(BUTTON_TYPES), + onClick: PropTypes.func, + className: PropTypes.string, }; -const KuiLinkButton = props => { - const icon = getIcon(props); - const children = getChildren(props, icon); - const commonProps = getCommonProps(props, icon); - +const KuiLinkButton = ({ + isLoading, + icon, + iconPosition = defaultIconPosition, + className, + type, + children, + ...rest +}) => { return ( - {children} + + {children} + ); }; KuiLinkButton.propTypes = { - href: PropTypes.string, - target: PropTypes.string, - ...nonVoidPropTypes, - ...commonPropTypes, -}; - -KuiLinkButton.defaultProps = { - ...nonVoidDefaultProps, + icon: PropTypes.node, + iconPosition: PropTypes.oneOf(ICON_POSITIONS), + isLoading: PropTypes.bool, + type: PropTypes.oneOf(BUTTON_TYPES), + className: PropTypes.string, + children: PropTypes.node, }; -const KuiSubmitButton = props => { - const commonProps = getCommonProps(props); - +const KuiSubmitButton = ({ + className, + type, + onClick, + children, + ...rest +}) => { return ( ); }; KuiSubmitButton.propTypes = { children: PropTypes.string, - ...commonPropTypes, + type: PropTypes.oneOf(BUTTON_TYPES), + onClick: PropTypes.func, + className: PropTypes.string, }; export { From 55c04ca74f4f6292a5c265a8cdaee04bf4e50f63 Mon Sep 17 00:00:00 2001 From: Kim Joar Bekkelund Date: Thu, 23 Mar 2017 11:36:34 -0400 Subject: [PATCH 2/2] Remove unnecessary onClick mentions --- ui_framework/components/button/button.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/ui_framework/components/button/button.js b/ui_framework/components/button/button.js index 52641a4283f702..8d4ce926c4a6a3 100644 --- a/ui_framework/components/button/button.js +++ b/ui_framework/components/button/button.js @@ -63,14 +63,12 @@ const KuiButton = ({ className, type, icon, - onClick, children, ...rest }) => { return (