Fabric Button does not render anything (due to lack of PlatformColor)

[chrisglein]

Problem Description

Button relies on PlatformColor, which isn't specified in Fabric like it is on Paper with named colors (which on Paper map to XAML brushes).

I could see this being fixed by:
A) Modifying Libraries\Components\Button.windows.js to not use PlatformColor and specify hardcoded colors
(note that this would break light/dark/high-contrast mode for the Button component)
B) Modify Microsoft.ReactNative\Fabric\platform\react\renderer\graphics\Color.cpp to implement AsWindowsColor() with a look up of appropriate colors.

This notion of "appropriate colors" is interesting though, because... what are the right colors?

In order to get Button to work, you'd need these:

• SolidBackgroundFillColorBaseBrush
• ButtonBackgroundPressed
• ButtonForegroundPressed
• ButtonForegroundPointerOver
• ButtonBackground
• ButtonBorderBrush
• ButtonForeground
• ButtonBackgroundDisabled
• ButtonBorderBrushDisabled
• ButtonForegroundDisabled
• ButtonBackgroundPointerOver
• ButtonBorderBrushPointerOver
• ButtonBorderBrushPressed

Those names are very derived from XAML, and in a world where RNW doesn't rely on XAML... are those the right "system" colors? Contrast with the FURN Colors. What's the boundary between system color and color palette served by a control library.

Proposal

To get unblocked, just bypass this with specified colors (either in the Button JS or in PlatformColor) that used by any built in components. The problems mentioned above can wait.

Something like this? Needs support for theming thought at some point: #11489

With that fix:

Steps To Reproduce

1. Clone https://github.com/chiaramooney/sample-fabric/
2. Add a Button
3. Where is it?
   (it's there, you can click it, but none of it content renders)

Or, view in playground composition:

Expected Results

I can see the button

CLI version

11.0.0-alpha.2

Environment

info Fetching system and libraries information...
System:
  OS: Windows 10 10.0.25336
  CPU: (8) x64 Intel(R) Core(TM) i7-8650U CPU @ 1.90GHz
  Memory: 1.92 GB / 15.92 GB
Binaries:
  Node:
    version: 16.17.0
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 1.22.19
    path: C:\Program Files (x86)\Yarn\bin\yarn.CMD
  npm:
    version: 8.15.0
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    AllowAllTrustedApps: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.22000.0
      - 10.0.22621.0
IDEs:
  Android Studio: Not Found
  Visual Studio:
    - 17.5.33516.290 (Visual Studio Community 2022)
    - 16.11.33423.256 (Visual Studio Community 2019)
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.0.0-20230321-2153-7b86e3aae
    wanted: 0.0.0-20230321-2153-7b86e3aae
  react-native-windows:
    installed: 0.0.0-canary.637
    wanted: 0.0.0-canary.637
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Target Platform Version

None

Target Device(s)

No response

Visual Studio Version

None

Build Configuration

None

Snack, code example, screenshot, or link to a repository

No response