fix: touchable ripple overlay (#3875)

callstack · May 15, 2023 · 2c25126 · 2c25126
1 parent ab2588b
commit 2c25126
Show file tree

Hide file tree

Showing 28 changed files with 86 additions and 167 deletions.
diff --git a/src/components/CrossFadeIcon.tsx b/src/components/CrossFadeIcon.tsx
@@ -18,6 +18,10 @@ type Props = {
    * Size of the icon.
    */
   size: number;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
   /**
    * @optional
    */
@@ -29,6 +33,7 @@ const CrossFadeIcon = ({
   size,
   source,
   theme: themeOverrides,
+  testID = 'cross-fade-icon',
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
   const [currentIcon, setCurrentIcon] = React.useState<IconSource>(
@@ -97,6 +102,7 @@ const CrossFadeIcon = ({
               transform: [{ rotate: rotatePrev }],
             },
           ]}
+          testID={`${testID}-previous`}
         >
           <Icon source={previousIcon} size={size} color={color} theme={theme} />
         </Animated.View>
@@ -109,6 +115,7 @@ const CrossFadeIcon = ({
             transform: [{ rotate: rotateNext }],
           },
         ]}
+        testID={`${testID}-current`}
       >
         <Icon source={currentIcon} size={size} color={color} theme={theme} />
       </Animated.View>

diff --git a/src/components/TouchableRipple/TouchableRipple.native.tsx b/src/components/TouchableRipple/TouchableRipple.native.tsx
@@ -7,6 +7,7 @@ import {
   StyleSheet,
   Pressable,
   GestureResponderEvent,
+  View,
 } from 'react-native';
 
 import { useInternalTheme } from '../../core/theming';
@@ -45,7 +46,6 @@ const TouchableRipple = ({
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
-  const [showUnderlay, setShowUnderlay] = React.useState<boolean>(false);
 
   const { onPress, onLongPress, onPressIn, onPressOut } = rest;
 
@@ -72,16 +72,6 @@ const TouchableRipple = ({
     Platform.Version >= ANDROID_VERSION_PIE &&
     borderless;
 
-  const handlePressIn = (e: GestureResponderEvent) => {
-    setShowUnderlay(true);
-    onPressIn?.(e);
-  };
-
-  const handlePressOut = (e: GestureResponderEvent) => {
-    setShowUnderlay(false);
-    onPressOut?.(e);
-  };
-
   if (TouchableRipple.supported) {
     return (
       <Pressable
@@ -107,15 +97,22 @@ const TouchableRipple = ({
     <Pressable
       {...rest}
       disabled={disabled}
-      style={[
-        borderless && styles.overflowHidden,
-        showUnderlay && { backgroundColor: calculatedUnderlayColor },
-        style,
-      ]}
-      onPressIn={handlePressIn}
-      onPressOut={handlePressOut}
+      style={[borderless && styles.overflowHidden, style]}
     >
-      {React.Children.only(children)}
+      {({ pressed }) => (
+        <>
+          {pressed && (
+            <View
+              testID="touchable-ripple-underlay"
+              style={[
+                styles.underlay,
+                { backgroundColor: calculatedUnderlayColor },
+              ]}
+            />
+          )}
+          {React.Children.only(children)}
+        </>
+      )}
     </Pressable>
   );
 };
@@ -127,6 +124,10 @@ const styles = StyleSheet.create({
   overflowHidden: {
     overflow: 'hidden',
   },
+  underlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 2,
+  },
 });
 
 export default TouchableRipple;
diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -267,7 +267,8 @@ describe('AppbarAction', () => {
         <Appbar.Action icon="menu" testID="appbar-action" />
       </Appbar>
     );
-    const appbarActionIcon = getByTestId('appbar-action').props.children[0];
+    const appbarActionIcon = getByTestId('cross-fade-icon-current').props
+      .children;
     expect(appbarActionIcon.props.color).toBe(
       getTheme().colors.onSurfaceVariant
     );
@@ -279,7 +280,8 @@ describe('AppbarAction', () => {
         <Appbar.Action icon="menu" testID="appbar-action" isLeading />
       </Appbar>
     );
-    const appbarActionIcon = getByTestId('appbar-action').props.children[0];
+    const appbarActionIcon = getByTestId('cross-fade-icon-current').props
+      .children;
     expect(appbarActionIcon.props.color).toBe(getTheme().colors.onSurface);
   });
 
@@ -289,7 +291,8 @@ describe('AppbarAction', () => {
         <Appbar.Action icon="menu" color="purple" testID="appbar-action" />
       </Appbar>
     );
-    const appbarActionIcon = getByTestId('appbar-action').props.children[0];
+    const appbarActionIcon = getByTestId('cross-fade-icon-current').props
+      .children;
     expect(appbarActionIcon.props.color).toBe('purple');
   });
 
@@ -299,7 +302,8 @@ describe('AppbarAction', () => {
         <Appbar.BackAction color="purple" testID="appbar-action" />
       </Appbar>
     );
-    const appbarBackActionIcon = getByTestId('appbar-action').props.children[0];
+    const appbarBackActionIcon = getByTestId('cross-fade-icon-current').props
+      .children;
     expect(appbarBackActionIcon.props.color).toBe('purple');
   });
 
@@ -313,7 +317,8 @@ describe('AppbarAction', () => {
         </Appbar>
       );
 
-      const appbarActionIcon = getByTestId('appbar-action').props.children[0];
+      const appbarActionIcon = getByTestId('cross-fade-icon-current').props
+        .children;
 
       expect(appbarActionIcon.props.color).toBe('#ffffff');
     });
@@ -329,7 +334,8 @@ describe('AppbarAction', () => {
         </PaperProvider>
       );
 
-      const appbarActionIcon = getByTestId('appbar-action').props.children[0];
+      const appbarActionIcon = getByTestId('cross-fade-icon-current').props
+        .children;
 
       expect(appbarActionIcon.props.color).toBe('#ffffff');
     });

diff --git a/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap b/src/components/__tests__/Appbar/__snapshots__/Appbar.test.tsx.snap
@@ -157,7 +157,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                   Object {
                     "overflow": "hidden",
                   },
-                  false,
                   Array [
                     Object {
                       "alignItems": "center",
@@ -339,7 +338,6 @@ exports[`Appbar does not pass any additional props to Searchbar 1`] = `
                     Object {
                       "overflow": "hidden",
                     },
-                    false,
                     Array [
                       Object {
                         "alignItems": "center",
@@ -520,7 +518,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
               Object {
                 "overflow": "hidden",
               },
-              false,
               Array [
                 Object {
                   "alignItems": "center",
@@ -566,6 +563,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   ],
                 }
               }
+              testID="cross-fade-icon-current"
             >
               <View
                 style={
@@ -749,7 +747,6 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
               Object {
                 "overflow": "hidden",
               },
-              false,
               Array [
                 Object {
                   "alignItems": "center",
@@ -795,6 +792,7 @@ exports[`Appbar passes additional props to AppbarBackAction, AppbarContent and A
                   ],
                 }
               }
+              testID="cross-fade-icon-current"
             >
               <Text
                 accessibilityElementsHidden={true}

diff --git a/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -27,7 +27,6 @@ exports[`renders Checkbox with custom testID 1`] = `
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,
@@ -111,7 +110,6 @@ exports[`renders checked Checkbox with color 1`] = `
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,
@@ -193,7 +191,6 @@ exports[`renders checked Checkbox with onPress 1`] = `
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,
@@ -275,7 +272,6 @@ exports[`renders indeterminate Checkbox 1`] = `
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,
@@ -358,7 +354,6 @@ exports[`renders indeterminate Checkbox with color 1`] = `
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,
@@ -441,7 +436,6 @@ exports[`renders unchecked Checkbox with color 1`] = `
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,
@@ -523,7 +517,6 @@ exports[`renders unchecked Checkbox with onPress 1`] = `
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,

diff --git a/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap b/src/components/__tests__/Checkbox/__snapshots__/CheckboxItem.test.tsx.snap
@@ -24,7 +24,6 @@ exports[`can render leading checkbox control 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      false,
       false,
       undefined,
     ]
@@ -72,7 +71,6 @@ exports[`can render leading checkbox control 1`] = `
           Object {
             "overflow": "hidden",
           },
-          false,
           Object {
             "borderRadius": 18,
             "padding": 6,
@@ -189,7 +187,6 @@ exports[`can render the Android checkbox on different platforms 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      false,
       false,
       undefined,
     ]
@@ -273,7 +270,6 @@ exports[`can render the Android checkbox on different platforms 1`] = `
           Object {
             "overflow": "hidden",
           },
-          false,
           Object {
             "borderRadius": 18,
             "height": 36,
@@ -390,7 +386,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      false,
       false,
       undefined,
     ]
@@ -474,7 +469,6 @@ exports[`can render the iOS checkbox on different platforms 1`] = `
           Object {
             "overflow": "hidden",
           },
-          false,
           Object {
             "borderRadius": 18,
             "padding": 6,
@@ -555,7 +549,6 @@ exports[`renders unchecked 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Array [
-      false,
       false,
       undefined,
     ]
@@ -639,7 +632,6 @@ exports[`renders unchecked 1`] = `
           Object {
             "overflow": "hidden",
           },
-          false,
           Object {
             "borderRadius": 18,
             "padding": 6,

diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButton.test.tsx.snap
@@ -27,7 +27,6 @@ exports[`RadioButton RadioButton with custom testID renders properly 1`] = `
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,
@@ -110,7 +109,6 @@ exports[`RadioButton on default platform renders properly 1`] = `
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,
@@ -192,7 +190,6 @@ exports[`RadioButton on ios platform renders properly 1`] = `
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,
@@ -274,7 +271,6 @@ exports[`RadioButton when RadioButton is wrapped by RadioButtonContext.Provider
       Object {
         "overflow": "hidden",
       },
-      false,
       Object {
         "borderRadius": 18,
         "padding": 6,

diff --git a/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap b/src/components/__tests__/RadioButton/__snapshots__/RadioButtonGroup.test.tsx.snap
@@ -30,7 +30,6 @@ exports[`RadioButtonGroup renders properly 1`] = `
         Object {
           "overflow": "hidden",
         },
-        false,
         Object {
           "borderRadius": 18,
           "padding": 6,