fix: set cursor pointer by default, update tests

callstack · Feb 23, 2024 · 4f26a6b · 4f26a6b
1 parent 93c57e8
commit 4f26a6b
Show file tree

Hide file tree

Showing 9 changed files with 176 additions and 51 deletions.
diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js
@@ -24,6 +24,7 @@ import type {
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import usePressability from '../../Pressability/usePressability';
 import {type RectOrSize} from '../../StyleSheet/Rect';
+import StyleSheet from '../../StyleSheet/StyleSheet';
 import useMergeRefs from '../../Utilities/useMergeRefs';
 import View from '../View/View';
 import useAndroidRippleForView, {
@@ -193,10 +194,6 @@ type Props = $ReadOnly<{|
    * https://github.com/facebook/react-native/issues/34424
    */
   'aria-label'?: ?string,
-  /**
-   * Props needed for visionOS.
-   */
-  ...VisionOSProps,
 |}>;
 
 /**
@@ -344,14 +341,23 @@ function Pressable(props: Props, forwardedRef): React.Node {
       {...restPropsWithDefaults}
       {...eventHandlers}
       ref={mergedRef}
-      style={typeof style === 'function' ? style({pressed}) : style}
+      style={[
+        styles.pressable,
+        typeof style === 'function' ? style({pressed}) : style,
+      ]}
       collapsable={false}>
       {typeof children === 'function' ? children({pressed}) : children}
       {__DEV__ ? <PressabilityDebugView color="red" hitSlop={hitSlop} /> : null}
     </View>
   );
 }
 
+const styles = StyleSheet.create({
+  pressable: {
+    cursor: 'pointer',
+  },
+});
+
 function usePressState(forcePressed: boolean): [boolean, (boolean) => void] {
   const [pressed, setPressed] = useState(false);
   return [pressed || forcePressed, setPressed];

diff --git a/...eact-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap b/...eact-native/Libraries/Components/Pressable/__tests__/__snapshots__/Pressable-test.js.snap
@@ -31,7 +31,14 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -68,7 +75,14 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -117,7 +131,14 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -154,7 +175,14 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -207,7 +235,14 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -244,7 +279,14 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -299,7 +341,14 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -336,7 +385,14 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -399,7 +455,14 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -436,7 +499,14 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>

diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js
@@ -36,7 +36,6 @@ type Props = $ReadOnly<{|
   ...React.ElementConfig<TouchableWithoutFeedback>,
   ...AndroidProps,
   ...IOSProps,
-  ...VisionOSProps,
 
   activeOpacity?: ?number,
   underlayColor?: ?ColorValue,
@@ -330,10 +329,13 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }
-        style={StyleSheet.compose(
-          this.props.style,
-          this.state.extraStyles?.underlay,
-        )}
+        style={[
+          styles.touchable,
+          StyleSheet.compose(
+            this.props.style,
+            this.state.extraStyles?.underlay,
+          ),
+        ]}
         onLayout={this.props.onLayout}
         hitSlop={this.props.hitSlop}
         hasTVPreferredFocus={this.props.hasTVPreferredFocus}
@@ -380,6 +382,12 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 }
 
+const styles = StyleSheet.create({
+  touchable: {
+    cursor: 'pointer',
+  },
+});
+
 const Touchable: React.AbstractComponent<
   $ReadOnly<$Diff<Props, {|hostRef: React.Ref<typeof View>|}>>,
   React.ElementRef<typeof View>,

diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js
@@ -18,6 +18,7 @@ import Pressability, {
 } from '../../Pressability/Pressability';
 import {PressabilityDebugView} from '../../Pressability/PressabilityDebug';
 import flattenStyle from '../../StyleSheet/flattenStyle';
+import StyleSheet from '../../StyleSheet/StyleSheet';
 import Platform from '../../Utilities/Platform';
 import * as React from 'react';
 
@@ -33,7 +34,6 @@ type TVProps = $ReadOnly<{|
 type Props = $ReadOnly<{|
   ...React.ElementConfig<TouchableWithoutFeedback>,
   ...TVProps,
-  ...VisionOSProps,
 
   activeOpacity?: ?number,
   style?: ?ViewStyleProp,
@@ -276,7 +276,7 @@ class TouchableOpacity extends React.Component<Props, State> {
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }
-        style={[this.props.style, {opacity: this.state.anim}]}
+        style={[styles.touchable, this.props.style, {opacity: this.state.anim}]}
         nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         onLayout={this.props.onLayout}
@@ -324,6 +324,12 @@ class TouchableOpacity extends React.Component<Props, State> {
   }
 }
 
+const styles = StyleSheet.create({
+  touchable: {
+    cursor: 'pointer',
+  },
+});
+
 const Touchable: React.AbstractComponent<
   Props,
   React.ElementRef<typeof Animated.View>,

diff --git a/...ve/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap b/...ve/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableHighlight-test.js.snap
@@ -19,7 +19,14 @@ exports[`TouchableHighlight renders correctly 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      Object {},
+    ]
+  }
 >
   <Text>
     Touchable
@@ -51,6 +58,14 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -80,6 +95,14 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -109,6 +132,14 @@ exports[`TouchableHighlight with disabled state should disable button when acces
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -139,6 +170,14 @@ exports[`TouchableHighlight with disabled state should keep accessibilityState w
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>
@@ -168,6 +207,14 @@ exports[`TouchableHighlight with disabled state should overwrite accessibilitySt
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "cursor": "pointer",
+      },
+      undefined,
+    ]
+  }
 >
   <View />
 </View>