feat(Button): add text variant

CHANGELOG.md

@@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - add `iconOnly` prop to `Button` @mnajdova ([#182](https://github.com/stardust-ui/react/pull/182))
 - Add Label `image` and `imagePosition`, removed `onIconClick` prop  @mnajdova ([#55](https://github.com/stardust-ui/react/pull/55/))
 - Add `ButtonGroup` component @mnajdova ([#179](https://github.com/stardust-ui/react/pull/179))
+- Add Button `text` prop @mnajdova ([#177](https://github.com/stardust-ui/react/pull/177))
 
 <!--------------------------------[ v0.5.0 ]------------------------------- -->
 ## [v0.5.0](https://github.com/stardust-ui/react/tree/v0.5.0) (2018-08-30)

docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx

@@ -5,9 +5,9 @@ const ButtonGroupCircularExampleShorthand = () => (
   <Button.Group
     circular
     buttons={[
-      { icon: 'book', type: 'primary' },
-      { icon: 'coffee' },
-      { icon: 'play', type: 'primary' },
+      { key: 'book', icon: 'book', type: 'primary' },
+      { key: 'coffee', icon: 'coffee' },
+      { key: 'play', icon: 'play', type: 'primary' },
     ]}
   />
 )

docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx

@@ -4,9 +4,9 @@ import { Button } from '@stardust-ui/react'
 const ButtonGroupExampleShorthand = () => (
   <Button.Group
     buttons={[
-      { icon: 'book', iconOnly: true },
-      { icon: 'coffee', iconOnly: true },
-      { icon: 'play', iconOnly: true },
+      { key: 'book', icon: 'book', iconOnly: true },
+      { key: 'coffee', icon: 'coffee', iconOnly: true },
+      { key: 'play', icon: 'play', iconOnly: true },
     ]}
   />
 )

docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { Button } from '@stardust-ui/react'
+
+const ButtonExampleTextShorthand = () => (
+  <div>
+    <Button text icon="book" content="Default" iconPosition="before" />
+    <Button text type="primary" content="Primary" />
+    <Button text type="secondary" content="Secondary" />
+    <Button text iconOnly icon="compass outline" />
+  </div>
+)
+
+export default ButtonExampleTextShorthand

docs/src/examples/components/Button/Variations/ButtonExampleText.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { Button, Icon, Text } from '@stardust-ui/react'
+
+const ButtonExampleText = () => (
+  <div>
+    <Button text>
+      <Icon name="book" xSpacing="after" />
+      <Text content="Default" />
+    </Button>
+    <Button text type="primary">
+      Primary
+    </Button>
+    <Button text type="secondary">
+      Secondary
+    </Button>
+    <Button text circular>
+      <Icon name="compass outline" xSpacing="none" />
+    </Button>
+  </div>
+)
+
+export default ButtonExampleText

docs/src/examples/components/Button/Variations/index.tsx

@@ -19,6 +19,11 @@ const Variations = () => (
       description="A button can be circular and formatted to show different levels of emphasis."
       examplePath="components/Button/Variations/ButtonExampleEmphasisCircular"
     />
+    <ComponentExample
+      title="Text"
+      description="A button can be shown in form of a text to indicate some less-pronounced actions."
+      examplePath="components/Button/Variations/ButtonExampleText"
+    />
   </ExampleSection>
 )
 

src/components/Button/Button.tsx

@@ -26,6 +26,7 @@ export interface IButtonProps {
   iconOnly?: boolean
   iconPosition?: 'before' | 'after'
   onClick?: ComponentEventHandler<IButtonProps>
+  text?: boolean
   type?: 'primary' | 'secondary'
   accessibility?: Accessibility
   styles?: IComponentPartStylesInput
@@ -88,6 +89,9 @@ class Button extends UIComponent<Extendable<IButtonProps>, any> {
      */
     onClick: PropTypes.func,
 
+    /** A button can be formatted to show only text in order to indicate some less-pronounced actions. */
+    text: PropTypes.bool,
+
     /** A button can be formatted to show different levels of emphasis. */
     type: PropTypes.oneOf(['primary', 'secondary']),
 
@@ -115,6 +119,7 @@ class Button extends UIComponent<Extendable<IButtonProps>, any> {
     'iconPosition',
     'onClick',
     'styles',
+    'text',
     'type',
     'variables',
   ]
@@ -145,27 +150,19 @@ class Button extends UIComponent<Extendable<IButtonProps>, any> {
         {...rest}
       >
         {hasChildren && children}
-        {!hasChildren && iconPosition !== 'after' && this.renderIcon(variables)}
+        {!hasChildren && iconPosition !== 'after' && this.renderIcon()}
         {!hasChildren && content && <span className={classes.content}>{content}</span>}
-        {!hasChildren && iconPosition === 'after' && this.renderIcon(variables)}
+        {!hasChildren && iconPosition === 'after' && this.renderIcon()}
       </ElementType>
     )
   }
 
-  public renderIcon = variables => {
-    const { icon, iconPosition, content, type } = this.props
+  public renderIcon = () => {
+    const { icon, iconPosition, content } = this.props
 
     return Icon.create(icon, {
       defaultProps: {
         xSpacing: !content ? 'none' : iconPosition === 'after' ? 'before' : 'after',
-        variables: {
-          color:
-            type === 'primary'
-              ? variables.typePrimaryColor
-              : type === 'secondary'
-                ? variables.typeSecondaryColor
-                : variables.color,
-        },
       },
     })
   }

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

@@ -4,7 +4,7 @@ import { disabledStyle, truncateStyle } from '../../../../styles/customCSS'
 
 const buttonStyles: IComponentPartStylesInput = {
   root: ({ props, variables }: { props: any; variables: any }): ICSSInJSStyle => {
-    const { circular, disabled, fluid, type, iconOnly } = props
+    const { circular, disabled, fluid, type, text, iconOnly } = props
     const primary = type === 'primary'
     const secondary = type === 'secondary'
 
@@ -26,6 +26,11 @@ const buttonStyles: IComponentPartStylesInput = {
       typeSecondaryBackgroundColor,
       typeSecondaryBackgroundColorHover,
       typeSecondaryBorderColor,
+      typeTextColorHover,
+      typeTextPrimaryColor,
+      typeTextPrimaryColorHover,
+      typeTextSecondaryColor,
+      typeTextSecondaryColorHover,
     } = variables
 
     return {
@@ -42,34 +47,62 @@ const buttonStyles: IComponentPartStylesInput = {
       padding: `0 ${pxToRem(paddingLeftRightValue)}`,
       margin: `0 ${pxToRem(8)} 0 0`,
       verticalAlign: 'middle',
-
-      borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
       cursor: 'pointer',
-      ':hover': {
-        backgroundColor: backgroundColorHover,
-      },
 
-      ...(primary && {
-        color: typePrimaryColor,
-        backgroundColor: typePrimaryBackgroundColor,
-        borderColor: typePrimaryBorderColor,
+      ...(!text && {
+        borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
         ':hover': {
-          color: typePrimaryColor,
-          backgroundColor: typePrimaryBackgroundColorHover,
+          backgroundColor: backgroundColorHover,
         },
       }),
 
-      ...(secondary && {
-        color: typeSecondaryColor,
-        backgroundColor: typeSecondaryBackgroundColor,
-        borderColor: typeSecondaryBorderColor,
+      ...(text && {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
         ':hover': {
-          color: typeSecondaryColor,
-          borderColor: 'transparent',
-          backgroundColor: typeSecondaryBackgroundColorHover,
+          color: typeTextColorHover,
         },
       }),
 
+      ...(primary &&
+        !text && {
+          color: typePrimaryColor,
+          backgroundColor: typePrimaryBackgroundColor,
+          borderColor: typePrimaryBorderColor,
+          ':hover': {
+            color: typePrimaryColor,
+            backgroundColor: typePrimaryBackgroundColorHover,
+          },
+        }),
+
+      ...(primary &&
+        text && {
+          color: typeTextPrimaryColor,
+          ':hover': {
+            color: typeTextPrimaryColorHover,
+          },
+        }),
+
+      ...(secondary &&
+        !text && {
+          color: typeSecondaryColor,
+          backgroundColor: typeSecondaryBackgroundColor,
+          borderColor: typeSecondaryBorderColor,
+          ':hover': {
+            color: typeSecondaryColor,
+            borderColor: 'transparent',
+            backgroundColor: typeSecondaryBackgroundColorHover,
+          },
+        }),
+
+      ...(secondary &&
+        text && {
+          color: typeTextSecondaryColor,
+          ':hover': {
+            color: typeTextSecondaryColorHover,
+          },
+        }),
+
       ...(circular && {
         minWidth: height,
         padding: 0,

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

@@ -20,6 +20,11 @@ export interface IButtonVariables {
   typeSecondaryBackgroundColor: string
   typeSecondaryBackgroundColorHover: string
   typeSecondaryBorderColor: string
+  typeTextColorHover: string
+  typeTextPrimaryColor: string
+  typeTextPrimaryColorHover: string
+  typeTextSecondaryColor: string
+  typeTextSecondaryColorHover: string
 }
 
 export default (siteVars: any): IButtonVariables => {
@@ -41,5 +46,10 @@ export default (siteVars: any): IButtonVariables => {
     typeSecondaryBackgroundColor: siteVars.white,
     typeSecondaryBackgroundColorHover: siteVars.gray06,
     typeSecondaryBorderColor: siteVars.gray06,
+    typeTextColorHover: siteVars.brand04,
+    typeTextPrimaryColor: siteVars.brand,
+    typeTextPrimaryColorHover: siteVars.brand04,
+    typeTextSecondaryColor: siteVars.gray03,
+    typeTextSecondaryColorHover: siteVars.brand04,
   }
 }