From 1d31921d32fb8751bd08e3a8d6d5ae8667092e4f Mon Sep 17 00:00:00 2001 From: Derrick Nguyen Date: Thu, 6 Sep 2018 12:29:00 -0700 Subject: [PATCH] refactor(context): Update to latest React Context API (#391) refactor(context): Reworked internals of ConfigProvider to use to latest React Context Api, removed package prop-types from library, updated peerDependency to include >= react@16.3 BREAKING CHANGE: Removed package, prop-types, from library. Also, updated peerDependency to include >= react@16.3 --- .babelrc | 3 - .eslintrc | 9 +- flow-typed/npm/prop-types_v15.x.x.js | 35 ----- package.json | 4 +- scripts/webpack.config.js | 1 - src/asGrid/index.js | 32 ++-- src/asLayout/index.js | 32 ++-- src/configProvider/configProvider.spec.js | 41 ----- src/configProvider/consumer.js | 10 ++ src/configProvider/context.js | 10 ++ src/configProvider/index.js | 79 ++++------ src/configProvider/index.spec.js | 142 ++++++++++++++++++ src/core/index.js | 4 +- src/defaults.js | 10 +- src/dev/dev.js | 13 +- src/gymnast.js | 1 + src/root/index.js | 28 ++-- src/types.js | 31 ++-- src/utils/index.js | 11 +- src/utils/utils.spec.js | 12 +- src/withContext/index.js | 13 ++ src/withContext/index.spec.js | 31 ++++ src/withResolution/index.js | 13 +- .../stories/configProvider/spacingAliases.md | 54 +++---- test/e2e/__snapshots__/gymnast.spec.js.snap | 1 + yarn.lock | 17 +-- 26 files changed, 365 insertions(+), 272 deletions(-) delete mode 100644 flow-typed/npm/prop-types_v15.x.x.js delete mode 100644 src/configProvider/configProvider.spec.js create mode 100644 src/configProvider/consumer.js create mode 100644 src/configProvider/context.js create mode 100644 src/configProvider/index.spec.js create mode 100644 src/withContext/index.js create mode 100644 src/withContext/index.spec.js diff --git a/.babelrc b/.babelrc index befa5c779..23d31f595 100644 --- a/.babelrc +++ b/.babelrc @@ -34,9 +34,6 @@ ] ], "env": { - "development": { - "plugins": ["flow-react-proptypes"] - }, "test": { "plugins": [ [ diff --git a/.eslintrc b/.eslintrc index b077d06d9..f03c14f78 100644 --- a/.eslintrc +++ b/.eslintrc @@ -18,10 +18,7 @@ "jest": true, "jasmine": true }, - "plugins": [ - "react", - "flowtype" - ], + "plugins": ["react", "flowtype"], "settings": { "react": { "version": "15.5" @@ -40,9 +37,7 @@ "import/no-unresolved": [ 2, { - "ignore": [ - "gymnast" - ] + "ignore": ["gymnast"] } ], "no-use-before-define": ["error", "nofunc"], diff --git a/flow-typed/npm/prop-types_v15.x.x.js b/flow-typed/npm/prop-types_v15.x.x.js deleted file mode 100644 index ef563ef69..000000000 --- a/flow-typed/npm/prop-types_v15.x.x.js +++ /dev/null @@ -1,35 +0,0 @@ -// flow-typed signature: 3eaa1f24c7397b78a7481992d2cddcb2 -// flow-typed version: a1a20d4928/prop-types_v15.x.x/flow_>=v0.41.x - -type $npm$propTypes$ReactPropsCheckType = ( - props: any, - propName: string, - componentName: string, - href?: string -) => ?Error - -declare module 'prop-types' { - declare var array: React$PropType$Primitive> - declare var bool: React$PropType$Primitive - declare var func: React$PropType$Primitive - declare var number: React$PropType$Primitive - declare var object: React$PropType$Primitive - declare var string: React$PropType$Primitive - declare var any: React$PropType$Primitive - declare var arrayOf: React$PropType$ArrayOf - declare var element: React$PropType$Primitive /* TODO */ - declare var instanceOf: React$PropType$InstanceOf - declare var node: React$PropType$Primitive /* TODO */ - declare var objectOf: React$PropType$ObjectOf - declare var oneOf: React$PropType$OneOf - declare var oneOfType: React$PropType$OneOfType - declare var shape: React$PropType$Shape - - declare function checkPropTypes( - propTypes: $Subtype<{ [_: $Keys]: $npm$propTypes$ReactPropsCheckType }>, - values: V, - location: string, - componentName: string, - getStack: ?() => ?string - ): void -} diff --git a/package.json b/package.json index 943962001..4ca1d786f 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "babel-cli": "6.26.0", "babel-eslint": "8.2.6", "babel-jest": "23.4.2", - "babel-plugin-flow-react-proptypes": "24.1.1", "babel-plugin-lodash": "3.3.4", "babel-plugin-macros": "2.4.0", "babel-plugin-module-resolver": "3.1.1", @@ -141,8 +140,7 @@ "verifyConditions": "condition-circle" }, "peerDependencies": { - "prop-types": ">=15", - "react": ">=15", + "react": ">=16.3", "react-dom": ">=15" }, "dependencies": { diff --git a/scripts/webpack.config.js b/scripts/webpack.config.js index 088724412..19d0a829a 100644 --- a/scripts/webpack.config.js +++ b/scripts/webpack.config.js @@ -47,7 +47,6 @@ module.exports = { externals: { react: 'react', 'react-dom': 'react-dom', - 'prop-types': 'prop-types', }, module: { rules: [ diff --git a/src/asGrid/index.js b/src/asGrid/index.js index c16f02c7a..46b256949 100644 --- a/src/asGrid/index.js +++ b/src/asGrid/index.js @@ -1,16 +1,12 @@ // @flow import * as React from 'react' import { compact } from 'lodash' -import type { - OneResolutionGrid, - ConfigProviderContext, - GridProps, - OneResolution, -} from '../types' +import type { OneResolutionGrid, GridProps, OneResolution } from '../types' import { styles, getCol } from './grid.styles' import { getValue } from '../utils' import getCoreStyles from '../core' import withResolution from '../withResolution' +import withContext from '../withContext' const resolutionProperties = ['align', 'justify', 'size'] @@ -20,17 +16,15 @@ export default function asGrid( props: $Shape ) => $Shape = props => props ): React.ComponentType { - function Grid( - { - align, - className, - justify, - size, - innerRef, - ...restProps - }: OneResolutionGrid, - context: ConfigProviderContext - ) { + function Grid({ + align, + className, + justify, + size, + innerRef, + context, + ...restProps + }: OneResolutionGrid) { const props = getCoreStyles(mapDefaultProps(restProps), context) const classes = compact([ styles.grid, @@ -43,5 +37,7 @@ export default function asGrid( return } - return withResolution(Grid, resolutionProperties) + const Resolution = withResolution(Grid, resolutionProperties) + + return withContext(Resolution) } diff --git a/src/asLayout/index.js b/src/asLayout/index.js index 1dec55afd..761598817 100644 --- a/src/asLayout/index.js +++ b/src/asLayout/index.js @@ -1,16 +1,12 @@ // @flow import * as React from 'react' import { compact } from 'lodash' -import type { - OneResolutionLayout, - ConfigProviderContext, - LayoutProps, - OneResolution, -} from '../types' +import type { OneResolutionLayout, LayoutProps, OneResolution } from '../types' import getStyles from './layout.styles' import getCoreStyles from '../core' import { getValues } from '../utils/index' import withResolution from '../withResolution' +import withContext from '../withContext' const resolutionProperties = ['fixed', 'height', 'overflow'] @@ -20,17 +16,15 @@ export default function asLayout( props: $Shape ) => $Shape = props => props ): React.ComponentType { - function Layout( - { - className, - fixed, - height, - overflow, - innerRef, - ...restProps - }: OneResolutionLayout, - context: ConfigProviderContext - ) { + function Layout({ + className, + fixed, + height, + overflow, + innerRef, + context, + ...restProps + }: OneResolutionLayout) { const props = getCoreStyles(mapDefaultProps(restProps), context) const styles = getStyles(getValues(context, restProps)) const classes = compact([ @@ -44,5 +38,7 @@ export default function asLayout( return } - return withResolution(Layout, resolutionProperties) + const Resolution = withResolution(Layout, resolutionProperties) + + return withContext(Resolution) } diff --git a/src/configProvider/configProvider.spec.js b/src/configProvider/configProvider.spec.js deleted file mode 100644 index 57d3f4e57..000000000 --- a/src/configProvider/configProvider.spec.js +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react' -import { mount } from 'enzyme' -import Grid from '../grid' -import ConfigProvider from './index' - -describe('ConfigProvider', () => { - let wrapper - - it('should not crash when empty', () => { - expect(() => { - wrapper = mount() - }).not.toThrow() - }) - - it('does not add additional DOM Elements', () => { - wrapper = mount( - - - - ) - const grid = mount() - - expect(grid.html()).toEqual(wrapper.html()) - - grid.unmount() - }) - - it('should define gymnast context', () => { - wrapper = mount() - - expect(wrapper.context()).toEqual({ - gymnast: undefined, - }) - }) - - afterEach(() => { - if (wrapper) { - wrapper.unmount() - } - }) -}) diff --git a/src/configProvider/consumer.js b/src/configProvider/consumer.js new file mode 100644 index 000000000..dcd1fbdca --- /dev/null +++ b/src/configProvider/consumer.js @@ -0,0 +1,10 @@ +// @flow +import * as React from 'react' +import type { ConfigContextType } from '../types' +import Context from './context' + +type Props = { children: (context: ConfigContextType) => ?React.Node } + +export default function ConfigConsumer({ children }: Props) { + return {context => children(context)} +} diff --git a/src/configProvider/context.js b/src/configProvider/context.js new file mode 100644 index 000000000..d57dcc4ae --- /dev/null +++ b/src/configProvider/context.js @@ -0,0 +1,10 @@ +// @flow +import * as React from 'react' +import type { ConfigContextType } from '../types' +import defaults from '../defaults' + +const contextDefaults: ConfigContextType = defaults + +const Context = React.createContext(contextDefaults) + +export default Context diff --git a/src/configProvider/index.js b/src/configProvider/index.js index b60bbb696..46cbe62ba 100644 --- a/src/configProvider/index.js +++ b/src/configProvider/index.js @@ -1,65 +1,42 @@ // @flow import * as React from 'react' -import PropTypes from 'prop-types' -import type { - ConfigProviderContext, - DisplayAliases, - SpacingAliases, -} from '../types' -import defaults from '../defaults' +import type { ConfigContextType } from '../types' +import Context from './context' -type Props = { - base?: number, +type ProviderProps = { + ...ConfigContextType, children?: React.Node, - columns?: number, - displayAliases?: DisplayAliases, - fallbackDisplayKey?: string, - gutter?: number, - maxPageWidth?: number | 'none', - minPageWidth?: number, - pageMargin?: { - [string]: number, - }, - spacingAliases?: SpacingAliases, - verticalGutter?: number, } -export const ConfigContextPropTypes = { - gymnast: PropTypes.shape({ - base: PropTypes.number, - columns: PropTypes.number, - displayAliases: PropTypes.shape({}), - fallbackDisplayKey: PropTypes.string, - gutter: PropTypes.number, - maxPageWidth: PropTypes.oneOf([PropTypes.number, 'none']), - minPageWidth: PropTypes.number, - pageMargin: PropTypes.shape({}), - spacingAliases: PropTypes.shape({}), - verticalGutter: PropTypes.number, - }), -} - -export default class ConfigProvider extends React.Component { - static contextTypes = ConfigContextPropTypes - static childContextTypes = ConfigContextPropTypes +type ProviderState = ConfigContextType | {} - getChildContext(): ConfigProviderContext { - const { - gutter = defaults.gutter, - verticalGutter = gutter, - children, - ...props - } = this.props +// This HOC takes a Provider component and wraps it around a Consumer +// component that provides non-defaulted values that have been set from preceding +// Provider components. +class ConfigProvider extends React.Component { + static getDerivedStateFromProps(props: ProviderProps, state: ProviderState) { + const { children, ...restProps } = props return { - gymnast: { - gutter, - verticalGutter, - ...props, - }, + ...state, + ...restProps, } } + + state = {} + render() { - return this.props.children || null + return ( + + {(context: ConfigContextType) => { + const { children } = this.props + const value = { ...context, ...this.state } + + return {children} + }} + + ) } } + +export default ConfigProvider diff --git a/src/configProvider/index.spec.js b/src/configProvider/index.spec.js new file mode 100644 index 000000000..7e8e111b8 --- /dev/null +++ b/src/configProvider/index.spec.js @@ -0,0 +1,142 @@ +import * as React from 'react' +import { mount } from 'enzyme' +import Grid from '../grid' +import ConfigProvider from './index' +import ConfigConsumer from './consumer' +import defaults from '../defaults' + +const TesterComponent = props => + +describe('ConfigProvider', () => { + let wrapper + + it('should not crash when empty', () => { + expect(() => { + wrapper = mount() + }).not.toThrow() + }) + + it('does not add additional DOM Elements', () => { + wrapper = mount( + + + + ) + const grid = mount() + + expect(grid.html()).toEqual(wrapper.html()) + + grid.unmount() + }) + + it('should return default values if provider did not provide values', () => { + const render = jest.fn() + + wrapper = mount( + + {render} + + ) + + const { calls } = render.mock + + expect(calls[0][0]).toEqual(defaults) + }) + + it('should return values received from provider', () => { + const render = jest.fn() + + wrapper = mount( + + {render} + + ) + + const { calls } = render.mock + const { columns } = calls[0][0] + + expect(columns).toEqual(2) + }) + + it('should persist values coming from parent provider if child provider did not provide that value', () => { + const render = jest.fn() + + wrapper = mount( + + + + {render} + + + + ) + + const { calls } = render.mock + const { columns, base, gutter } = calls[0][0] + + expect(columns).toEqual(2) + expect(base).toEqual(4) + expect(gutter).toEqual(10) + }) + + it('should override parent provider value if child provider provided the same value', () => { + const render = jest.fn() + + wrapper = mount( + + + + + {render} + + + + + ) + + const { calls } = render.mock + const { columns, base } = calls[0][0] + + expect(columns).toEqual(9) + expect(base).toEqual(2) + }) + + it('should handle siblings with different override values', () => { + const render1 = jest.fn() + const render2 = jest.fn() + const render3 = jest.fn() + + wrapper = mount( + + + {render1} + + + {render2} + + {render3} + + ) + + const { calls: calls1 } = render1.mock + const { calls: calls2 } = render2.mock + const { calls: calls3 } = render3.mock + + const { columns: columns1, base: base1 } = calls1[0][0] + const { columns: columns2, base: base2 } = calls2[0][0] + const { columns: columns3, base: base3 } = calls3[0][0] + + expect(columns1).toEqual(3) + expect(base1).toEqual(5) + expect(columns2).toEqual(2) + expect(base2).toEqual(1) + expect(columns3).toBe(2) + expect(base3).toBe(4) + }) + + afterEach(() => { + if (wrapper) { + wrapper.unmount() + } + }) +}) diff --git a/src/core/index.js b/src/core/index.js index 8694e1dc3..8329b2a5a 100644 --- a/src/core/index.js +++ b/src/core/index.js @@ -1,10 +1,10 @@ // @flow import { combineSpacing, getValues } from '../utils' -import type { ConfigProviderContext, OneResolution } from '../types' +import type { ConfigContextType, OneResolution } from '../types' export default function getCoreStyles( props: $Shape, - context: ConfigProviderContext + context: ?ConfigContextType ) { const { base, diff --git a/src/defaults.js b/src/defaults.js index 886233277..b1379cce9 100644 --- a/src/defaults.js +++ b/src/defaults.js @@ -1,6 +1,12 @@ // @flow +import { type ConfigContextType } from './types' -export default { +const defaults: {| + ...ConfigContextType, + gutter: number, + fallbackDisplayKey: string, + verticalGutter: number, +|} = { base: 8, // multiplier (in pixels) that all other size units use columns: 12, // number of columns used in the layout displayAliases: { @@ -61,3 +67,5 @@ export default { }, verticalGutter: 3, // value (in base units) that separates columns vertically } + +export default defaults diff --git a/src/dev/dev.js b/src/dev/dev.js index e5743a27c..902384144 100644 --- a/src/dev/dev.js +++ b/src/dev/dev.js @@ -1,7 +1,7 @@ // @flow import * as React from 'react' import ReactDOM from 'react-dom' -import { ConfigContextPropTypes } from '../configProvider' +import ConfigConsumer from '../configProvider/consumer' import getStyles from './dev.styles' import { body, @@ -13,6 +13,7 @@ import Grid from '../grid' import Root from '../root' import Layout from '../layout' import { getValues, times } from '../utils' +import type { ConfigContextType } from '../types' const KEY_CODE_K = 'K'.charCodeAt(0) type Props = {| @@ -32,8 +33,6 @@ export default class Dev extends React.Component { useShift: true, } - static contextTypes = ConfigContextPropTypes - state = { showOverlay: false, } @@ -63,11 +62,11 @@ export default class Dev extends React.Component { } } - render() { + renderDevContent = (context: ConfigContextType) => { if (!this.state.showOverlay) { return null } - const values = getValues(this.context) + const values = getValues(context) const styles = getStyles(values) const content = ( @@ -88,4 +87,8 @@ export default class Dev extends React.Component { return ReactDOM.createPortal(content, getDevContainer()) } + + render() { + return {this.renderDevContent} + } } diff --git a/src/gymnast.js b/src/gymnast.js index 809dff949..4023ed135 100644 --- a/src/gymnast.js +++ b/src/gymnast.js @@ -14,6 +14,7 @@ export { default as asCol } from './asCol' export { default as asGrid } from './asGrid' export { default as asLayout } from './asLayout' export { default as withResolution } from './withResolution' +export { default as withContext } from './withContext' // Utils / Dev export { default as Dev } from './dev' diff --git a/src/root/index.js b/src/root/index.js index 362ebf313..a7701d479 100644 --- a/src/root/index.js +++ b/src/root/index.js @@ -1,25 +1,29 @@ // @flow import * as React from 'react' import Grid from '../grid' -import type { GridProps, ConfigProviderContext } from '../types' +import type { GridProps } from '../types' import getStyles from './root.styles' import { getValues } from '../utils' +import ConfigConsumer from '../configProvider/consumer' type Props = GridProps & { children?: React.Node, } -export default function Root( - { children, justify, ...props }: Props, - context: ConfigProviderContext -) { - const styles = getStyles(getValues(context, props)) - +export default function Root({ children, justify, ...props }: Props) { return ( - - - {children} - - + + {context => { + const styles = getStyles(getValues(context, props)) + + return ( + + + {children} + + + ) + }} + ) } diff --git a/src/types.js b/src/types.js index a96328d77..5b84840cc 100644 --- a/src/types.js +++ b/src/types.js @@ -48,22 +48,20 @@ export type DisplayAliases = { +[displayAlias: string]: DisplayProperties | Array, } -export type ConfigProviderContext = { - +gymnast?: {| - +base?: number, - +columns?: number, - +displayAliases?: DisplayAliases, - +fallbackDisplayKey?: string, - +gutter?: number, - +maxPageWidth?: number | 'none', - +minPageWidth?: number, - +pageMargin?: { - [string]: number, - }, - +spacingAliases?: SpacingAliases, - +verticalGutter?: number, - |}, -} +export type ConfigContextType = {| + +base?: number, + +columns?: number, + +displayAliases?: DisplayAliases, + +fallbackDisplayKey?: string, + +gutter?: number, + +maxPageWidth?: number | 'none', + +minPageWidth?: number, + +pageMargin?: { + [string]: number, + }, + +spacingAliases?: SpacingAliases, + +verticalGutter?: number, +|} export type OneResolution = { base?: number, @@ -81,6 +79,7 @@ export type OneResolution = { paddingTop?: SpacingValues, show?: DisplayValues, style?: { [string]: string | number }, + context?: ConfigContextType, } type MultipleResolutionProps = { diff --git a/src/utils/index.js b/src/utils/index.js index 2d6ac2bb5..09c1974f4 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -1,5 +1,4 @@ // @flow -import { get } from 'lodash' import cxs from '../cxs' import defaults from '../defaults' import type { @@ -244,15 +243,13 @@ export function toCXS(raw: { } export function getValue(context: *, property: string, override?: A): A { - const contextValue = get(context, `gymnast["${property}"]`) - - return ([override, contextValue, defaults[property]].find(isDefined): any) + return ([override, context[property], defaults[property]].find( + isDefined + ): any) } export function getValues(context: *, overrides?: * = {}) { - const contextValues = get(context, 'gymnast', {}) - - return { ...defaults, ...contextValues, ...overrides } + return { ...defaults, ...context, ...overrides } } export function accumulateOver(props: Array) { diff --git a/src/utils/utils.spec.js b/src/utils/utils.spec.js index 46ab05daf..7576e3e6b 100644 --- a/src/utils/utils.spec.js +++ b/src/utils/utils.spec.js @@ -142,10 +142,10 @@ describe('combineSpacing', () => { base, }) ).toEqual({ - borderTopWidth: base * 4 / 2, + borderTopWidth: (base * 4) / 2, borderRightWidth: base * 3, borderBottomWidth: base * 4, - borderLeftWidth: base * 3 / 2, + borderLeftWidth: (base * 3) / 2, }) }) }) @@ -295,13 +295,13 @@ describe('toCXS', () => { describe('getValue', () => { it('should read the value specified by context', () => { - const out = getValue({ gymnast: { columns: 14 } }, 'columns') + const out = getValue({ columns: 14 }, 'columns') expect(out).toBe(14) }) it('should prefer the override value when provided', () => { - const out = getValue({ gymnast: { columns: 14 } }, 'columns', 20) + const out = getValue({ columns: 14 }, 'columns', 20) expect(out).toBe(20) }) @@ -321,7 +321,7 @@ describe('getValues', () => { }) it('should merge context, overrides and defaults', () => { - const out = getValues({ gymnast: { A: 2 } }) + const out = getValues({ A: 2 }) expect(out.A).toBe(2) expect(size(out)).toBeGreaterThan(1) @@ -334,7 +334,7 @@ describe('getValues', () => { }) it('should favor context when only context and defaults are set', () => { - const out = getValues({ gymnast: { columns: 2 } }) + const out = getValues({ columns: 2 }) expect(out.columns).toBe(2) }) diff --git a/src/withContext/index.js b/src/withContext/index.js new file mode 100644 index 000000000..734770c04 --- /dev/null +++ b/src/withContext/index.js @@ -0,0 +1,13 @@ +// @flow +import * as React from 'react' +import ConfigConsumer from '../configProvider/consumer' + +export default function withContext(Component: React.ComponentType<*>) { + return function WithContext(props: React.ElementProps) { + return ( + + {context => } + + ) + } +} diff --git a/src/withContext/index.spec.js b/src/withContext/index.spec.js new file mode 100644 index 000000000..b2c107d9e --- /dev/null +++ b/src/withContext/index.spec.js @@ -0,0 +1,31 @@ +// @flow +import * as React from 'react' +import { mount } from 'enzyme' +import ConfigProvider from '../configProvider' +import withContext from './index' + +describe('withContext', () => { + let wrapper + it('should provide a prop called context', () => { + const render: any = jest.fn() + render.mockReturnValue('div') + + const ContextComponent = withContext(render) + + wrapper = mount( + + + + ) + + const { calls } = render.mock + + expect(calls[0][0]).toHaveProperty('context') + }) + + afterEach(() => { + if (wrapper) { + wrapper.unmount() + } + }) +}) diff --git a/src/withResolution/index.js b/src/withResolution/index.js index a948348bc..62e80dcb6 100644 --- a/src/withResolution/index.js +++ b/src/withResolution/index.js @@ -4,7 +4,6 @@ import type { DisplayValues } from '../types' import log from '../log' import { getValue } from '../utils' import errors from '../errors' -import { ConfigContextPropTypes } from '../configProvider' import { register, unregister, supportsMatchMedia } from './mediaQuery' import { checkShouldShow, @@ -39,7 +38,7 @@ export default function withResolution( Props & React.ElementProps, State > { - static contextTypes = ConfigContextPropTypes + static defaultProps = { context: {} } constructor(props: Props) { super(props) @@ -78,7 +77,7 @@ export default function withResolution( } getQueries = (show?: DisplayValues) => { - const displayAliases = getValue(this.context, 'displayAliases') + const displayAliases = getValue(this.props.context, 'displayAliases') let queries = show if (!show && this.anyPropsUseResolutionFormat()) { @@ -116,14 +115,16 @@ export default function withResolution( return null } + const { context, ...restProps } = this.props + const props = getSingleResolutionProps({ - props: this.props, + props: restProps, shouldShow: this.state.shouldShow, resolutionKeys: combinedResolutionKeys, - fallbackDisplayKey: getValue(this.context, 'fallbackDisplayKey'), + fallbackDisplayKey: getValue(context, 'fallbackDisplayKey'), }) - return + return } } } diff --git a/storybook/stories/configProvider/spacingAliases.md b/storybook/stories/configProvider/spacingAliases.md index 39146e4e3..01997441e 100644 --- a/storybook/stories/configProvider/spacingAliases.md +++ b/storybook/stories/configProvider/spacingAliases.md @@ -2,37 +2,37 @@ You can use `ConfigProvider` to set different configuration options. `ConfigProv Margins and paddings can be aliased for convenience with the property `spacingAliases`. These values, like all other margins and paddings, are then multiplied by their `base` value (for Grid the default is `24px`). -The default `24px` value for `base` can also be overwritten through the `ConfigProvider`. This example uses configProvider with `base` `8px` and the following `spacingAliases`: +The default `24px` value for `base` can also be overwritten through the `ConfigProvider`. This example uses ConfigProvider with `base` `8px` and the following `spacingAliases`: -| Alias | Value | Base | Base x Alias Value | -| ----------- | ----- | ---- | ------------------ | -| XS | 0.5 | 8 | 4px | -| S/2 | 0.5 | 8 | 4px | -| S | 1 | 8 | 8px | -| M/2 | 1 | 8 | 8px | -| M | 2 | 8 | 16px | -| L/2 | 1.5 | 8 | 12px | -| L | 3 | 8 | 24px | -| XL/2 | 2 | 8 | 16px | -| XL | 4 | 8 | 32px | -| XXL/2 | 3 | 8 | 24px | -| XXL | 6 | 8 | 48px | +| Alias | Value | Base | Base x Alias Value | +| ----- | ----- | ---- | ------------------ | +| XS | 0.5 | 8 | 4px | +| S/2 | 0.5 | 8 | 4px | +| S | 1 | 8 | 8px | +| M/2 | 1 | 8 | 8px | +| M | 2 | 8 | 16px | +| L/2 | 1.5 | 8 | 12px | +| L | 3 | 8 | 24px | +| XL/2 | 2 | 8 | 16px | +| XL | 4 | 8 | 32px | +| XXL/2 | 3 | 8 | 24px | +| XXL | 6 | 8 | 48px | Changing base to `24` changes the spacing values: -| Alias | Value | Base | Base x Alias Value | -| ----------- | ----- | ---- | ------------------ | -| XS | 0.5 | 24 | 12px | -| S/2 | 0.5 | 24 | 12px | -| S | 1 | 24 | 24px | -| M/2 | 1 | 24 | 24px | -| M | 2 | 24 | 48px | -| L/2 | 1.5 | 24 | 36px | -| L | 3 | 24 | 72px | -| XL/2 | 2 | 24 | 48px | -| XL | 4 | 24 | 96px | -| XXL/2 | 3 | 24 | 72px | -| XXL | 6 | 24 | 144px | +| Alias | Value | Base | Base x Alias Value | +| ----- | ----- | ---- | ------------------ | +| XS | 0.5 | 24 | 12px | +| S/2 | 0.5 | 24 | 12px | +| S | 1 | 24 | 24px | +| M/2 | 1 | 24 | 24px | +| M | 2 | 24 | 48px | +| L/2 | 1.5 | 24 | 36px | +| L | 3 | 24 | 72px | +| XL/2 | 2 | 24 | 48px | +| XL | 4 | 24 | 96px | +| XXL/2 | 3 | 24 | 72px | +| XXL | 6 | 24 | 144px | Use the knobs to try different `base` values. diff --git a/test/e2e/__snapshots__/gymnast.spec.js.snap b/test/e2e/__snapshots__/gymnast.spec.js.snap index ed4ef9f1a..33af5ce63 100644 --- a/test/e2e/__snapshots__/gymnast.spec.js.snap +++ b/test/e2e/__snapshots__/gymnast.spec.js.snap @@ -88,6 +88,7 @@ Object { "toCXS": [Function], "validateSpacingProps": [Function], }, + "withContext": [Function], "withResolution": [Function], } `; diff --git a/yarn.lock b/yarn.lock index edd0b6da1..941bd60a3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1223,7 +1223,7 @@ babel-core@6.26.0: slash "^1.0.0" source-map "^0.5.6" -babel-core@^6.0.0, babel-core@^6.25.0, babel-core@^6.26.0: +babel-core@^6.0.0, babel-core@^6.26.0: version "6.26.3" resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207" dependencies: @@ -1490,15 +1490,6 @@ babel-plugin-external-helpers@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-flow-react-proptypes@24.1.1: - version "24.1.1" - resolved "https://registry.yarnpkg.com/babel-plugin-flow-react-proptypes/-/babel-plugin-flow-react-proptypes-24.1.1.tgz#a40088bdcf22bbe7d10fe05dad7edf747940df43" - dependencies: - babel-core "^6.25.0" - babel-template "^6.25.0" - babel-traverse "^6.25.0" - babel-types "^6.25.0" - babel-plugin-istanbul@^4.0.0, babel-plugin-istanbul@^4.1.6: version "4.1.6" resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45" @@ -2262,7 +2253,7 @@ babel-runtime@6.26.0, babel-runtime@6.x.x, babel-runtime@^6.11.6, babel-runtime@ core-js "^2.4.0" regenerator-runtime "^0.11.0" -babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-template@^6.26.0: +babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-template/-/babel-template-6.26.0.tgz#de03e2d16396b069f46dd9fff8521fb1a0e35e02" dependencies: @@ -2272,7 +2263,7 @@ babel-template@^6.16.0, babel-template@^6.24.1, babel-template@^6.25.0, babel-te babylon "^6.18.0" lodash "^4.17.4" -babel-traverse@^6.0.0, babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.25.0, babel-traverse@^6.26.0: +babel-traverse@^6.0.0, babel-traverse@^6.18.0, babel-traverse@^6.24.1, babel-traverse@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-traverse/-/babel-traverse-6.26.0.tgz#46a9cbd7edcc62c8e5c064e2d2d8d0f4035766ee" dependencies: @@ -2294,7 +2285,7 @@ babel-types@7.0.0-beta.3: lodash "^4.2.0" to-fast-properties "^2.0.0" -babel-types@^6.0.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.25.0, babel-types@^6.26.0: +babel-types@^6.0.0, babel-types@^6.18.0, babel-types@^6.19.0, babel-types@^6.24.1, babel-types@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497" dependencies: