@patternfly/react-core 5.1.1-prerelease.9 → 5.2.0-prerelease.1

package/src/components/Label/Label.tsx

@@ -55,10 +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. */
   isOverflowLabel?: boolean;
+  /** 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?: ({
     className,
@@ -94,6 +96,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   tooltipPosition,
   icon,
   onClose,
+  onClick: onLabelClick,
   onEditCancel,
   onEditComplete,
   closeBtn,
@@ -118,6 +121,20 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     };
   });
 
+  React.useEffect(() => {
+    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, href, isEditable]);
+
   const onDocMouseDown = (event: MouseEvent) => {
     if (
       isEditableActive &&
@@ -235,14 +252,22 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   let LabelComponentChildElement = 'span';
   if (href) {
     LabelComponentChildElement = 'a';
-  } else if (isEditable) {
+  } 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) => {
@@ -289,6 +314,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
         isEditableActive && styles.modifiers.editableActive,
         className
       )}
+      onClick={isOverflowLabel ? onLabelClick : undefined}
     >
       {!isEditableActive && labelComponentChild}
       {!isEditableActive && onClose && button}

package/src/components/Label/__tests__/Label.test.tsx

@@ -109,4 +109,39 @@ describe('Label', () => {
     expect(screen.queryByRole('button', { name: 'Something' })).toBeNull();
     expect(asFragment()).toMatchSnapshot();
   });
+
+  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 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 onClick={mockCallback}>Click me</Label>);
+
+    const label = screen.getByRole('button');
+
+    await user.click(label);
+
+    expect(mockCallback).toBeCalledTimes(1);
+  });
 });

package/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"

package/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 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">
+        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" onClick={() => logColor('blue')}>
+        Blue clickable
+      </Label>{' '}
+      <Label color="blue" onClick={() => 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" onClick={() => logColor('green')}>
+        Green clickable
+      </Label>{' '}
+      <Label color="green" onClick={() => 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" onClick={() => logColor('orange')}>
+        Orange clickable
+      </Label>{' '}
+      <Label color="orange" onClick={() => 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" onClick={() => logColor('red')}>
+        Red clickable
+      </Label>{' '}
+      <Label color="red" onClick={() => 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" onClick={() => logColor('purple')}>
+        Purple clickable
+      </Label>{' '}
+      <Label color="purple" onClick={() => 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" onClick={() => logColor('cyan')}>
+        Cyan clickable
+      </Label>{' '}
+      <Label color="cyan" onClick={() => 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" onClick={() => logColor('gold')}>
+        Gold clickable
+      </Label>{' '}
+      <Label color="gold" onClick={() => 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>
+  );
+};