From 4665621131409fa919028d7a91cf2bb106d92c16 Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Thu, 8 Aug 2019 10:10:44 -0500 Subject: [PATCH 1/3] fix(theme): issue with font sizes in createTheme --- packages/big-design-icons/src/base/index.ts | 6 +++--- .../big-design-theme/src/helpers/helpers.ts | 6 ++++++ .../big-design-theme/src/helpers/index.ts | 7 +++++++ packages/big-design-theme/src/index.ts | 3 +++ .../src/components/Form/Group/styled.tsx | 8 ++++---- .../src/components/List/Action/styled.tsx | 6 +++--- .../src/components/List/Item/styled.tsx | 6 +++--- .../big-design/src/components/List/styled.tsx | 4 ++-- .../src/components/ProgressCircle/styled.tsx | 19 ++++++++++--------- .../src/components/Textarea/styled.tsx | 4 ++-- .../src/components/Tooltip/styled.tsx | 4 ++-- packages/docs/pages/Colors/ColorsPage.tsx | 6 +++--- 12 files changed, 48 insertions(+), 31 deletions(-) diff --git a/packages/big-design-icons/src/base/index.ts b/packages/big-design-icons/src/base/index.ts index 8ce16b049..a2aaaf8a3 100644 --- a/packages/big-design-icons/src/base/index.ts +++ b/packages/big-design-icons/src/base/index.ts @@ -1,4 +1,4 @@ -import { remCalc, theme as defaultTheme, Colors, Spacing, ThemeInterface } from '@bigcommerce/big-design-theme'; +import { theme as defaultTheme, Colors, Spacing, ThemeInterface } from '@bigcommerce/big-design-theme'; import React from 'react'; import styled from 'styled-components'; @@ -18,8 +18,8 @@ export function createStyledIcon(Icon: React.FC>) { ${({ size, theme }) => size && { - height: typeof size === 'number' ? remCalc(size) : theme.spacing[size], - width: typeof size === 'number' ? remCalc(size) : theme.spacing[size], + height: typeof size === 'number' ? theme.helpers.remCalc(size) : theme.spacing[size], + width: typeof size === 'number' ? theme.helpers.remCalc(size) : theme.spacing[size], }}; `; diff --git a/packages/big-design-theme/src/helpers/helpers.ts b/packages/big-design-theme/src/helpers/helpers.ts index 7b6cd6c7f..cd83ce4c1 100644 --- a/packages/big-design-theme/src/helpers/helpers.ts +++ b/packages/big-design-theme/src/helpers/helpers.ts @@ -2,6 +2,12 @@ import { rem, stripUnit, transparentize } from 'polished'; import { themeOptions } from '../options'; +export interface Helpers { + addValues(first: string, second: string): string; + createRGBA(color: string, alpha: number): string; + remCalc(value: string | number): string; +} + export const addValues = (first: string, second: string) => { const [firstValue, firstUnit] = stripUnit(first, true); const [secondValue, secondUnit] = stripUnit(second, true); diff --git a/packages/big-design-theme/src/helpers/index.ts b/packages/big-design-theme/src/helpers/index.ts index c5f595cf9..805f800b4 100644 --- a/packages/big-design-theme/src/helpers/index.ts +++ b/packages/big-design-theme/src/helpers/index.ts @@ -1 +1,8 @@ +import { addValues, createRGBA, remCalc } from './helpers'; + export * from './helpers'; +export const createHelpers = () => ({ + addValues, + createRGBA, + remCalc, +}); diff --git a/packages/big-design-theme/src/index.ts b/packages/big-design-theme/src/index.ts index 0cda65c97..a9d65cca3 100644 --- a/packages/big-design-theme/src/index.ts +++ b/packages/big-design-theme/src/index.ts @@ -1,3 +1,4 @@ +import { createHelpers, Helpers } from './helpers'; import { themeOptions, ThemeOptions } from './options'; import { createBorder, createBorderRadius, Border, BorderRadius } from './system/border'; import { breakpoints, breakpointValues, Breakpoints, BreakpointValues } from './system/breakpoints'; @@ -24,6 +25,7 @@ export interface ThemeInterface { spacing: Spacing; typography: Typography; zIndex: ZIndex; + helpers: Helpers; } export const createTheme = (customOptions: Partial = {}): ThemeInterface => { @@ -41,6 +43,7 @@ export const createTheme = (customOptions: Partial = {}): ThemeInt spacing: createSpacing(), typography: createTypography(), zIndex, + helpers: createHelpers(), }; }; diff --git a/packages/big-design/src/components/Form/Group/styled.tsx b/packages/big-design/src/components/Form/Group/styled.tsx index 1ba8be701..e985c8961 100644 --- a/packages/big-design/src/components/Form/Group/styled.tsx +++ b/packages/big-design/src/components/Form/Group/styled.tsx @@ -1,4 +1,4 @@ -import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme'; +import { theme as defaultTheme } from '@bigcommerce/big-design-theme'; import styled, { css } from 'styled-components'; import { Flex } from '../../Flex'; @@ -17,7 +17,7 @@ const SharedGroupStyles = css` ${({ theme }) => theme.breakpoints.tablet} { ${StyledInputWrapper}, ${StyledTextareaWrapper} { - max-width: ${remCalc(416)}; + max-width: ${({ theme }) => theme.helpers.remCalc(416)}; } } @@ -41,7 +41,7 @@ export const StyledInlineGroup = styled.div` ${({ childrenCount }) => childrenCount === 2 && css` - grid-template-columns: repeat(2, ${remCalc(200)}); + grid-template-columns: repeat(2, ${({ theme }) => theme.helpers.remCalc(200)}); ${StyledError} { grid-column: 1 / 3; @@ -51,7 +51,7 @@ export const StyledInlineGroup = styled.div` ${({ childrenCount }) => childrenCount === 3 && css` - grid-template-columns: repeat(3, ${remCalc(128)}); + grid-template-columns: repeat(3, ${({ theme }) => theme.helpers.remCalc(128)}); ${StyledError} { grid-column: 1 / 4; diff --git a/packages/big-design/src/components/List/Action/styled.tsx b/packages/big-design/src/components/List/Action/styled.tsx index b26787c50..2809e515e 100644 --- a/packages/big-design/src/components/List/Action/styled.tsx +++ b/packages/big-design/src/components/List/Action/styled.tsx @@ -1,4 +1,4 @@ -import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme'; +import { theme as defaultTheme } from '@bigcommerce/big-design-theme'; import styled from 'styled-components'; import { ListActionProps } from './Action'; @@ -7,7 +7,7 @@ export const StyledListAction = styled.li` border-top: 1px solid ${({ theme }) => theme.colors.secondary30}; color: ${({ actionType, theme }) => (actionType === 'normal' ? theme.colors.primary : theme.colors.danger)}; margin-top: ${({ theme }) => theme.spacing.xSmall}; - min-width: ${remCalc(256)}; + min-width: ${({ theme }) => theme.helpers.remCalc(256)}; outline: none; overflow: hidden; padding: ${({ theme }) => theme.spacing.xSmall} 0 0; @@ -24,7 +24,7 @@ export const StyledListAction = styled.li` export const Wrapper = styled.div` cursor: pointer; display: flex; - height: ${remCalc(36)}; + height: ${({ theme }) => theme.helpers.remCalc(36)}; padding: 0 ${({ theme }) => theme.spacing.medium}; width: 100%; `; diff --git a/packages/big-design/src/components/List/Item/styled.tsx b/packages/big-design/src/components/List/Item/styled.tsx index 019c76603..0511e2d9b 100644 --- a/packages/big-design/src/components/List/Item/styled.tsx +++ b/packages/big-design/src/components/List/Item/styled.tsx @@ -1,4 +1,4 @@ -import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme'; +import { theme as defaultTheme } from '@bigcommerce/big-design-theme'; import styled, { css } from 'styled-components'; import { ListItemProps } from './Item'; @@ -8,9 +8,9 @@ export const StyledListItem = styled.li` box-sizing: border-box; cursor: default; display: flex; - height: ${remCalc(36)}; + height: ${({ theme }) => theme.helpers.remCalc(36)}; justify-content: space-between; - min-width: ${remCalc(256)}; + min-width: ${({ theme }) => theme.helpers.remCalc(256)}; outline: none; padding: 0 ${({ theme }) => theme.spacing.medium}; diff --git a/packages/big-design/src/components/List/styled.tsx b/packages/big-design/src/components/List/styled.tsx index fe0c479c9..a0e732164 100644 --- a/packages/big-design/src/components/List/styled.tsx +++ b/packages/big-design/src/components/List/styled.tsx @@ -1,4 +1,4 @@ -import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme'; +import { theme as defaultTheme } from '@bigcommerce/big-design-theme'; import styled from 'styled-components'; interface StyledList { @@ -12,7 +12,7 @@ export const StyledList = styled.ul` color: ${({ theme }) => theme.colors.secondary70}; display: inline-block; margin: 0; - max-height: ${({ maxHeight }) => (maxHeight ? remCalc(maxHeight) : '')}; + max-height: ${({ theme, maxHeight }) => (maxHeight ? theme.helpers.remCalc(maxHeight) : '')}; outline: none; overflow-y: scroll; padding: ${({ theme }) => theme.spacing.xSmall} 0; diff --git a/packages/big-design/src/components/ProgressCircle/styled.tsx b/packages/big-design/src/components/ProgressCircle/styled.tsx index 4debe7bc4..f79e8944a 100644 --- a/packages/big-design/src/components/ProgressCircle/styled.tsx +++ b/packages/big-design/src/components/ProgressCircle/styled.tsx @@ -1,23 +1,23 @@ -import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme'; +import { theme as defaultTheme } from '@bigcommerce/big-design-theme'; import styled, { css, keyframes } from 'styled-components'; import { CIRCLE_CIRCUMFERENCES, CIRCLE_DIMENSIONS, CIRCLE_STROKE_WIDTHS } from './constants'; import { ProgressCircleProps } from './ProgressCircle'; export const StyledProgressCircle = styled.svg` - ${({ size }) => css` - height: ${remCalc(getDimensions(size))}; - width: ${remCalc(getDimensions(size))}; + ${({ size, theme }) => css` + height: ${theme.helpers.remCalc(getDimensions(size))}; + width: ${theme.helpers.remCalc(getDimensions(size))}; `} `; -export const StyledCircle = styled.circle.attrs(({ size }: ProgressCircleProps) => ({ - cx: remCalc(getDimensions(size) / 2), - cy: remCalc(getDimensions(size) / 2), - r: remCalc(getDimensions(size) / 2 - getStrokeWidth(size) / 2), +export const StyledCircle = styled.circle.attrs(({ size, theme }: any) => ({ + cx: theme.helpers.remCalc(getDimensions(size) / 2), + cy: theme.helpers.remCalc(getDimensions(size) / 2), + r: theme.helpers.remCalc(getDimensions(size) / 2 - getStrokeWidth(size) / 2), }))` fill: transparent; - stroke-width: ${({ size }) => remCalc(getStrokeWidth(size))}; + stroke-width: ${({ size, theme }) => theme.helpers.remCalc(getStrokeWidth(size))}; stroke: ${({ theme }) => theme.colors.secondary20}; `; @@ -83,6 +83,7 @@ function fillLength(percent: number, size: ProgressCircleProps['size'] = 'medium return CIRCLE_CIRCUMFERENCES[size] - (percent / 100) * CIRCLE_CIRCUMFERENCES[size]; } +StyledProgressCircle.defaultProps = { theme: defaultTheme }; StyledCircle.defaultProps = { theme: defaultTheme }; StyledCircleFiller.defaultProps = { theme: defaultTheme }; StyledText.defaultProps = { theme: defaultTheme }; diff --git a/packages/big-design/src/components/Textarea/styled.tsx b/packages/big-design/src/components/Textarea/styled.tsx index 9e826ec24..ca7c568bf 100644 --- a/packages/big-design/src/components/Textarea/styled.tsx +++ b/packages/big-design/src/components/Textarea/styled.tsx @@ -1,4 +1,4 @@ -import { addValues, remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme'; +import { addValues, theme as defaultTheme } from '@bigcommerce/big-design-theme'; import styled, { css } from 'styled-components'; import { TextareaProps } from './Textarea'; @@ -15,7 +15,7 @@ export const StyledTextarea = styled.textarea` box-sizing: border-box; color: ${({ theme }) => theme.colors.secondary70}; line-height: ${({ theme }) => theme.lineHeight.medium}; - max-height: ${remCalc(224)}; + max-height: ${({ theme }) => theme.helpers.remCalc(224)}; padding: ${({ theme }) => `${theme.spacing.xxSmall} ${theme.spacing.small}`}; width: 100%; diff --git a/packages/big-design/src/components/Tooltip/styled.tsx b/packages/big-design/src/components/Tooltip/styled.tsx index fd011a60d..4e0caf55c 100644 --- a/packages/big-design/src/components/Tooltip/styled.tsx +++ b/packages/big-design/src/components/Tooltip/styled.tsx @@ -1,4 +1,4 @@ -import { remCalc, theme as defaultTheme } from '@bigcommerce/big-design-theme'; +import { theme as defaultTheme } from '@bigcommerce/big-design-theme'; import styled from 'styled-components'; export const StyledTooltipTrigger = styled.div` @@ -11,7 +11,7 @@ export const StyledTooltip = styled.div` color: ${({ theme }) => theme.colors.white}; background-color: ${({ theme }) => theme.colors.secondary70}; font-size: ${({ theme }) => theme.typography.fontSize.medium}; - max-width: ${remCalc(300)}; + max-width: ${({ theme }) => theme.helpers.remCalc(300)}; padding: ${({ theme }) => `${theme.spacing.small} ${theme.spacing.medium}`}; `; diff --git a/packages/docs/pages/Colors/ColorsPage.tsx b/packages/docs/pages/Colors/ColorsPage.tsx index 21d37275d..fdc3b9cbf 100644 --- a/packages/docs/pages/Colors/ColorsPage.tsx +++ b/packages/docs/pages/Colors/ColorsPage.tsx @@ -1,5 +1,5 @@ import { Box, Flex, H0, H2, Text } from '@bigcommerce/big-design'; -import { remCalc, ThemeInterface } from '@bigcommerce/big-design-theme'; +import { ThemeInterface } from '@bigcommerce/big-design-theme'; import React, { useContext } from 'react'; import styled, { ThemeContext } from 'styled-components'; @@ -10,8 +10,8 @@ type Colors = ThemeInterface['colors']; type Color = keyof Colors; const StyledColor = styled(Box)` - height: ${remCalc(30)}; - width: ${remCalc(300)}; + height: ${({ theme }) => theme.helpers.remCalc(30)}; + width: ${({ theme }) => theme.helpers.remCalc(300)}; `; export default () => { From 3458b70365bf468f0ee5772fa57fc6a08075a0a8 Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Thu, 8 Aug 2019 10:12:26 -0500 Subject: [PATCH 2/3] fix: moved big-design-theme as peer dependency --- packages/big-design/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/big-design/package.json b/packages/big-design/package.json index fb96f93c7..82b6e344c 100644 --- a/packages/big-design/package.json +++ b/packages/big-design/package.json @@ -38,6 +38,7 @@ }, "dependencies": { "@bigcommerce/big-design-icons": "^0.0.1", + "@bigcommerce/big-design-theme": "^0.0.1", "@types/hoist-non-react-statics": "^3.3.0", "downshift": "^3.2.7", "hoist-non-react-statics": "^3.3.0", @@ -56,7 +57,6 @@ "@babel/preset-env": "^7.5.5", "@babel/preset-react": "^7.0.0", "@babel/preset-typescript": "^7.1.0", - "@bigcommerce/big-design-theme": "^0.0.1", "@bigcommerce/configs": "^0.5.0", "@testing-library/jest-dom": "^4.0.0", "@testing-library/react": "^8.0.7", From d13017a2a7c34a9560836cf7fd34a2ddfffd180d Mon Sep 17 00:00:00 2001 From: Chancellor Clark Date: Thu, 8 Aug 2019 10:36:42 -0500 Subject: [PATCH 3/3] fix: update PR comments --- packages/big-design-theme/src/index.ts | 4 ++-- packages/big-design/src/components/Form/Group/styled.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/big-design-theme/src/index.ts b/packages/big-design-theme/src/index.ts index a9d65cca3..6fa491646 100644 --- a/packages/big-design-theme/src/index.ts +++ b/packages/big-design-theme/src/index.ts @@ -19,13 +19,13 @@ export interface ThemeInterface { breakpointValues: BreakpointValues; breakpoints: Breakpoints; colors: Colors; + helpers: Helpers; keyframes: typeof keyframes; lineHeight: LineHeight; shadow: Shadow; spacing: Spacing; typography: Typography; zIndex: ZIndex; - helpers: Helpers; } export const createTheme = (customOptions: Partial = {}): ThemeInterface => { @@ -37,13 +37,13 @@ export const createTheme = (customOptions: Partial = {}): ThemeInt breakpointValues, breakpoints, colors, + helpers: createHelpers(), keyframes, lineHeight: createLineHeight(), shadow, spacing: createSpacing(), typography: createTypography(), zIndex, - helpers: createHelpers(), }; }; diff --git a/packages/big-design/src/components/Form/Group/styled.tsx b/packages/big-design/src/components/Form/Group/styled.tsx index e985c8961..1cbd59f70 100644 --- a/packages/big-design/src/components/Form/Group/styled.tsx +++ b/packages/big-design/src/components/Form/Group/styled.tsx @@ -38,20 +38,20 @@ export const StyledInlineGroup = styled.div` ${SharedGroupStyles}; ${({ theme }) => theme.breakpoints.tablet} { - ${({ childrenCount }) => + ${({ childrenCount, theme }) => childrenCount === 2 && css` - grid-template-columns: repeat(2, ${({ theme }) => theme.helpers.remCalc(200)}); + grid-template-columns: repeat(2, ${theme.helpers.remCalc(200)}); ${StyledError} { grid-column: 1 / 3; } `} - ${({ childrenCount }) => + ${({ childrenCount, theme }) => childrenCount === 3 && css` - grid-template-columns: repeat(3, ${({ theme }) => theme.helpers.remCalc(128)}); + grid-template-columns: repeat(3, ${theme.helpers.remCalc(128)}); ${StyledError} { grid-column: 1 / 4;