@patternfly/react-core 6.2.0-prerelease.20 → 6.2.0-prerelease.21

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.19","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.2.0-prerelease.20","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.19","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.2.0-prerelease.20","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.19","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.2.0-prerelease.20","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.2.0-prerelease.20",
+  "version": "6.2.0-prerelease.21",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "fcc7abe033e11506a55a4f30ca2b14d94eaa9d41"
+  "gitHead": "a7ed28e1cb39269fe84e6ca2dd3585df0d9622b2"
 }

package/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>
+```

package/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>
+);

package/src/components/DescriptionList/DescriptionListTermHelpTextButton.tsx

@@ -13,15 +13,33 @@ export const DescriptionListTermHelpTextButton: React.FunctionComponent<Descript
   children,
   className,
   ...props
-}: DescriptionListTermHelpTextButtonProps) => (
-  <span
-    className={css(className, styles.descriptionListText, styles.modifiers.helpText)}
-    role="button"
-    type="button"
-    tabIndex={0}
-    {...props}
-  >
-    {children}
-  </span>
-);
+}: DescriptionListTermHelpTextButtonProps) => {
+  const helpTextRef = React.createRef<HTMLSpanElement>();
+
+  const handleKeys = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+    if (!helpTextRef.current || helpTextRef.current !== (event.target as HTMLElement)) {
+      return;
+    }
+
+    const key = event.key;
+    if (key === 'Enter' || key === ' ') {
+      event.preventDefault();
+      helpTextRef.current.click();
+    }
+  };
+
+  return (
+    <span
+      ref={helpTextRef}
+      className={css(className, styles.descriptionListText, styles.modifiers.helpText)}
+      role="button"
+      type="button"
+      tabIndex={0}
+      onKeyDown={(event) => handleKeys(event)}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+};
 DescriptionListTermHelpTextButton.displayName = 'DescriptionListTermHelpTextButton';

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,
@@ -132,7 +135,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
 
   const isOverflowLabel = variant === 'overflow';
   const isAddLabel = variant === 'add';
-  const isClickable = (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
+  const isClickable = isClickableProp || (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
 
   let _icon;
   if (status) {

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/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>
+```

