diff --git a/packages/react-core/src/components/Masthead/examples/Masthead.md b/packages/react-core/src/components/Masthead/examples/Masthead.md
index 0f3460d8d12..cfba75f1f9c 100644
--- a/packages/react-core/src/components/Masthead/examples/Masthead.md
+++ b/packages/react-core/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 './pf-logo-small.svg';
+import pfIcon from './pf-logo.svg';
`Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`.
@@ -210,10 +210,10 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
```ts
import React from 'react';
-import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
+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 './pf-logo-small.svg';
+import pfIcon from './pf-logo.svg';
@@ -223,7 +223,7 @@ import pfIcon from './pf-logo-small.svg';
}>
-
+
diff --git a/packages/react-core/src/components/Masthead/examples/pf-logo-small.svg b/packages/react-core/src/components/Masthead/examples/pf-logo-small.svg
deleted file mode 100644
index 44c092431cb..00000000000
--- a/packages/react-core/src/components/Masthead/examples/pf-logo-small.svg
+++ /dev/null
@@ -1,23 +0,0 @@
-
-
\ No newline at end of file
diff --git a/packages/react-core/src/components/Masthead/examples/pf-logo.svg b/packages/react-core/src/components/Masthead/examples/pf-logo.svg
new file mode 100644
index 00000000000..a47a3cb740b
--- /dev/null
+++ b/packages/react-core/src/components/Masthead/examples/pf-logo.svg
@@ -0,0 +1,28 @@
+
+
\ No newline at end of file
diff --git a/packages/react-core/src/demos/Masthead.md b/packages/react-core/src/demos/Masthead.md
index f3001b14af2..e6cfe3c948a 100644
--- a/packages/react-core/src/demos/Masthead.md
+++ b/packages/react-core/src/demos/Masthead.md
@@ -12,6 +12,7 @@ import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
import pfIcon from './Card/pf-logo-small.svg';
+import pfLogo from './assets/pf-logo.svg';
import { Link } from '@reach/router';
## Demos
diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md
index 6480dc67c23..84d96460733 100644
--- a/packages/react-core/src/demos/Nav.md
+++ b/packages/react-core/src/demos/Nav.md
@@ -12,7 +12,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
## Demos
@@ -406,8 +406,8 @@ 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 BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
class PageLayoutHorizontalNav extends React.Component {
constructor(props) {
@@ -497,25 +497,18 @@ class PageLayoutHorizontalNav extends React.Component {
Logout
>
);
-
+
const headerToolbar = (
-
- {PageNav}
-
+ {PageNav}
- }
- onClick={() => {}}
- />
+ } onClick={() => {}} />
@@ -600,14 +593,7 @@ class PageLayoutHorizontalNav extends React.Component {
-
-
-
-
+
{headerToolbar}
@@ -835,7 +821,7 @@ import {
ToolbarContent,
ToolbarGroup,
ToolbarItem
- } from '@patternfly/react-core';
+} from '@patternfly/react-core';
import { DashboardBreadcrumb } from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
@@ -843,8 +829,8 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
class HorizontalNavWithSubnav extends React.Component {
constructor(props) {
@@ -948,7 +934,7 @@ class HorizontalNavWithSubnav extends React.Component {
>
);
- const SubNav = (
+ const SubNav = (
);
-
const pageId = 'main-content-page-layout-horizontal-nav';
const PageSkipToContent = Skip to content;
@@ -1389,8 +1360,7 @@ import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-ico
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import imgColorBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
-
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
class PageLayoutManualNav extends React.Component {
constructor(props) {
@@ -1461,8 +1431,15 @@ class PageLayoutManualNav extends React.Component {
}
render() {
- const { isDropdownOpen, isKebabDropdownOpen, isFullKebabDropdownOpen, activeItem, isNavOpenDesktop, isNavOpenMobile, isMobileView } =
- this.state;
+ const {
+ isDropdownOpen,
+ isKebabDropdownOpen,
+ isFullKebabDropdownOpen,
+ activeItem,
+ isNavOpenDesktop,
+ isNavOpenMobile,
+ isMobileView
+ } = this.state;
const PageNav = (
@@ -628,7 +628,7 @@ import {
Wizard,
WizardStep
} from '@patternfly/react-core';
-import imgBrand from './imgBrand.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
class WizardFullPageWithDrawerInfoStepDemo extends React.Component {
@@ -694,7 +694,7 @@ class WizardFullPageWithDrawerInfoStepDemo extends React.Component {
-
+
diff --git a/packages/react-core/src/demos/Wizard/imgBrand.svg b/packages/react-core/src/demos/Wizard/imgBrand.svg
deleted file mode 100644
index c29cc6c9a89..00000000000
--- a/packages/react-core/src/demos/Wizard/imgBrand.svg
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/packages/react-core/src/demos/assets/pf-logo.svg b/packages/react-core/src/demos/assets/pf-logo.svg
new file mode 100644
index 00000000000..a47a3cb740b
--- /dev/null
+++ b/packages/react-core/src/demos/assets/pf-logo.svg
@@ -0,0 +1,28 @@
+
+
\ No newline at end of file
diff --git a/packages/react-core/src/demos/examples/DashboardHeader.js b/packages/react-core/src/demos/examples/DashboardHeader.js
index 2fbca51b188..1af6bd72857 100644
--- a/packages/react-core/src/demos/examples/DashboardHeader.js
+++ b/packages/react-core/src/demos/examples/DashboardHeader.js
@@ -28,7 +28,7 @@ import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
-import pfColorLogo from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
export default class DashboardHeader extends React.Component {
constructor(props) {
@@ -209,13 +209,10 @@ export default class DashboardHeader extends React.Component {
-
-
-
+ src={pfLogo}
+ alt="PatternFly"
+ heights={{ default: '36px' }}
+ />
{headerToolbar}
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
index e8122718002..1cbee9cec0b 100644
--- a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
+++ b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -58,6 +58,7 @@ import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
import imgAvatar from '@patternfly/react-core/src/components/Avatar/examples/avatarImg.svg';
import pfIcon from './pf-logo-small.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
interface NavOnSelectProps {
groupId: number | string;
@@ -480,14 +481,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
-
-
-
-
+
{headerToolbar}
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
index 4086eb8c9c0..31c00c4b73d 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -46,7 +46,7 @@ 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/Avatar/examples/avatarImg.svg';
-
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
interface NavOnSelectProps {
groupId: number | string;
itemId: number | string;
@@ -216,14 +216,11 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
-
-
-
-
+
{headerToolbar}
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
index 7c9a7b156ff..887dd442b8d 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -46,7 +46,7 @@ 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/Avatar/examples/avatarImg.svg';
-
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
interface NavOnSelectProps {
groupId: number | string;
itemId: number | string;
@@ -216,14 +216,11 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
-
-
-
-
+
{headerToolbar}
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
index 9c5eda24572..935084be46a 100644
--- a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
+++ b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -48,6 +48,7 @@ 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/Avatar/examples/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
interface NavOnSelectProps {
groupId: number | string;
@@ -207,14 +208,11 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
-
-
-
-
+
{headerToolbar}
diff --git a/packages/react-core/src/demos/examples/pfColorLogo.svg b/packages/react-core/src/demos/examples/pfColorLogo.svg
deleted file mode 100644
index 232a493d1c2..00000000000
--- a/packages/react-core/src/demos/examples/pfColorLogo.svg
+++ /dev/null
@@ -1,33 +0,0 @@
-
-
\ No newline at end of file
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
index f700251f212..98811621aa3 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
@@ -17,7 +17,7 @@ import {
Divider
} from '@patternfly/react-core';
import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core/deprecated';
-import imgBrand from '@patternfly/react-core/src/demos/examples/pfColorLogo.svg';
+import imgBrand from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';