vhad/DefinitelyTyped
1
0
Fork 0
mirror of https://github.com/gosticks/DefinitelyTyped.git synced 2026-07-08 03:00:02 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #33946 from threehams/styled-system-longhand

Browse Source 
[styled-system] Add longhand padding/margin to SpaceProps.
This commit is contained in:
Eloy Durán
2019-03-18 16:21:27 +01:00
committed by GitHub
parent 5ece0cf9a8 19fee9984b
commit 088bc45092
2 changed files with 44 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
types/styled-system/index.d.ts vendored
View File

@@ -1,4 +1,4 @@
// Type definitions for styled-system 3.2
// Type definitions for styled-system 4.0
// Project: https://github.com/jxnblk/styled-system#readme
// Definitions by: Marshall Bowers <https://github.com/maxdeviant>
// Ben McCormick <https://github.com/phobon>
@@ -51,7 +51,7 @@ export type TLengthStyledSystem = string | 0 | number;
export type ResponsiveValue<T> = T | Array<T | null> | { [key: string]: T };
/**
* Converts shorthand margin and padding props to margin and padding CSS declarations
* Converts shorthand or longhand margin and padding props to margin and padding CSS declarations
*
* - Numbers from 0-4 (or the length of theme.space) are converted to values on the spacing scale.
* - Negative values can be used for negative margins.
@@ -59,32 +59,51 @@ export type ResponsiveValue<T> = T | Array<T | null> | { [key: string]: T };
* - String values are passed as raw CSS values.
* - Array values are converted into responsive values.
*/
export interface SpaceProps<TLength = TLengthStyledSystem> {
/** Margin on top, left, bottom and right */
m?: ResponsiveValue<CSS.MarginProperty<TLength>>;
/** Margin on top, left, bottom and right */
margin?: ResponsiveValue<CSS.MarginProperty<TLength>>;
/** Margin for the top */
mt?: ResponsiveValue<CSS.MarginTopProperty<TLength>>;
/** Margin for the top */
marginTop?: ResponsiveValue<CSS.MarginTopProperty<TLength>>;
/** Margin for the right */
mr?: ResponsiveValue<CSS.MarginRightProperty<TLength>>;
/** Margin for the right */
marginRight?: ResponsiveValue<CSS.MarginRightProperty<TLength>>;
/** Margin for the bottom */
mb?: ResponsiveValue<CSS.MarginBottomProperty<TLength>>;
/** Margin for the bottom */
marginBottom?: ResponsiveValue<CSS.MarginBottomProperty<TLength>>;
/** Margin for the left */
ml?: ResponsiveValue<CSS.MarginLeftProperty<TLength>>;
/** Margin for the left */
marginLeft?: ResponsiveValue<CSS.MarginLeftProperty<TLength>>;
/** Margin for the left and right */
mx?: ResponsiveValue<CSS.PaddingProperty<TLength>>;
/** Margin for the top and bottom */
my?: ResponsiveValue<CSS.PaddingProperty<TLength>>;
/** Padding on top, left, bottom and right */
p?: ResponsiveValue<CSS.PaddingProperty<TLength>>;
/** Padding on top, left, bottom and right */
padding?: ResponsiveValue<CSS.PaddingProperty<TLength>>;
/** Padding for the top */
pt?: ResponsiveValue<CSS.PaddingTopProperty<TLength>>;
/** Padding for the top */
paddingTop?: ResponsiveValue<CSS.PaddingTopProperty<TLength>>;
/** Padding for the right */
pr?: ResponsiveValue<CSS.PaddingRightProperty<TLength>>;
/** Padding for the right */
paddingRight?: ResponsiveValue<CSS.PaddingRightProperty<TLength>>;
/** Padding for the bottom */
pb?: ResponsiveValue<CSS.PaddingBottomProperty<TLength>>;
/** Padding for the bottom */
paddingBottom?: ResponsiveValue<CSS.PaddingBottomProperty<TLength>>;
/** Padding for the left */
pl?: ResponsiveValue<CSS.PaddingLeftProperty<TLength>>;
/** Padding for the left */
paddingLeft?: ResponsiveValue<CSS.PaddingLeftProperty<TLength>>;
/** Padding for the left and right */
px?: ResponsiveValue<CSS.PaddingProperty<TLength>>;
/** Padding for the top and bottom */

22
types/styled-system/styled-system-tests.tsx
View File

@@ -328,8 +328,30 @@ const test = () => (
<Box fontSize={{ sm: 2, md: 3, lg: 4 }} />
// responsive margin
<Box m={[1, 2, 3]} />
<Box ml={[1, 2, 3]} />
<Box mr={[1, 2, 3]} />
<Box mt={[1, 2, 3]} />
<Box mb={[1, 2, 3]} />
<Box mx={[1, 2, 3]} />
<Box my={[1, 2, 3]} />
<Box margin={[1, 2, 3]} />
<Box marginLeft={[1, 2, 3]} />
<Box marginRight={[1, 2, 3]} />
<Box marginTop={[1, 2, 3]} />
<Box marginBottom={[1, 2, 3]} />
// responsive padding
<Box p={[1, 2, 3]} />
<Box pl={[1, 2, 3]} />
<Box pr={[1, 2, 3]} />
<Box pt={[1, 2, 3]} />
<Box pb={[1, 2, 3]} />
<Box px={[1, 2, 3]} />
<Box py={[1, 2, 3]} />
<Box padding={[1, 2, 3]} />
<Box paddingLeft={[1, 2, 3]} />
<Box paddingRight={[1, 2, 3]} />
<Box paddingTop={[1, 2, 3]} />
<Box paddingBottom={[1, 2, 3]} />
<Box p={{ sm: 1, md: 2, lg: 3 }} />
// examples (margin prop) // sets margin value of `theme.space[2]`
<Box m={2} />