package/src/components/Masthead/examples/{MastheadIconRouterLink.tsx → 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>

package/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>
+```

package/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';

package/src/demos/DashboardHeader.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import {
   Avatar,
-  Brand,
   Button,
   ButtonVariant,
   Divider,
@@ -30,7 +29,6 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
-import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 
 interface DashboardHeaderProps {
   /** Render custom notification badge */
@@ -42,6 +40,51 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
   const [isKebabDropdownOpen, setIsKebabDropdownOpen] = useState(false);
   const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = useState(false);
 
+  const patternflyLogo = (
+    <svg height="40px" viewBox="0 0 679 158">
+      <title>PatternFly</title>
+      <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-website-masthead">
+          <stop stopColor="#2B9AF3" offset="0%"></stop>
+          <stop stopColor="#73BCF7" stopOpacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+      </defs>
+      <g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g
+          transform="translate(206.000000, 45.750000)"
+          fill="var(--pf-t--global--text--color--regular)"
+          fillRule="nonzero"
+        >
+          <path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"></path>
+          <path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"></path>
+          <path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"></path>
+          <path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"></path>
+          <path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"></path>
+          <path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"></path>
+          <path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"></path>
+          <polygon points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon>
+          <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon>
+          <path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"></path>
+        </g>
+        <g transform="translate(0.000000, 0.000000)">
+          <path
+            d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
+            fill="var(--pf-t--color--blue--50)"
+          ></path>
+          <path
+            d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
+            fill="url(#linearGradient-website-masthead)"
+          ></path>
+          <path
+            d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
+            fill="url(#linearGradient-website-masthead)"
+            transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
+          ></path>
+        </g>
+      </g>
+    </svg>
+  );
+
   const kebabDropdownItems = (
     <>
       <DropdownItem>
@@ -94,9 +137,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
           </PageToggleButton>
         </MastheadToggle>
         <MastheadBrand>
-          <MastheadLogo>
-            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
-          </MastheadLogo>
+          <MastheadLogo>{patternflyLogo}</MastheadLogo>
         </MastheadBrand>
       </MastheadMain>
       <MastheadContent>

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

package/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
 
-```
+```

package/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,9 +184,10 @@ 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"
@@ -195,17 +195,18 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
           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>

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

package/src/demos/examples/Wizard/InModal.tsx

@@ -46,7 +46,6 @@ export const WizardInModalDemo: React.FunctionComponent = () => (
             closeButtonAriaLabel="Close wizard"
           />
         }
-        height={400}
       >
         <WizardStep name="Information" id="wizard-step-1">
           <p>Step 1 content</p>

package/src/demos/examples/Wizard/InModalWithDrawer.tsx

@@ -4,7 +4,6 @@ import {
   Drawer,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   DrawerActions,
   DrawerCloseButton,
@@ -38,7 +37,7 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -86,7 +85,6 @@ export const WizardModalWithDrawerDemo: React.FunctionComponent = () => {
             descriptionId="wiz-modal-demo-description"
           />
         }
-        height={400}
       >
         <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
           {createStepContentWithDrawer('Information step')}

package/src/demos/examples/Wizard/InModalWithDrawerInformationalStep.tsx

@@ -7,7 +7,6 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   Flex,
   Modal,
@@ -39,7 +38,7 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -91,7 +90,6 @@ export const WizardModalWithDrawerInfoStepDemo: React.FunctionComponent = () =>
             descriptionId="wiz-modal-demo-description"
           />
         }
-        height={400}
       >
         <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
           {createStepContentWithDrawer('Information step')}

package/src/demos/examples/Wizard/InPage.tsx

@@ -5,7 +5,7 @@ import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrap
 export const WizardFullPage: React.FunctionComponent = () => (
   <React.Fragment>
     <DashboardWrapper hasPageTemplateTitle>
-      <PageSection type={PageSectionTypes.wizard}>
+      <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
         <Wizard>
           <WizardStep name="Information" id="wizard-step-1">
             <p>Step 1 content</p>

package/src/demos/examples/Wizard/InPageWithDrawer.tsx

@@ -10,7 +10,6 @@ import {
   DrawerCloseButton,
   DrawerContent,
   DrawerPanelContent,
-  DrawerColorVariant,
   DrawerHead,
   Flex,
   Nav,
@@ -135,7 +134,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -180,7 +179,7 @@ export const WizardFullPageWithDrawerDemo: React.FunctionComponent = () => {
             <p>A demo of a wizard in a page.</p>
           </Content>
         </PageSection>
-        <PageSection type={PageSectionTypes.wizard}>
+        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard}>
           <Wizard>
             <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}

package/src/demos/examples/Wizard/InPageWithDrawerInformationalStep.tsx

@@ -11,7 +11,6 @@ import {
   DrawerContent,
   DrawerHead,
   DrawerPanelContent,
-  DrawerColorVariant,
   Flex,
   Nav,
   NavItem,
@@ -135,7 +134,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
     <Drawer isInline isExpanded={isDrawerExpanded} onExpand={onExpand}>
       <DrawerContent
         panelContent={
-          <DrawerPanelContent widths={{ default: 'width_33' }} colorVariant={DrawerColorVariant.secondary}>
+          <DrawerPanelContent widths={{ default: 'width_33' }}>
             <DrawerHead>
               <span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}>
                 Drawer content: {stepName}
@@ -184,7 +183,7 @@ export const WizardFullPageWithDrawerInfoStepDemo: React.FunctionComponent = ()
             <p>A demo of a wizard in a page.</p>
           </Content>
         </PageSection>
-        <PageSection type={PageSectionTypes.wizard} ß>
+        <PageSection hasBodyWrapper={false} type={PageSectionTypes.wizard} ß>
           <Wizard>
             <WizardStep body={{ hasNoPadding: true }} name="Information" id="wizard-step-1">
               {createStepContentWithDrawer('Information step')}