fix: set cursor pointer by default, update tests

callstack · Feb 23, 2024 · 248d349 · 248d349
1 parent 93c57e8
commit 248d349
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 50 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,6 @@ exports[`<Pressable /> should render as expected: should deep render when mocked
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
 >
   <View />
 </View>
@@ -68,7 +67,6 @@ exports[`<Pressable /> should render as expected: should deep render when not mo
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
 >
   <View />
 </View>
@@ -117,7 +115,6 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
 >
   <View />
 </View>
@@ -154,7 +151,6 @@ exports[`<Pressable disabled={true} /> should be disabled when disabled is true:
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
 >
   <View />
 </View>
@@ -207,7 +203,6 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
 >
   <View />
 </View>
@@ -244,7 +239,6 @@ exports[`<Pressable disabled={true} accessibilityState={{}} /> should be disable
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
 >
   <View />
 </View>
@@ -299,7 +293,6 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
 >
   <View />
 </View>
@@ -336,7 +329,6 @@ exports[`<Pressable disabled={true} accessibilityState={{checked: true}} /> shou
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
 >
   <View />
 </View>
@@ -399,7 +391,6 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
 >
   <View />
 </View>
@@ -436,7 +427,6 @@ exports[`<Pressable disabled={true} accessibilityState={{disabled: false}} /> sh
   onResponderTerminate={[Function]}
   onResponderTerminationRequest={[Function]}
   onStartShouldSetResponder={[Function]}
-  visionos_hoverEffect="highlight"
 >
   <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/...tive/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap b/...tive/Libraries/Components/Touchable/__tests__/__snapshots__/TouchableOpacity-test.js.snap
@@ -31,10 +31,10 @@ exports[`TouchableOpacity renders correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
+      "cursor": "pointer",
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <Text>
     Touchable
@@ -76,7 +76,6 @@ exports[`TouchableOpacity renders in disabled state when a disabled prop is pass
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <Text>
     Touchable
@@ -118,7 +117,6 @@ exports[`TouchableOpacity renders in disabled state when a key disabled in acces
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <Text>
     Touchable

diff --git a/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap b/packages/react-native/Libraries/Components/__tests__/__snapshots__/Button-test.js.snap
@@ -35,7 +35,6 @@ exports[`<Button /> should be disabled and it should set accessibilityState to d
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <View
     style={
@@ -102,7 +101,6 @@ exports[`<Button /> should be disabled when disabled is empty and accessibilityS
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <View
     style={
@@ -169,7 +167,6 @@ exports[`<Button /> should be disabled when disabled={true} and accessibilitySta
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <View
     style={
@@ -237,7 +234,6 @@ exports[`<Button /> should be set importantForAccessibility={no-hide-descendants
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <View
     style={
@@ -300,7 +296,6 @@ exports[`<Button /> should be set importantForAccessibility={no-hide-descendants
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <View
     style={
@@ -362,7 +357,6 @@ exports[`<Button /> should not be disabled when disabled={false} and accessibili
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <View
     style={
@@ -425,7 +419,6 @@ exports[`<Button /> should not be disabled when disabled={false} and accessibili
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <View
     style={
@@ -488,7 +481,6 @@ exports[`<Button /> should overwrite accessibilityState with value of disabled p
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <View
     style={
@@ -555,7 +547,6 @@ exports[`<Button /> should render as expected 1`] = `
       "opacity": 1,
     }
   }
-  visionos_hoverEffect="highlight"
 >
   <View
     style={

diff --git a/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts b/packages/react-native/Libraries/StyleSheet/StyleSheetTypes.d.ts
@@ -276,7 +276,7 @@ export interface ViewStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
    * Controls whether the View can be the target of touch events.
    */
   pointerEvents?: 'box-none' | 'none' | 'box-only' | 'auto' | undefined;
-  cursor?: CursorValue;
+  cursor?: CursorValue | undefined;
 }
 
 export type FontVariant =
@@ -406,5 +406,5 @@ export interface ImageStyle extends FlexStyle, ShadowStyleIOS, TransformsStyle {
   tintColor?: ColorValue | undefined;
   opacity?: AnimatableNumericValue | undefined;
   objectFit?: 'cover' | 'contain' | 'fill' | 'scale-down' | undefined;
-  cursor?: CursorValue;
+  cursor?: CursorValue | undefined;
 }
diff --git a/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap b/packages/react-native/Libraries/__tests__/__snapshots__/public-api-test.js.snap
@@ -1813,9 +1813,6 @@ exports[`public API should not change unintentionally Libraries/Components/Press
 export type StateCallbackType = $ReadOnly<{|
   pressed: boolean,
 |}>;
-type VisionOSProps = $ReadOnly<{|
-  visionos_hoverEffect?: ?HoverEffect,
-|}>;
 type Props = $ReadOnly<{|
   accessibilityActions?: ?$ReadOnlyArray<AccessibilityActionInfo>,
   accessibilityElementsHidden?: ?boolean,
@@ -1866,7 +1863,6 @@ type Props = $ReadOnly<{|
   testOnly_pressed?: ?boolean,
   unstable_pressDelay?: ?number,
   \\"aria-label\\"?: ?string,
-  ...VisionOSProps,
 |}>;
 declare export default React.AbstractComponent<
   Props,
@@ -3327,14 +3323,10 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
 type IOSProps = $ReadOnly<{|
   hasTVPreferredFocus?: ?boolean,
 |}>;
-type VisionOSProps = $ReadOnly<{|
-  hoverEffect?: ?HoverEffect,
-|}>;
 type Props = $ReadOnly<{|
   ...React.ElementConfig<TouchableWithoutFeedback>,
   ...AndroidProps,
   ...IOSProps,
-  ...VisionOSProps,
   activeOpacity?: ?number,
   underlayColor?: ?ColorValue,
   style?: ?ViewStyleProp,
@@ -3360,13 +3352,9 @@ exports[`public API should not change unintentionally Libraries/Components/Touch
   nextFocusRight?: ?number,
   nextFocusUp?: ?number,
 |}>;
-type VisionOSProps = $ReadOnly<{|
-  visionos_hoverEffect?: ?HoverEffect,
-|}>;
 type Props = $ReadOnly<{|
   ...React.ElementConfig<TouchableWithoutFeedback>,
   ...TVProps,
-  ...VisionOSProps,
   activeOpacity?: ?number,
   style?: ?ViewStyleProp,
   hostRef?: ?React.Ref<typeof Animated.View>,
@@ -3665,7 +3653,6 @@ type AndroidDrawableRipple = $ReadOnly<{|
   borderless?: ?boolean,
   rippleRadius?: ?number,
 |}>;
-export type HoverEffect = \\"lift\\" | \\"highlight\\";
 type AndroidDrawable = AndroidDrawableThemeAttr | AndroidDrawableRipple;
 type AndroidViewProps = $ReadOnly<{|
   accessibilityLabelledBy?: ?string | ?Array<string>,
@@ -3693,7 +3680,6 @@ type IOSViewProps = $ReadOnly<{|
   accessibilityElementsHidden?: ?boolean,
   accessibilityLanguage?: ?Stringish,
   shouldRasterizeIOS?: ?boolean,
-  visionos_hoverEffect?: ?HoverEffect,
 |}>;
 export type ViewProps = $ReadOnly<{|
   ...DirectEventProps,
@@ -7439,6 +7425,7 @@ export type EdgeInsetsValue = {
   right: number,
   bottom: number,
 };
+export type CursorValue = ?(\\"auto\\" | \\"pointer\\");
 export type DimensionValue = number | string | \\"auto\\" | AnimatedNode | null;
 export type AnimatableNumericValue = number | AnimatedNode;
 type ____LayoutStyle_Internal = $ReadOnly<{
@@ -7591,6 +7578,7 @@ export type ____ViewStyle_InternalCore = $ReadOnly<{
   opacity?: AnimatableNumericValue,
   elevation?: number,
   pointerEvents?: \\"auto\\" | \\"none\\" | \\"box-none\\" | \\"box-only\\",
+  cursor?: CursorValue,
 }>;
 export type ____ViewStyle_Internal = $ReadOnly<{
   ...____ViewStyle_InternalCore,