@patternfly/react-core 6.0.0-alpha.6 → 6.0.0-alpha.8

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.0.0-alpha.5","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.0.0-alpha.7","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.0.0-alpha.5","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.0.0-alpha.7","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.0.0-alpha.5","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.0.0-alpha.7","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.6",
+  "version": "6.0.0-alpha.8",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.js --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.5",
-    "@patternfly/react-styles": "^6.0.0-alpha.5",
-    "@patternfly/react-tokens": "^6.0.0-alpha.5",
+    "@patternfly/react-icons": "^6.0.0-alpha.6",
+    "@patternfly/react-styles": "^6.0.0-alpha.6",
+    "@patternfly/react-tokens": "^6.0.0-alpha.6",
     "focus-trap": "7.5.2",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.38",
+    "@patternfly/patternfly": "6.0.0-alpha.49",
     "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.2",
     "@rollup/plugin-replace": "^5.0.2",
@@ -72,5 +72,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "cddbcdf996451d6157f6c191f67b736ddeb073b0"
+  "gitHead": "5aae45c06fbd78c00fc09de587cb833b9a7d077d"
 }

package/src/components/Button/Button.tsx

@@ -94,6 +94,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   children = null,
   className = '',
   component = 'button',
+  // TODO: Update  eslint ignore when issue #9907 is resolved
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   isActive = false,
   isBlock = false,
   isDisabled = false,
@@ -155,7 +157,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         isBlock && styles.modifiers.block,
         isDisabled && styles.modifiers.disabled,
         isAriaDisabled && styles.modifiers.ariaDisabled,
-        isActive && styles.modifiers.active,
+        // TODO: Update when issue #9907 is resolved
+        // isActive && styles.modifiers.active,
         isInline && variant === ButtonVariant.link && styles.modifiers.inline,
         isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles.modifiers.danger,
         isLoading !== null && variant !== ButtonVariant.plain && styles.modifiers.progress,

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

@@ -55,7 +55,8 @@ test('Renders with class pf-m-block when isBlock = true', () => {
   expect(screen.getByRole('button')).toHaveClass('pf-m-block');
 });
 
