From 7bcea62e8348ddb21b1e498ab3bf92096001106c Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 3 Sep 2018 17:14:37 +0200 Subject: [PATCH 1/6] -added text prop for the text variation of a button --- .../ButtonExampleText.shorthand.tsx | 16 +++++ .../Button/Variations/ButtonExampleText.tsx | 28 ++++++++ .../components/Button/Variations/index.tsx | 5 ++ src/components/Button/Button.tsx | 21 +++--- .../teams/components/Button/buttonStyles.ts | 71 ++++++++++++++----- .../components/Button/buttonVariables.ts | 10 +++ 6 files changed, 120 insertions(+), 31 deletions(-) create mode 100644 docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx create mode 100644 docs/src/examples/components/Button/Variations/ButtonExampleText.tsx diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx new file mode 100644 index 0000000000..de39d93767 --- /dev/null +++ b/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { Button } from '@stardust-ui/react' + +const ButtonExampleTextShorthand = () => ( +
+
+) + +export default ButtonExampleTextShorthand diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx new file mode 100644 index 0000000000..1cd30e20df --- /dev/null +++ b/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx @@ -0,0 +1,28 @@ +import React from 'react' +import { Button, Icon, Text } from '@stardust-ui/react' + +const ButtonExampleText = () => ( +
+ + + + + +
+
+ +
+) + +export default ButtonExampleText diff --git a/docs/src/examples/components/Button/Variations/index.tsx b/docs/src/examples/components/Button/Variations/index.tsx index ec69bf5b13..75cadcf38d 100644 --- a/docs/src/examples/components/Button/Variations/index.tsx +++ b/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" /> + ) diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 741fe864ab..8ce8a819a7 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -24,6 +24,7 @@ export interface IButtonProps { icon?: ItemShorthand iconPosition?: 'before' | 'after' onClick?: ComponentEventHandler + text?: boolean type?: 'primary' | 'secondary' accessibility?: Accessibility styles?: IComponentPartStylesInput @@ -81,6 +82,9 @@ class Button extends UIComponent, 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']), @@ -107,6 +111,7 @@ class Button extends UIComponent, any> { 'iconPosition', 'onClick', 'styles', + 'text', 'type', 'variables', ] @@ -135,27 +140,19 @@ class Button extends UIComponent, any> { {...rest} > {hasChildren && children} - {!hasChildren && iconPosition !== 'after' && this.renderIcon(variables)} + {!hasChildren && iconPosition !== 'after' && this.renderIcon()} {!hasChildren && content && {content}} - {!hasChildren && iconPosition === 'after' && this.renderIcon(variables)} + {!hasChildren && iconPosition === 'after' && this.renderIcon()} ) } - public renderIcon = variables => { - const { disabled, 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, - }, }, }) } diff --git a/src/themes/teams/components/Button/buttonStyles.ts b/src/themes/teams/components/Button/buttonStyles.ts index 93bf50af66..aab5a27fa3 100644 --- a/src/themes/teams/components/Button/buttonStyles.ts +++ b/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 } = props + const { circular, disabled, fluid, type, text } = props const primary = type === 'primary' const secondary = type === 'secondary' @@ -25,6 +25,11 @@ const buttonStyles: IComponentPartStylesInput = { typeSecondaryBackgroundColor, typeSecondaryBackgroundColorHover, typeSecondaryBorderColor, + typeTextColorHover, + typeTextPrimaryColor, + typeTextPrimaryColorHover, + typeTextSecondaryColor, + typeTextSecondaryColorHover, } = variables return { @@ -41,34 +46,62 @@ const buttonStyles: IComponentPartStylesInput = { margin: `0 ${pxToRem(8)} 0 0`, verticalAlign: 'middle', borderRadius: pxToRem(2), - - 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, diff --git a/src/themes/teams/components/Button/buttonVariables.ts b/src/themes/teams/components/Button/buttonVariables.ts index 87fae0d70f..22ee05ecb8 100644 --- a/src/themes/teams/components/Button/buttonVariables.ts +++ b/src/themes/teams/components/Button/buttonVariables.ts @@ -19,6 +19,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 => { @@ -39,5 +44,10 @@ export default (siteVars: any): IButtonVariables => { typeSecondaryBackgroundColor: siteVars.white, typeSecondaryBackgroundColorHover: siteVars.gray06, typeSecondaryBorderColor: siteVars.gray06, + typeTextColorHover: siteVars.brand04, + typeTextPrimaryColor: siteVars.white, + typeTextPrimaryColorHover: siteVars.brand04, + typeTextSecondaryColor: siteVars.gray03, + typeTextSecondaryColorHover: siteVars.brand04, } } From fafd9694f2e8cdfab694f7644667a1ceab3304c1 Mon Sep 17 00:00:00 2001 From: manajdov Date: Mon, 3 Sep 2018 17:28:38 +0200 Subject: [PATCH 2/6] -updated the CHANGELOG --- CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 08d0a4ed60..f1a309b798 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Fixes - Correct Teams theme site variables @sergiorv ([#110](https://github.com/stardust-ui/react/pull/110)) +### Features +- Add Button `text` prop @mnajdova ([#177](https://github.com/stardust-ui/react/pull/177)) + ## [v0.5.0](https://github.com/stardust-ui/react/tree/v0.5.0) (2018-08-30) [Compare changes](https://github.com/stardust-ui/react/compare/v0.4.0...v0.5.0) From 1f224bd23a5209e4c6feee4c01a290fc5d23599d Mon Sep 17 00:00:00 2001 From: manajdov Date: Tue, 4 Sep 2018 14:50:35 +0200 Subject: [PATCH 3/6] -changed button example text to match the shorthand example --- .../components/Button/Variations/ButtonExampleText.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx index 1cd30e20df..b559ef697b 100644 --- a/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx +++ b/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx @@ -3,17 +3,16 @@ import { Button, Icon, Text } from '@stardust-ui/react' const ButtonExampleText = () => (
- + - From 5cd30057fcb62c98d739bf57e582f13915a19218 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 6 Sep 2018 17:52:23 +0200 Subject: [PATCH 4/6] -small grammar fix --- docs/src/examples/components/Button/Variations/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/examples/components/Button/Variations/index.tsx b/docs/src/examples/components/Button/Variations/index.tsx index 75cadcf38d..9c8c734248 100644 --- a/docs/src/examples/components/Button/Variations/index.tsx +++ b/docs/src/examples/components/Button/Variations/index.tsx @@ -21,7 +21,7 @@ const Variations = () => ( /> From d55e9c1b67624e9beab3efba0087b75c3a95adc1 Mon Sep 17 00:00:00 2001 From: kuzhelov Date: Thu, 6 Sep 2018 19:11:48 +0200 Subject: [PATCH 5/6] tweak text button examples in docs --- .../Button/Variations/ButtonExampleText.shorthand.tsx | 5 +---- .../components/Button/Variations/ButtonExampleText.tsx | 7 +------ src/themes/teams/components/Button/buttonVariables.ts | 2 +- 3 files changed, 3 insertions(+), 11 deletions(-) diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx index de39d93767..c4c2adcdfe 100644 --- a/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx +++ b/docs/src/examples/components/Button/Variations/ButtonExampleText.shorthand.tsx @@ -6,10 +6,7 @@ const ButtonExampleTextShorthand = () => (
) diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx index b559ef697b..b794c574cc 100644 --- a/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx +++ b/docs/src/examples/components/Button/Variations/ButtonExampleText.tsx @@ -14,12 +14,7 @@ const ButtonExampleText = () => ( Secondary -
-
- ) diff --git a/src/themes/teams/components/Button/buttonVariables.ts b/src/themes/teams/components/Button/buttonVariables.ts index 22ee05ecb8..b1103ec897 100644 --- a/src/themes/teams/components/Button/buttonVariables.ts +++ b/src/themes/teams/components/Button/buttonVariables.ts @@ -45,7 +45,7 @@ export default (siteVars: any): IButtonVariables => { typeSecondaryBackgroundColorHover: siteVars.gray06, typeSecondaryBorderColor: siteVars.gray06, typeTextColorHover: siteVars.brand04, - typeTextPrimaryColor: siteVars.white, + typeTextPrimaryColor: siteVars.brand, typeTextPrimaryColorHover: siteVars.brand04, typeTextSecondaryColor: siteVars.gray03, typeTextSecondaryColorHover: siteVars.brand04, From fb02d3c1f5993773c37a380c9ce0d677f2e1fddd Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 6 Sep 2018 19:44:56 +0200 Subject: [PATCH 6/6] -merge conflicts -fixed console errors in the buttons examples --- .../Button/Groups/ButtonGroupCircularExample.shorthand.tsx | 6 +++--- .../Button/Groups/ButtonGroupExample.shorthand.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx b/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx index 4044b4544f..b2ea758ec3 100644 --- a/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx +++ b/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx @@ -5,9 +5,9 @@ const ButtonGroupCircularExampleShorthand = () => ( ) diff --git a/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx b/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx index 88e24307ba..317f79388c 100644 --- a/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx +++ b/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx @@ -4,9 +4,9 @@ import { Button } from '@stardust-ui/react' const ButtonGroupExampleShorthand = () => ( )