From 9de52cef1cfb1c0289abdd03c4fa7ff35c0811bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Tue, 20 Jun 2023 16:09:51 +0200
Subject: [PATCH 1/5] feat(Label) add option to make label clickable

---
 .../react-core/src/components/Label/Label.tsx |   9 +-
 .../components/Label/__tests__/Label.test.tsx |  21 +
 .../components/Label/examples/LabelFilled.tsx | 388 +++++++------
 .../Label/examples/LabelOutline.tsx           | 516 ++++++++++--------
 4 files changed, 538 insertions(+), 396 deletions(-)

diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx
index 7f15a1a56ac..5bdd1398103 100644
--- a/packages/react-core/src/components/Label/Label.tsx
+++ b/packages/react-core/src/components/Label/Label.tsx
@@ -59,6 +59,8 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   href?: string;
   /** Flag indicating if the label is an overflow label */
   isOverflowLabel?: boolean;
+  /** On click callback. If present, label will be clickable. */
+  onLabelClick?: (event: React.MouseEvent) => void;
   /** Forwards the label content and className to rendered function.  Use this prop for react router support.*/
   render?: ({
     className,
@@ -94,6 +96,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   tooltipPosition,
   icon,
   onClose,
+  onLabelClick,
   onEditCancel,
   onEditComplete,
   closeBtn,
@@ -235,7 +238,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   let LabelComponentChildElement = 'span';
   if (href) {
     LabelComponentChildElement = 'a';
-  } else if (isEditable) {
+  } else if (isEditable || onLabelClick) {
     LabelComponentChildElement = 'button';
   }
 
@@ -254,7 +257,9 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   };
 
   let labelComponentChild = (
-    <LabelComponentChildElement {...labelComponentChildProps}>{content}</LabelComponentChildElement>
+    <LabelComponentChildElement onClick={onLabelClick} {...labelComponentChildProps}>
+      {content}
+    </LabelComponentChildElement>
   );
 
   if (render) {
diff --git a/packages/react-core/src/components/Label/__tests__/Label.test.tsx b/packages/react-core/src/components/Label/__tests__/Label.test.tsx
index be3c3605986..293bed344a0 100644
--- a/packages/react-core/src/components/Label/__tests__/Label.test.tsx
+++ b/packages/react-core/src/components/Label/__tests__/Label.test.tsx
@@ -109,4 +109,25 @@ describe('Label', () => {
     expect(screen.queryByRole('button', { name: 'Something' })).toBeNull();
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('clickable label', () => {
+    const fn = jest.fn();
+
+    render(<Label onLabelClick={fn}>Click me</Label>);
+
+    expect(screen.getByRole(`button`)).toBeVisible();
+  });
+
+  test('clickable label calls passed callback on click', async () => {
+    const mockCallback = jest.fn();
+    const user = userEvent.setup();
+
+    render(<Label onLabelClick={mockCallback}>Click me</Label>);
+
+    const label = screen.getByRole('button');
+
+    await user.click(label);
+
+    expect(mockCallback).toBeCalledTimes(1);
+  });
 });
diff --git a/packages/react-core/src/components/Label/examples/LabelFilled.tsx b/packages/react-core/src/components/Label/examples/LabelFilled.tsx
index ff0e0cca989..21868abef06 100644
--- a/packages/react-core/src/components/Label/examples/LabelFilled.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelFilled.tsx
@@ -2,171 +2,223 @@ import React from 'react';
 import { Label } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
-export const LabelFilled: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Label>Grey</Label> <Label icon={<InfoCircleIcon />}>Grey icon</Label>{' '}
-    <Label onClose={() => Function.prototype}>Grey removable</Label>{' '}
-    <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Grey icon removable
-    </Label>{' '}
-    <Label href="#filled">Grey link</Label>{' '}
-    <Label href="#filled" onClose={() => Function.prototype}>
-      Grey link removable
-    </Label>
-    <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Grey label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label color="blue">Blue</Label>{' '}
-    <Label color="blue" icon={<InfoCircleIcon />}>
-      Blue icon
-    </Label>{' '}
-    <Label color="blue" onClose={() => Function.prototype}>
-      Blue removable
-    </Label>{' '}
-    <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Blue icon removable
-    </Label>{' '}
-    <Label color="blue" href="#filled">
-      Blue link
-    </Label>{' '}
-    <Label color="blue" href="#filled" onClose={() => Function.prototype}>
-      Blue link removable
-    </Label>
-    <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Blue label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label color="green">Green</Label>{' '}
-    <Label color="green" icon={<InfoCircleIcon />}>
-      Green icon
-    </Label>{' '}
-    <Label color="green" onClose={() => Function.prototype}>
-      Green removable
-    </Label>{' '}
-    <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Green icon removable
-    </Label>{' '}
-    <Label color="green" href="#filled">
-      Green link
-    </Label>{' '}
-    <Label color="green" href="#filled" onClose={() => Function.prototype}>
-      Green link removable
-    </Label>
-    <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Green label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label color="orange">Orange</Label>{' '}
-    <Label color="orange" icon={<InfoCircleIcon />}>
-      Orange icon
-    </Label>{' '}
-    <Label color="orange" onClose={() => Function.prototype}>
-      Orange removable
-    </Label>{' '}
-    <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Orange icon removable
-    </Label>{' '}
-    <Label color="orange" href="#filled">
-      Orange link
-    </Label>{' '}
-    <Label color="orange" href="#filled" onClose={() => Function.prototype}>
-      Orange link removable
-    </Label>
-    <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Orange label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label color="red">Red</Label>{' '}
-    <Label color="red" icon={<InfoCircleIcon />}>
-      Red icon
-    </Label>{' '}
-    <Label color="red" onClose={() => Function.prototype}>
-      Red removable
-    </Label>{' '}
-    <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Red icon removable
-    </Label>{' '}
-    <Label color="red" href="#filled">
-      Red link
-    </Label>{' '}
-    <Label color="red" href="#filled" onClose={() => Function.prototype}>
-      Red link removable
-    </Label>
-    <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Red label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label color="purple">Purple</Label>{' '}
-    <Label color="purple" icon={<InfoCircleIcon />}>
-      Purple icon
-    </Label>{' '}
-    <Label color="purple" onClose={() => Function.prototype}>
-      Purple removable
-    </Label>{' '}
-    <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Purple icon removable
-    </Label>{' '}
-    <Label color="purple" href="#filled">
-      Purple link
-    </Label>{' '}
-    <Label color="purple" href="#filled" onClose={() => Function.prototype}>
-      Purple link removable
-    </Label>
-    <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Purple label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label color="cyan">Cyan</Label>{' '}
-    <Label color="cyan" icon={<InfoCircleIcon />}>
-      Cyan icon
-    </Label>{' '}
-    <Label color="cyan" onClose={() => Function.prototype}>
-      Cyan removable
-    </Label>{' '}
-    <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Cyan icon removable
-    </Label>{' '}
-    <Label color="cyan" href="#filled">
-      Cyan link
-    </Label>{' '}
-    <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
-      Cyan link removable
-    </Label>
-    <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Cyan label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label color="gold">Gold</Label>{' '}
-    <Label color="gold" icon={<InfoCircleIcon />}>
-      Gold icon
-    </Label>{' '}
-    <Label color="gold" onClose={() => Function.prototype}>
-      Gold removable
-    </Label>{' '}
-    <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Gold icon removable
-    </Label>{' '}
-    <Label color="gold" href="#filled">
-      Gold link
-    </Label>{' '}
-    <Label color="gold" href="#filled" onClose={() => Function.prototype}>
-      Gold link removable
-    </Label>
-    <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Gold label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <div style={{ width: '250px' }}>
-      <Label>Label that overflows its parent, but has no textMaxWidth on its own</Label>
-    </div>
-  </React.Fragment>
-);
+export const LabelFilled: React.FunctionComponent = () => {
+  const logColor = (color: string) => {
+    // eslint-disable-next-line no-console
+    console.log(color, 'label clicked');
+  };
+  return (
+    <React.Fragment>
+      <Label>Grey</Label> <Label icon={<InfoCircleIcon />}>Grey icon</Label>{' '}
+      <Label onClose={() => Function.prototype}>Grey removable</Label>{' '}
+      <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Grey icon removable
+      </Label>{' '}
+      <Label href="#filled">Grey link</Label>{' '}
+      <Label href="#filled" onClose={() => Function.prototype}>
+        Grey link removable
+      </Label>
+      <Label onLabelClick={() => logColor('grey')}>Grey clickable</Label>{' '}
+      <Label onLabelClick={() => logColor('grey')} onClose={() => Function.prototype}>
+        Grey clickable removable
+      </Label>
+      <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Grey label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label color="blue">Blue</Label>{' '}
+      <Label color="blue" icon={<InfoCircleIcon />}>
+        Blue icon
+      </Label>{' '}
+      <Label color="blue" onClose={() => Function.prototype}>
+        Blue removable
+      </Label>{' '}
+      <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Blue icon removable
+      </Label>{' '}
+      <Label color="blue" href="#filled">
+        Blue link
+      </Label>{' '}
+      <Label color="blue" href="#filled" onClose={() => Function.prototype}>
+        Blue link removable
+      </Label>
+      <Label color="blue" onLabelClick={() => logColor('blue')}>
+        Blue clickable
+      </Label>{' '}
+      <Label color="blue" onLabelClick={() => logColor('blue')} onClose={() => Function.prototype}>
+        Blue clickable removable
+      </Label>
+      <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Blue label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label color="green">Green</Label>{' '}
+      <Label color="green" icon={<InfoCircleIcon />}>
+        Green icon
+      </Label>{' '}
+      <Label color="green" onClose={() => Function.prototype}>
+        Green removable
+      </Label>{' '}
+      <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Green icon removable
+      </Label>{' '}
+      <Label color="green" href="#filled">
+        Green link
+      </Label>{' '}
+      <Label color="green" href="#filled" onClose={() => Function.prototype}>
+        Green link removable
+      </Label>
+      <Label color="green" onLabelClick={() => logColor('green')}>
+        Green clickable
+      </Label>{' '}
+      <Label color="green" onLabelClick={() => logColor('green')} onClose={() => Function.prototype}>
+        Green clickable removable
+      </Label>
+      <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Green label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label color="orange">Orange</Label>{' '}
+      <Label color="orange" icon={<InfoCircleIcon />}>
+        Orange icon
+      </Label>{' '}
+      <Label color="orange" onClose={() => Function.prototype}>
+        Orange removable
+      </Label>{' '}
+      <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Orange icon removable
+      </Label>{' '}
+      <Label color="orange" href="#filled">
+        Orange link
+      </Label>{' '}
+      <Label color="orange" href="#filled" onClose={() => Function.prototype}>
+        Orange link removable
+      </Label>
+      <Label color="orange" onLabelClick={() => logColor('orange')}>
+        Orange clickable
+      </Label>{' '}
+      <Label color="orange" onLabelClick={() => logColor('orange')} onClose={() => Function.prototype}>
+        Orange clickable removable
+      </Label>
+      <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Orange label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label color="red">Red</Label>{' '}
+      <Label color="red" icon={<InfoCircleIcon />}>
+        Red icon
+      </Label>{' '}
+      <Label color="red" onClose={() => Function.prototype}>
+        Red removable
+      </Label>{' '}
+      <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Red icon removable
+      </Label>{' '}
+      <Label color="red" href="#filled">
+        Red link
+      </Label>{' '}
+      <Label color="red" href="#filled" onClose={() => Function.prototype}>
+        Red link removable
+      </Label>
+      <Label color="red" onLabelClick={() => logColor('red')}>
+        Red clickable
+      </Label>{' '}
+      <Label color="red" onLabelClick={() => logColor('red')} onClose={() => Function.prototype}>
+        Red clickable removable
+      </Label>
+      <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Red label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label color="purple">Purple</Label>{' '}
+      <Label color="purple" icon={<InfoCircleIcon />}>
+        Purple icon
+      </Label>{' '}
+      <Label color="purple" onClose={() => Function.prototype}>
+        Purple removable
+      </Label>{' '}
+      <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Purple icon removable
+      </Label>{' '}
+      <Label color="purple" href="#filled">
+        Purple link
+      </Label>{' '}
+      <Label color="purple" href="#filled" onClose={() => Function.prototype}>
+        Purple link removable
+      </Label>
+      <Label color="purple" onLabelClick={() => logColor('purple')}>
+        Purple clickable
+      </Label>{' '}
+      <Label color="purple" onLabelClick={() => logColor('purple')} onClose={() => Function.prototype}>
+        Purple clickable removable
+      </Label>
+      <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Purple label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label color="cyan">Cyan</Label>{' '}
+      <Label color="cyan" icon={<InfoCircleIcon />}>
+        Cyan icon
+      </Label>{' '}
+      <Label color="cyan" onClose={() => Function.prototype}>
+        Cyan removable
+      </Label>{' '}
+      <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Cyan icon removable
+      </Label>{' '}
+      <Label color="cyan" href="#filled">
+        Cyan link
+      </Label>{' '}
+      <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
+        Cyan link removable
+      </Label>
+      <Label color="cyan" onLabelClick={() => logColor('cyan')}>
+        Cyan clickable
+      </Label>{' '}
+      <Label color="cyan" onLabelClick={() => logColor('cyan')} onClose={() => Function.prototype}>
+        Cyan clickable removable
+      </Label>
+      <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Cyan label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label color="gold">Gold</Label>{' '}
+      <Label color="gold" icon={<InfoCircleIcon />}>
+        Gold icon
+      </Label>{' '}
+      <Label color="gold" onClose={() => Function.prototype}>
+        Gold removable
+      </Label>{' '}
+      <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Gold icon removable
+      </Label>{' '}
+      <Label color="gold" href="#filled">
+        Gold link
+      </Label>{' '}
+      <Label color="gold" href="#filled" onClose={() => Function.prototype}>
+        Gold link removable
+      </Label>
+      <Label color="gold" onLabelClick={() => logColor('gold')}>
+        Gold clickable
+      </Label>{' '}
+      <Label color="gold" onLabelClick={() => logColor('gold')} onClose={() => Function.prototype}>
+        Gold clickable removable
+      </Label>
+      <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Gold label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <div style={{ width: '250px' }}>
+        <Label>Label that overflows its parent, but has no textMaxWidth on its own</Label>
+      </div>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Label/examples/LabelOutline.tsx b/packages/react-core/src/components/Label/examples/LabelOutline.tsx
index cfddb5adb4a..5b44bdc4c8b 100644
--- a/packages/react-core/src/components/Label/examples/LabelOutline.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelOutline.tsx
@@ -2,229 +2,293 @@ import React from 'react';
 import { Label } from '@patternfly/react-core';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
-export const LabelOutline: React.FunctionComponent = () => (
-  <React.Fragment>
-    <Label variant="outline">Grey</Label>{' '}
-    <Label variant="outline" icon={<InfoCircleIcon />}>
-      Grey icon
-    </Label>{' '}
-    <Label variant="outline" onClose={() => Function.prototype}>
-      Grey removable
-    </Label>{' '}
-    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Grey icon removable
-    </Label>{' '}
-    <Label variant="outline" href="#outline">
-      Grey link
-    </Label>{' '}
-    <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
-      Grey link removable
-    </Label>
-    <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
-      Grey label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="blue">
-      Blue
-    </Label>{' '}
-    <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
-      Blue icon
-    </Label>{' '}
-    <Label variant="outline" color="blue" onClose={() => Function.prototype}>
-      Blue removable
-    </Label>{' '}
-    <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Blue icon removable
-    </Label>{' '}
-    <Label variant="outline" color="blue" href="#outline">
-      Blue link
-    </Label>{' '}
-    <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
-      Blue link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="blue"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Blue label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="green">
-      Green
-    </Label>{' '}
-    <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
-      Green icon
-    </Label>{' '}
-    <Label variant="outline" color="green" onClose={() => Function.prototype}>
-      Green removable
-    </Label>{' '}
-    <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Green icon removable
-    </Label>{' '}
-    <Label variant="outline" color="green" href="#outline">
-      Green link
-    </Label>{' '}
-    <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
-      Green link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="green"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Green label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="orange">
-      Orange
-    </Label>{' '}
-    <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
-      Orange icon
-    </Label>{' '}
-    <Label variant="outline" color="orange" onClose={() => Function.prototype}>
-      Orange removable
-    </Label>{' '}
-    <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Orange icon removable
-    </Label>{' '}
-    <Label variant="outline" color="orange" href="#outline">
-      Orange link
-    </Label>{' '}
-    <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
-      Orange link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="orange"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Orange label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="red">
-      Red
-    </Label>{' '}
-    <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
-      Red icon
-    </Label>{' '}
-    <Label variant="outline" color="red" onClose={() => Function.prototype}>
-      Red removable
-    </Label>{' '}
-    <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Red icon removable
-    </Label>{' '}
-    <Label variant="outline" color="red" href="#outline">
-      Red link
-    </Label>{' '}
-    <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
-      Red link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="red"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Red label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="purple">
-      Purple
-    </Label>{' '}
-    <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
-      Purple icon
-    </Label>{' '}
-    <Label variant="outline" color="purple" onClose={() => Function.prototype}>
-      Purple removable
-    </Label>{' '}
-    <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Purple icon removable
-    </Label>{' '}
-    <Label variant="outline" color="purple" href="#outline">
-      Purple link
-    </Label>{' '}
-    <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
-      Purple link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="purple"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Purple label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="cyan">
-      Cyan
-    </Label>{' '}
-    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
-      Cyan icon
-    </Label>{' '}
-    <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
-      Cyan removable
-    </Label>{' '}
-    <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Cyan icon removable
-    </Label>{' '}
-    <Label variant="outline" color="cyan" href="#outline">
-      Cyan link
-    </Label>{' '}
-    <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
-      Cyan link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="cyan"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Cyan label with icon that overflows
-    </Label>
-    <br />
-    <br />
-    <Label variant="outline" color="gold">
-      Gold
-    </Label>{' '}
-    <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
-      Gold icon
-    </Label>{' '}
-    <Label variant="outline" color="gold" onClose={() => Function.prototype}>
-      Gold removable
-    </Label>{' '}
-    <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
-      Gold icon removable
-    </Label>{' '}
-    <Label variant="outline" color="gold" href="#outline">
-      Gold link
-    </Label>{' '}
-    <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
-      Gold link removable
-    </Label>
-    <Label
-      variant="outline"
-      color="gold"
-      icon={<InfoCircleIcon />}
-      onClose={() => Function.prototype}
-      textMaxWidth="16ch"
-    >
-      Gold label with icon that overflows
-    </Label>
-  </React.Fragment>
-);
+export const LabelOutline: React.FunctionComponent = () => {
+  const logColor = (color: string) => {
+    // eslint-disable-next-line no-console
+    console.log(color, 'label clicked');
+  };
+  return (
+    <React.Fragment>
+      <Label variant="outline">Grey</Label>{' '}
+      <Label variant="outline" icon={<InfoCircleIcon />}>
+        Grey icon
+      </Label>{' '}
+      <Label variant="outline" onClose={() => Function.prototype}>
+        Grey removable
+      </Label>{' '}
+      <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Grey icon removable
+      </Label>{' '}
+      <Label variant="outline" href="#outline">
+        Grey link
+      </Label>{' '}
+      <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
+        Grey link removable
+      </Label>
+      <Label variant="outline" onLabelClick={() => logColor('grey')}>
+        Grey clickable
+      </Label>{' '}
+      <Label variant="outline" onLabelClick={() => logColor('grey')} onClose={() => Function.prototype}>
+        Grey clickable removable
+      </Label>
+      <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+        Grey label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="blue">
+        Blue
+      </Label>{' '}
+      <Label variant="outline" color="blue" icon={<InfoCircleIcon />}>
+        Blue icon
+      </Label>{' '}
+      <Label variant="outline" color="blue" onClose={() => Function.prototype}>
+        Blue removable
+      </Label>{' '}
+      <Label variant="outline" color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Blue icon removable
+      </Label>{' '}
+      <Label variant="outline" color="blue" href="#outline">
+        Blue link
+      </Label>{' '}
+      <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
+        Blue link removable
+      </Label>
+      <Label variant="outline" color="blue" onLabelClick={() => logColor('blue')}>
+        Blue clickable
+      </Label>{' '}
+      <Label variant="outline" color="blue" onLabelClick={() => logColor('blue')} onClose={() => Function.prototype}>
+        Blue clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="blue"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Blue label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="green">
+        Green
+      </Label>{' '}
+      <Label variant="outline" color="green" icon={<InfoCircleIcon />}>
+        Green icon
+      </Label>{' '}
+      <Label variant="outline" color="green" onClose={() => Function.prototype}>
+        Green removable
+      </Label>{' '}
+      <Label variant="outline" color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Green icon removable
+      </Label>{' '}
+      <Label variant="outline" color="green" href="#outline">
+        Green link
+      </Label>{' '}
+      <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
+        Green link removable
+      </Label>
+      <Label variant="outline" color="green" onLabelClick={() => logColor('green')}>
+        Green clickable
+      </Label>{' '}
+      <Label variant="outline" color="green" onLabelClick={() => logColor('green')} onClose={() => Function.prototype}>
+        Green clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="green"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Green label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="orange">
+        Orange
+      </Label>{' '}
+      <Label variant="outline" color="orange" icon={<InfoCircleIcon />}>
+        Orange icon
+      </Label>{' '}
+      <Label variant="outline" color="orange" onClose={() => Function.prototype}>
+        Orange removable
+      </Label>{' '}
+      <Label variant="outline" color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Orange icon removable
+      </Label>{' '}
+      <Label variant="outline" color="orange" href="#outline">
+        Orange link
+      </Label>{' '}
+      <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
+        Orange link removable
+      </Label>
+      <Label variant="outline" color="orange" onLabelClick={() => logColor('orange')}>
+        Orange clickable
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="orange"
+        onLabelClick={() => logColor('orange')}
+        onClose={() => Function.prototype}
+      >
+        Orange clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="orange"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Orange label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="red">
+        Red
+      </Label>{' '}
+      <Label variant="outline" color="red" icon={<InfoCircleIcon />}>
+        Red icon
+      </Label>{' '}
+      <Label variant="outline" color="red" onClose={() => Function.prototype}>
+        Red removable
+      </Label>{' '}
+      <Label variant="outline" color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Red icon removable
+      </Label>{' '}
+      <Label variant="outline" color="red" href="#outline">
+        Red link
+      </Label>{' '}
+      <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
+        Red link removable
+      </Label>
+      <Label variant="outline" color="red" onLabelClick={() => logColor('red')}>
+        Red clickable
+      </Label>{' '}
+      <Label variant="outline" color="red" onLabelClick={() => logColor('red')} onClose={() => Function.prototype}>
+        Red clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="red"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Red label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="purple">
+        Purple
+      </Label>{' '}
+      <Label variant="outline" color="purple" icon={<InfoCircleIcon />}>
+        Purple icon
+      </Label>{' '}
+      <Label variant="outline" color="purple" onClose={() => Function.prototype}>
+        Purple removable
+      </Label>{' '}
+      <Label variant="outline" color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Purple icon removable
+      </Label>{' '}
+      <Label variant="outline" color="purple" href="#outline">
+        Purple link
+      </Label>{' '}
+      <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
+        Purple link removable
+      </Label>
+      <Label variant="outline" color="purple" onLabelClick={() => logColor('purple')}>
+        Purple clickable
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="purple"
+        onLabelClick={() => logColor('purple')}
+        onClose={() => Function.prototype}
+      >
+        Purple clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="purple"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Purple label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="cyan">
+        Cyan
+      </Label>{' '}
+      <Label variant="outline" color="cyan" icon={<InfoCircleIcon />}>
+        Cyan icon
+      </Label>{' '}
+      <Label variant="outline" color="cyan" onClose={() => Function.prototype}>
+        Cyan removable
+      </Label>{' '}
+      <Label variant="outline" color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Cyan icon removable
+      </Label>{' '}
+      <Label variant="outline" color="cyan" href="#outline">
+        Cyan link
+      </Label>{' '}
+      <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
+        Cyan link removable
+      </Label>
+      <Label variant="outline" color="cyan" onLabelClick={() => logColor('cyan')}>
+        Cyan clickable
+      </Label>{' '}
+      <Label variant="outline" color="cyan" onLabelClick={() => logColor('cyan')} onClose={() => Function.prototype}>
+        Cyan clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="cyan"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Cyan label with icon that overflows
+      </Label>
+      <br />
+      <br />
+      <Label variant="outline" color="gold">
+        Gold
+      </Label>{' '}
+      <Label variant="outline" color="gold" icon={<InfoCircleIcon />}>
+        Gold icon
+      </Label>{' '}
+      <Label variant="outline" color="gold" onClose={() => Function.prototype}>
+        Gold removable
+      </Label>{' '}
+      <Label variant="outline" color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+        Gold icon removable
+      </Label>{' '}
+      <Label variant="outline" color="gold" href="#outline">
+        Gold link
+      </Label>{' '}
+      <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
+        Gold link removable
+      </Label>
+      <Label variant="outline" color="gold" onLabelClick={() => logColor('gold')}>
+        Gold clickable
+      </Label>{' '}
+      <Label variant="outline" color="gold" onLabelClick={() => logColor('gold')} onClose={() => Function.prototype}>
+        Gold clickable removable
+      </Label>
+      <Label
+        variant="outline"
+        color="gold"
+        icon={<InfoCircleIcon />}
+        onClose={() => Function.prototype}
+        textMaxWidth="16ch"
+      >
+        Gold label with icon that overflows
+      </Label>
+    </React.Fragment>
+  );
+};

From 6e010151eadd93df11510ca14f04b73c4f668123 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Wed, 21 Jun 2023 09:59:27 +0200
Subject: [PATCH 2/5] add type to label button

---
 packages/react-core/src/components/Label/Label.tsx          | 6 +++++-
 .../Label/__tests__/__snapshots__/Label.test.tsx.snap       | 1 +
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx
index 5bdd1398103..2a554d3c76f 100644
--- a/packages/react-core/src/components/Label/Label.tsx
+++ b/packages/react-core/src/components/Label/Label.tsx
@@ -257,7 +257,11 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   };
 
   let labelComponentChild = (
-    <LabelComponentChildElement onClick={onLabelClick} {...labelComponentChildProps}>
+    <LabelComponentChildElement
+      type={LabelComponentChildElement === 'button' ? 'button' : undefined}
+      onClick={onLabelClick}
+      {...labelComponentChildProps}
+    >
       {content}
     </LabelComponentChildElement>
   );
diff --git a/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap b/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap
index f876111ced5..c8c126cb8d6 100644
--- a/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap
+++ b/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap
@@ -7,6 +7,7 @@ exports[`Label editable label 1`] = `
   >
     <button
       class="pf-v5-c-label__content"
+      type="button"
     >
       <span
         class="pf-v5-c-label__text"

From bdc4589285cd940d0f7066e3744175d1786f4b44 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 21 Sep 2023 10:08:26 -0400
Subject: [PATCH 3/5] chore(Label): Address misc PR feedback

---
 .../react-core/src/components/Label/Label.tsx | 48 ++++++++++++++-----
 .../components/Label/__tests__/Label.test.tsx | 20 ++++++--
 .../components/Label/examples/LabelFilled.tsx | 32 ++++++-------
 .../Label/examples/LabelOutline.tsx           | 42 +++++++---------
 4 files changed, 84 insertions(+), 58 deletions(-)

diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx
index 2a554d3c76f..7b2cb04c0c8 100644
--- a/packages/react-core/src/components/Label/Label.tsx
+++ b/packages/react-core/src/components/Label/Label.tsx
@@ -55,12 +55,12 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   closeBtnAriaLabel?: string;
   /** Additional properties for the default close button. */
   closeBtnProps?: any;
-  /** Href for a label that is a link. If present, the label will change to an anchor element. */
+  /** Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in. */
   href?: string;
-  /** Flag indicating if the label is an overflow label */
+  /** Flag indicating if the label is an overflow label. This should not be passed in if the onClick prop is also passed in. */
   isOverflowLabel?: boolean;
-  /** On click callback. If present, label will be clickable. */
-  onLabelClick?: (event: React.MouseEvent) => void;
+  /** Callback for when the label is clicked. This should not be passed in if the href or isOverflowLabel props are also passed in. */
+  onClick?: (event: React.MouseEvent) => void;
   /** Forwards the label content and className to rendered function.  Use this prop for react router support.*/
   render?: ({
     className,
@@ -96,7 +96,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   tooltipPosition,
   icon,
   onClose,
-  onLabelClick,
+  onClick: onLabelClick,
   onEditCancel,
   onEditComplete,
   closeBtn,
@@ -121,6 +121,25 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     };
   });
 
+  React.useEffect(() => {
+    if (onLabelClick && isOverflowLabel) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Overflow labels cannot have onClick passed, this results in invalid HTML. Please remove either the isOverflowLabel or onClick prop.'
+      );
+    } else if (onLabelClick && href) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Link labels cannot have onClick passed, this results in invalid HTML. Please remove either the href or onClick prop.'
+      );
+    } else if (onLabelClick && isEditable) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Editable labels cannot have onClick passed, clicking starts the label edit process. Please remove either the isEditable or onClick prop.'
+      );
+    }
+  }, [onLabelClick, isOverflowLabel, href, isEditable]);
+
   const onDocMouseDown = (event: MouseEvent) => {
     if (
       isEditableActive &&
@@ -238,14 +257,22 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   let LabelComponentChildElement = 'span';
   if (href) {
     LabelComponentChildElement = 'a';
-  } else if (isEditable || onLabelClick) {
+  } else if (isEditable || (onLabelClick && !isOverflowLabel)) {
     LabelComponentChildElement = 'button';
   }
 
+  const clickableLabelProps = {
+    type: 'button',
+    onClick: onLabelClick
+  };
+
+  const isButton = LabelComponentChildElement === 'button';
+
   const labelComponentChildProps = {
     className: css(styles.labelContent),
     ...(isTooltipVisible && { tabIndex: 0 }),
     ...(href && { href }),
+    ...(isButton && clickableLabelProps),
     ...(isEditable && {
       ref: editableButtonRef,
       onClick: (e: React.MouseEvent) => {
@@ -257,13 +284,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   };
 
   let labelComponentChild = (
-    <LabelComponentChildElement
-      type={LabelComponentChildElement === 'button' ? 'button' : undefined}
-      onClick={onLabelClick}
-      {...labelComponentChildProps}
-    >
-      {content}
-    </LabelComponentChildElement>
+    <LabelComponentChildElement {...labelComponentChildProps}>{content}</LabelComponentChildElement>
   );
 
   if (render) {
@@ -298,6 +319,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         isEditableActive && styles.modifiers.editableActive,
         className
       )}
+      onClick={isOverflowLabel ? onLabelClick : undefined}
     >
       {!isEditableActive && labelComponentChild}
       {!isEditableActive && onClose && button}
diff --git a/packages/react-core/src/components/Label/__tests__/Label.test.tsx b/packages/react-core/src/components/Label/__tests__/Label.test.tsx
index 293bed344a0..519d99969cd 100644
--- a/packages/react-core/src/components/Label/__tests__/Label.test.tsx
+++ b/packages/react-core/src/components/Label/__tests__/Label.test.tsx
@@ -110,19 +110,33 @@ describe('Label', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  test('clickable label', () => {
+  test('a button is not rendered when onClick is not passed', () => {
+    render(<Label>Click me</Label>);
+
+    expect(screen.queryByRole(`button`)).not.toBeInTheDocument();
+  });
+
+  test('a button is rendered when onClick is passed', () => {
     const fn = jest.fn();
 
-    render(<Label onLabelClick={fn}>Click me</Label>);
+    render(<Label onClick={fn}>Click me</Label>);
 
     expect(screen.getByRole(`button`)).toBeVisible();
   });
 
+  test('clickable label does not call the passed callback when it is not clicked', async () => {
+    const mockCallback = jest.fn();
+
+    render(<Label onClick={mockCallback}>Click me</Label>);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
   test('clickable label calls passed callback on click', async () => {
     const mockCallback = jest.fn();
     const user = userEvent.setup();
 
-    render(<Label onLabelClick={mockCallback}>Click me</Label>);
+    render(<Label onClick={mockCallback}>Click me</Label>);
 
     const label = screen.getByRole('button');
 
diff --git a/packages/react-core/src/components/Label/examples/LabelFilled.tsx b/packages/react-core/src/components/Label/examples/LabelFilled.tsx
index 21868abef06..ac8ad75ec91 100644
--- a/packages/react-core/src/components/Label/examples/LabelFilled.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelFilled.tsx
@@ -18,8 +18,8 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label href="#filled" onClose={() => Function.prototype}>
         Grey link removable
       </Label>
-      <Label onLabelClick={() => logColor('grey')}>Grey clickable</Label>{' '}
-      <Label onLabelClick={() => logColor('grey')} onClose={() => Function.prototype}>
+      <Label onClick={() => logColor('grey')}>Grey clickable</Label>{' '}
+      <Label onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
       </Label>
       <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
@@ -43,10 +43,10 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="blue" href="#filled" onClose={() => Function.prototype}>
         Blue link removable
       </Label>
-      <Label color="blue" onLabelClick={() => logColor('blue')}>
+      <Label color="blue" onClick={() => logColor('blue')}>
         Blue clickable
       </Label>{' '}
-      <Label color="blue" onLabelClick={() => logColor('blue')} onClose={() => Function.prototype}>
+      <Label color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
       </Label>
       <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
@@ -70,10 +70,10 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="green" href="#filled" onClose={() => Function.prototype}>
         Green link removable
       </Label>
-      <Label color="green" onLabelClick={() => logColor('green')}>
+      <Label color="green" onClick={() => logColor('green')}>
         Green clickable
       </Label>{' '}
-      <Label color="green" onLabelClick={() => logColor('green')} onClose={() => Function.prototype}>
+      <Label color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
       </Label>
       <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
@@ -97,10 +97,10 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="orange" href="#filled" onClose={() => Function.prototype}>
         Orange link removable
       </Label>
-      <Label color="orange" onLabelClick={() => logColor('orange')}>
+      <Label color="orange" onClick={() => logColor('orange')}>
         Orange clickable
       </Label>{' '}
-      <Label color="orange" onLabelClick={() => logColor('orange')} onClose={() => Function.prototype}>
+      <Label color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
       </Label>
       <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
@@ -124,10 +124,10 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="red" href="#filled" onClose={() => Function.prototype}>
         Red link removable
       </Label>
-      <Label color="red" onLabelClick={() => logColor('red')}>
+      <Label color="red" onClick={() => logColor('red')}>
         Red clickable
       </Label>{' '}
-      <Label color="red" onLabelClick={() => logColor('red')} onClose={() => Function.prototype}>
+      <Label color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
       </Label>
       <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
@@ -151,10 +151,10 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="purple" href="#filled" onClose={() => Function.prototype}>
         Purple link removable
       </Label>
-      <Label color="purple" onLabelClick={() => logColor('purple')}>
+      <Label color="purple" onClick={() => logColor('purple')}>
         Purple clickable
       </Label>{' '}
-      <Label color="purple" onLabelClick={() => logColor('purple')} onClose={() => Function.prototype}>
+      <Label color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
       </Label>
       <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
@@ -178,10 +178,10 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
         Cyan link removable
       </Label>
-      <Label color="cyan" onLabelClick={() => logColor('cyan')}>
+      <Label color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
       </Label>{' '}
-      <Label color="cyan" onLabelClick={() => logColor('cyan')} onClose={() => Function.prototype}>
+      <Label color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
       </Label>
       <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
@@ -205,10 +205,10 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="gold" href="#filled" onClose={() => Function.prototype}>
         Gold link removable
       </Label>
-      <Label color="gold" onLabelClick={() => logColor('gold')}>
+      <Label color="gold" onClick={() => logColor('gold')}>
         Gold clickable
       </Label>{' '}
-      <Label color="gold" onLabelClick={() => logColor('gold')} onClose={() => Function.prototype}>
+      <Label color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
       </Label>
       <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
diff --git a/packages/react-core/src/components/Label/examples/LabelOutline.tsx b/packages/react-core/src/components/Label/examples/LabelOutline.tsx
index 5b44bdc4c8b..cfcb960d551 100644
--- a/packages/react-core/src/components/Label/examples/LabelOutline.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelOutline.tsx
@@ -25,10 +25,10 @@ export const LabelOutline: React.FunctionComponent = () => {
       <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
         Grey link removable
       </Label>
-      <Label variant="outline" onLabelClick={() => logColor('grey')}>
+      <Label variant="outline" onClick={() => logColor('grey')}>
         Grey clickable
       </Label>{' '}
-      <Label variant="outline" onLabelClick={() => logColor('grey')} onClose={() => Function.prototype}>
+      <Label variant="outline" onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
       </Label>
       <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
@@ -54,10 +54,10 @@ export const LabelOutline: React.FunctionComponent = () => {
       <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
         Blue link removable
       </Label>
-      <Label variant="outline" color="blue" onLabelClick={() => logColor('blue')}>
+      <Label variant="outline" color="blue" onClick={() => logColor('blue')}>
         Blue clickable
       </Label>{' '}
-      <Label variant="outline" color="blue" onLabelClick={() => logColor('blue')} onClose={() => Function.prototype}>
+      <Label variant="outline" color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
       </Label>
       <Label
@@ -89,10 +89,10 @@ export const LabelOutline: React.FunctionComponent = () => {
       <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
         Green link removable
       </Label>
-      <Label variant="outline" color="green" onLabelClick={() => logColor('green')}>
+      <Label variant="outline" color="green" onClick={() => logColor('green')}>
         Green clickable
       </Label>{' '}
-      <Label variant="outline" color="green" onLabelClick={() => logColor('green')} onClose={() => Function.prototype}>
+      <Label variant="outline" color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
       </Label>
       <Label
@@ -124,15 +124,10 @@ export const LabelOutline: React.FunctionComponent = () => {
       <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
         Orange link removable
       </Label>
-      <Label variant="outline" color="orange" onLabelClick={() => logColor('orange')}>
+      <Label variant="outline" color="orange" onClick={() => logColor('orange')}>
         Orange clickable
       </Label>{' '}
-      <Label
-        variant="outline"
-        color="orange"
-        onLabelClick={() => logColor('orange')}
-        onClose={() => Function.prototype}
-      >
+      <Label variant="outline" color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
       </Label>
       <Label
@@ -164,10 +159,10 @@ export const LabelOutline: React.FunctionComponent = () => {
       <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
         Red link removable
       </Label>
-      <Label variant="outline" color="red" onLabelClick={() => logColor('red')}>
+      <Label variant="outline" color="red" onClick={() => logColor('red')}>
         Red clickable
       </Label>{' '}
-      <Label variant="outline" color="red" onLabelClick={() => logColor('red')} onClose={() => Function.prototype}>
+      <Label variant="outline" color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
       </Label>
       <Label
@@ -199,15 +194,10 @@ export const LabelOutline: React.FunctionComponent = () => {
       <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
         Purple link removable
       </Label>
-      <Label variant="outline" color="purple" onLabelClick={() => logColor('purple')}>
+      <Label variant="outline" color="purple" onClick={() => logColor('purple')}>
         Purple clickable
       </Label>{' '}
-      <Label
-        variant="outline"
-        color="purple"
-        onLabelClick={() => logColor('purple')}
-        onClose={() => Function.prototype}
-      >
+      <Label variant="outline" color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
       </Label>
       <Label
@@ -239,10 +229,10 @@ export const LabelOutline: React.FunctionComponent = () => {
       <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
         Cyan link removable
       </Label>
-      <Label variant="outline" color="cyan" onLabelClick={() => logColor('cyan')}>
+      <Label variant="outline" color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
       </Label>{' '}
-      <Label variant="outline" color="cyan" onLabelClick={() => logColor('cyan')} onClose={() => Function.prototype}>
+      <Label variant="outline" color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
       </Label>
       <Label
@@ -274,10 +264,10 @@ export const LabelOutline: React.FunctionComponent = () => {
       <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
         Gold link removable
       </Label>
-      <Label variant="outline" color="gold" onLabelClick={() => logColor('gold')}>
+      <Label variant="outline" color="gold" onClick={() => logColor('gold')}>
         Gold clickable
       </Label>{' '}
-      <Label variant="outline" color="gold" onLabelClick={() => logColor('gold')} onClose={() => Function.prototype}>
+      <Label variant="outline" color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
       </Label>
       <Label

From 818f493dbc8e36ed336bc645881485e3397745e1 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 21 Sep 2023 14:03:43 -0400
Subject: [PATCH 4/5] chore(Label): Remove mention of onClick being
 incompatible with overflow

---
 packages/react-core/src/components/Label/Label.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx
index 7b2cb04c0c8..c5f90e65551 100644
--- a/packages/react-core/src/components/Label/Label.tsx
+++ b/packages/react-core/src/components/Label/Label.tsx
@@ -57,9 +57,9 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   closeBtnProps?: any;
   /** Href for a label that is a link. If present, the label will change to an anchor element. This should not be passed in if the onClick prop is also passed in. */
   href?: string;
-  /** Flag indicating if the label is an overflow label. This should not be passed in if the onClick prop is also passed in. */
+  /** Flag indicating if the label is an overflow label. */
   isOverflowLabel?: boolean;
-  /** Callback for when the label is clicked. This should not be passed in if the href or isOverflowLabel props are also passed in. */
+  /** Callback for when the label is clicked. This should not be passed in if the href or isEditable props are also passed in. */
   onClick?: (event: React.MouseEvent) => void;
   /** Forwards the label content and className to rendered function.  Use this prop for react router support.*/
   render?: ({
@@ -122,12 +122,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   });
 
   React.useEffect(() => {
-    if (onLabelClick && isOverflowLabel) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'Overflow labels cannot have onClick passed, this results in invalid HTML. Please remove either the isOverflowLabel or onClick prop.'
-      );
-    } else if (onLabelClick && href) {
+    if (onLabelClick && href) {
       // eslint-disable-next-line no-console
       console.warn(
         'Link labels cannot have onClick passed, this results in invalid HTML. Please remove either the href or onClick prop.'

From b8fd6e895a128883031bac7a2f281bb708fda193 Mon Sep 17 00:00:00 2001
From: Austin Sullivan <ausulliv@redhat.com>
Date: Thu, 21 Sep 2023 14:13:57 -0400
Subject: [PATCH 5/5] chore(Label): Remove prop from effect deps where it's no
 longer needed

---
 packages/react-core/src/components/Label/Label.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx
index c5f90e65551..6fa01a5b447 100644
--- a/packages/react-core/src/components/Label/Label.tsx
+++ b/packages/react-core/src/components/Label/Label.tsx
@@ -133,7 +133,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         'Editable labels cannot have onClick passed, clicking starts the label edit process. Please remove either the isEditable or onClick prop.'
       );
     }
-  }, [onLabelClick, isOverflowLabel, href, isEditable]);
+  }, [onLabelClick, href, isEditable]);
 
   const onDocMouseDown = (event: MouseEvent) => {
     if (