Text component does not respect border properties

[kmelmon]

The border properties should apply to all components in react-native but the RNW code only applies them to certain components:
-View
-Image
-Components based on ContentControl

Any other component, like Text, does not respect the border properties.

See: https://snack.expo.io/kJlEGti8g

On other platforms, notice the border draws around the text. For example this is what the snack looks like on Android:

On Windows it looks like this:

Oops! No border is rendered.

[kmelmon]

This looks to be a general problem that will likely affect any non-ContentControl-based component.

[chrisglein]

We know that Facebook has issues with some components not having borders that they expected. I'm still waiting to hear back if this is one of the ones they're waiting on. If so, we'll want to prioritize for 0.63. If not, this is still a good thing to fill in for API parity but less pressing.

[rectified95]

@kmelmon Is this perhaps fixed by #5213 ?

[kmelmon]

Unfortunately #5213 won't fix this. The problem here is that Text maps to TextBlock and Run, which doesn't have border properties.

If we consider the full problem it gets pretty tricky because Text can be nested. In the nested case we have a Run that can wrap so the border isn't guaranteed to be a simple rectangle in that case.

I suggest we prioritize fixing the simple case first, which is to handle the border properties only on the outer TextBlock. I can think of several ways to fix this:

1. Add border properties to the XAML TextBlock. This means waiting for WinUI 3.0.
2. Wrap the TextBlock with an outer Control, similar to what we do for View when it has certain properties set. This is rather complicated but seems doable. Wondering out loud: Could we perhaps wrap the Text component with an outer View on the JS side and forward all the properties except the border-related ones to the inner Text? This might be a simpler solution.