DropdownItem variation for use with interactive child element

[mcoker]

https://www.patternfly.org/v4/documentation/react/components/dropdown#react-router-link-usage

<DropdownItem key="link" component="div">
  <Link to={'/'}>Link</Link>
</DropdownItem>

This results in markup that looks like

<div class="pf-c-dropdown__menu-item">
  <a href="#">Link</a>
</div>

and looks like the "Link action" link in this screenshot

Our dropdown component isn't setup to support this structure and would require some enhancements to be able to support

• The touch area of the link filling the entire dropdown item
  • The link is currently just the text, and does not include any of the padding around it
• The proper hover/focus interaction
  • The background color should be an indication that you're hovering or focused on the interactive element (link/button). Currently the background changes when your mouse enters the padding around the link, and clicking the padding does nothing. The pointer should change to a cursor along with the background color, indicating that you're hovering the interactive element.
• Ensuring the link color is correct

After talking with @tlabaj and @kmcfaul about it today, we considered allowing for a prop to be used with <DropdownItem> that would be an indication that the interactive element is a child of <DropdownItem>, and the prop would effectively remove the container element and apply the dropdown item class .pf-c-dropdown__menu-item to the child instead.