@patternfly/react-core 6.2.0-prerelease.3 → 6.2.0-prerelease.30

package/src/components/FileUpload/__tests__/__snapshots__/FileUpload.test.tsx.snap

@@ -37,7 +37,6 @@ exports[`simple fileupload 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-1"
             data-ouia-component-type="PF6/Button"
@@ -55,7 +54,6 @@ exports[`simple fileupload 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-2"
             data-ouia-component-type="PF6/Button"
@@ -76,7 +74,7 @@ exports[`simple fileupload 1`] = `
       class="pf-v6-c-file-upload__file-details"
     >
       <span
-        class="pf-v6-c-form-control pf-m-resize-vertical"
+        class="pf-v6-c-form-control pf-m-textarea pf-m-resize-vertical"
       >
         <textarea
           aria-invalid="false"
@@ -87,6 +85,7 @@ exports[`simple fileupload 1`] = `
       </span>
     </div>
     <input
+      hidden=""
       style="border: 0px; clip: rect(0px, 0px, 0px, 0px); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
       tabindex="-1"
       type="file"

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -36,7 +36,6 @@ exports[`simple fileuploadfield 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-1"
             data-ouia-component-type="PF6/Button"
@@ -54,7 +53,6 @@ exports[`simple fileuploadfield 1`] = `
           class="pf-v6-c-input-group__item"
         >
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-control"
             data-ouia-component-id="OUIA-Generated-Button-control-2"
             data-ouia-component-type="PF6/Button"
@@ -74,7 +72,7 @@ exports[`simple fileuploadfield 1`] = `
       class="pf-v6-c-file-upload__file-details"
     >
       <span
-        class="pf-v6-c-form-control pf-m-resize-vertical"
+        class="pf-v6-c-form-control pf-m-textarea pf-m-resize-vertical"
       >
         <textarea
           aria-invalid="false"

package/src/components/FileUpload/examples/FileUploadCustomUpload.tsx

@@ -4,6 +4,7 @@ import { FileUploadField, FileUploadHelperText, HelperText, HelperTextItem, Chec
 export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const properties = [
     'filename',
+    'isBrowseButtonDisabled',
     'isClearButtonDisabled',
     'isDragActive',
     'isLoading',
@@ -15,6 +16,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
 
   const [value, setValue] = React.useState('');
   const [filename, setFilename] = React.useState(false);
+  const [isBrowseButtonDisabled, setIsBrowseButtonDisabled] = React.useState(true);
   const [isClearButtonDisabled, setIsClearButtonDisabled] = React.useState(true);
   const [isLoading, setIsLoading] = React.useState(false);
   const [isDragActive, setIsDragActive] = React.useState(false);
@@ -24,6 +26,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
   const [hasPlaceholderText, setHasPlaceholderText] = React.useState(false);
   const [checkedState, setCheckedState] = React.useState([
     filename,
+    isBrowseButtonDisabled,
     isClearButtonDisabled,
     isLoading,
     isDragActive,
@@ -44,6 +47,10 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         checked ? setFilename(true) : setFilename(false);
         break;
 
+      case 'isBrowseButtonDisabled':
+        checked ? setIsBrowseButtonDisabled(true) : setIsBrowseButtonDisabled(false);
+        break;
+
       case 'isClearButtonDisabled':
         checked ? setIsClearButtonDisabled(true) : setIsClearButtonDisabled(false);
         break;
@@ -109,6 +116,7 @@ export const CustomPreviewFileUpload: React.FunctionComponent = () => {
         filenamePlaceholder="Do something custom with this!"
         onBrowseButtonClick={() => alert('Browse button clicked!')}
         onClearButtonClick={() => alert('Clear button clicked!')}
+        isBrowseButtonDisabled={isBrowseButtonDisabled}
         isClearButtonDisabled={isClearButtonDisabled}
         isLoading={isLoading}
         isDragActive={isDragActive}

package/src/components/Form/FormGroup.tsx

@@ -14,7 +14,7 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   /** Additional label information displayed after the label. */
   labelInfo?: React.ReactNode;
   /** A help button for the label. We recommend using FormGroupLabelHelp element as a help icon button. The help button should be wrapped or linked to our popover component. */
-  labelHelp?: React.ReactElement;
+  labelHelp?: React.ReactElement<any>;
   /** Sets the FormGroup required. */
   isRequired?: boolean;
   /** Sets the FormGroup isInline. */

package/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snap

@@ -14,7 +14,6 @@ exports[`Check expandable form field group example against snapshot 1`] = `
         class="pf-v6-c-form__field-group-toggle-button"
       >
         <button
-          aria-disabled="false"
           aria-expanded="true"
           aria-label="toggle"
           aria-labelledby="title-text-id2 generated-id"
@@ -75,7 +74,6 @@ exports[`Check expandable form field group example against snapshot 1`] = `
         class="pf-v6-c-form__field-group-header-actions"
       >
         <button
-          aria-disabled="false"
           class="pf-v6-c-button pf-m-primary"
           data-ouia-component-id="OUIA-Generated-Button-primary-2"
           data-ouia-component-type="PF6/Button"
@@ -124,7 +122,6 @@ exports[`Check form field group example against snapshot 1`] = `
         class="pf-v6-c-form__field-group-header-actions"
       >
         <button
-          aria-disabled="false"
           class="pf-v6-c-button pf-m-primary"
           data-ouia-component-id="OUIA-Generated-Button-primary-1"
           data-ouia-component-type="PF6/Button"

package/src/components/HelperText/__mocks__/HelperText.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { HelperTextProps } from '../';
 
 export const HelperText = ({ children, isLiveRegion }: HelperTextProps) => (

package/src/components/HelperText/__mocks__/HelperTextItem.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { HelperTextItemProps } from '../';
 
 export const HelperTextItem = ({ children, variant }: HelperTextItemProps) => (

package/src/components/Icon/examples/BodyIconSizes.tsx

@@ -6,10 +6,10 @@ export const BodyIconSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="bodySm">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="bodyDefault">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="bodyLg">
       <PlusCircleIcon />
     </Icon>

package/src/components/Icon/examples/HeadingIconSizes.tsx

@@ -6,19 +6,19 @@ export const HeadingIconSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="headingSm">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="headingMd">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="headingLg">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="headingXl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="heading_2xl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="heading_3xl">
       <PlusCircleIcon />
     </Icon>

package/src/components/Icon/examples/IconBasic.tsx

@@ -9,13 +9,13 @@ export const IconBasic: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon>
       <LongArrowAltDownIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon>
       <AngleRightIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon>
       <AngleDownIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon>
       <CogIcon />
     </Icon>

package/src/components/Icon/examples/IconContentSizes.tsx

@@ -6,13 +6,13 @@ export const IconContentSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="3xl" iconSize="lg">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="3xl" iconSize="xl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="3xl" iconSize="2xl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="3xl">
       <PlusCircleIcon />
     </Icon>

package/src/components/Icon/examples/IconStatus.tsx

@@ -10,16 +10,16 @@ export const IconStatus: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon status="danger">
       <ExclamationCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon status="warning">
       <ExclamationTriangleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon status="success">
       <CheckCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon status="info">
       <InfoCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon status="custom">
       <BellIcon />
     </Icon>

package/src/components/Icon/examples/StandaloneIconSizes.tsx

@@ -6,19 +6,19 @@ export const StandaloneIconSizes: React.FunctionComponent = () => (
   <React.Fragment>
     <Icon size="sm">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="md">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="lg">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="xl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="2xl">
       <PlusCircleIcon />
-    </Icon>
+    </Icon>{' '}
     <Icon size="3xl">
       <PlusCircleIcon />
     </Icon>

package/src/components/JumpLinks/JumpLinks.tsx

@@ -2,13 +2,12 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/JumpLinks/jump-links';
 import sidebarStyles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
-import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
-import { JumpLinksList } from './JumpLinksList';
-import { formatBreakpointMods } from '../../helpers/util';
-import { Button } from '../Button';
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import cssToggleDisplayVar from '@patternfly/react-tokens/dist/esm/c_jump_links__toggle_Display';
-import { canUseDOM } from '../../helpers/util';
+import { Button } from '../Button';
+import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
+import { JumpLinksList } from './JumpLinksList';
+import { canUseDOM, formatBreakpointMods } from '../../helpers/util';
 
 export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Whether to center children. */
@@ -22,7 +21,7 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   /** Adds an accessible label to the internal nav element. Defaults to the value of the label prop. */
   'aria-label'?: string;
   /** Reference to the scrollable element to spy on. Takes precedence over scrollableSelector. Not passing a scrollableRef or scrollableSelector disables spying. */
-  scrollableRef?: HTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement>;
+  scrollableRef?: HTMLElement | (() => HTMLElement) | React.RefObject<HTMLElement | null>;
   /** Selector for the scrollable element to spy on. Not passing a scrollableSelector or scrollableRef disables spying. */
   scrollableSelector?: string;
   /** The index of the child Jump link to make active. */
@@ -46,6 +45,8 @@ export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'labe
   toggleAriaLabel?: string;
   /** Class for nav */
   className?: string;
+  /** Whether the current entry in the navigation history should be replaced when a JumpLinksItem is clicked. By default a new entry will be pushed to the navigation history. */
+  shouldReplaceNavHistory?: boolean;
 }
 
 // Recursively find JumpLinkItems and return an array of all their scrollNodes
@@ -92,6 +93,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   alwaysShowLabel = true,
   toggleAriaLabel = 'Toggle jump links',
   className,
+  shouldReplaceNavHistory = false,
   ...props
 }: JumpLinksProps) => {
   const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
@@ -100,7 +102,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   const [isExpanded, setIsExpanded] = React.useState(isExpandedProp);
   // Boolean to disable scroll listener from overriding active state of clicked jumplink
   const isLinkClicked = React.useRef(false);
-  const navRef = React.useRef<HTMLElement>();
+  const navRef = React.useRef<HTMLElement>(undefined);
 
   let scrollableElement: HTMLElement;
 
@@ -111,7 +113,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
       } else if (typeof scrollableRef === 'function') {
         return scrollableRef();
       }
-      return (scrollableRef as React.RefObject<HTMLElement>).current;
+      return (scrollableRef as React.RefObject<HTMLElement | null>).current;
     } else if (scrollableSelector) {
       return document.querySelector(scrollableSelector) as HTMLElement;
     }
@@ -207,7 +209,11 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                     scrollableElement.scrollTo(0, newScrollItem.offsetTop - offset);
                   }
                   newScrollItem.focus();
