feat(box): add support for border*Width

grapp-dev · Apr 11, 2024 · 7f0ac7a · 7f0ac7a
1 parent 0ef872d
commit 7f0ac7a
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 1 deletion.
diff --git 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
 
 </Property>
 
+#### borderTopWidth
+
+<Property types={["ResponsiveProp<number>"]}>
+
+</Property>
+
+#### borderRightWidth
+
+<Property types={["ResponsiveProp<number>"]}>
+
+</Property>
+
+#### borderBottomWidth
+
+<Property types={["ResponsiveProp<number>"]}>
+
+</Property>
+
+#### borderLeftWidth
+
+<Property types={["ResponsiveProp<number>"]}>
+
+</Property>
+
 #### borderColor
 
 <Property types={["ResponsiveProp<number>"]}>

diff --git 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
@@ -42,6 +42,10 @@ export type BoxProps = ViewProps & {
   readonly borderBottomLeftRadius?: ResponsiveProp<number>;
   readonly borderBottomRightRadius?: ResponsiveProp<number>;
   readonly borderWidth?: ResponsiveProp<number>;
+  readonly borderTopWidth?: ResponsiveProp<number>;
+  readonly borderRightWidth?: ResponsiveProp<number>;
+  readonly borderBottomWidth?: ResponsiveProp<number>;
+  readonly borderLeftWidth?: ResponsiveProp<number>;
   readonly borderColor?: ResponsiveProp<string>;
   readonly width?: ResponsiveProp<DimensionValue>;
   readonly height?: ResponsiveProp<DimensionValue>;
@@ -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,