Ability to set default shouldForwardProp or expose to extended components #1394
Description
UPDATED TO REFLECT MORE ACCURATE ISSUE
The problem
I would love the ability to set a default shouldForwardProp value, project wide by either a simplistic factory extension or via a theme. Currently when I set the shouldForwardProp value on a styled div it works great. However if I extend that styled component to form another one leveraging the withComponent helper, that shouldForwardProp value is not exposed to that new styled component and I need to set it again.
ie:
import { css } from '@emotion/core';
import styled from '@emotion/styled';
import * as styledSystem from 'styled-system';
import { COLORS, fontAR, shouldForwardProp } from '../../constants/styles';
const baseStyle = css`
${fontAR};
font-size: 14px;
line-height: 1.43;
`;
const smallStyle = css`
font-size: 12px;
line-height: 1.67;
`;
const largeStyle = css`
font-size: 16px;
line-height: 1.91;
`;
const boldStyle = css`
font-family: Avenir;
font-weight: 900;
`;
const styleMap = {
small: smallStyle,
large: largeStyle,
bold: boldStyle,
};
interface ParagraphProps
extends styledSystem.ColorProps,
styledSystem.FontFamilyProps,
styledSystem.FontSizeProps,
styledSystem.FontWeightProps,
styledSystem.HeightProps,
styledSystem.LetterSpacingProps,
styledSystem.LineHeightProps,
styledSystem.SpaceProps,
styledSystem.TextAlignProps,
styledSystem.WidthProps {
color?: COLORS;
size?: string;
}
export const Paragraph = styled('p', { shouldForwardProp })<ParagraphProps>`
${baseStyle}
${styledSystem.color}
${styledSystem.fontFamily}
${styledSystem.fontSize};
${styledSystem.fontWeight}
${styledSystem.height}
${styledSystem.letterSpacing}
${styledSystem.lineHeight}
${styledSystem.space}
${styledSystem.textAlign}
${styledSystem.width}
${props => (props.size ? styleMap[props.size] : null)}
`;
const Label = styled(Paragraph)`
color: ${COLORS.slate};
display: flex;
align-items: center;
margin-bottom: 4px;
`.withComponent('label');
Now Label does not know to exclude any props that are a result of the imported function which works as intended in the Paragraph component.
Proposed solution
- Add the ability in the core code to consume the underlying shouldForwardProp value if a styled component is extending another styled component combined with
withComponent.
It works if you use the as prop but my intention is to not need to remember to add that additional prop anytime I want to use the new Label component