Merge pull request #49 from grapp-dev/feature/box-border-props

feat(Box): add support for `borderTopWidth`, `borderRightWidth`, `borderBottomWidth` and `borderLeftWidth`
grapp-dev · Apr 11, 2024 · 841065e · 841065e
2 parents 0ef872d + 90c225a
commit 841065e
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 2 deletions.
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,

diff --git 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) => {
     <FloatBox
       {...rest}
       borderWidth={borderSize}
+      borderTopWidth={borderTopSize}
+      borderRightWidth={borderRightSize}
+      borderBottomWidth={borderBottomSize}
+      borderLeftWidth={borderLeftSize}
       offset={0}
       right={offsetRight ? multiply(offsetRight) : 0}
       left={offsetLeft ? multiply(offsetLeft) : 0}
@@ -151,6 +173,10 @@ const PrivateColumn = (props: PrivateColumnProps) => {
     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}