Reworked with new prop; adjusted css concatenation tool

Author: rebeccaalpert

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

@@ -12,7 +12,7 @@ export interface DropdownItemProps extends InternalDropdownItemProps {
   /** Indicates which component will be used as dropdown item */
   component?: React.ReactNode;
   /** Variant of the item. The 'icon' variant should use DropdownItemIcon to wrap contained icons or images. */
-  variant?: 'item' | 'icon' | 'routerLink';
+  variant?: 'item' | 'icon';
   /** Render dropdown item as disabled option */
   isDisabled?: boolean;
   /** Forces display of the hover state of the element */
@@ -27,6 +27,8 @@ export interface DropdownItemProps extends InternalDropdownItemProps {
   additionalChild?: React.ReactNode;
   /** Custom item rendering that receives the DropdownContext */
   customChild?: React.ReactNode;
+   /** Flag indicating if the dropdown item is a router link */
+  isRouterLink?: boolean;
 }
 
 export const DropdownItem: React.FunctionComponent<DropdownItemProps> = ({

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import classNames from 'classnames';
 import { css } from '@patternfly/react-styles';
 import { DropdownContext } from './dropdownConstants';
 import { KEYHANDLER_DIRECTION } from '../../helpers/constants';
@@ -16,7 +15,7 @@ export interface InternalDropdownItemProps extends React.HTMLProps<HTMLAnchorEle
   /** Indicates which component will be used as dropdown item */
   component?: React.ReactNode | string;
   /** Variant of the item. The 'icon' variant should use DropdownItemIcon to wrap contained icons or images. */
-  variant?: 'item' | 'icon' | 'routerLink';
+  variant?: 'item' | 'icon';
   /** Role for the item */
   role?: string;
   /** Render dropdown item as disabled option */
@@ -46,6 +45,8 @@ export interface InternalDropdownItemProps extends React.HTMLProps<HTMLAnchorEle
   customChild?: React.ReactNode;
   /** Flag indicating if hitting enter on an item also triggers an arrow down key press */
   enterTriggersArrowDown?: boolean;
+  /** Flag indicating if the item is a router link */
+  isRouterLink?: boolean;
 }
 
 export class InternalDropdownItem extends React.Component<InternalDropdownItemProps> {
@@ -135,7 +136,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
   ) {
     return React.Children.map(children as React.ReactElement<any>, child =>
       React.cloneElement(child, {
-        className: classNames(child.props.className, itemClass),
+        className: css(child.props.className, itemClass),
         ref,
         id,
         ...additionalProps
@@ -165,13 +166,14 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
       additionalChild,
       customChild,
       enterTriggersArrowDown,
+      isRouterLink,
       ...additionalProps
     } = this.props;
     /* eslint-enable @typescript-eslint/no-unused-vars */
     const Component = component as any;
     let isComponentReactElement = false;
     let classes: string;
-    if (Component === 'a' || variant === 'routerLink') {
+    if (Component === 'a' || isRouterLink) {
       additionalProps['aria-disabled'] = isDisabled;
       additionalProps.tabIndex = isDisabled ? -1 : additionalProps.tabIndex;
     } else if (Component === 'button') {
@@ -225,7 +227,7 @@ export class InternalDropdownItem extends React.Component<InternalDropdownItemPr
                     ...additionalProps,
                     className: css(classes, itemClass, variant === 'icon' && styles.modifiers.icon)
                   })
-                ) : variant === 'routerLink' ? (
+                ) : isRouterLink ? (
                   this.extendChildClass(children, itemClass, this.ref, id, { ...additionalProps })
                 ) : (
                   <Component

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

@@ -1147,7 +1147,7 @@ class RouterDropdown extends React.Component {
   render() {
     const { isOpen } = this.state;
     const dropdownItems = [
-      <DropdownItem key="routerlink" variant="routerLink">
+      <DropdownItem key="routerlink" isRouterLink>
         <Link to="/">Link</Link>
       </DropdownItem>
     ];