From 8b98a27aeca92c23c990639ed6cafe9e1673ced2 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Jul 2019 13:02:13 +0200 Subject: [PATCH 1/7] use p & v pattern --- .../teams/components/Button/buttonStyles.ts | 176 +++++++----------- 1 file changed, 64 insertions(+), 112 deletions(-) diff --git a/packages/react/src/themes/teams/components/Button/buttonStyles.ts b/packages/react/src/themes/teams/components/Button/buttonStyles.ts index ef8770788a..eff6cb44eb 100644 --- a/packages/react/src/themes/teams/components/Button/buttonStyles.ts +++ b/packages/react/src/themes/teams/components/Button/buttonStyles.ts @@ -5,211 +5,163 @@ import { ButtonVariables } from './buttonVariables' import getBorderFocusStyles from '../../getBorderFocusStyles' const buttonStyles: ComponentSlotStylesInput = { - root: ({ props, variables, theme: { siteVariables } }): ICSSInJSStyle => { - const { circular, disabled, fluid, primary, text, iconOnly, isFromKeyboard } = props + root: ({ props: p, variables: v, theme: { siteVariables } }): ICSSInJSStyle => { const { borderWidth } = siteVariables - const { - height, - minWidth, - maxWidth, - borderRadius, - circularBorderRadius, - paddingLeftRightValue, - - color, - colorHover, - colorFocus, - colorDisabled, - backgroundColor, - backgroundColorActive, - backgroundColorHover, - backgroundColorFocus, - backgroundColorDisabled, - borderColor, - borderColorHover, - borderColorDisabled, - - primaryColor, - primaryColorHover, - primaryColorFocus, - primaryBackgroundColor, - primaryBackgroundColorActive, - primaryBackgroundColorHover, - primaryBackgroundColorFocus, - primaryBorderColor, - - circularColor, - circularColorActive, - circularBackgroundColor, - circularBackgroundColorActive, - circularBackgroundColorHover, - circularBackgroundColorFocus, - circularBorderColor, - circularBorderColorHover, - circularBorderColorFocus, - - textColor, - textColorHover, - textPrimaryColor, - textPrimaryColorHover, - boxShadow, - } = variables - const { ':focus': borderFocusStyles } = getBorderFocusStyles({ siteVariables, - isFromKeyboard, - ...(circular && { - borderRadius: circularBorderRadius, - focusOuterBorderColor: circularBorderColorFocus, + isFromKeyboard: p.isFromKeyboard, + ...(p.circular && { + borderRadius: v.circularBorderRadius, + focusOuterBorderColor: v.circularBorderColorFocus, }), }) return { - height, - minWidth, - maxWidth, - color, - backgroundColor, - borderRadius, + height: v.height, + minWidth: v.minWidth, + maxWidth: v.maxWidth, + color: v.color, + backgroundColor: v.backgroundColor, + borderRadius: v.borderRadius, display: 'inline-flex', justifyContent: 'center', alignItems: 'center', position: 'relative', - padding: `0 ${pxToRem(paddingLeftRightValue)}`, + padding: `0 ${pxToRem(v.paddingLeftRightValue)}`, verticalAlign: 'middle', cursor: 'pointer', // rectangular button defaults - ...(!text && { + ...(!p.text && { outline: 0, borderWidth, borderStyle: 'solid', - borderColor, - boxShadow, + borderColor: v.borderColor, + boxShadow: v.boxShadow, ':hover': { - color: colorHover, - backgroundColor: backgroundColorHover, - borderColor: borderColorHover, + color: v.colorHover, + backgroundColor: v.backgroundColorHover, + borderColor: v.borderColorHover, }, ':focus': { boxShadow: 'none', - ...(isFromKeyboard + ...(p.isFromKeyboard ? { - color: colorFocus, - backgroundColor: backgroundColorFocus, + color: v.colorFocus, + backgroundColor: v.backgroundColorFocus, ...borderFocusStyles, } - : { ':active': { backgroundColor: backgroundColorActive } }), + : { ':active': { backgroundColor: v.backgroundColorActive } }), }, }), // circular button defaults - ...(circular && - !text && { - minWidth: height, + ...(p.circular && + !p.text && { + minWidth: v.height, padding: 0, - color: circularColor, - backgroundColor: circularBackgroundColor, - borderColor: circularBorderColor, - borderRadius: circularBorderRadius, + color: v.circularColor, + backgroundColor: v.circularBackgroundColor, + borderColor: v.circularBorderColor, + borderRadius: v.circularBorderRadius, ':hover': { - color: circularColorActive, - backgroundColor: circularBackgroundColorHover, - borderColor: circularBorderColorHover, + color: v.circularColorActive, + backgroundColor: v.circularBackgroundColorHover, + borderColor: v.circularBorderColorHover, }, ':focus': { boxShadow: 'none', - ...(isFromKeyboard + ...(p.isFromKeyboard ? { - color: circularColorActive, - backgroundColor: circularBackgroundColorFocus, + color: v.circularColorActive, + backgroundColor: v.circularBackgroundColorFocus, ...borderFocusStyles, } - : { ':active': { backgroundColor: circularBackgroundColorActive } }), + : { ':active': { backgroundColor: v.circularBackgroundColorActive } }), }, }), // text button defaults - ...(text && { - color: textColor, + ...(p.text && { + color: v.textColor, backgroundColor: 'transparent', borderColor: 'transparent', ':hover': { - color: textColorHover, + color: v.textColorHover, }, - ...(primary && { - color: textPrimaryColor, + ...(p.primary && { + color: v.textPrimaryColor, ':hover': { - color: textPrimaryColorHover, + color: v.textPrimaryColorHover, }, }), ':focus': { boxShadow: 'none', outline: 'none', - ...(isFromKeyboard && borderFocusStyles), + ...(p.isFromKeyboard && borderFocusStyles), }, }), // Overrides for "primary" buttons - ...(primary && - !text && { - color: primaryColor, - backgroundColor: primaryBackgroundColor, - borderColor: primaryBorderColor, + ...(p.primary && + !p.text && { + color: v.primaryColor, + backgroundColor: v.primaryBackgroundColor, + borderColor: v.primaryBorderColor, ':hover': { - color: primaryColorHover, - backgroundColor: primaryBackgroundColorHover, + color: v.primaryColorHover, + backgroundColor: v.primaryBackgroundColorHover, }, ':focus': { boxShadow: 'none', - ...(isFromKeyboard + ...(p.isFromKeyboard ? { - color: primaryColorFocus, - backgroundColor: primaryBackgroundColorFocus, + color: v.primaryColorFocus, + backgroundColor: v.primaryBackgroundColorFocus, ...borderFocusStyles, } - : { ':active': { backgroundColor: primaryBackgroundColorActive } }), + : { ':active': { backgroundColor: v.primaryBackgroundColorActive } }), }, }), // Overrides for "disabled" buttons - ...(disabled && { + ...(p.disabled && { cursor: 'default', - color: colorDisabled, - backgroundColor: backgroundColorDisabled, - borderColor: borderColorDisabled, + color: v.colorDisabled, + backgroundColor: v.backgroundColorDisabled, + borderColor: v.borderColorDisabled, boxShadow: 'none', ':hover': { - backgroundColor: backgroundColorDisabled, + backgroundColor: v.backgroundColorDisabled, }, }), - ...(fluid && { + ...(p.fluid && { width: '100%', maxWidth: '100%', }), - ...(iconOnly && { - minWidth: height, + ...(p.iconOnly && { + minWidth: v.height, padding: 0, }), } }, // modifies the text of the button - content: ({ variables }): ICSSInJSStyle => ({ + content: ({ variables: v }): ICSSInJSStyle => ({ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', - fontWeight: variables.contentFontWeight, + fontWeight: v.contentFontWeight, }), } From dd3fbb104fb54e18061407ae05a5e61a6163bb46 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Jul 2019 13:02:34 +0200 Subject: [PATCH 2/7] add size prop --- packages/react/src/components/Button/Button.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react/src/components/Button/Button.tsx b/packages/react/src/components/Button/Button.tsx index e53c847f5d..f4216660b2 100644 --- a/packages/react/src/components/Button/Button.tsx +++ b/packages/react/src/components/Button/Button.tsx @@ -14,6 +14,7 @@ import { commonPropTypes, rtlTextContainer, applyAccessibilityKeyHandlers, + SizeValue, } from '../../lib' import Icon, { IconProps } from '../Icon/Icon' import Box, { BoxProps } from '../Box/Box' @@ -69,6 +70,9 @@ export interface ButtonProps /** A button can be formatted to show different levels of emphasis. */ secondary?: boolean + + /** A size of the button. */ + size?: SizeValue } export interface ButtonState { @@ -97,11 +101,13 @@ class Button extends UIComponent, ButtonState> { primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]), text: PropTypes.bool, secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]), + size: customPropTypes.size, } static defaultProps = { as: 'button', accessibility: buttonBehavior as Accessibility, + size: 'medium', } static Group = ButtonGroup From 914d9fb12808439e930739b3b9c7e674dc5e1697 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Wed, 24 Jul 2019 14:57:32 +0200 Subject: [PATCH 3/7] update styles, variables, add example --- .../ButtonExampleSize.shorthand.tsx | 24 +++++++++++++++++++ .../components/Button/Variations/index.tsx | 5 ++++ .../teams/components/Button/buttonStyles.ts | 16 ++++++++++--- .../components/Button/buttonVariables.ts | 16 +++++++++++-- 4 files changed, 56 insertions(+), 5 deletions(-) create mode 100644 docs/src/examples/components/Button/Variations/ButtonExampleSize.shorthand.tsx diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleSize.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleSize.shorthand.tsx new file mode 100644 index 0000000000..3d8b13f21e --- /dev/null +++ b/docs/src/examples/components/Button/Variations/ButtonExampleSize.shorthand.tsx @@ -0,0 +1,24 @@ +import { Button, Divider, Flex } from '@stardust-ui/react' +import * as React from 'react' + +const ButtonExampleSizeShorthand: React.FC = () => ( + <> + +