Add hitSlop support to DropdownMenu.Trigger

[guillaumehcht]

Overview

On mobile devices, the Trigger component's touch target can be too small for comfortable interaction, especially when using small icons like ellipsis menus. Being able to adjust the hitSlop would greatly improve the touch experience without affecting the visual layout. This follows iOS Human Interface Guidelines and Material Design recommendations for minimum touch targets.

Current Behavior

Currently, there's no way to extend the touch area of the Trigger component. The touch area is limited to the visible bounds of the Trigger's children.

Proposed Solution

Add support for a hitSlop prop on the Trigger component, similar to React Native's Pressable component. This would allow developers to extend the touch area beyond the visible bounds.

Example usage:

<DropdownMenu.Trigger hitSlop={20}>
  <Icon name="ellipsis" />
</DropdownMenu.Trigger>

// Or with specific sides
<DropdownMenu.Trigger hitSlop={{
  top: 20,
  bottom: 20,
  left: 20,
  right: 20
}}>
  <Icon name="ellipsis" />
</DropdownMenu.Trigger>

Note: I searched the whole zeego documentation for a way to achieve and tried many other alternatives to go about it and found nothing that could work. I apologize in advance if the feature already exists.