-test('Renders with class pf-m-active when isActive = true', () => {
+// TODO:  Reenable or remove with issue #9907
+xtest('Renders with class pf-m-active when isActive = true', () => {
   render(<Button isActive>Active Button</Button>);
   expect(screen.getByRole('button')).toHaveClass('pf-m-active');
 });

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

@@ -6,7 +6,7 @@ exports[`Renders basic button 1`] = `
     aria-disabled="false"
     aria-label="basic button"
     class="pf-v5-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-27"
+    data-ouia-component-id="OUIA-Generated-Button-primary-26"
     data-ouia-component-type="PF5/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/List/ListItem.tsx

@@ -16,7 +16,7 @@ export const ListItem: React.FunctionComponent<ListItemProps> = ({
 }: ListItemProps) => (
   <li className={css(icon && styles.listItem)} {...props}>
     {icon && <span className={css(styles.listItemIcon)}>{icon}</span>}
-    {children}
+    <span className={icon && css(`${styles.list}__item-text`)}>{children}</span>
   </li>
 );
 ListItem.displayName = 'ListItem';

package/src/components/List/__tests__/Generated/__snapshots__/ListItem.test.tsx.snap

@@ -5,7 +5,9 @@ exports[`ListItem should match snapshot (auto-generated) 1`] = `
   <li
     class=""
   >
-    ReactNode
+    <span>
+      ReactNode
+    </span>
   </li>
 </DocumentFragment>
 `;

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

@@ -25,7 +25,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Apple
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Apple
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -47,7 +51,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Banana
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Banana
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -69,7 +77,11 @@ exports[`List icon large list 1`] = `
           />
         </svg>
       </span>
-      Orange
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Orange
+      </span>
     </li>
   </ul>
 </DocumentFragment>
@@ -101,7 +113,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Apple
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Apple
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -123,7 +139,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Banana
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Banana
+      </span>
     </li>
     <li
       class="pf-v5-c-list__item"
@@ -145,7 +165,11 @@ exports[`List icon list 1`] = `
           />
         </svg>
       </span>
-      Orange
+      <span
+        class="pf-v5-c-list__item-text"
+      >
+        Orange
+      </span>
     </li>
   </ul>
 </DocumentFragment>
@@ -162,17 +186,23 @@ exports[`List inline list 1`] = `
       <li
         class=""
       >
-        First
+        <span>
+          First
+        </span>
       </li>
       <li
         class=""
       >
-        Second
+        <span>
+          Second
+        </span>
       </li>
       <li
         class=""
       >
-        Third
+        <span>
+          Third
+        </span>
       </li>
     </ul>
   </ul>
@@ -188,17 +218,23 @@ exports[`List ordered list 1`] = `
     <li
       class=""
     >
-      Apple
+      <span>
+        Apple
+      </span>
     </li>
     <li
       class=""
     >
-      Banana
+      <span>
+        Banana
+      </span>
     </li>
     <li
       class=""
     >
-      Orange
+      <span>
+        Orange
+      </span>
     </li>
   </ol>
 </DocumentFragment>
@@ -215,17 +251,23 @@ exports[`List simple list 1`] = `
       <li
         class=""
       >
-        First
+        <span>
+          First
+        </span>
       </li>
       <li
         class=""
       >
-        Second
+        <span>
+          Second
+        </span>
       </li>
       <li
         class=""
       >
-        Third
+        <span>
+          Third
+        </span>
       </li>
     </ul>
   </ul>

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

@@ -63,7 +63,7 @@ exports[`Masthead verify inline display breakpoints 1`] = `
 exports[`Masthead verify inset2xl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl"
   >
     test
   </header>
@@ -83,7 +83,7 @@ exports[`Masthead verify inset3xl inset breakpoints 1`] = `
 exports[`Masthead verify insetLg inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-lg"
   >
     test
   </header>
@@ -93,7 +93,7 @@ exports[`Masthead verify insetLg inset breakpoints 1`] = `
 exports[`Masthead verify insetMd inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-md"
   >
     test
   </header>
@@ -103,7 +103,7 @@ exports[`Masthead verify insetMd inset breakpoints 1`] = `
 exports[`Masthead verify insetNone inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-none"
   >
     test
   </header>
@@ -113,7 +113,7 @@ exports[`Masthead verify insetNone inset breakpoints 1`] = `
 exports[`Masthead verify insetSm inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-sm"
   >
     test
   </header>
@@ -123,7 +123,7 @@ exports[`Masthead verify insetSm inset breakpoints 1`] = `
 exports[`Masthead verify insetXl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-xl"
   >
     test
   </header>

package/src/components/Masthead/examples/Masthead.md

@@ -7,7 +7,7 @@ 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-logo.svg';
+import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg';
 
 `Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`.
 
@@ -17,173 +17,35 @@ import pfIcon from '../../assets/pf-logo.svg';
 
 ### Basic
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="basic-example">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadBasic.tsx"
 ```
 
 ### Basic with mixed content
 
-```ts
-import React from 'react';
-import {
-  Masthead,
-  MastheadToggle,
-  MastheadMain,
-  MastheadBrand,
-  MastheadContent,
-  Button,
-  Flex,
-  FlexItem
-} from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="basic-mixed">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <Flex>
-      <span>Testing text color</span>
-      <Button>testing</Button>
-      <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
-        <Button>testing</Button>
-      </FlexItem>
-    </Flex>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadBasicMixedContent.tsx"
 ```
 
 ### Display inline
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="inline-masthead" display={{ default: 'inline' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadDisplayInline.tsx"
 ```
 
 ### Display stack
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="stack-masthead" display={{ default: 'stack' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadDisplayStack.tsx"
 ```
 
 ### Display stack, display inline responsive
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadDisplayStackInlineResponsive.tsx"
 ```
 
 ### Inset
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
-
-<Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand>Logo</MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadInsets.tsx"
 ```
 
 ### With icon router link
 
-```ts
-import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button, 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-logo.svg';
-
-<Masthead id="icon-router-link">
-  <MastheadToggle>
-    <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
-      <BarsIcon />
-    </Button>
-  </MastheadToggle>
-  <MastheadMain>
-    <MastheadBrand component={props => <Link {...props} to="#" />}>
-      <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
-    </MastheadBrand>
-  </MastheadMain>
-  <MastheadContent>
-    <span>Content</span>
-  </MastheadContent>
-</Masthead>;
+```ts file="./MastheadIconRouterLink.tsx"
 ```

package/src/components/Masthead/examples/MastheadBasic.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadBasic: React.FunctionComponent = () => (
+  <Masthead id="basic-example">
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadBasicMixedContent.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import {
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  Button,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadBasicMixedContent: React.FunctionComponent = () => (
+  <Masthead id="basic-mixed">
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <Flex>
+        <span>Content</span>
+        <Button>Primary</Button>
+        <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
+          <Button variant="secondary">Secondary</Button>
+        </FlexItem>
+        <FlexItem alignSelf={{ default: 'alignSelfFlexEnd' }}>
+          <Button variant="tertiary">Tertiary</Button>
+        </FlexItem>
+      </Flex>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadDisplayInline.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadDisplayInline: React.FunctionComponent = () => (
+  <Masthead id="inline-masthead" display={{ default: 'inline' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadDisplayStack.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadDisplayStack: React.FunctionComponent = () => (
+  <Masthead id="stack-masthead" display={{ default: 'stack' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+export const MastheadDisplayStackInlineResponsive: React.FunctionComponent = () => (
+  <Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component="a">Logo</MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);

package/src/components/Masthead/examples/MastheadIconRouterLink.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  Masthead,
+  MastheadToggle,
+  MastheadMain,
+  MastheadBrand,
+  MastheadContent,
+  Button,
+  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 = () => (
+  <Masthead id="icon-router-link">
+    <MastheadToggle>
+      <Button variant="plain" onClick={() => {}} aria-label="Global navigation">
+        <BarsIcon />
+      </Button>
+    </MastheadToggle>
+    <MastheadMain>
+      <MastheadBrand component={(props) => <Link {...props} to="#" />}>
+        <Brand src={pfIcon} alt="PatternFly" heights={{ default: '36px' }} />
+      </MastheadBrand>
+    </MastheadMain>
+    <MastheadContent>
+      <span>Content</span>
+    </MastheadContent>
+  </Masthead>
+);