Force border with default brush for borderWidth (#11062)

* Force border with default brush for borderWidth On iOS, Android, and Web, a border is drawn with the default brush if the borderWidth prop is set, not only if a borderColor is also set. This changes react-native-windows to draw a border with the default brush if the borderWidth is set only. * Change files * Update snapshots
microsoft · Jan 10, 2023 · 6bb0ecd · 6bb0ecd
1 parent d22844e
commit 6bb0ecd
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 1 deletion.
diff --git a/change/react-native-windows-74520d58-a51f-4c07-8cd5-edaa7158dc94.json b/change/react-native-windows-74520d58-a51f-4c07-8cd5-edaa7158dc94.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Force border with default brush for borderWidth",
+  "packageName": "react-native-windows",
+  "email": "erozell@outlook.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/e2e-test-app/test/__snapshots__/ViewComponentTest.test.ts.snap b/packages/e2e-test-app/test/__snapshots__/ViewComponentTest.test.ts.snap
@@ -520,6 +520,22 @@ exports[`ViewTests Views can have overflow 1`] = `
             },
           ],
         },
+        {
+          "Background": null,
+          "BorderBrush": "#E4000000",
+          "BorderThickness": "1,1,1,1",
+          "Clip": null,
+          "CornerRadius": "0,0,0,0",
+          "FlowDirection": "LeftToRight",
+          "HorizontalAlignment": "Stretch",
+          "Left": 0,
+          "Margin": "0,0,0,0",
+          "Padding": "0,0,0,0",
+          "Top": 0,
+          "VerticalAlignment": "Stretch",
+          "Visibility": "Visible",
+          "XamlType": "Windows.UI.Xaml.Controls.Border",
+        },
       ],
     },
     {
@@ -574,6 +590,22 @@ exports[`ViewTests Views can have overflow 1`] = `
             },
           ],
         },
+        {
+          "Background": null,
+          "BorderBrush": "#E4000000",
+          "BorderThickness": "1,1,1,1",
+          "Clip": null,
+          "CornerRadius": "0,0,0,0",
+          "FlowDirection": "LeftToRight",
+          "HorizontalAlignment": "Stretch",
+          "Left": 0,
+          "Margin": "0,0,0,0",
+          "Padding": "0,0,0,0",
+          "Top": 0,
+          "VerticalAlignment": "Stretch",
+          "Visibility": "Visible",
+          "XamlType": "Windows.UI.Xaml.Controls.Border",
+        },
       ],
     },
     {
@@ -628,6 +660,22 @@ exports[`ViewTests Views can have overflow 1`] = `
             },
           ],
         },
+        {
+          "Background": null,
+          "BorderBrush": "#E4000000",
+          "BorderThickness": "1,1,1,1",
+          "Clip": null,
+          "CornerRadius": "0,0,0,0",
+          "FlowDirection": "LeftToRight",
+          "HorizontalAlignment": "Stretch",
+          "Left": 0,
+          "Margin": "0,0,0,0",
+          "Padding": "0,0,0,0",
+          "Top": 0,
+          "VerticalAlignment": "Stretch",
+          "Visibility": "Visible",
+          "XamlType": "Windows.UI.Xaml.Controls.Border",
+        },
       ],
     },
   ],

diff --git a/vnext/Microsoft.ReactNative/Views/ViewPanel.cpp b/vnext/Microsoft.ReactNative/Views/ViewPanel.cpp
@@ -258,7 +258,7 @@ void ViewPanel::FinalizeProperties() {
   bool hasBorderBrush = ReadLocalValue(BorderBrushProperty()) != unsetValue;
   bool hasBorderThickness = BorderThickness() != emptyThickness;
   bool hasCornerRadius = ReadLocalValue(CornerRadiusProperty()) != unsetValue;
-  bool displayBorder = hasBorderBrush && hasBorderThickness;
+  bool displayBorder = hasBorderThickness;
 
   // Determine which scenario our current properties have put us into
   enum class Scenario { OuterBorder, InnerBorder, NoBorder } scenario;