fix(Button): icon colors and layout (#135)

* fix layuot and icon color of Button

* fix color stylings of Button

* fix children API

* align content to center

* remove unused 'content' prop from styles

* fix color applied for hover state

* fix child API

* use site variable to initialize default color

* changelog

Author: kuzhelov

CHANGELOG.md

@@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Adjust layout and rendered HTML of Input @kuzhelov ([#127](https://github.com/stardust-ui/react/pull/127))
+- Fix Button component's layout and icon color @kuzhelov ([#135](https://github.com/stardust-ui/react/pull/135))
 
 <!--------------------------------[ v0.4.0 ]------------------------------- -->
 ## [v0.4.0](https://github.com/stardust-ui/react/tree/v0.4.0) (2018-08-29)

src/components/Button/Button.tsx

@@ -116,7 +116,13 @@ class Button extends UIComponent<Extendable<IButtonProps>, any> {
     accessibility: ButtonBehavior as Accessibility,
   }
 
-  public renderComponent({ ElementType, classes, accessibility, rest }): React.ReactNode {
+  public renderComponent({
+    ElementType,
+    classes,
+    accessibility,
+    variables,
+    rest,
+  }): React.ReactNode {
     const { children, content, disabled, iconPosition } = this.props
     const hasChildren = childrenExist(children)
 
@@ -129,20 +135,27 @@ class Button extends UIComponent<Extendable<IButtonProps>, any> {
         {...rest}
       >
         {hasChildren && children}
-        {!hasChildren && iconPosition !== 'after' && this.renderIcon()}
-        {!hasChildren && content}
-        {!hasChildren && iconPosition === 'after' && this.renderIcon()}
+        {!hasChildren && iconPosition !== 'after' && this.renderIcon(variables)}
+        {!hasChildren && content && <span className={classes.content}>{content}</span>}
+        {!hasChildren && iconPosition === 'after' && this.renderIcon(variables)}
       </ElementType>
     )
   }
 
-  public renderIcon = () => {
+  public renderIcon = variables => {
     const { disabled, icon, iconPosition, content, type } = this.props
 
     return Icon.create(icon, {
       defaultProps: {
         xSpacing: !content ? 'none' : iconPosition === 'after' ? 'before' : 'after',
-        variables: { color: type === 'primary' && !disabled ? 'white' : undefined },
+        variables: {
+          color:
+            type === 'primary'
+              ? variables.typePrimaryColor
+              : type === 'secondary'
+                ? variables.typeSecondaryColor
+                : variables.color,
+        },
       },
     })
   }

src/themes/teams/components/Button/buttonStyles.ts

@@ -4,14 +4,15 @@ import { disabledStyle, truncateStyle } from '../../../../styles/customCSS'
 
 const buttonStyles: IComponentPartStylesInput = {
   root: ({ props, variables }: { props: any; variables: any }): ICSSInJSStyle => {
-    const { circular, disabled, fluid, icon, iconPosition, type } = props
+    const { circular, disabled, fluid, type } = props
     const primary = type === 'primary'
     const secondary = type === 'secondary'
 
     const {
       height,
       minWidth,
       maxWidth,
+      color,
       backgroundColor,
       backgroundColorHover,
       circularRadius,
@@ -30,28 +31,43 @@ const buttonStyles: IComponentPartStylesInput = {
       height,
       minWidth,
       maxWidth,
+      color,
       backgroundColor,
-      display: 'inline-block',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       position: 'relative',
       padding: `0 ${pxToRem(paddingLeftRightValue)}`,
       margin: `0 ${pxToRem(8)} 0 0`,
       verticalAlign: 'middle',
       borderRadius: pxToRem(2),
-      borderWidth: 0,
 
-      ...truncateStyle,
+      borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
+      cursor: 'pointer',
+      ':hover': {
+        backgroundColor: backgroundColorHover,
+      },
 
-      ...(icon &&
-        (iconPosition
-          ? {
-              display: 'inline-flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }
-          : {
-              minWidth: height,
-              padding: 0,
-            })),
+      ...(primary && {
+        color: typePrimaryColor,
+        backgroundColor: typePrimaryBackgroundColor,
+        borderColor: typePrimaryBorderColor,
+        ':hover': {
+          color: typePrimaryColor,
+          backgroundColor: typePrimaryBackgroundColorHover,
+        },
+      }),
+
+      ...(secondary && {
+        color: typeSecondaryColor,
+        backgroundColor: typeSecondaryBackgroundColor,
+        borderColor: typeSecondaryBorderColor,
+        ':hover': {
+          color: typeSecondaryColor,
+          borderColor: 'transparent',
+          backgroundColor: typeSecondaryBackgroundColorHover,
+        },
+      }),
 
       ...(circular && {
         minWidth: height,
@@ -64,38 +80,20 @@ const buttonStyles: IComponentPartStylesInput = {
         maxWidth: '100%',
       }),
 
-      ...(disabled
-        ? disabledStyle
-        : {
-            borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
-            cursor: 'pointer',
-            ':hover': {
-              backgroundColor: backgroundColorHover,
-            },
-
-            ...(primary && {
-              color: typePrimaryColor,
-              backgroundColor: typePrimaryBackgroundColor,
-              borderColor: typePrimaryBorderColor,
-              ':hover': {
-                color: typePrimaryColor,
-                backgroundColor: typePrimaryBackgroundColorHover,
-              },
-            }),
-
-            ...(secondary && {
-              color: typeSecondaryColor,
-              backgroundColor: typeSecondaryBackgroundColor,
-              borderColor: typeSecondaryBorderColor,
-              ':hover': {
-                color: typeSecondaryColor,
-                borderColor: 'transparent',
-                backgroundColor: typeSecondaryBackgroundColorHover,
-              },
-            }),
-          }),
+      ...(disabled && {
+        ...disabledStyle,
+        ':hover': {
+          borderColor: undefined,
+          backgroundColor: undefined,
+        },
+      }),
     }
   },
+
+  content: ({ props }) => ({
+    overflow: 'hidden',
+    ...(typeof props.content === 'string' && truncateStyle),
+  }),
 }
 
 export default buttonStyles

src/themes/teams/components/Button/buttonVariables.ts

@@ -6,6 +6,7 @@ export interface IButtonVariables {
   height: string
   minWidth: string
   maxWidth: string
+  color: string
   backgroundColor: string
   backgroundColorHover: string
   circularRadius: string
@@ -25,6 +26,7 @@ export default (siteVars: any): IButtonVariables => {
     height: pxToRem(32),
     minWidth: pxToRem(96),
     maxWidth: pxToRem(280),
+    color: siteVars.black,
     backgroundColor: siteVars.gray08,
     backgroundColorHover: siteVars.gray06,
     circularRadius: pxToRem(999),