feat: pass background prop to nested touchables (#4108)

callstack · Jan 10, 2024 · 6dd615d · 6dd615d
1 parent 7cf251d
commit 6dd615d
Show file tree

Hide file tree

Showing 14 changed files with 88 additions and 0 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -5,6 +5,7 @@ import {
   ColorValue,
   GestureResponderEvent,
   Platform,
+  PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -83,6 +84,11 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Make the label text uppercased. Note that this won't work if you pass React elements as children.
    */
   uppercase?: boolean;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
@@ -183,6 +189,7 @@ const Button = (
     labelStyle,
     testID = 'button',
     accessible,
+    background,
     maxFontSizeMultiplier,
     ...rest
   }: Props,
@@ -325,6 +332,7 @@ const Button = (
     >
       <TouchableRipple
         borderless
+        background={background}
         onPress={onPress}
         onLongPress={onLongPress}
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}

diff --git a/src/components/Checkbox/CheckboxAndroid.tsx b/src/components/Checkbox/CheckboxAndroid.tsx
@@ -50,6 +50,8 @@ const ANIMATION_DURATION = 100;
  * Checkboxes allow the selection of multiple options from a set.
  * This component follows platform guidelines for Android, but can be used
  * on any platform.
+ *
+ * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
  */
 const CheckboxAndroid = ({
   status,

diff --git a/src/components/Checkbox/CheckboxIOS.tsx b/src/components/Checkbox/CheckboxIOS.tsx
@@ -38,6 +38,8 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  * Checkboxes allow the selection of multiple options from a set.
  * This component follows platform guidelines for iOS, but can be used
  * on any platform.
+ *
+ * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
  */
 const CheckboxIOS = ({
   status,

diff --git a/src/components/Checkbox/CheckboxItem.tsx b/src/components/Checkbox/CheckboxItem.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   ColorValue,
   GestureResponderEvent,
+  PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -38,6 +39,11 @@ export type Props = {
    * Function to execute on long press.
    */
   onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
    */
@@ -137,6 +143,7 @@ const CheckboxItem = ({
   labelVariant = 'bodyLarge',
   labelMaxFontSizeMultiplier = 1.5,
   rippleColor,
+  background,
   ...props
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -177,6 +184,7 @@ const CheckboxItem = ({
       disabled={disabled}
       rippleColor={rippleColor}
       theme={theme}
+      background={background}
     >
       <View
         style={[styles.container, style]}

diff --git a/src/components/Chip/Chip.tsx b/src/components/Chip/Chip.tsx
@@ -5,6 +5,7 @@ import {
   ColorValue,
   GestureResponderEvent,
   Platform,
+  PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -78,6 +79,11 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Whether the chip is disabled. A disabled chip is greyed out and `onPress` is not called on touch.
    */
   disabled?: boolean;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the chip. This is read by the screen reader when the user taps the chip.
    */
@@ -173,6 +179,7 @@ const Chip = ({
   avatar,
   selected = false,
   disabled = false,
+  background,
   accessibilityLabel,
   closeIconAccessibilityLabel = 'Close',
   onPress,
@@ -306,6 +313,7 @@ const Chip = ({
     >
       <TouchableRipple
         borderless
+        background={background}
         style={[{ borderRadius }, styles.touchable]}
         onPress={onPress}
         onLongPress={onLongPress}

diff --git a/src/components/Drawer/DrawerItem.tsx b/src/components/Drawer/DrawerItem.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   ColorValue,
   GestureResponderEvent,
+  PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
   View,
@@ -37,6 +38,11 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
    * Function to execute on press.
    */
   onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
@@ -88,6 +94,7 @@ const DrawerItem = ({
   rippleColor: customRippleColor,
   style,
   onPress,
+  background,
   accessibilityLabel,
   right,
   labelMaxFontSizeMultiplier,
@@ -121,6 +128,7 @@ const DrawerItem = ({
       <TouchableRipple
         borderless
         disabled={disabled}
+        background={background}
         onPress={onPress}
         style={[
           styles.container,

diff --git a/src/components/FAB/AnimatedFAB.tsx b/src/components/FAB/AnimatedFAB.tsx
@@ -3,6 +3,7 @@ import type {
   AccessibilityState,
   ColorValue,
   NativeSyntheticEvent,
+  PressableAndroidRippleConfig,
   TextLayoutEventData,
 } from 'react-native';
 import {
@@ -45,6 +46,11 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * Make the label text uppercased.
    */
   uppercase?: boolean;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
    * Uses `label` by default if specified.
@@ -197,6 +203,7 @@ const SCALE = 0.9;
 const AnimatedFAB = ({
   icon,
   label,
+  background,
   accessibilityLabel = label,
   accessibilityState,
   color: customColor,
@@ -427,6 +434,7 @@ const AnimatedFAB = ({
           >
             <TouchableRipple
               borderless
+              background={background}
               onPress={onPress}
               onLongPress={onLongPress}
               delayLongPress={delayLongPress}

diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
@@ -4,6 +4,7 @@ import {
   Animated,
   ColorValue,
   GestureResponderEvent,
+  PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
   View,
@@ -50,6 +51,11 @@ export type Props = $Omit<$RemoveChildren<typeof Surface>, 'mode'> & {
    * Make the label text uppercased.
    */
   uppercase?: boolean;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the FAB. This is read by the screen reader when the user taps the FAB.
    * Uses `label` by default if specified.
@@ -178,6 +184,7 @@ const FAB = forwardRef<View, Props>(
     {
       icon,
       label,
+      background,
       accessibilityLabel = label,
       accessibilityState,
       animated = true,
@@ -285,6 +292,7 @@ const FAB = forwardRef<View, Props>(
       >
         <TouchableRipple
           borderless
+          background={background}
           onPress={onPress}
           onLongPress={onLongPress}
           delayLongPress={delayLongPress}

diff --git a/src/components/List/ListAccordion.tsx b/src/components/List/ListAccordion.tsx
@@ -11,6 +11,7 @@ import {
   View,
   ViewProps,
   ViewStyle,
+  PressableAndroidRippleConfig,
 } from 'react-native';
 
 import { ListAccordionGroupContext } from './ListAccordionGroup';
@@ -65,6 +66,11 @@ export type Props = {
    * @optional
    */
   theme?: ThemeProp;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
   /**
    * Style that is passed to the wrapping TouchableRipple element.
    */
@@ -169,6 +175,7 @@ const ListAccordion = ({
   style,
   id,
   testID,
+  background,
   onPress,
   onLongPress,
   delayLongPress,
@@ -241,6 +248,7 @@ const ListAccordion = ({
           accessibilityLabel={accessibilityLabel}
           testID={testID}
           theme={theme}
+          background={background}
           borderless
         >
           <View

diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
@@ -3,6 +3,7 @@ import {
   AccessibilityState,
   ColorValue,
   GestureResponderEvent,
+  PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -49,6 +50,11 @@ export type Props = {
    * Sets min height with densed layout.
    */
   dense?: boolean;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
   /**
    * Function to execute on press.
    */
@@ -113,6 +119,7 @@ const MenuItem = ({
   dense,
   title,
   disabled,
+  background,
   onPress,
   style,
   contentStyle,
@@ -163,6 +170,7 @@ const MenuItem = ({
       onPress={onPress}
       disabled={disabled}
       testID={testID}
+      background={background}
       accessibilityLabel={accessibilityLabel}
       accessibilityRole="menuitem"
       accessibilityState={newAccessibilityState}

diff --git a/src/components/RadioButton/RadioButtonAndroid.tsx b/src/components/RadioButton/RadioButtonAndroid.tsx
@@ -49,6 +49,8 @@ const BORDER_WIDTH = 2;
  * Radio buttons allow the selection a single option from a set.
  * This component follows platform guidelines for Android, but can be used
  * on any platform.
+ *
+ * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
  */
 const RadioButtonAndroid = ({
   disabled,

diff --git a/src/components/RadioButton/RadioButtonIOS.tsx b/src/components/RadioButton/RadioButtonIOS.tsx
@@ -44,6 +44,8 @@ export type Props = $RemoveChildren<typeof TouchableRipple> & {
  * Radio buttons allow the selection a single option from a set.
  * This component follows platform guidelines for iOS, but can be used
  * on any platform.
+ *
+ * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
  */
 const RadioButtonIOS = ({
   disabled,

diff --git a/src/components/RadioButton/RadioButtonItem.tsx b/src/components/RadioButton/RadioButtonItem.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   ColorValue,
   GestureResponderEvent,
+  PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -32,6 +33,11 @@ export type Props = {
    * Whether radio is disabled.
    */
   disabled?: boolean;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
   /**
    * Function to execute on press.
    */
@@ -143,6 +149,7 @@ const RadioButtonItem = ({
   rippleColor,
   status,
   theme: themeOverrides,
+  background,
   accessibilityLabel = label,
   testID,
   mode,
@@ -209,6 +216,7 @@ const RadioButtonItem = ({
             }}
             testID={testID}
             disabled={disabled}
+            background={background}
             theme={theme}
             rippleColor={rippleColor}
           >

diff --git a/src/components/SegmentedButtons/SegmentedButtonItem.tsx b/src/components/SegmentedButtons/SegmentedButtonItem.tsx
@@ -3,6 +3,7 @@ import {
   Animated,
   ColorValue,
   GestureResponderEvent,
+  PressableAndroidRippleConfig,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -51,6 +52,11 @@ export type Props = {
    * Whether the button is disabled.
    */
   disabled?: boolean;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
   /**
    * Accessibility label for the `SegmentedButtonItem`. This is read by the screen reader when the user taps the button.
    */
@@ -108,6 +114,7 @@ const SegmentedButtonItem = ({
   checkedColor,
   uncheckedColor,
   rippleColor: customRippleColor,
+  background,
   icon,
   testID,
   label,
@@ -208,6 +215,7 @@ const SegmentedButtonItem = ({
         rippleColor={rippleColor}
         testID={testID}
         style={rippleStyle}
+        background={background}
         theme={theme}
       >
         <View style={[styles.content, { paddingVertical }]}>