From 297de6208867d030f983db0912954b8b0d63c059 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Mon, 17 Sep 2018 18:49:30 -0700 Subject: [PATCH 1/4] fixed up per redlines --- .../teams/components/Divider/dividerStyles.ts | 45 ++++++++----------- .../components/Divider/dividerVariables.ts | 13 +++--- 2 files changed, 26 insertions(+), 32 deletions(-) diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index 21c94b1de6..39a59ad271 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -14,12 +14,12 @@ const dividerBorderStyle = (size, color): ICSSInJSStyle => ({ const beforeAndAfter = (size, type, variables): ICSSPseudoElementStyle => ({ content: '""', flex: 1, - ...dividerBorderStyle(size, variables.backgroundColor), // the default border style + ...dividerBorderStyle(size, variables.dividerColor), ...(type === 'primary' && { - ...dividerBorderStyle(size, variables.typePrimaryBackgroundColor), + ...dividerBorderStyle(size, variables.primaryColor), }), ...(type === 'secondary' && { - ...dividerBorderStyle(size, variables.typeSecondaryBackgroundColor), + ...dividerBorderStyle(size, variables.secondaryColor), }), }) @@ -33,43 +33,36 @@ const dividerStyles: IComponentPartStylesInput = { }): ICSSInJSStyle => { const { children, size, type, important, content } = props return { - marginTop: pxToRem(5 + size * 7.5), - marginBottom: pxToRem(5 + size * 7.5), - fontWeight: 400, + color: variables.textColor, + display: 'flex', + alignItems: 'center', + ...(type === 'primary' && { + color: variables.primaryColor, + }), + ...(type === 'secondary' && { + color: variables.secondaryColor, + }), ...(important && { - fontWeight: 700, + fontWeight: variables.importantFontWeight, }), ...(childrenExist(children) || content ? { - display: 'flex', - alignItems: 'center', textAlign: 'center', - lineHeight: 1.25, fontSize: pxToRem(12 + size), + lineHeight: variables.textLineHeight, '::before': { ...beforeAndAfter(size, type, variables), - marginRight: pxToRem(22 + size * 2), + marginRight: pxToRem(20), }, '::after': { ...beforeAndAfter(size, type, variables), - marginLeft: pxToRem(22 + size * 2), + marginLeft: pxToRem(20), }, - color: variables.color, // the default color - ...(type === 'primary' && { - color: variables.typePrimaryColor, - }), - ...(type === 'secondary' && { - color: variables.typeSecondaryColor, - }), } : { - ...dividerBorderStyle(size, variables.backgroundColor), // the default border style - ...(type === 'primary' && { - ...dividerBorderStyle(size, variables.typePrimaryBackgroundColor), - }), - ...(type === 'secondary' && { - ...dividerBorderStyle(size, variables.typeSecondaryBackgroundColor), - }), + '::before': { + ...beforeAndAfter(size, type, variables), + }, }), } }, diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index 568b834501..545a0df8ee 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/src/themes/teams/components/Divider/dividerVariables.ts @@ -1,10 +1,11 @@ export default (siteVars: any) => { return { - color: siteVars.gray02, - backgroundColor: siteVars.gray10, - typePrimaryColor: siteVars.brand, - typePrimaryBackgroundColor: siteVars.brand, - typeSecondaryColor: siteVars.gray04, - typeSecondaryBackgroundColor: siteVars.gray08, + dividerColor: siteVars.gray09, + textColor: siteVars.gray03, + textFontSize: siteVars.fontSizeSmall, + textLineHeight: siteVars.lineHeightSmall, + primaryColor: siteVars.brand, + secondaryColor: siteVars.gray04, + importantFontWeight: siteVars.fontWeightBold, } } From a7b7cd27d7b8a70af20db943578682db2dd2d1e4 Mon Sep 17 00:00:00 2001 From: manajdov Date: Thu, 20 Sep 2018 16:43:00 +0200 Subject: [PATCH 2/4] -updated changelog --- CHANGELOG.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 5a9da188d2..414b9b17fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,7 +20,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### BREAKING CHANGES - Fixed `Divider` wrong usage of the `typeSecondary{color, backgroundColor}` and `default{color, backgroundColor}` variables; renamed `default{color, backgroundColor}` variables to `color` and `backgroundColor` @mnajdova ([#234](https://github.com/stardust-ui/react/pull/234)) - Restrict the `styles` prop to styling the root element only @levithomason ([#238](https://github.com/stardust-ui/react/pull/238)) -- `Add` `RadioGroup` compliant with ARIA patterns. `Radio` changed to `RadioGroup.Item` @jurokapsiar ([#229](https://github.com/stardust-ui/react/pull/229)) +- Add `RadioGroup` compliant with ARIA patterns. `Radio` changed to `RadioGroup.Item` @jurokapsiar ([#229](https://github.com/stardust-ui/react/pull/229)) +- `Divider` refactored variables names and the way they are used @codepretty ([#249](https://github.com/stardust-ui/react/pull/249)) ### Fixes - Allow string or number as Input value @levithomason ([#250](https://github.com/stardust-ui/react/pull/250)) From 181a2286c90a98e36260ce8a017d5f6ac56986f1 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 20 Sep 2018 10:58:12 -0700 Subject: [PATCH 3/4] added padding in for between 2 dividers --- src/themes/teams/components/Divider/dividerStyles.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index 39a59ad271..12ace44e2d 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -36,6 +36,8 @@ const dividerStyles: IComponentPartStylesInput = { color: variables.textColor, display: 'flex', alignItems: 'center', + paddingTop: pxToRem(4), + paddingBottom: pxToRem(4), ...(type === 'primary' && { color: variables.primaryColor, }), From 2c986b381a5e3a9230a52a51485feb667bc0d932 Mon Sep 17 00:00:00 2001 From: Brigette Lundeen Date: Thu, 20 Sep 2018 11:18:50 -0700 Subject: [PATCH 4/4] added spacing to variables so it can be overridden if needed --- src/themes/teams/components/Divider/dividerStyles.ts | 4 ++-- src/themes/teams/components/Divider/dividerVariables.ts | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts index 12ace44e2d..c6388df78b 100644 --- a/src/themes/teams/components/Divider/dividerStyles.ts +++ b/src/themes/teams/components/Divider/dividerStyles.ts @@ -36,8 +36,8 @@ const dividerStyles: IComponentPartStylesInput = { color: variables.textColor, display: 'flex', alignItems: 'center', - paddingTop: pxToRem(4), - paddingBottom: pxToRem(4), + paddingTop: pxToRem(variables.dividerPadding), + paddingBottom: pxToRem(variables.dividerPadding), ...(type === 'primary' && { color: variables.primaryColor, }), diff --git a/src/themes/teams/components/Divider/dividerVariables.ts b/src/themes/teams/components/Divider/dividerVariables.ts index 545a0df8ee..b292d5070e 100644 --- a/src/themes/teams/components/Divider/dividerVariables.ts +++ b/src/themes/teams/components/Divider/dividerVariables.ts @@ -7,5 +7,6 @@ export default (siteVars: any) => { primaryColor: siteVars.brand, secondaryColor: siteVars.gray04, importantFontWeight: siteVars.fontWeightBold, + dividerPadding: 4, } }