feat(Dropdown): Add new prop so Links are treated better (#3889)

* feat(Dropdown): Add new prop so Links are treated better

When prop is used, class is applied to child so that the link is full-width and even clicking on the padding gets you where you need to go. Link color also remains black.

Fixes #3641

* Fix wrapper, remove examples

* Reworked with new prop; adjusted css concatenation tool

* modification to allow react children

* examples

Co-authored-by: Joachim Schuler <jschuler@redhat.com>

Author: rebeccaalpert

packages/react-core/src/components/Dropdown/InternalDropdownItem.tsx

@@ -151,18 +151,15 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
     } = this.props;
     /* eslint-enable @typescript-eslint/no-unused-vars */
     const Component = component as any;
-    let isComponentReactElement = false;
     let classes: string;
+    const isChildReactElement = React.isValidElement(children);
+
     if (Component === 'a') {
       additionalProps['aria-disabled'] = isDisabled;
       additionalProps.tabIndex = isDisabled ? -1 : additionalProps.tabIndex;
     } else if (Component === 'button') {
       additionalProps.disabled = isDisabled;
       additionalProps.type = additionalProps.type || 'button';
-    } else if (React.isValidElement(Component)) {
-      // Render a custom wrapper component, for example router Link component
-      // instead of our wrapper
-      isComponentReactElement = true;
     }
 
     const renderWithTooltip = (childNode: React.ReactNode) =>
@@ -202,9 +199,11 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
               id={id}
             >
               {renderWithTooltip(
-                isComponentReactElement ? (
-                  React.cloneElement(Component as React.ReactHTMLElement<any>, {
+                isChildReactElement ? (
+                  React.cloneElement(children as React.ReactElement<any>, {
                     ...additionalProps,
+                    ref: this.ref,
+                    id,
                     className: css(classes, itemClass, variant === 'icon' && styles.modifiers.icon)
                   })
                 ) : (

packages/react-core/src/components/Dropdown/examples/Dropdown.md

@@ -9,6 +9,7 @@ typescript: true
 
 import { Dropdown, DropdownToggle, DropdownToggleCheckbox, DropdownItem, DropdownItemIcon, DropdownSeparator, DropdownPosition, DropdownDirection, KebabToggle, DropdownGroup, DropdownToggleAction } from '@patternfly/react-core';
 import { ThIcon, CaretDownIcon, CogIcon, BellIcon, CubesIcon } from '@patternfly/react-icons';
+import { Link } from '@reach/router';
 
 ## Examples
 
@@ -1105,26 +1106,64 @@ class DropdownPanel extends React.Component {
 }
 ```
 
-## React router link usage
+```js title=React-Router-Link-Usage
+import React from 'react';
+import {
+  Button,
+  Dropdown,
+  DropdownToggle,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownPosition,
+  DropdownDirection,
+  KebabToggle
+} from '@patternfly/react-core';
+import { Link } from '@reach/router';
+import { ThIcon, CaretDownIcon } from '@patternfly/react-icons';
 
-A react-router Link may be wrapped by DropdownItem or used directly within Dropdown. Here's some example JSX:
+class RouterDropdown extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false
+    };
+    this.onToggle = isOpen => {
+      this.setState({
+        isOpen
+      });
+    };
+    this.onSelect = event => {
+      this.setState({
+        isOpen: !this.state.isOpen
+      });
+      this.onFocus();
+    };
+    this.onFocus = () => {
+      const element = document.getElementById('toggle-id');
+      element.focus();
+    };
+  }
 
-<!-- eslint-skip -->
-```js noLive
-/** Wrapped Link for DropdownItem list **/
-<DropdownItem key="link">
-  <Link to={'/'}>Link</Link>
-</DropdownItem>
+  render() {
+    const { isOpen } = this.state;
+    const dropdownItems = [
+      <DropdownItem key="routerlink">
+        <Link to="/">Link</Link>
+      </DropdownItem>
+    ];
 
-/** Direct child of Dropdown **/
-<Dropdown
-  onSelect={this.onSelect}
-  toggle={
-    <DropdownToggle onToggle={this.onToggle}>
-      Expanded Dropdown
-    </DropdownToggle>
+    return (
+      <Dropdown
+        onSelect={this.onSelect}
+        toggle={
+          <DropdownToggle id="toggle-id" onToggle={this.onToggle} iconComponent={CaretDownIcon}>
+            Dropdown
+          </DropdownToggle>
+        }
+        isOpen={isOpen}
+        dropdownItems={dropdownItems}
+      />
+    );
   }
-  isOpen={isOpen}>
-  <Link to={'/'}>Link</Link>
-</Dropdown>
+}
 ```