Skip to content
Permalink
Browse files

feat(box): use style-props package, create method to safelySpreadProps

Use style-props package over the types package

Create a method to safely spread props onto the Box component without
overriding styles from compositional use of Box
  • Loading branch information
SiTaggart committed Dec 14, 2019
1 parent 29da81f commit dc9f7fbc89d7ccfc382dc74185e8a699c658d55e
@@ -0,0 +1,26 @@
import {safelySpreadBoxProps} from '../src/SafelySpreadProps';

const badProps = {
foo: 'bar',
borderColor: 'borderColorSuccess',
};

const goodProps = {
baz: 'foo',
'aria-label': 'test',
};

describe('safelySpreadBoxProps', () => {
it('should not filter out good props', () => {
expect(safelySpreadBoxProps(goodProps)).toEqual({
baz: 'foo',
'aria-label': 'test',
});
});

it('should filter out bad props', () => {
expect(safelySpreadBoxProps(badProps)).toEqual({
foo: 'bar',
});
});
});
@@ -28,13 +28,13 @@
},
"peerDependencies": {
"@emotion/styled": "^10.0.10",
"@twilio-paste/types": "^2.1.2",
"@twilio-paste/style-props": "^0.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-system": "^5.1.2"
},
"devDependencies": {
"@twilio-paste/types": "^2.1.2",
"@twilio-paste/style-props": "^0.0.0",
"csstype": "^2.6.6",
"rollup": "^1.16.2",
"rollup-plugin-babel": "^4.3.3",
@@ -0,0 +1,35 @@
import {
LAYOUT_PROPS,
SPACE_PROPS,
BACKGROUND_PROPS,
BORDER_PROPS,
SHADOW_PROPS,
POSITION_PROPS,
FLEXBOX_PROPS,
} from '@twilio-paste/style-props';

export const BOX_PROPS_TO_BLOCK = [
...LAYOUT_PROPS,
...SPACE_PROPS,
...BACKGROUND_PROPS,
...BORDER_PROPS,
...SHADOW_PROPS,
...POSITION_PROPS,
...FLEXBOX_PROPS,
'backgroundColor',
'borderColor',
'className',
'style',
];

export const safelySpreadBoxProps = (props: {}): {} => {
// https://www.measurethat.net/Benchmarks/Show/6642/0/for-in-vs-reduce-vs-pick#latest_results_block
const newList = Object.keys(props).reduce((newObj, key) => {
if (!BOX_PROPS_TO_BLOCK.includes(key)) {
// eslint-disable-next-line no-param-reassign
newObj[key] = props[key];
}
return newObj;
}, {});
return newList;
};
@@ -8,9 +8,17 @@ import {
ShadowProps,
PositionProps,
FlexboxProps,
} from '@twilio-paste/types';
} from '@twilio-paste/style-props';

interface Box extends LayoutProps, SpaceProps, BackgroundProps, BorderProps, ShadowProps, PositionProps, FlexboxProps {
interface Box
extends React.HTMLAttributes<any>,
LayoutProps,
SpaceProps,
BackgroundProps,
BorderProps,
ShadowProps,
PositionProps,
FlexboxProps {
as?: keyof JSX.IntrinsicElements;
}

@@ -28,7 +36,7 @@ const borderColor = system({
},
});

const Box = styled.div<Box>(
const Box = styled.div(
{
boxSizing: 'border-box',
minWidth: 0,
@@ -44,7 +52,8 @@ const Box = styled.div<Box>(
boxShadow,
position
)
);
) as React.FC<Box>;

Box.displayName = 'Box';
export {Box};
export * from './SafelySpreadProps';
@@ -9,7 +9,7 @@
],
"references": [
{
"path": "../../../paste-types"
"path": "../../../paste-style-props"
}
]
}

0 comments on commit dc9f7fb

Please sign in to comment.
You can’t perform that action at this time.