From 7f0ac7a0257a20158fba6109e1d1b78d8ca504c5 Mon Sep 17 00:00:00 2001 From: Marcin Dziewulski Date: Thu, 11 Apr 2024 12:25:54 +0200 Subject: [PATCH 1/2] feat(box): add support for `border*Width` --- docs/pages/docs/components/box.mdx | 24 ++++++++++++++++++++++++ docs/pages/docs/migration-guide.mdx | 2 +- src/components/Box.tsx | 12 ++++++++++++ 3 files changed, 37 insertions(+), 1 deletion(-) diff --git a/docs/pages/docs/components/box.mdx b/docs/pages/docs/components/box.mdx index b9da552..2972a92 100644 --- a/docs/pages/docs/components/box.mdx +++ b/docs/pages/docs/components/box.mdx @@ -280,6 +280,30 @@ The `Box` component is created using the [React Native View](https://reactnative +#### borderTopWidth + +"]}> + + + +#### borderRightWidth + +"]}> + + + +#### borderBottomWidth + +"]}> + + + +#### borderLeftWidth + +"]}> + + + #### borderColor "]}> diff --git a/docs/pages/docs/migration-guide.mdx b/docs/pages/docs/migration-guide.mdx index 58f609c..00adbff 100644 --- a/docs/pages/docs/migration-guide.mdx +++ b/docs/pages/docs/migration-guide.mdx @@ -23,7 +23,7 @@ The `flex gap` values now define spaces between components (excluding `Columns`, #### Box -Several new props have been added to the `Box` component, including `width`, `height`, `gap`, `rowGap`, `columnGap`, `backgroundColor`, `borderRadius`, `borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomLeftRadius`, `borderBottomRightRadius`, `borderColor`, `borderWidth`, and `debuggable`. +Several new props have been added to the `Box` component, including `width`, `height`, `gap`, `rowGap`, `columnGap`, `backgroundColor`, `borderRadius`, `borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomLeftRadius`, `borderBottomRightRadius`, `borderColor`, `borderWidth`, `borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth`, and `debuggable`. #### Columns diff --git a/src/components/Box.tsx b/src/components/Box.tsx index dfb129c..50c7284 100644 --- a/src/components/Box.tsx +++ b/src/components/Box.tsx @@ -42,6 +42,10 @@ export type BoxProps = ViewProps & { readonly borderBottomLeftRadius?: ResponsiveProp; readonly borderBottomRightRadius?: ResponsiveProp; readonly borderWidth?: ResponsiveProp; + readonly borderTopWidth?: ResponsiveProp; + readonly borderRightWidth?: ResponsiveProp; + readonly borderBottomWidth?: ResponsiveProp; + readonly borderLeftWidth?: ResponsiveProp; readonly borderColor?: ResponsiveProp; readonly width?: ResponsiveProp; readonly height?: ResponsiveProp; @@ -91,6 +95,10 @@ export const Box = React.forwardRef((props, ref) => { borderBottomRightRadius, borderColor, borderWidth, + borderTopWidth, + borderRightWidth, + borderBottomWidth, + borderLeftWidth, style, debuggable = true, ...rest @@ -166,6 +174,10 @@ export const Box = React.forwardRef((props, ref) => { borderBottomLeftRadius: resolveResponsiveProp(borderBottomLeftRadius), borderBottomRightRadius: resolveResponsiveProp(borderBottomRightRadius), borderWidth: resolveResponsiveProp(borderWidth), + borderTopWidth: resolveResponsiveProp(borderTopWidth), + borderRightWidth: resolveResponsiveProp(borderRightWidth), + borderBottomWidth: resolveResponsiveProp(borderBottomWidth), + borderLeftWidth: resolveResponsiveProp(borderLeftWidth), borderColor: resolveResponsiveProp(borderColor), }, isDebuggable && debugStyle, From 90c225ad4e9332f62f15bbbaa59b75c56c30dae3 Mon Sep 17 00:00:00 2001 From: Marcin Dziewulski Date: Thu, 11 Apr 2024 12:30:01 +0200 Subject: [PATCH 2/2] fix: add missing border props to Columns and Column background --- src/components/Columns.tsx | 40 +++++++++++++++++++++++++++++++++++++- 1 file changed, 39 insertions(+), 1 deletion(-) diff --git a/src/components/Columns.tsx b/src/components/Columns.tsx index 6187d00..20a7c14 100644 --- a/src/components/Columns.tsx +++ b/src/components/Columns.tsx @@ -96,6 +96,10 @@ const resolveBleedOrInset = ( type BackgroundProps = Pick< BoxProps, | 'borderWidth' + | 'borderTopWidth' + | 'borderRightWidth' + | 'borderLeftWidth' + | 'borderBottomWidth' | 'borderColor' | 'borderRadius' | 'borderTopRightRadius' @@ -109,12 +113,26 @@ type BackgroundProps = Pick< }; const Background = (props: BackgroundProps) => { - const { right, left, color, borderWidth, ...rest } = props; + const { + right, + left, + color, + borderWidth, + borderTopWidth, + borderLeftWidth, + borderBottomWidth, + borderRightWidth, + ...rest + } = props; const { multiply } = useSpacingHelpers(); const resolveResponsiveProp = useResponsiveProp(); const backgroundColor = resolveResponsiveProp(color); const borderSize = resolveResponsiveProp(borderWidth); + const borderTopSize = resolveResponsiveProp(borderTopWidth); + const borderRightSize = resolveResponsiveProp(borderRightWidth); + const borderBottomSize = resolveResponsiveProp(borderBottomWidth); + const borderLeftSize = resolveResponsiveProp(borderLeftWidth); const offsetRight = resolveResponsiveProp(right); const offsetLeft = resolveResponsiveProp(left); const debugStyle = useDebugStyle(); @@ -123,6 +141,10 @@ const Background = (props: BackgroundProps) => { { defaultFlex, borderRadius, borderWidth, + borderTopWidth, + borderRightWidth, + borderBottomWidth, + borderLeftWidth, borderColor, borderTopRightRadius, borderTopLeftRadius, @@ -179,6 +205,10 @@ const PrivateColumn = (props: PrivateColumnProps) => { right={inset} borderRadius={borderRadius} borderWidth={borderWidth} + borderTopWidth={borderTopWidth} + borderRightWidth={borderRightWidth} + borderBottomWidth={borderBottomWidth} + borderLeftWidth={borderLeftWidth} borderColor={borderColor} borderTopRightRadius={borderTopRightRadius} borderTopLeftRadius={borderTopLeftRadius} @@ -207,6 +237,10 @@ export const Columns = (props: ColumnsProps) => { backgroundColor, borderRadius, borderWidth, + borderTopWidth, + borderRightWidth, + borderBottomWidth, + borderLeftWidth, borderColor, borderTopRightRadius, borderTopLeftRadius, @@ -264,6 +298,10 @@ export const Columns = (props: ColumnsProps) => { left={negate(bleedStart)} borderRadius={borderRadius} borderWidth={borderWidth} + borderTopWidth={borderTopWidth} + borderRightWidth={borderRightWidth} + borderBottomWidth={borderBottomWidth} + borderLeftWidth={borderLeftWidth} borderColor={borderColor} borderTopRightRadius={borderTopRightRadius} borderTopLeftRadius={borderTopLeftRadius}