feat(Label): allow isClickable to be set manually (#11549)

* feat(Label): allow isClickable to be set manually

* update prop description with use case

* update example name

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. This should be manually set when using the render prop. */
+  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

@@ -29,6 +29,14 @@ import './Label.css';
 
 ```
 
+### Label with custom render
+
+Labels may be passed a custom renderer to display customized content or for use with router components. When using a custom render, `isClickable` may also be passed to remove the underline text decoration of anchors or router links.
+
+```ts file="LabelCustomRender.tsx"
+
+```
+
 ### Editable labels
 
 Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape.

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Label } from '@patternfly/react-core';
+import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+
+export const LabelCustomRender: React.FunctionComponent = () => (
+  <Label
+    color="blue"
+    icon={<InfoCircleIcon />}
+    onClose={() => Function.prototype}
+    render={({ className, content, componentRef }) => (
+      <a className={className} ref={componentRef}>
+        {content}
+      </a>
+    )}
+    textMaxWidth="16ch"
+    isClickable
+  >
+    Blue label router link with icon that overflows
+  </Label>
+);