-                  window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  if (shouldReplaceNavHistory) {
+                    window.history.replaceState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  } else {
+                    window.history.pushState('', '', (ev.currentTarget as HTMLAnchorElement).href);
+                  }
                   ev.preventDefault();
                   setActiveIndex(itemIndex);
                 }

package/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snap

@@ -16,7 +16,6 @@ exports[`expandable vertical with subsection 1`] = `
           class="pf-v6-c-jump-links__toggle"
         >
           <button
-            aria-disabled="false"
             aria-expanded="false"
             aria-label="Toggle jump links"
             class="pf-v6-c-button pf-m-plain"
@@ -70,7 +69,6 @@ exports[`expandable vertical with subsection 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-13"
               data-ouia-component-type="PF6/Button"
@@ -96,7 +94,6 @@ exports[`expandable vertical with subsection 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-14"
               data-ouia-component-type="PF6/Button"
@@ -126,7 +123,6 @@ exports[`expandable vertical with subsection 1`] = `
                 class="pf-v6-c-jump-links__link"
               >
                 <a
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link"
                   data-ouia-component-id="OUIA-Generated-Button-link-15"
                   data-ouia-component-type="PF6/Button"
@@ -152,7 +148,6 @@ exports[`expandable vertical with subsection 1`] = `
                 class="pf-v6-c-jump-links__link"
               >
                 <a
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link"
                   data-ouia-component-id="OUIA-Generated-Button-link-16"
                   data-ouia-component-type="PF6/Button"
@@ -178,7 +173,6 @@ exports[`expandable vertical with subsection 1`] = `
                 class="pf-v6-c-jump-links__link"
               >
                 <a
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link"
                   data-ouia-component-id="OUIA-Generated-Button-link-17"
                   data-ouia-component-type="PF6/Button"
@@ -206,7 +200,6 @@ exports[`expandable vertical with subsection 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-18"
               data-ouia-component-type="PF6/Button"
@@ -232,7 +225,6 @@ exports[`expandable vertical with subsection 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-19"
               data-ouia-component-type="PF6/Button"
@@ -279,7 +271,6 @@ exports[`jumplinks centered 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-4"
               data-ouia-component-type="PF6/Button"
@@ -306,7 +297,6 @@ exports[`jumplinks centered 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-5"
               data-ouia-component-type="PF6/Button"
@@ -332,7 +322,6 @@ exports[`jumplinks centered 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-6"
               data-ouia-component-type="PF6/Button"
@@ -386,7 +375,6 @@ exports[`jumplinks with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-7"
               data-ouia-component-type="PF6/Button"
@@ -413,7 +401,6 @@ exports[`jumplinks with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-8"
               data-ouia-component-type="PF6/Button"
@@ -439,7 +426,6 @@ exports[`jumplinks with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-9"
               data-ouia-component-type="PF6/Button"
@@ -486,7 +472,6 @@ exports[`simple jumplinks 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-1"
               data-ouia-component-type="PF6/Button"
@@ -513,7 +498,6 @@ exports[`simple jumplinks 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-2"
               data-ouia-component-type="PF6/Button"
@@ -539,7 +523,6 @@ exports[`simple jumplinks 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-3"
               data-ouia-component-type="PF6/Button"
@@ -593,7 +576,6 @@ exports[`vertical with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-10"
               data-ouia-component-type="PF6/Button"
@@ -620,7 +602,6 @@ exports[`vertical with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-11"
               data-ouia-component-type="PF6/Button"
@@ -646,7 +627,6 @@ exports[`vertical with label 1`] = `
             class="pf-v6-c-jump-links__link"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="OUIA-Generated-Button-link-12"
               data-ouia-component-type="PF6/Button"

package/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,
@@ -127,12 +130,12 @@ export const Label: React.FunctionComponent<LabelProps> = ({
 }: LabelProps) => {
   const [isEditableActive, setIsEditableActive] = useState<boolean>(false);
   const [currValue, setCurrValue] = useState(children);
-  const editableButtonRef = React.useRef<HTMLButtonElement>();
-  const editableInputRef = React.useRef<HTMLInputElement>();
+  const editableButtonRef = React.useRef<HTMLButtonElement>(undefined);
+  const editableInputRef = React.useRef<HTMLInputElement>(undefined);
 
   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) {
@@ -245,7 +248,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
   const closeButton = <span className={css(styles.labelActions)}>{closeBtn || defaultCloseButton}</span>;
   const textRef = React.createRef<any>();
   // ref to apply tooltip when rendered is used
-  const componentRef = React.useRef();
+  const componentRef = React.useRef(undefined);
   const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
   useIsomorphicLayoutEffect(() => {
     const currTextRef = isEditable ? editableButtonRef : textRef;

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

@@ -19,7 +19,6 @@ exports[`Label editable label 1`] = `
       class="pf-v6-c-label__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-3"
@@ -157,7 +156,6 @@ exports[`Label label with close button 1`] = `
       class="pf-v6-c-label__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
@@ -206,7 +204,6 @@ exports[`Label label with close button and outline variant 1`] = `
       class="pf-v6-c-label__actions"
     >
       <button
-        aria-disabled="false"
         aria-label="Close Something"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"

package/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -253,7 +253,6 @@ exports[`LabelGroup label group with closable category 1`] = `
       class="pf-v6-c-label-group__close"
     >
       <button
-        aria-disabled="false"
         aria-label="Close label group"
         aria-labelledby="remove_group_generated-id generated-id"
         class="pf-v6-c-button pf-m-plain pf-m-no-padding"

package/src/components/Label/examples/Label.md

@@ -7,7 +7,6 @@ propComponents: ['Label', 'LabelGroup']
 
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import { Link } from '@reach/router';
 import './Label.css';
 
 ## Examples
@@ -30,9 +29,11 @@ import './Label.css';
 
 ```
 
-### Label with router link
+### Label with custom render
 
-```ts file="LabelRouterLink.tsx"
+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"
 
 ```
 
@@ -97,3 +98,19 @@ The contents of a label group can be modified by removing labels or adding new o
 ```ts file="LabelGroupEditableAdd.tsx"
 
 ```
+
+## Using router links
+
+Router links can be used for in-app linking in React environments to prevent page reloading. To use a `Link` component from a router package, you can use the `render` property of the `Label`:
+
+```nolive
+<Label
+  render={({ className, content, componentRef }) => (
+    <Link to="/" className={className} innerRef={componentRef}>
+      {content}
+    </Link>
+  )}
+>
+  Label router link
+</Label>
+```

package/src/components/Label/examples/{LabelRouterLink.tsx → LabelCustomRender.tsx}

@@ -1,19 +1,19 @@
 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 = () => (
+export const LabelCustomRender: 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>
     )}
     textMaxWidth="16ch"
+    isClickable
   >
     Blue label router link with icon that overflows
   </Label>

package/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import { LabelGroup, Label, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
 export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
-  const toggleRef = React.useRef<HTMLDivElement>();
-  const menuRef = React.useRef<HTMLDivElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const toggleRef = React.useRef<HTMLDivElement>(undefined);
+  const menuRef = React.useRef<HTMLDivElement>(undefined);
+  const containerRef = React.useRef<HTMLDivElement>(undefined);
 
   const [idIndex, setIdIndex] = React.useState<number>(3);
   const [isOpen, setIsOpen] = React.useState<boolean>(false);