mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-10-05 23:37:04 +00:00
styled-system: Add individual border and overflow props (#37573)
* Add overflowX and overflowY properties Add @eliseumds as contributor to styled-system * Add individual border props to styled-system * styled-system: bump up the version to 5.1
This commit is contained in:
Eliseu Monar dos Santos
committed by
Pranav Senthilnathan
Pranav Senthilnathan
parent
787107603a
commit
6789a2961f
Vendored
+112
-1
@@ -1,4 +1,4 @@
|
||||
// Type definitions for styled-system 5.0
|
||||
// Type definitions for styled-system 5.1
|
||||
// Project: https://github.com/jxnblk/styled-system#readme
|
||||
// Definitions by: Marshall Bowers <https://github.com/maxdeviant>
|
||||
// Ben McCormick <https://github.com/phobon>
|
||||
@@ -15,6 +15,7 @@
|
||||
// Dhalton Huber <https://github.com/Dhalton>
|
||||
// Elliot Bonneville <https://github.com/elliotbonneville>
|
||||
// Jack Caldwell <https://github.com/jackcaldwell>
|
||||
// Eliseu Monar dos Santos <https://github.com/eliseumds>
|
||||
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
|
||||
// TypeScript Version: 2.8
|
||||
|
||||
@@ -860,6 +861,30 @@ export interface BorderWidthProps<TLength = TLengthStyledSystem> {
|
||||
* [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-width)
|
||||
*/
|
||||
borderWidth?: ResponsiveValue<CSS.BorderWidthProperty<TLength>>;
|
||||
/**
|
||||
* The border-top-width CSS property sets the width of the top border of an element.
|
||||
*
|
||||
* [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-width)
|
||||
*/
|
||||
borderTopWidth?: ResponsiveValue<CSS.BorderTopWidthProperty<TLength>>;
|
||||
/**
|
||||
* The border-bottom-width CSS property sets the width of the bottom border of an element.
|
||||
*
|
||||
* [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width)
|
||||
*/
|
||||
borderBottomWidth?: ResponsiveValue<CSS.BorderBottomWidthProperty<TLength>>;
|
||||
/**
|
||||
* The border-left-width CSS property sets the width of the left border of an element.
|
||||
*
|
||||
* [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width)
|
||||
*/
|
||||
borderLeftWidth?: ResponsiveValue<CSS.BorderLeftWidthProperty<TLength>>;
|
||||
/**
|
||||
* The border-right-width CSS property sets the width of the right border of an element.
|
||||
*
|
||||
* [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width)
|
||||
*/
|
||||
borderRightWidth?: ResponsiveValue<CSS.BorderRightWidthProperty<TLength>>;
|
||||
}
|
||||
|
||||
export const borderWidth: styleFn;
|
||||
@@ -871,6 +896,30 @@ export interface BorderStyleProps {
|
||||
* [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style)
|
||||
*/
|
||||
borderStyle?: ResponsiveValue<CSS.BorderStyleProperty>;
|
||||
/**
|
||||
* The border-top-style CSS property sets the line style of an element's top border.
|
||||
*
|
||||
* [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style)
|
||||
*/
|
||||
borderTopStyle?: ResponsiveValue<CSS.BorderTopStyleProperty>;
|
||||
/**
|
||||
* The border-bottom-style CSS property sets the line style of an element's bottom border.
|
||||
*
|
||||
* [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style)
|
||||
*/
|
||||
borderBottomStyle?: ResponsiveValue<CSS.BorderBottomStyleProperty>;
|
||||
/**
|
||||
* The border-left-style CSS property sets the line style of an element's left border.
|
||||
*
|
||||
* [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style)
|
||||
*/
|
||||
borderLeftStyle?: ResponsiveValue<CSS.BorderLeftStyleProperty>;
|
||||
/**
|
||||
* The border-right-style CSS property sets the line style of an element's right border.
|
||||
*
|
||||
* [MDN * reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style)
|
||||
*/
|
||||
borderRightStyle?: ResponsiveValue<CSS.BorderRightStyleProperty>;
|
||||
}
|
||||
|
||||
export const borderStyle: styleFn;
|
||||
@@ -882,6 +931,30 @@ export interface BorderColorProps {
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
|
||||
*/
|
||||
borderColor?: ResponsiveValue<CSS.BorderColorProperty>;
|
||||
/**
|
||||
* The border-top-color CSS property sets the color of an element's top border. It can also be set with the shorthand CSS properties border-color or border-top.
|
||||
*
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
|
||||
*/
|
||||
borderTopColor?: ResponsiveValue<CSS.BorderTopColorProperty>;
|
||||
/**
|
||||
* The border-bottom-color CSS property sets the color of an element's bottom border. It can also be set with the shorthand CSS properties border-color or border-bottom.
|
||||
*
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
|
||||
*/
|
||||
borderBottomColor?: ResponsiveValue<CSS.BorderBottomColorProperty>;
|
||||
/**
|
||||
* The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties border-color or border-left.
|
||||
*
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
|
||||
*/
|
||||
borderLeftColor?: ResponsiveValue<CSS.BorderLeftColorProperty>;
|
||||
/**
|
||||
* The border-right-color CSS property sets the color of an element's right border. It can also be set with the shorthand CSS properties border-color or border-right.
|
||||
*
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
|
||||
*/
|
||||
borderRightColor?: ResponsiveValue<CSS.BorderRightColorProperty>;
|
||||
}
|
||||
|
||||
export const borderColor: styleFn;
|
||||
@@ -942,6 +1015,30 @@ export interface BorderRadiusProps<TLength = TLengthStyledSystem> {
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
|
||||
*/
|
||||
borderRadius?: ResponsiveValue<CSS.BorderRadiusProperty<TLength>>;
|
||||
/**
|
||||
* The border-top-left-radius CSS property rounds the top-left corner of an element.
|
||||
*
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius)
|
||||
*/
|
||||
borderTopLeftRadius?: ResponsiveValue<CSS.BorderTopLeftRadiusProperty<TLength>>;
|
||||
/**
|
||||
* The border-top-right-radius CSS property rounds the top-right corner of an element.
|
||||
*
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-right-radius)
|
||||
*/
|
||||
borderTopRightRadius?: ResponsiveValue<CSS.BorderTopRightRadiusProperty<TLength>>;
|
||||
/**
|
||||
* The border-bottom-left-radius CSS property rounds the bottom-left corner of an element.
|
||||
*
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-left-radius)
|
||||
*/
|
||||
borderBottomLeftRadius?: ResponsiveValue<CSS.BorderBottomLeftRadiusProperty<TLength>>;
|
||||
/**
|
||||
* The border-bottom-right-radius CSS property rounds the bottom-right corner of an element.
|
||||
*
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-right-radius)
|
||||
*/
|
||||
borderBottomRightRadius?: ResponsiveValue<CSS.BorderBottomRightRadiusProperty<TLength>>;
|
||||
}
|
||||
|
||||
export const borderRadius: styleFn;
|
||||
@@ -1030,6 +1127,20 @@ export interface OverflowProps {
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)
|
||||
*/
|
||||
overflow?: ResponsiveValue<CSS.OverflowProperty>;
|
||||
/**
|
||||
* The overflow-x CSS property sets what shows when content overflows a block-level element's left
|
||||
* and right edges. This may be nothing, a scroll bar, or the overflow content.
|
||||
*
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x)
|
||||
*/
|
||||
overflowX?: ResponsiveValue<CSS.OverflowXProperty>;
|
||||
/**
|
||||
* The overflow-y CSS property sets what shows when content overflows a block-level element's top
|
||||
* and bottom edges. This may be nothing, a scroll bar, or the overflow content.
|
||||
*
|
||||
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y)
|
||||
*/
|
||||
overflowY?: ResponsiveValue<CSS.OverflowYProperty>;
|
||||
}
|
||||
|
||||
export const overflow: styleFn;
|
||||
|
||||
@@ -38,6 +38,8 @@ import {
|
||||
GridProps,
|
||||
shadow,
|
||||
ShadowProps,
|
||||
overflow,
|
||||
OverflowProps,
|
||||
} from 'styled-system';
|
||||
|
||||
// tslint:disable-next-line:strict-export-declare-modifiers
|
||||
@@ -59,7 +61,8 @@ interface BoxProps
|
||||
ShadowProps,
|
||||
TypographyProps,
|
||||
ColorStyleProps,
|
||||
ColorProps {
|
||||
ColorProps,
|
||||
OverflowProps {
|
||||
boxStyle?: string;
|
||||
}
|
||||
|
||||
@@ -77,7 +80,8 @@ const boxStyles = compose(
|
||||
position,
|
||||
shadow,
|
||||
colorStyle,
|
||||
boxStyle
|
||||
boxStyle,
|
||||
overflow,
|
||||
);
|
||||
|
||||
const Box: React.ComponentType<BoxProps> = styled(boxStyles);
|
||||
@@ -324,15 +328,43 @@ const test = () => (
|
||||
<Box alignSelf="center" />
|
||||
<Box alignSelf={['center']} />
|
||||
<Box alignSelf={{ sm: 'center' }} />
|
||||
|
||||
<Box border="1px solid" />
|
||||
<Box borderTop="1px solid" />
|
||||
<Box borderRight="1px solid" />
|
||||
<Box borderBottom="1px solid" />
|
||||
<Box borderLeft="1px solid" />
|
||||
// borderColor
|
||||
<Box border={{ sm: '1px solid' }} />
|
||||
<Box borderWidth={15} />
|
||||
<Box borderWidth="10px" />
|
||||
<Box borderWidth={{ sm: 15}} />
|
||||
<Box borderColor="blue" />
|
||||
// borderRadius
|
||||
<Box borderColor={{ sm: 'blue' }} />
|
||||
<Box borderRadius={4} />
|
||||
<Box borderRadius="1rem" />
|
||||
<Box borderRadius={{ sm: 4 }} />
|
||||
<Box borderTopLeftRadius={4} />
|
||||
<Box borderTopLeftRadius={4} />
|
||||
<Box borderTopRightRadius={{ sm: 5, md: '10px' }} />
|
||||
<Box borderBottomLeftRadius="250px 100px" />
|
||||
<Box borderBottomRightRadius="50%" />
|
||||
|
||||
<Box borderTop="1px solid" />
|
||||
<Box borderTopStyle="dashed" />
|
||||
<Box borderTopWidth="10rem" />
|
||||
<Box borderTopColor="transparent" />
|
||||
|
||||
<Box borderRight="1px solid" />
|
||||
<Box borderRightStyle={{ sm: 'none' }} />
|
||||
<Box borderRightWidth={{ sm: 5, md: 10 }} />
|
||||
<Box borderRightColor={{ sm: 'blue', md: 'green' }} />
|
||||
|
||||
<Box borderBottom="1px solid" />
|
||||
<Box borderBottomStyle="solid" />
|
||||
<Box borderBottomWidth={3} />
|
||||
<Box borderBottomColor="#09c" />
|
||||
|
||||
<Box borderLeft="1px solid" />
|
||||
<Box borderLeftStyle="inset" />
|
||||
<Box borderLeftWidth="10px" />
|
||||
<Box borderLeftColor="rgba(0,0,0,0.25)" />
|
||||
|
||||
// position (responsive)
|
||||
<Box position="absolute" />
|
||||
<Box position={['absolute']} />
|
||||
@@ -383,6 +415,10 @@ const test = () => (
|
||||
<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]} />
|
||||
// overflow
|
||||
<Box overflow="hidden" />
|
||||
<Box overflowX="auto" />
|
||||
<Box overflowY="scroll" />
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user