Skip to content
Permalink
Browse files

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

Use the style-props package over the types package

Create a method to be able to safely spread props onto the Text
component without restyling compositions using Text
  • Loading branch information
SiTaggart committed Dec 14, 2019
1 parent 2bc21e9 commit 29da81ffb15bb2d97ed383d5110991a878cbe87b
@@ -0,0 +1,26 @@
import {safelySpreadTextProps} from '../src/SafelySpreadProps';

const badProps = {
foo: 'bar',
textColor: 'textColorSuccess',
};

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

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

it('should filter out bad props', () => {
expect(safelySpreadTextProps(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",
"rollup": "^1.16.2",
"rollup-plugin-babel": "^4.3.3",
"rollup-plugin-commonjs": "^10.0.1",
@@ -0,0 +1,24 @@
import {SPACE_PROPS, TYPOGRAPHY_PROPS, OVERFLOW_PROPS} from '@twilio-paste/style-props';

export const TEXT_PROPS_TO_BLOCK = [
...SPACE_PROPS,
...TYPOGRAPHY_PROPS,
...OVERFLOW_PROPS,
'display',
'textColor',
'verticalAlign',
'className',
'style',
];

export const safelySpreadTextProps = (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 (!TEXT_PROPS_TO_BLOCK.includes(key)) {
// eslint-disable-next-line no-param-reassign
newObj[key] = props[key];
}
return newObj;
}, {});
return newList;
};
@@ -1,9 +1,9 @@
import styled from '@emotion/styled';
import {compose, space, display, verticalAlign, overflow, typography, system} from 'styled-system';
import {SpaceProps, Display, VerticalAlign, OverflowProps, TypographyProps} from '@twilio-paste/types';
import {SpaceProps, Display, VerticalAlign, OverflowProps, TypographyProps} from '@twilio-paste/style-props';

interface Text extends SpaceProps, OverflowProps, TypographyProps {
as?: keyof JSX.IntrinsicElements;
interface Text extends React.HTMLAttributes<any>, SpaceProps, OverflowProps, TypographyProps {
as: keyof JSX.IntrinsicElements;
display?: Display;
verticalAlign?: VerticalAlign;
}
@@ -16,7 +16,7 @@ const textColor = system({
});
const textDecoration = system({textDecoration: true});

const Text = styled.span<Text>(
const Text = styled.span(
{
margin: 0,
padding: 0,
@@ -30,7 +30,12 @@ const Text = styled.span<Text>(
typography,
textColor
)
);
// we do this because the default typings of emotion styled
// means Text gets typed as a span, and can't be extended
// correctly to utilise the as prop. The new HTML element attributes
// always clash with the span html attributes. To override this,
// we retype as a basic functional component which is easy to extend
) as React.FC<Text>;

Text.defaultProps = {
fontSize: 'fontSize30',
@@ -40,3 +45,4 @@ Text.defaultProps = {

Text.displayName = 'Text';
export {Text};
export * from './SafelySpreadProps';
@@ -20,7 +20,7 @@ import {
WhiteSpace,
Padding,
Margin,
} from '@twilio-paste/types';
} from '@twilio-paste/style-props';
import {Text} from '../src';

const fontSizeOptions = Object.keys(DefaultTheme.fontSizes);
@@ -9,7 +9,7 @@
],
"references": [
{
"path": "../../../paste-types"
"path": "../../../paste-style-props"
}
]
}

0 comments on commit 29da81f

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