Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(typing): Support any valid number for utility props that needs it #357

Merged
merged 6 commits into from
Apr 12, 2022
Merged

fix(typing): Support any valid number for utility props that needs it #357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ee127a1
impr(borders): add typings for the borders namespace
kamalbennani-aircall Mar 15, 2022
af065e2
impr(flexboxes): add typings for the flexboxes namespace
kamalbennani-aircall Mar 15, 2022
8b21457
impr(layout): add typings for the layout namespace
kamalbennani-aircall Mar 15, 2022
c654c7b
impr(sizing): add typings for the sizing namespace
kamalbennani-aircall Mar 15, 2022
d2d51f9
impr(space): add typings for the space namespace
kamalbennani-aircall Mar 15, 2022
8deae1b
impr(typography): add typings for the typography namespace
kamalbennani-aircall Mar 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 29 additions & 14 deletions packages/system/src/styles/borders.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,39 +49,45 @@ export const getBorderStyle = themeGetter<ThemeBorderStyle>({
// Border

export interface BorderProps<T extends ITheme = Theme> {
border?: SystemProp<ThemeBorder<T> | CSS.Property.Border, T>
border?: SystemProp<ThemeBorder<T> | number | CSS.Property.Border, T>
}
export const border = style<BorderProps>({
prop: 'border',
themeGet: getBorder,
})

export interface BorderTopProps<T extends ITheme = Theme> {
borderTop?: SystemProp<ThemeBorder<T> | CSS.Property.BorderTop, T>
borderTop?: SystemProp<ThemeBorder<T> | number | CSS.Property.BorderTop, T>
}
export const borderTop = style<BorderTopProps>({
prop: 'borderTop',
themeGet: getBorder,
})

export interface BorderRightProps<T extends ITheme = Theme> {
borderRight?: SystemProp<ThemeBorder<T> | CSS.Property.BorderRight, T>
borderRight?: SystemProp<
ThemeBorder<T> | number | CSS.Property.BorderRight,
T
>
}
export const borderRight = style<BorderRightProps>({
prop: 'borderRight',
themeGet: getBorder,
})

export interface BorderBottomProps<T extends ITheme = Theme> {
borderBottom?: SystemProp<ThemeBorder<T> | CSS.Property.BorderBottom, T>
borderBottom?: SystemProp<
ThemeBorder<T> | number | CSS.Property.BorderBottom,
T
>
}
export const borderBottom = style<BorderBottomProps>({
prop: 'borderBottom',
themeGet: getBorder,
})

export interface BorderLeftProps<T extends ITheme = Theme> {
borderLeft?: SystemProp<ThemeBorder<T> | CSS.Property.BorderLeft, T>
borderLeft?: SystemProp<ThemeBorder<T> | number | CSS.Property.BorderLeft, T>
}
export const borderLeft = style<BorderLeftProps>({
prop: 'borderLeft',
Expand Down Expand Up @@ -135,7 +141,10 @@ export const borderLeftColor = style<BorderLeftColorProps>({
})

export interface BorderWidthProps<T extends ITheme = Theme> {
borderWidth?: SystemProp<ThemeBorderWidth<T> | CSS.Property.BorderWidth, T>
borderWidth?: SystemProp<
ThemeBorderWidth<T> | number | CSS.Property.BorderWidth,
T
>
}
export const borderWidth = style<BorderWidthProps>({
prop: 'borderWidth',
Expand All @@ -144,7 +153,7 @@ export const borderWidth = style<BorderWidthProps>({

export interface BorderTopWidthProps<T extends ITheme = Theme> {
borderTopWidth?: SystemProp<
ThemeBorderWidth<T> | CSS.Property.BorderTopWidth,
ThemeBorderWidth<T> | number | CSS.Property.BorderTopWidth,
T
>
}
Expand All @@ -155,7 +164,7 @@ export const borderTopWidth = style<BorderTopWidthProps>({

export interface BorderRightWidthProps<T extends ITheme = Theme> {
borderRightWidth?: SystemProp<
ThemeBorderWidth<T> | CSS.Property.BorderRightWidth,
ThemeBorderWidth<T> | number | CSS.Property.BorderRightWidth,
T
>
}
Expand All @@ -166,7 +175,7 @@ export const borderRightWidth = style<BorderRightWidthProps>({

export interface BorderBottomWidthProps<T extends ITheme = Theme> {
borderBottomWidth?: SystemProp<
ThemeBorderWidth<T> | CSS.Property.BorderBottomWidth,
ThemeBorderWidth<T> | number | CSS.Property.BorderBottomWidth,
T
>
}
Expand All @@ -177,7 +186,7 @@ export const borderBottomWidth = style<BorderBottomWidthProps>({

export interface BorderLeftWidthProps<T extends ITheme = Theme> {
borderLeftWidth?: SystemProp<
ThemeBorderWidth<T> | CSS.Property.BorderLeftWidth,
ThemeBorderWidth<T> | number | CSS.Property.BorderLeftWidth,
T
>
}
Expand Down Expand Up @@ -248,7 +257,7 @@ export const borderLeftStyle = style<BorderLeftStyleProps>({
// Outline

export interface OutlineProps<T extends ITheme = Theme> {
outline?: SystemProp<ThemeBorder<T> | CSS.Property.Outline, T>
outline?: SystemProp<ThemeBorder<T> | number | CSS.Property.Outline, T>
}
export const outline = style<OutlineProps>({
prop: 'outline',
Expand All @@ -264,7 +273,10 @@ export const outlineColor = style<OutlineColorProps>({
})

export interface OutlineWidthProps<T extends ITheme = Theme> {
outlineWidth?: SystemProp<ThemeBorderWidth<T> | CSS.Property.OutlineWidth, T>
outlineWidth?: SystemProp<
ThemeBorderWidth<T> | number | CSS.Property.OutlineWidth,
T
>
}
export const outlineWidth = style<OutlineWidthProps>({
prop: 'outlineWidth',
Expand Down Expand Up @@ -293,7 +305,10 @@ export const getRadius = themeGetter<ThemeRadius>({
})

export interface BorderRadiusProps<T extends ITheme = Theme> {
borderRadius?: SystemProp<ThemeRadius<T> | CSS.Property.BorderRadius, T>
borderRadius?: SystemProp<
ThemeRadius<T> | number | CSS.Property.BorderRadius,
T
>
}
export const borderRadius = style<BorderRadiusProps>({
prop: 'borderRadius',
Expand Down Expand Up @@ -408,7 +423,7 @@ export const getRingWidth = themeGetter<ThemeRingWidth>({
})

export interface RingProps<T extends ITheme = Theme> {
ring?: SystemProp<ThemeRingWidth<T>, T>
ring?: SystemProp<ThemeRingWidth<T> | number, T>
}
export const ring = style<RingProps>({
prop: 'ring',
Expand Down
2 changes: 1 addition & 1 deletion packages/system/src/styles/flexboxes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const flexShrink = style<FlexShrinkProps>({
})

export interface FlexBasisProps<T extends ITheme = Theme> {
flexBasis?: SystemProp<CSS.Property.FlexBasis, T>
flexBasis?: SystemProp<CSS.Property.FlexBasis | number, T>
}
export const flexBasis = style<FlexBasisProps>({
prop: 'flexBasis',
Expand Down
8 changes: 4 additions & 4 deletions packages/system/src/styles/layout.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,31 +112,31 @@ export const getInset = themeGetter<ThemeInset>({
})

export interface TopProps<T extends ITheme = Theme> {
top?: SystemProp<ThemeInset<T> | CSS.Property.Top, T>
top?: SystemProp<ThemeInset<T> | number | CSS.Property.Top, T>
}
export const top = style<TopProps>({
prop: 'top',
themeGet: getInset,
})

export interface RightProps<T extends ITheme = Theme> {
right?: SystemProp<ThemeInset<T> | CSS.Property.Right, T>
right?: SystemProp<ThemeInset<T> | number | CSS.Property.Right, T>
}
export const right = style<RightProps>({
prop: 'right',
themeGet: getInset,
})

export interface BottomProps<T extends ITheme = Theme> {
bottom?: SystemProp<ThemeInset<T> | CSS.Property.Bottom, T>
bottom?: SystemProp<ThemeInset<T> | number | CSS.Property.Bottom, T>
}
export const bottom = style<BottomProps>({
prop: 'bottom',
themeGet: getInset,
})

export interface LeftProps<T extends ITheme = Theme> {
left?: SystemProp<ThemeInset<T> | CSS.Property.Left, T>
left?: SystemProp<ThemeInset<T> | number | CSS.Property.Left, T>
}
export const left = style<LeftProps>({
prop: 'left',
Expand Down
14 changes: 7 additions & 7 deletions packages/system/src/styles/sizing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const getSize = themeGetter<ThemeSize>({
// Styles

export interface WidthProps<T extends ITheme = Theme> {
w?: SystemProp<ThemeSize<T> | CSS.Property.Width, T>
w?: SystemProp<ThemeSize<T> | number | CSS.Property.Width, T>
}
export const width = style<WidthProps>({
prop: 'w',
Expand All @@ -27,7 +27,7 @@ export const width = style<WidthProps>({
})

export interface HeightProps<T extends ITheme = Theme> {
h?: SystemProp<ThemeSize<T> | CSS.Property.Height, T>
h?: SystemProp<ThemeSize<T> | number | CSS.Property.Height, T>
}
export const height = style<HeightProps>({
prop: 'h',
Expand All @@ -36,7 +36,7 @@ export const height = style<HeightProps>({
})

type MaxWidthProp<T extends ITheme> = SystemProp<
ThemeSize<T> | CSS.Property.MaxWidth,
ThemeSize<T> | number | CSS.Property.MaxWidth,
T
>
export interface MaxWidthProps<T extends ITheme = Theme> {
Expand All @@ -50,7 +50,7 @@ export const maxWidth = style<MaxWidthProps>({
})

type MaxHeightProp<T extends ITheme> = SystemProp<
ThemeSize<T> | CSS.Property.MaxHeight,
ThemeSize<T> | number | CSS.Property.MaxHeight,
T
>
export interface MaxHeightProps<T extends ITheme = Theme> {
Expand All @@ -64,7 +64,7 @@ export const maxHeight = style<MaxHeightProps>({
})

export interface MinWidthProps<T extends ITheme = Theme> {
minWidth?: SystemProp<ThemeSize<T> | CSS.Property.MinWidth, T>
minWidth?: SystemProp<ThemeSize<T> | number | CSS.Property.MinWidth, T>
}
export const minWidth = style<MinWidthProps>({
prop: ['minWidth', 'minW'],
Expand All @@ -73,7 +73,7 @@ export const minWidth = style<MinWidthProps>({
})

type MinHeightProp<T extends ITheme> = SystemProp<
ThemeSize<T> | CSS.Property.MinHeight,
ThemeSize<T> | number | CSS.Property.MinHeight,
T
>
export interface MinHeightProps<T extends ITheme = Theme> {
Expand All @@ -87,7 +87,7 @@ export const minHeight = style<MinHeightProps>({
})

export interface MaskSizeProps<T extends ITheme = Theme> {
maskSize?: SystemProp<ThemeSize<T> | CSS.Property.MaskSize, T>
maskSize?: SystemProp<ThemeSize<T> | number | CSS.Property.MaskSize, T>
}
export const maskSize = style<MaskSizeProps>({
prop: 'maskSize',
Expand Down
36 changes: 22 additions & 14 deletions packages/system/src/styles/space.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const getSpace = themeGetter<ThemeSpace>({
// Margin

type MarginProp<T extends ITheme> = SystemProp<
ThemeSpace<T> | CSS.Property.Margin,
ThemeSpace<T> | number | CSS.Property.Margin,
T
>
export interface MarginProps<T extends ITheme = Theme> {
Expand All @@ -33,7 +33,7 @@ export const margin = style({
})

type MarginTopProp<T extends ITheme> = SystemProp<
ThemeSpace<T> | CSS.Property.MarginTop,
ThemeSpace<T> | number | CSS.Property.MarginTop,
T
>
export interface MarginTopProps<T extends ITheme = Theme> {
Expand All @@ -47,7 +47,7 @@ export const marginTop = style<MarginTopProps>({
})

type MarginRightProp<T extends ITheme> = SystemProp<
ThemeSpace<T> | CSS.Property.MarginRight,
ThemeSpace<T> | number | CSS.Property.MarginRight,
T
>
export interface MarginRightProps<T extends ITheme = Theme> {
Expand All @@ -61,7 +61,7 @@ export const marginRight = style<MarginRightProps>({
})

type MarginBottomProp<T extends ITheme> = SystemProp<
ThemeSpace<T> | CSS.Property.MarginBottom,
ThemeSpace<T> | number | CSS.Property.MarginBottom,
T
>
export interface MarginBottomProps<T extends ITheme = Theme> {
Expand All @@ -75,7 +75,7 @@ export const marginBottom = style<MarginBottomProps>({
})

type MarginLeftProp<T extends ITheme> = SystemProp<
ThemeSpace<T> | CSS.Property.MarginLeft,
ThemeSpace<T> | number | CSS.Property.MarginLeft,
T
>
export interface MarginLeftProps<T extends ITheme = Theme> {
Expand All @@ -90,7 +90,9 @@ export const marginLeft = style<MarginLeftProps>({

export interface MarginXProps<T extends ITheme = Theme> {
mx?: SystemProp<
ThemeSpace<T> | (CSS.Property.MarginLeft & CSS.Property.MarginRight),
| ThemeSpace<T>
| number
| (CSS.Property.MarginLeft & CSS.Property.MarginRight),
T
>
}
Expand All @@ -102,7 +104,9 @@ export const mx = style<MarginXProps>({

export interface MarginYProps<T extends ITheme = Theme> {
my?: SystemProp<
ThemeSpace<T> | (CSS.Property.MarginTop & CSS.Property.MarginBottom),
| ThemeSpace<T>
| number
| (CSS.Property.MarginTop & CSS.Property.MarginBottom),
T
>
}
Expand All @@ -115,7 +119,7 @@ export const my = style<MarginYProps>({
// Padding

type PaddingProp<T extends ITheme> = SystemProp<
ThemeSpace<T> | CSS.Property.Padding,
ThemeSpace<T> | number | CSS.Property.Padding,
T
>
export interface PaddingProps<T extends ITheme = Theme> {
Expand All @@ -129,7 +133,7 @@ export const padding = style<PaddingProps>({
})

type PaddingTopProp<T extends ITheme> = SystemProp<
ThemeSpace<T> | CSS.Property.PaddingTop,
ThemeSpace<T> | number | CSS.Property.PaddingTop,
T
>
export interface PaddingTopProps<T extends ITheme = Theme> {
Expand All @@ -143,7 +147,7 @@ export const paddingTop = style<PaddingTopProps>({
})

type PaddingRightProp<T extends ITheme> = SystemProp<
ThemeSpace<T> | CSS.Property.PaddingRight,
ThemeSpace<T> | number | CSS.Property.PaddingRight,
T
>
export interface PaddingRightProps<T extends ITheme = Theme> {
Expand All @@ -157,7 +161,7 @@ export const paddingRight = style<PaddingRightProps>({
})

type PaddingBottomProp<T extends ITheme> = SystemProp<
ThemeSpace<T> | CSS.Property.PaddingBottom,
ThemeSpace<T> | number | CSS.Property.PaddingBottom,
T
>
export interface PaddingBottomProps<T extends ITheme = Theme> {
Expand All @@ -171,7 +175,7 @@ export const paddingBottom = style<PaddingBottomProps>({
})

type PaddingLeftProp<T extends ITheme> = SystemProp<
ThemeSpace<T> | CSS.Property.PaddingLeft,
ThemeSpace<T> | number | CSS.Property.PaddingLeft,
T
>
export interface PaddingLeftProps<T extends ITheme = Theme> {
Expand All @@ -186,7 +190,9 @@ export const paddingLeft = style<PaddingLeftProps>({

export interface PaddingXProps<T extends ITheme = Theme> {
px?: SystemProp<
ThemeSpace<T> | (CSS.Property.PaddingLeft & CSS.Property.PaddingRight),
| ThemeSpace<T>
| number
| (CSS.Property.PaddingLeft & CSS.Property.PaddingRight),
T
>
}
Expand All @@ -198,7 +204,9 @@ export const px = style<PaddingXProps>({

export interface PaddingYProps<T extends ITheme = Theme> {
py?: SystemProp<
ThemeSpace<T> | (CSS.Property.PaddingTop & CSS.Property.PaddingBottom),
| ThemeSpace<T>
| number
| (CSS.Property.PaddingTop & CSS.Property.PaddingBottom),
T
>
}
Expand Down
Loading