[change] Remove hitSlop

Rely on the native behavior of browsers to provide hitslop for touch on
interactive elements.

Fix 1609

packages/docs/src/components/View/View.stories.mdx

@@ -23,7 +23,6 @@ Please also refer to the in-depth "Accessibility" and "Style" guides.
 | accessibilityValue        | ?Object   | |
 | accessible                | ?boolean  | |
 | children                  | ?any      | |
-| hitSlop                   | ?Object   | |
 | importantForAccessibility | ?string   | |
 | nativeID                  | ?string   | |
 | onBlur                    | ?Function | |
@@ -49,19 +48,6 @@ Please also refer to the in-depth "Accessibility" and "Style" guides.
 | style                     | ?Style | |
 | testID                    | ?string | |
 
-### hitSlop
-
-This defines how far a touch event can start away from the view (in pixels).
-Typical interface guidelines recommend touch targets that are at least 30 - 40
-points/density-independent pixels.
-
-For example, if a touchable view has a height of 20 the touchable height can be
-extended to 40 with hitSlop.
-
-```js
-<View hitSlop={{top: 10, bottom: 10, left: 0, right: 0}} />
-```
-
 ### onLayout
 
 This is invoked when a component is mounted and when its layout changes. `x` and

packages/react-native-web/src/exports/Pressable/index.js

@@ -44,8 +44,6 @@ type Props = $ReadOnly<{|
   delayPressOut?: ?number,
   // Whether the press behavior is disabled.
   disabled?: ?boolean,
-  // Additional distance outside of this view in which a press is detected.
-  hitSlop?: $PropertyType<ViewProps, 'hitSlop'>,
   // Called when the view blurs
   onBlur?: $PropertyType<ViewProps, 'onBlur'>,
   // Called when the view is focused

packages/react-native-web/src/exports/Text/types.js

@@ -61,10 +61,8 @@ export type TextStyle = {
   WebkitFontSmoothing?: ?string
 };
 
-type AllowedViewProps = $Diff<ViewProps, { hitSlop: any }>;
-
 export type TextProps = {
-  ...AllowedViewProps,
+  ...ViewProps,
   accessibilityRelationship?: {
     activedescendant?: ?string,
     controls?: ?string,

packages/react-native-web/src/exports/TouchableWithoutFeedback/index.js

@@ -32,7 +32,6 @@ export type Props = $ReadOnly<{|
   delayPressOut?: ?number,
   disabled?: ?boolean,
   focusable?: ?boolean,
-  hitSlop?: $PropertyType<ViewProps, 'hitSlop'>,
   importantForAccessibility?: $PropertyType<ViewProps, 'importantForAccessibility'>,
   nativeID?: $PropertyType<ViewProps, 'nativeID'>,
   onBlur?: $PropertyType<ViewProps, 'onBlur'>,
@@ -56,7 +55,6 @@ const forwardPropsList = {
   children: true,
   disabled: true,
   focusable: true,
-  hitSlop: true,
   importantForAccessibility: true,
   nativeID: true,
   onBlur: true,

packages/react-native-web/src/exports/View/__tests__/__snapshots__/index-test.js.snap

@@ -17,28 +17,6 @@ exports[`components/View non-text is rendered 1`] = `
 </div>
 `;
 
-exports[`components/View prop "hitSlop" handles partial offsets 1`] = `
-<div
-  class="css-view-1dbjc4n"
->
-  <span
-    class="css-hitSlop-mjp8i1"
-    style="top: -10px;"
-  />
-</div>
-`;
-
-exports[`components/View prop "hitSlop" renders a span with negative position offsets 1`] = `
-<div
-  class="css-view-1dbjc4n"
->
-  <span
-    class="css-hitSlop-mjp8i1"
-    style="bottom: -10px; left: -5px; right: -5px; top: -10px;"
-  />
-</div>
-`;
-
 exports[`components/View prop "pointerEvents" 1`] = `
 <div
   class="css-view-1dbjc4n r-pointerEvents-ah5dr5"

packages/react-native-web/src/exports/View/__tests__/index-test.js

@@ -43,18 +43,6 @@ describe('components/View', () => {
     });
   });
 
-  describe('prop "hitSlop"', () => {
-    test('renders a span with negative position offsets', () => {
-      const { container } = render(<View hitSlop={{ top: 10, bottom: 10, right: 5, left: 5 }} />);
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
-    test('handles partial offsets', () => {
-      const { container } = render(<View hitSlop={{ top: 10 }} />);
-      expect(container.firstChild).toMatchSnapshot();
-    });
-  });
-
   test('prop "pointerEvents"', () => {
     const { container } = render(<View pointerEvents="box-only" />);
     expect(container.firstChild).toMatchSnapshot();

packages/react-native-web/src/exports/View/index.js

@@ -78,23 +78,8 @@ const forwardPropsList = {
 
 const pickProps = props => pick(props, forwardPropsList);
 
-function createHitSlopElement(hitSlop) {
-  const hitSlopStyle = {};
-  for (const prop in hitSlop) {
-    if (hitSlop.hasOwnProperty(prop)) {
-      const value = hitSlop[prop];
-      hitSlopStyle[prop] = value > 0 ? -1 * value : 0;
-    }
-  }
-  return createElement('span', {
-    classList: [classes.hitSlop],
-    style: hitSlopStyle
-  });
-}
-
 const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
   const {
-    hitSlop,
     onLayout,
     onMoveShouldSetResponder,
     onMoveShouldSetResponderCapture,
@@ -131,9 +116,6 @@ const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
     }
   });
 
-  const children = hitSlop
-    ? React.Children.toArray([createHitSlopElement(hitSlop), props.children])
-    : props.children;
   const classList = [classes.view];
   const style = StyleSheet.compose(
     hasTextAncestor && styles.inline,
@@ -162,7 +144,6 @@ const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
   });
 
   const supportedProps = pickProps(props);
-  supportedProps.children = children;
   supportedProps.classList = classList;
   supportedProps.ref = setRef;
   supportedProps.style = style;
@@ -187,16 +168,6 @@ const classes = css.create({
     padding: 0,
     position: 'relative',
     zIndex: 0
-  },
-  // this zIndex-ordering positions the hitSlop above the View but behind
-  // its children
-  hitSlop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: -1
   }
 });
 

packages/react-native-web/src/exports/View/types.js

@@ -8,7 +8,7 @@
  * @flow
  */
 
-import type { ColorValue, EdgeInsetsValue, GenericStyleProp, LayoutEvent } from '../../types';
+import type { ColorValue, GenericStyleProp, LayoutEvent } from '../../types';
 
 import type {
   AnimationStyles,
@@ -93,7 +93,6 @@ export type ViewProps = {
   },
   accessible?: boolean,
   children?: ?any,
-  hitSlop?: ?EdgeInsetsValue,
   importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants',
   nativeID?: ?string,
   onBlur?: (e: any) => void,