Pressable

A control to make any element pressable so it can be used as a trigger.

MenuTrigger and TooltipTrigger

The Pressable component can be used as a trigger for the Menu and the Tooltip components.

<MenuTrigger>
  <Pressable>
    <Text>Actions</Text>
  </Pressable>
  <Menu onAction={(action) => {console.log(action)}}>
    <Item key='reply' aria-label='Reply'>
      <Text>Reply</Text>
      <Icon name='PencilIcon' variant='outline' />
    </Item>
    <Item key='replyAll' aria-label='Reply All'>
      <Text>Reply All</Text>
      <TooltipTrigger delay={0} placement='right'>
        <Pressable>
          <Icon name='BoltIcon' variant='solid' />
        </Pressable>
        <Tooltip>This action will send reply to every contact</Tooltip>
      </TooltipTrigger>
    </Item>
  </Menu>
</MenuTrigger>

<MenuTrigger>
  <Pressable>
    <Text>Actions</Text>
  </Pressable>
  <Menu
    onAction={(action) => {
      console.log(action);
    }}
  >
    <Item key="reply" aria-label="Reply">
      <Text>Reply</Text>
      <Icon name="PencilIcon" variant="outline" />
    </Item>
    <Item key="replyAll" aria-label="Reply All">
      <Text>Reply All</Text>
      <TooltipTrigger delay={0} placement="right">
        <Pressable>
          <Icon name="BoltIcon" variant="solid" />
        </Pressable>
        <Tooltip>
          This action will send reply to every contact
        </Tooltip>
      </TooltipTrigger>
    </Item>
  </Menu>
</MenuTrigger>

<MenuTrigger>
  <Pressable>
    <Text>
      Actions
    </Text>
  </Pressable>
  <Menu
    onAction={(
      action
    ) => {
      console.log(
        action
      );
    }}
  >
    <Item
      key="reply"
      aria-label="Reply"
    >
      <Text>
        Reply
      </Text>
      <Icon
        name="PencilIcon"
        variant="outline"
      />
    </Item>
    <Item
      key="replyAll"
      aria-label="Reply All"
    >
      <Text>
        Reply All
      </Text>
      <TooltipTrigger
        delay={0}
        placement="right"
      >
        <Pressable>
          <Icon
            name="BoltIcon"
            variant="solid"
          />
        </Pressable>
        <Tooltip>
          This action
          will send
          reply to
          every contact
        </Tooltip>
      </TooltipTrigger>
    </Item>
  </Menu>
</MenuTrigger>

Accessibility

TODO: Add accessibility description

API