chore: remove automatic cursor pointer (#161)

callstack · Sep 24, 2024 · ec18643 · ec18643
1 parent 46f0744
commit ec18643
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 172 deletions.
diff --git a/packages/react-native/Libraries/Components/Pressable/Pressable.js b/packages/react-native/Libraries/Components/Pressable/Pressable.js
@@ -24,7 +24,6 @@ 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, {
@@ -348,23 +347,14 @@ function Pressable(
       {...restPropsWithDefaults}
       {...eventHandlers}
       ref={mergedRef}
-      style={[
-        styles.pressable,
-        typeof style === 'function' ? style({pressed}) : style,
-      ]}
+      style={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,14 +31,6 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -75,14 +67,6 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -119,14 +103,6 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -163,14 +139,6 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -207,14 +175,6 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -251,14 +211,6 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -295,14 +247,6 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -339,14 +283,6 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -383,14 +319,6 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -427,14 +355,6 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  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
@@ -329,13 +329,10 @@ class TouchableHighlight extends React.Component<Props, State> {
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }
-        style={[
-          styles.touchable,
-          StyleSheet.compose(
-            this.props.style,
-            this.state.extraStyles?.underlay,
-          ),
-        ]}
+        style={StyleSheet.compose(
+          this.props.style,
+          this.state.extraStyles?.underlay,
+        )}
         onLayout={this.props.onLayout}
         hitSlop={this.props.hitSlop}
         hasTVPreferredFocus={this.props.hasTVPreferredFocus}
@@ -384,12 +381,6 @@ class TouchableHighlight extends React.Component<Props, State> {
   }
 }
 
-const styles = StyleSheet.create({
-  touchable: {
-    cursor: 'pointer',
-  },
-});
-
 const Touchable: React.AbstractComponent<
   $ReadOnly<$Diff<Props, {|+hostRef: mixed|}>>,
   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,7 +18,6 @@ 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';
 
@@ -276,7 +275,7 @@ class TouchableOpacity extends React.Component<Props, State> {
         accessibilityElementsHidden={
           this.props['aria-hidden'] ?? this.props.accessibilityElementsHidden
         }
-        style={[styles.touchable, this.props.style, {opacity: this.state.anim}]}
+        style={[this.props.style, {opacity: this.state.anim}]}
         nativeID={this.props.id ?? this.props.nativeID}
         testID={this.props.testID}
         onLayout={this.props.onLayout}
@@ -327,12 +326,6 @@ 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,14 +19,7 @@ exports[`TouchableHighlight renders correctly 1`] = `
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      Object {},
-    ]
-  }
+  style={Object {}}
 >
   <Text>
     Touchable
@@ -58,14 +51,6 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -95,14 +80,6 @@ exports[`TouchableHighlight with disabled state should be disabled when disabled
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -132,14 +109,6 @@ exports[`TouchableHighlight with disabled state should disable button when acces
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -170,14 +139,6 @@ exports[`TouchableHighlight with disabled state should keep accessibilityState w
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>
@@ -207,14 +168,6 @@ exports[`TouchableHighlight with disabled state should overwrite accessibilitySt
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  style={
-    Array [
-      Object {
-        "cursor": "pointer",
-      },
-      undefined,
-    ]
-  }
 >
   <View />
 </View>

diff --git a/...tive/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap b/...tive/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap
@@ -31,7 +31,6 @@ exports[`TouchableOpacity renders correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "cursor": "pointer",
       "opacity": 1,
     }
   }
@@ -73,7 +72,6 @@ exports[`TouchableOpacity renders in disabled state when a disabled prop is pass
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "cursor": "pointer",
       "opacity": 1,
     }
   }
@@ -115,7 +113,6 @@ exports[`TouchableOpacity renders in disabled state when a key disabled in acces
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "cursor": "pointer",
       "opacity": 1,
     }
   }