chore(Routers): updated react/router and removed reach/router in examples (#11545)

thatblindgeye · web-flow · commit 094ad89d9821 · 2025-02-24T09:53:41.000-05:00
* chore(Routers): updated react/router and removed reach/router in examples

* Updated errors from react router upgrade

* Fixed a11y error in demo

* Added back and repurposed router examples

* Removed types/react-router depdevs

* Updated yarnlock
diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md
@@ -14,7 +14,6 @@ import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-i
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
-import { Link } from '@reach/router';
 
 ## Examples
 
@@ -86,11 +85,11 @@ Inline links should use `component="span"` and the `isInline` property to wrap i
 ```ts file="./ButtonInlineSpanLink.tsx"
 ```
 
-### Router link
+### Custom component
 
-Router links can be used for in-app linking in React environments to prevent page reloading.
+In addition to being able to pass a string to the `component` property, you can provide more fine-tuned customization by passing a callback that returns a component.
 
-```ts file="./ButtonRouterLink.tsx"
+```ts file="./ButtonCustomComponent.tsx"
 ```
 
 ### Aria-disabled examples
@@ -124,3 +123,13 @@ Stateful buttons are ideal for displaying the state of notifications. Use `varia
 
 ```ts file="./ButtonStateful.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 follow our [custom component example](#custom-component) and pass a callback to the `component` property of the `Button`:
+
+```nolive
+<Button variant="link" component={(props: any) => <Link {...props} to="#" />}>
+  Router link
+</Button>
+```
diff --git a/packages/react-core/src/components/Button/examples/ButtonCustomComponent.tsx b/packages/react-core/src/components/Button/examples/ButtonCustomComponent.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+
+export const ButtonCustomComponent: React.FunctionComponent = () => (
+  <Button variant="link" component={(props: any) => <a {...props} href="#" />}>
+    Router link
+  </Button>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonRouterLink.tsx b/packages/react-core/src/components/Button/examples/ButtonRouterLink.tsx
diff --git a/packages/react-core/src/components/Label/examples/Label.md b/packages/react-core/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,12 +29,6 @@ import './Label.css';
 
 ```
 
-### Label with router link
-
-```ts file="LabelRouterLink.tsx"
-
-```
-
 ### Editable labels
 
 Click or press either enter or space to begin editing a label. After editing, click outside the label or press enter again to complete the edit. To cancel an edit, press escape.
@@ -97,3 +90,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>
+```
diff --git a/packages/react-core/src/components/Label/examples/LabelRouterLink.tsx b/packages/react-core/src/components/Label/examples/LabelRouterLink.tsx
diff --git a/packages/react-core/src/components/Masthead/examples/Masthead.md b/packages/react-core/src/components/Masthead/examples/Masthead.md
@@ -6,12 +6,11 @@ propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand',
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import { Link } from '@reach/router';
 import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
 To maintain proper layout and formatting, a `<Masthead>` should contain both a `<MastheadMain>` and `<MastheadContent>` component.
 
- Mastheads contain the `<MastheadMain>` that wraps a `<PageToggleButton>` and `<MastheadBrand>`. The `<MastheadBrand>` wraps `<MastheadLogo>`. The masthead also contains  the page's header toolbar within `<MastheadContent>`.
+Mastheads contain the `<MastheadMain>` that wraps a `<PageToggleButton>` and `<MastheadBrand>`. The `<MastheadBrand>` wraps `<MastheadLogo>`. The masthead also contains the page's header toolbar within `<MastheadContent>`.
 
 ## Examples
 
@@ -45,7 +44,20 @@ To maintain proper layout and formatting, a `<Masthead>` should contain both a `
 ```ts file="./MastheadInsets.tsx"
 ```
 
-### With icon router link
+### Custom logo component
 
-```ts file="./MastheadIconRouterLink.tsx"
+In addition to being able to pass a string to the `component` property of `MastheadLogo`, you can provide more fine-tuned customization by passing a callback that returns a component.
+
+
+```ts file="./MastheadLogoCustomComponent.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 follow our [custom logo component example](#custom-logo-component) and pass a callback to the `component` property of the `MastheadLogo`:
+
+```nolive
+<MastheadLogo component={(props) => <Link {...props} to="#" />}>
+  <Brand ...brandProps />
+</MastheadLogo>
+```
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadLogoCustomComponent.tsx b/packages/react-core/src/components/Masthead/examples/MastheadLogoCustomComponent.tsx
@@ -10,17 +10,16 @@ import {
   Brand
 } from '@patternfly/react-core';
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-import { Link } from '@reach/router';
 import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
-export const MastheadIconRouterLink: React.FunctionComponent = () => (
+export const MastheadLogoCustomComponent: React.FunctionComponent = () => (
   <Masthead id="icon-router-link">
     <MastheadMain>
       <MastheadToggle>
         <Button variant="plain" onClick={() => {}} aria-label="Global navigation" icon={<BarsIcon />} />
       </MastheadToggle>
       <MastheadBrand>
-        <MastheadLogo component={(props) => <Link {...props} to="#" />}>
+        <MastheadLogo component={(props) => <a {...props} href="#" />}>
           <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
         </MastheadLogo>
       </MastheadBrand>
diff --git a/packages/react-core/src/components/Menu/examples/Menu.md b/packages/react-core/src/components/Menu/examples/Menu.md
@@ -229,3 +229,15 @@ To control the height of a menu, use the `maxMenuHeight` property. Selecting the
 ```ts file="MenuFilterDrilldown.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 pass a callback to the `component` property of the `MenuItem`:
+
+```nolive
+<MenuItem
+  component={(props) => <Link {...props} to="#" />}
+>
+  {...Link Content}
+</MenuItem>
+```
diff --git a/packages/react-core/src/demos/CustomMenus/CustomMenus.md b/packages/react-core/src/demos/CustomMenus/CustomMenus.md
@@ -4,8 +4,6 @@ section: components
 subsection: menus
 ---
 
-import { Link } from '@reach/router';
-
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
diff --git a/packages/react-core/src/demos/Masthead.md b/packages/react-core/src/demos/Masthead.md
@@ -13,7 +13,6 @@ import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfIcon from './assets/pf-logo-small.svg';
 import pfLogo from './assets/PF-HorizontalLogo-Color.svg';
-import { Link } from '@reach/router';
 
 ## Demos
 
diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md
@@ -14,7 +14,6 @@ import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
-
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
 
   1. Add an onNavToggle callback to PageHeader
@@ -44,6 +43,8 @@ This demonstrates a variety of navigation patterns in the context of a full page
 
 ### Context selector/perspective switcher in sidebar
 
+When adding a context selector/perspective switcher in a `PageSidebar`, you must manually control the open state of the `PageSidebar` as well as ensure any interactive menu toggles or buttons cannot receive focus. This demo adds a `tabIndex` of `-1` when the sidebar is not expanded to achieve this.
+
 ```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
 
-```
+```
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -49,7 +49,6 @@ import {
   SearchInput,
   Tooltip
 } from '@patternfly/react-core';
-import { Link } from '@reach/router';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
@@ -185,27 +184,29 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           itemId="2"
           id="2"
           isFavorited={favorites.includes('2')}
-          component={(props) => <Link {...props} to="#router-link" />}
+          to="#default-link3"
+          onClick={(ev) => ev.preventDefault()}
         >
-          @reach/router Link
+          Application 3
         </MenuItem>
         <MenuItem
           itemId="3"
           id="3"
           isFavorited={favorites.includes('3')}
           isExternalLink
           icon={<img src={pfIcon} />}
-          component={(props) => <Link {...props} to="#router-link2" />}
+          to="#default-link4"
+          onClick={(ev) => ev.preventDefault()}
         >
-          @reach/router Link with icon
+          Application 4 with icon
         </MenuItem>
       </MenuList>
     </MenuGroup>,
     <Divider key="group2-divider" />,
     <MenuList key="other-items">
       <MenuItem key="tooltip-app" isFavorited={favorites.includes('4')} itemId="4" id="4">
-        <Tooltip content={<div>Launch Application 3</div>} position="right">
-          <span>Application 3 with tooltip</span>
+        <Tooltip content={<div>Launch Application 4</div>} position="right">
+          <span>Application 4 with tooltip</span>
         </Tooltip>
       </MenuItem>
       <MenuItem key="disabled-app" itemId="5" id="5" isDisabled>
diff --git a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
@@ -59,6 +59,11 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
   const [isContextSelectorOpen, setIsContextSelectorOpen] = React.useState(false);
   const [activeItem, setActiveItem] = React.useState(1);
+  const [isSidebarOpen, setIsSidebarOpen] = React.useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
 
   const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
     typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
@@ -225,7 +230,12 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
+          <PageToggleButton
+            variant="plain"
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+          >
             <BarsIcon />
           </PageToggleButton>
         </MastheadToggle>
@@ -267,7 +277,13 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
       onSelect={onContextSelectorSelect}
       onOpenChange={(isOpen: boolean) => setIsContextSelectorOpen(isOpen)}
       toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-        <MenuToggle ref={toggleRef} onClick={onContextSelectorToggle} isExpanded={isContextSelectorOpen} isFullWidth>
+        <MenuToggle
+          tabIndex={isSidebarOpen ? undefined : -1}
+          ref={toggleRef}
+          onClick={onContextSelectorToggle}
+          isExpanded={isContextSelectorOpen}
+          isFullWidth
+        >
           Developer
         </MenuToggle>
       )}
@@ -277,7 +293,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   );
 
   const sidebar = (
-    <PageSidebar>
+    <PageSidebar isSidebarOpen={isSidebarOpen}>
       <PageSidebarBody isContextSelector>{pageContextSelector}</PageSidebarBody>
       <PageSidebarBody>{pageNav}</PageSidebarBody>
     </PageSidebar>
@@ -304,7 +320,6 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
     <Page
       masthead={masthead}
       sidebar={sidebar}
-      isManagedSidebar
       skipToContent={pageSkipToContent}
       breadcrumb={dashboardBreadcrumb}
       mainContainerId={mainContainerId}
diff --git a/packages/react-integration/cypress/integration/label.spec.ts b/packages/react-integration/cypress/integration/label.spec.ts
@@ -36,12 +36,4 @@ describe('Label Demo Test', () => {
       cy.wrap(noTooltipLinkMaxWidth).trigger('mouseleave');
     });
   });
-
-  it('Verify router link label', () => {
-    cy.get('#router-link > .pf-v6-c-label__content').then((routerTooltipLink: JQuery<HTMLDivElement>) => {
-      cy.get('.pf-v6-c-tooltip').should('not.exist');
-      cy.wrap(routerTooltipLink).trigger('mouseenter').get('.pf-v6-c-tooltip').should('exist');
-    });
-    cy.get('#router-link > a').invoke('attr', 'href').should('eq', '/');
-  });
 });
diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json
@@ -11,12 +11,10 @@
     "@patternfly/react-core": "workspace:^",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^5.3.4",
-    "react-router-dom": "^5.3.4"
+    "react-router": "^7.2.0",
+    "react-router-dom": "^7.2.0"
   },
   "devDependencies": {
-    "@types/react-router": "^5.1.20",
-    "@types/react-router-dom": "^5.3.3",
     "@vitejs/plugin-react-swc": "^3.8.0",
     "vite": "^5.4.14"
   }
diff --git a/packages/react-integration/demo-app-ts/src/App.tsx b/packages/react-integration/demo-app-ts/src/App.tsx
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/LabelDemo/LabelDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/LabelDemo/LabelDemo.tsx
diff --git a/yarn.lock b/yarn.lock
