Add Expander native component (WinUI 2.6)

[amdingler]

Platforms Impacted

• iOS
• macOS
• win32 (Office)
• windows
• android

Description of changes

Adding a native windows Expander control (WinUI 2.6) to FURN.

• packages/experimental/Expander/windows: Contains native module code for the Expander control
• packages/experimental/Expander/src: Contains code to compose the native view into a component

Notable design choices:

• packages/experimental/Expander/windows/ReactNativeExpander/ExpanderView.idl: ExpanderView inherits from a ContentPresenter, and the Expander control is displayed from within the ContentPresenter control. This is because we are unable to inherit from the Expander control directly.

Future work:

• Resolve layout issues between Yoga and XAML layout systems within the RNW framework. Conflicting layout systems caused the following issues and work arounds in the Expander implementation:
  • Expander requires a fixed collapsed and expanded height
  • height must be exposed as props to allow the proper collapsed/expanded height changes. If the user tries to use the height prop, it is overridden. Can potentially fix this using token states to update the Expander height.
  • Expander does not account for height changes caused by window resizing
  • User cannot interact with non-native components within the header. In this scenario, the Expander will expand instead.
• Remove implicit ordering of Expander header and content. The user should be able to specify which child element is the header and which is the content.

Verification

Tested on a React Native for Windows v0.64.x tester app. Expander was tested for light mode, dark mode, and keyboard accessibility.

Basic Expander

Basic_Expander_Demo.mp4

Full Expander Functionality

Expander_Full_Demo.mp4

Dark Mode

Pull request checklist

This PR has considered (when applicable):

• Automated Tests
• Documentation and examples
• Keyboard Accessibility
• Voiceover
• Internationalization and Right-to-left Layouts

[Saadnajmi]

Something I forgot to mention: If you could add screenshots / videos to your PR, it would be really helpful to understand how the component looks / should behave when reviewing. And is good historical data when looking through git history :D

[rectified95]

Great stuff! Left a few nit comments. Also, make sure you finish off ReplaceChild() and resolve the conflict in yarn.lock

[PPatBoyd]

is this a pattern rn-windows folks have been taking to generate layout animations w/o using LayoutAnimation [due to limitations e.g. its global nature] ? This is a 175ms wait on the JS thread, am I reading that right?

[amdingler]

Yes, we added a wait on the JS thread to allow enough time for the native animation to complete before changing the height of the Expander.

[asklar]

@PPatBoyd RNW does not support RN layout animations. All animations here are XAML animations.

[PPatBoyd]

the chevron gets different background and foreground colors from the rest of the control's background, e.g. we can't reuse BackgroundTokens ?

the variations should be handled in styling and only need chevronBackground chevronForeground

[amdingler]

I pulled these tokens from values that can be put in the ResourceDictionary, so they can all be different colors.

[amdingler]

@Saadnajmi Just added the test files.

[ghost]

Hello @Saadnajmi!

Because this pull request has the AutoMerge :repeat: label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msftbot) and give me an instruction to get started! Learn more here.