feat(Label): allow isClickable to be set manually

Author: kmcfaul

packages/react-core/src/components/Label/Label.tsx

@@ -31,6 +31,8 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   isDisabled?: boolean;
   /** Flag indicating the label is editable. */
   isEditable?: boolean;
+  /** Flag indicating the label is clickable. This flag will automatically be set if a href is passed, or if an onClick handler is passed and the label is not an overflow or add variant. */
+  isClickable?: boolean;
   /** Additional props passed to the editable label text div. Optionally passing onInput and onBlur callbacks will allow finer custom text input control. */
   editableProps?: any;
   /** Callback when an editable label completes an edit. */
@@ -110,6 +112,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   isCompact = false,
   isDisabled = false,
   isEditable = false,
+  isClickable: isClickableProp = false,
   editableProps,
   textMaxWidth,
   tooltipPosition,
@@ -132,7 +135,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
 
   const isOverflowLabel = variant === 'overflow';
   const isAddLabel = variant === 'add';
-  const isClickable = (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
+  const isClickable = isClickableProp || (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
 
   let _icon;
   if (status) {

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

@@ -30,7 +30,9 @@ import './Label.css';
 
 ```
 
-### Label with router link
+### Label with custom render
+
+Labels may be passed a custom renderer to display customized content or for use with router components.
 
 ```ts file="LabelRouterLink.tsx"
 

packages/react-core/src/components/Label/examples/LabelRouterLink.tsx

@@ -1,19 +1,24 @@
 import React from 'react';
 import { Label } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import { Link } from '@reach/router';
 
 export const LabelRouterLink: React.FunctionComponent = () => (
   <Label
     color="blue"
     icon={<InfoCircleIcon />}
     onClose={() => Function.prototype}
     render={({ className, content, componentRef }) => (
-      <Link to="/" className={className} innerRef={componentRef}>
+      <a className={className} ref={componentRef}>
         {content}
-      </Link>
+      </a>
+      /** A router link would look like the following:
+       * <Link to="/" className={className} ref={componentRef}>
+       *   {content}
+       * </Link>
+       */
     )}
     textMaxWidth="16ch"
+    isClickable // can be passed manually to remove the default underline text-decoration of links
   >
     Blue label router link with icon that overflows
   </Label>