Add missing props to Margin and Padding (#35158)

This commit is contained in:
Pedro Duarte
2019-05-02 17:05:05 -07:00
committed by Wesley Wigham
parent ed08836b1d
commit f6fc4976b4
2 changed files with 31 additions and 3 deletions
+2 -2
View File
@@ -127,7 +127,7 @@ export interface SpaceProps<TLength = TLengthStyledSystem> {
export const space: styleFn;
export interface MarginProps extends Pick<SpaceProps, 'm' | 'margin' | 'mt' | 'marginTop' | 'mb' | 'marginBottom' | 'ml' | 'marginLeft' | 'mr' | 'marginRight'> {}
export interface MarginProps extends Pick<SpaceProps, 'm' | 'margin' | 'mt' | 'marginTop' | 'mb' | 'marginBottom' | 'ml' | 'marginLeft' | 'mr' | 'marginRight' | 'my' | 'mx'> {}
export interface MarginTopProps extends Pick<SpaceProps, 'mt' | 'marginTop'> {}
export interface MarginBottomProps extends Pick<SpaceProps, 'mb' | 'marginBottom'> {}
export interface MarginLeftProps extends Pick<SpaceProps, 'ml' | 'marginLeft'> {}
@@ -139,7 +139,7 @@ export const marginBottom: styleFn;
export const marginLeft: styleFn;
export const marginRight: styleFn;
export interface PaddingProps extends Pick<SpaceProps, 'p' | 'padding' | 'pt' | 'paddingTop' | 'pb' | 'paddingBottom' | 'pl' | 'paddingLeft' | 'pr' | 'paddingRight'> {}
export interface PaddingProps extends Pick<SpaceProps, 'p' | 'padding' | 'pt' | 'paddingTop' | 'pb' | 'paddingBottom' | 'pl' | 'paddingLeft' | 'pr' | 'paddingRight' | 'py' | 'px'> {}
export interface PaddingTopProps extends Pick<SpaceProps, 'pt' | 'paddingTop'> {}
export interface PaddingBottomProps extends Pick<SpaceProps, 'pb' | 'paddingBottom'> {}
export interface PaddingLeftProps extends Pick<SpaceProps, 'pl' | 'paddingLeft'> {}
+29 -1
View File
@@ -73,8 +73,8 @@ import {
GridRowGapProps,
GridRowProps,
gridTemplateColumns,
gridTemplateRows,
GridTemplateColumnsProps,
gridTemplateRows,
GridTemplateRowsProps,
height,
HeightProps,
@@ -90,6 +90,8 @@ import {
LetterSpacingProps,
lineHeight,
LineHeightProps,
margin,
MarginProps,
maxHeight,
MaxHeightProps,
maxWidth,
@@ -98,6 +100,8 @@ import {
MinHeightProps,
minWidth,
MinWidthProps,
padding,
PaddingProps,
position,
PositionProps,
right,
@@ -290,6 +294,15 @@ const TestButton: React.ComponentType<ButtonProps> = styled`
${styles.textColor}
`;
interface SpacerProps
extends MarginProps,
PaddingProps {}
const Spacer: React.ComponentType<SpacerProps> = styled`
${margin};
${padding};
`;
const test = () => (
<div>
// width: 50%
@@ -546,6 +559,19 @@ const test = () => (
<Box borderLeft={["1px solid red", "2px solid red"]} />
<TestButton variant="primary" m={2} color="tomato" />
<Spacer m={[1, 2, 3]} p={[1, 2, 3]} />
<Spacer ml={[1, 2, 3]} pl={[1, 2, 3]} />
<Spacer mr={[1, 2, 3]} pr={[1, 2, 3]} />
<Spacer mt={[1, 2, 3]} pt={[1, 2, 3]} />
<Spacer mb={[1, 2, 3]} pb={[1, 2, 3]} />
<Spacer mx={[1, 2, 3]} px={[1, 2, 3]} />
<Spacer my={[1, 2, 3]} py={[1, 2, 3]} />
<Spacer margin={[1, 2, 3]} padding={[1, 2, 3]} />
<Spacer marginLeft={[1, 2, 3]} paddingLeft={[1, 2, 3]} />
<Spacer marginRight={[1, 2, 3]} paddingRight={[1, 2, 3]} />
<Spacer marginTop={[1, 2, 3]} paddingTop={[1, 2, 3]} />
<Spacer marginBottom={[1, 2, 3]} paddingBottom={[1, 2, 3]} />
</div>
);
@@ -678,10 +704,12 @@ export const justifySelfPropTypes = justifySelf.propTypes;
export const leftPropTypes = left.propTypes;
export const letterSpacingPropTypes = letterSpacing.propTypes;
export const lineHeightPropTypes = lineHeight.propTypes;
export const marginPropTypes = margin.propTypes;
export const maxHeightPropTypes = maxHeight.propTypes;
export const maxWidthPropTypes = maxWidth.propTypes;
export const minHeightPropTypes = minHeight.propTypes;
export const minWidthPropTypes = minWidth.propTypes;
export const paddingPropTypes = padding.propTypes;
export const positionPropTypes = position.propTypes;
export const rightPropTypes = right.propTypes;
export const sizePropTypes = size.propTypes;