Button android ripple

[ayush547]

Platforms Impacted

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

Description of changes

Added ripple effect for button on Android -
Ripple effect is taken care by React Native's Pressable component. Using it however caused Fluent RN's Fork of Pressable to not be hit anymore, this caused the state of button ('pressed', 'hovered', 'focused') to not change anymore and the associated styles were not being applied.

Changes made -
Added a 'Ripple' Pressable layer that provides the animation
(Did not replace the 'Root' view since Pressable needed to be wrapped with a View to handle curved borders)
Split styles and props as required between Root and Pressable Layer
Added a function to separate out margins from style to be applied onto the wrapper view
Added a hook ripplePressed to trigger styling change onPress

Resolutions tried -
Tried to apply "useAsButton" props directly on the Pressable component / call functions associated with state directly, had no effect.
Tried to change the state of button explicitly by calling the setPressed function defined in useAsPressable in the onPress of the new Pressable layer. But it did not cause the Button to re-render even after changing the state value.
Attempted to add the ripple animation using the Animated library provided by RN, but abandoned the approach due to excessive complexity

Verification

(how the change was tested, including both manual and automated tests)

Before	After

Pull request checklist

This PR has considered (when applicable):

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