From 54f2ed091096082a96b7e97886700eefa7f65880 Mon Sep 17 00:00:00 2001 From: Titani Date: Thu, 25 Jul 2024 20:00:26 -0400 Subject: [PATCH 1/7] feat(Masthead): Updates for new masthead structure in Penta --- packages/react-core/package.json | 2 +- .../src/components/Masthead/MastheadBrand.tsx | 28 ++----- .../src/components/Masthead/MastheadLogo.tsx | 35 ++++++++ .../Masthead/__tests__/Masthead.test.tsx | 26 +++--- .../__snapshots__/Masthead.test.tsx.snap | 84 ++++++++++--------- .../components/Masthead/examples/Masthead.md | 6 +- .../Masthead/examples/MastheadBasic.tsx | 20 +++-- .../examples/MastheadBasicMixedContent.tsx | 13 +-- .../examples/MastheadDisplayInline.tsx | 20 +++-- .../examples/MastheadDisplayStack.tsx | 20 +++-- .../MastheadDisplayStackInlineResponsive.tsx | 20 +++-- .../examples/MastheadIconRouterLink.tsx | 15 ++-- .../Masthead/examples/MastheadInsets.tsx | 20 +++-- .../src/components/Masthead/index.ts | 1 + .../src/components/Page/examples/Page.md | 2 +- .../Page/examples/PageCenteredSection.tsx | 31 +++---- .../Page/examples/PageGroupSection.tsx | 31 +++---- .../Page/examples/PageHorizontalNav.tsx | 7 +- .../Page/examples/PageMainSectionPadding.tsx | 31 +++---- .../examples/PageMainSectionVariations.tsx | 31 +++---- .../Page/examples/PageMultipleSidebarBody.tsx | 31 +++---- .../Page/examples/PageUncontrolledNav.tsx | 19 +++-- .../Page/examples/PageVerticalNav.tsx | 31 +++---- .../Page/examples/PageWithOrWithoutFill.tsx | 31 +++---- .../react-core/src/demos/DashboardHeader.tsx | 17 ++-- .../examples/NotificationDrawerBasic.tsx | 17 ++-- .../examples/NotificationDrawerGrouped.tsx | 17 ++-- .../src/demos/RTL/examples/PaginatedTable.jsx | 23 ++--- .../src/demos/RTL/examples/PaginatedTable.tsx | 23 ++--- .../Masthead/MastheadWithHorizontalNav.tsx | 9 +- ...stheadWithUtilitiesAndUserDropdownMenu.tsx | 19 +++-- .../src/demos/examples/Nav/NavFlyout.tsx | 27 +++--- .../src/demos/examples/Nav/NavHorizontal.tsx | 5 +- .../examples/Nav/NavHorizontalWithSubnav.tsx | 19 +++-- .../src/demos/examples/Nav/NavManual.tsx | 27 +++--- .../examples/Page/PageContextSelector.tsx | 19 +++-- .../Page/PageStickySectionBreadcrumb.tsx | 19 +++-- .../examples/Page/PageStickySectionGroup.tsx | 19 +++-- .../Page/PageStickySectionGroupAlternate.tsx | 19 +++-- .../examples/Wizard/InPageWithDrawer.tsx | 19 +++-- .../InPageWithDrawerInformationalStep.tsx | 19 +++-- packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 2 +- .../react-integration/demo-app-ts/src/App.tsx | 15 ++-- .../demos/MastheadDemo/MastheadDemo.tsx | 15 ++-- .../components/demos/PageDemo/PageDemo.tsx | 17 ++-- .../PageDemo/PageManagedSidebarClosedDemo.tsx | 15 ++-- packages/react-styles/package.json | 2 +- .../react-table/src/demos/DashboardHeader.tsx | 17 ++-- packages/react-table/src/demos/Table.md | 4 +- packages/react-tokens/package.json | 2 +- yarn.lock | 18 ++-- 52 files changed, 579 insertions(+), 402 deletions(-) create mode 100644 packages/react-core/src/components/Masthead/MastheadLogo.tsx diff --git a/packages/react-core/package.json b/packages/react-core/package.json index bbbbc75e27c..02c1a0c811a 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -55,7 +55,7 @@ "tslib": "^2.6.2" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.201", + "@patternfly/patternfly": "6.0.0-alpha.202", "case-anything": "^2.1.13", "css": "^3.0.0", "fs-extra": "^11.2.0" diff --git a/packages/react-core/src/components/Masthead/MastheadBrand.tsx b/packages/react-core/src/components/Masthead/MastheadBrand.tsx index 454fabd635b..835030cff38 100644 --- a/packages/react-core/src/components/Masthead/MastheadBrand.tsx +++ b/packages/react-core/src/components/Masthead/MastheadBrand.tsx @@ -2,34 +2,20 @@ import * as React from 'react'; import styles from '@patternfly/react-styles/css/components/Masthead/masthead'; import { css } from '@patternfly/react-styles'; -export interface MastheadBrandProps - extends React.DetailedHTMLProps, HTMLAnchorElement> { +export interface MastheadBrandProps extends React.DetailedHTMLProps, HTMLDivElement> { /** Content rendered inside of the masthead brand. */ - children?: React.ReactNode; + children: React.ReactNode; /** Additional classes added to the masthead brand. */ className?: string; - /** Component type of the masthead brand. */ - component?: React.ElementType | React.ComponentType; } export const MastheadBrand: React.FunctionComponent = ({ children, className, - component, ...props -}: MastheadBrandProps) => { - let Component = component as any; - if (!component) { - if (props?.href !== undefined) { - Component = 'a'; - } else { - Component = 'span'; - } - } - return ( - - {children} - - ); -}; +}: MastheadBrandProps) => ( +
+ {children} +
+); MastheadBrand.displayName = 'MastheadBrand'; diff --git a/packages/react-core/src/components/Masthead/MastheadLogo.tsx b/packages/react-core/src/components/Masthead/MastheadLogo.tsx new file mode 100644 index 00000000000..dcefa93f871 --- /dev/null +++ b/packages/react-core/src/components/Masthead/MastheadLogo.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/Masthead/masthead'; +import { css } from '@patternfly/react-styles'; + +export interface MastheadLogoProps + extends React.DetailedHTMLProps, HTMLAnchorElement> { + /** Content rendered inside of the masthead logo. */ + children?: React.ReactNode; + /** Additional classes added to the masthead logo. */ + className?: string; + /** Component type of the masthead logo. */ + component?: React.ElementType | React.ComponentType; +} + +export const MastheadLogo: React.FunctionComponent = ({ + children, + className, + component, + ...props +}: MastheadLogoProps) => { + let Component = component as any; + if (!component) { + if (props?.href !== undefined) { + Component = 'a'; + } else { + Component = 'span'; + } + } + return ( + + {children} + + ); +}; +MastheadLogo.displayName = 'MastheadLogo'; diff --git a/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx b/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx index df7b7cc1a35..b1e72a72b4c 100644 --- a/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx +++ b/packages/react-core/src/components/Masthead/__tests__/Masthead.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render } from '@testing-library/react'; -import { Masthead, MastheadBrand, MastheadContent, MastheadMain, MastheadToggle } from '../index'; +import { Masthead, MastheadMain, MastheadLogo, MastheadContent, MastheadBrand, MastheadToggle } from '../index'; describe('Masthead', () => { test('verify basic', () => { @@ -12,9 +12,11 @@ describe('Masthead', () => { test('verify full structure', () => { const { asFragment } = render( - Toggle - Logo + Toggle + + Logo + Content @@ -72,33 +74,33 @@ describe('Masthead', () => { }); }); -describe('MastheadBrand', () => { +describe('MastheadLogo', () => { test('verify basic', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); test('verify custom class', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); test('verify default component', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); test('verify custom component', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); test('verify anchor component with href', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); @@ -118,15 +120,15 @@ describe('MastheadContent', () => { }); }); -describe('MastheadMain', () => { +describe('MastheadBrand', () => { test('verify basic', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); test('verify custom class', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); diff --git a/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap b/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap index 073d55f0251..54f81f5c1c7 100644 --- a/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap +++ b/packages/react-core/src/components/Masthead/__tests__/__snapshots__/Masthead.test.tsx.snap @@ -25,19 +25,23 @@ exports[`Masthead verify full structure 1`] = `
- - Toggle -
- Logo + Toggle +
+ +
`; -exports[`MastheadBrand verify anchor component with href 1`] = ` +exports[`MastheadBrand verify basic 1`] = ` - test - +
`; -exports[`MastheadBrand verify basic 1`] = ` +exports[`MastheadBrand verify custom class 1`] = ` - test - + `; -exports[`MastheadBrand verify custom class 1`] = ` +exports[`MastheadContent verify basic 1`] = ` - test - + `; -exports[`MastheadBrand verify custom component 1`] = ` +exports[`MastheadContent verify custom class 1`] = `
test
`; -exports[`MastheadBrand verify default component 1`] = ` +exports[`MastheadLogo verify anchor component with href 1`] = ` - test - + `; -exports[`MastheadContent verify basic 1`] = ` +exports[`MastheadLogo verify basic 1`] = ` -
test -
+ `; -exports[`MastheadContent verify custom class 1`] = ` +exports[`MastheadLogo verify custom class 1`] = ` -
test -
+ `; -exports[`MastheadMain verify basic 1`] = ` +exports[`MastheadLogo verify custom component 1`] = `
test
`; -exports[`MastheadMain verify custom class 1`] = ` +exports[`MastheadLogo verify default component 1`] = ` -
test -
+ `; diff --git a/packages/react-core/src/components/Masthead/examples/Masthead.md b/packages/react-core/src/components/Masthead/examples/Masthead.md index edf3945c7a5..63777e6cf3a 100644 --- a/packages/react-core/src/components/Masthead/examples/Masthead.md +++ b/packages/react-core/src/components/Masthead/examples/Masthead.md @@ -2,16 +2,16 @@ id: Masthead section: components cssPrefix: pf-v5-c-masthead -propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', 'MastheadContent'] +propComponents: ['Masthead', 'MastheadToggle', 'MastheadMain', 'MastheadBrand', MastheadLogo, 'MastheadContent'] --- import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; import { Link } from '@reach/router'; import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg'; -`Masthead` should contain the following components to maintain proper layout and formatting: `MastheadToggle`, `MastheadMain`, and `MastheadContent`. +`Masthead` should contain the following components to maintain proper layout and formatting: `MastheadMain`, and `MastheadContent`. -`MastheadMain` represents the smaller area taken up by a logo, and will typically contain a `MastheadBrand`. `MastheadContent` represents the main portion of the masthead area and will typically contain a `Toolbar` or other menu-like content such as `Dropdown`. +`MastheadMain` represents the smaller area taken up by a logo, and will typically contain a `MastheadLogo`. `MastheadContent` represents the main portion of the masthead area and will typically contain a `Toolbar` or other menu-like content such as `Dropdown`. ## Examples diff --git a/packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx b/packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx index e858e55e28d..d9259f14fdc 100644 --- a/packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx +++ b/packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx @@ -1,14 +1,24 @@ import React from 'react'; -import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core'; +import { + Masthead, + MastheadMain, + MastheadToggle, + MastheadBrand, + MastheadLogo, + MastheadContent, + Button +} from '@patternfly/react-core'; import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; export const MastheadBasic: React.FunctionComponent = () => ( - - - + + + - Patternfly logo + + Patternfly logo + diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx index 94d0b330ddb..a8ef56f3122 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageDemo.tsx @@ -7,10 +7,11 @@ import { PageToggleButton, SkipToContent, Masthead, + MastheadBrand, MastheadToggle, MastheadMain, MastheadContent, - MastheadBrand, + MastheadLogo, Toolbar, ToolbarContent, ToolbarItem @@ -72,13 +73,15 @@ export class PageDemo extends Component { const masthead = ( - - - - - - Logo that's a div + + + + + + + Logo that's a div + {headerToolbar} diff --git a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx index 469113cc396..e034b60dc13 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/PageDemo/PageManagedSidebarClosedDemo.tsx @@ -4,6 +4,7 @@ import { Masthead, MastheadToggle, MastheadMain, + MastheadLogo, MastheadBrand, MastheadContent, PageSidebar, @@ -27,13 +28,15 @@ export const PageManagedSidebarClosedDemo: React.FunctionComponent = () => { const masthead = ( - - - - - - Logo that's a div + + + + + + + Logo that's a div + {headerToolbar} diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index d8a49a30aff..c6c06bf1956 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -19,7 +19,7 @@ "clean": "rimraf dist css" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.201", + "@patternfly/patternfly": "6.0.0-alpha.202", "change-case": "^5.4.4", "fs-extra": "^11.2.0" }, diff --git a/packages/react-table/src/demos/DashboardHeader.tsx b/packages/react-table/src/demos/DashboardHeader.tsx index c876be6d344..fd0611194cf 100644 --- a/packages/react-table/src/demos/DashboardHeader.tsx +++ b/packages/react-table/src/demos/DashboardHeader.tsx @@ -10,9 +10,10 @@ import { DropdownItem, DropdownList, Masthead, - MastheadToggle, MastheadMain, + MastheadToggle, MastheadBrand, + MastheadLogo, MastheadContent, MenuToggle, Toolbar, @@ -85,14 +86,16 @@ export const DashboardHeader: React.FC = ({ notificationBa return ( - - - - - + + + + + - + + + diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md index 345dd507c98..2ba18a2a546 100644 --- a/packages/react-table/src/demos/Table.md +++ b/packages/react-table/src/demos/Table.md @@ -15,7 +15,7 @@ ToolbarItem, SearchInput, Masthead, MastheadToggle, -MastheadMain, +MastheadBrand, MastheadContent, SkipToContent, Breadcrumb, @@ -31,7 +31,7 @@ Dropdown, DropdownGroup, DropdownItem, DropdownList, -MastheadBrand, +MastheadLogo, MenuToggle, ToolbarGroup, PageToggleButton, diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index 08d859af42b..e27f7fa1c01 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -29,7 +29,7 @@ "clean": "rimraf dist" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.201", + "@patternfly/patternfly": "6.0.0-alpha.202", "css": "^3.0.0", "fs-extra": "^11.2.0" } diff --git a/yarn.lock b/yarn.lock index fc9d3968c46..e68d3007c87 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3131,10 +3131,10 @@ __metadata: languageName: node linkType: hard -"@patternfly/patternfly@npm:6.0.0-alpha.201": - version: 6.0.0-alpha.201 - resolution: "@patternfly/patternfly@npm:6.0.0-alpha.201" - checksum: 10c0/a5963ec9db9fefc03ea20b03f95084a42fca8c5a3bbdddd5f7f2445c5baa8e6b69dc552765ae1171fbc6f1125c3cc20eccf0370a8bea36540206abadb725fbce +"@patternfly/patternfly@npm:6.0.0-alpha.202": + version: 6.0.0-alpha.202 + resolution: "@patternfly/patternfly@npm:6.0.0-alpha.202" + checksum: 10c0/d6f0b795e320d0df68f4bffaab616baf4a08407c640f25feb60f80ecb6111f2eefaa1f384ff5714a47a96c091038b8e6c8d6df0aaf67c9bec9e6dfbce57110ba languageName: node linkType: hard @@ -3193,7 +3193,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-core@workspace:packages/react-core" dependencies: - "@patternfly/patternfly": "npm:6.0.0-alpha.201" + "@patternfly/patternfly": "npm:6.0.0-alpha.202" "@patternfly/react-icons": "workspace:^" "@patternfly/react-styles": "workspace:^" "@patternfly/react-tokens": "workspace:^" @@ -3214,7 +3214,7 @@ __metadata: resolution: "@patternfly/react-docs@workspace:packages/react-docs" dependencies: "@patternfly/documentation-framework": "npm:^6.0.0-alpha.66" - "@patternfly/patternfly": "npm:6.0.0-alpha.201" + "@patternfly/patternfly": "npm:6.0.0-alpha.202" "@patternfly/patternfly-a11y": "npm:4.3.1" "@patternfly/react-charts": "workspace:^" "@patternfly/react-code-editor": "workspace:^" @@ -3252,7 +3252,7 @@ __metadata: "@fortawesome/free-brands-svg-icons": "npm:^5.15.4" "@fortawesome/free-regular-svg-icons": "npm:^5.15.4" "@fortawesome/free-solid-svg-icons": "npm:^5.15.4" - "@patternfly/patternfly": "npm:6.0.0-alpha.201" + "@patternfly/patternfly": "npm:6.0.0-alpha.202" fs-extra: "npm:^11.2.0" tslib: "npm:^2.6.2" peerDependencies: @@ -3330,7 +3330,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-styles@workspace:packages/react-styles" dependencies: - "@patternfly/patternfly": "npm:6.0.0-alpha.201" + "@patternfly/patternfly": "npm:6.0.0-alpha.202" change-case: "npm:^5.4.4" fs-extra: "npm:^11.2.0" languageName: unknown @@ -3371,7 +3371,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-tokens@workspace:packages/react-tokens" dependencies: - "@patternfly/patternfly": "npm:6.0.0-alpha.201" + "@patternfly/patternfly": "npm:6.0.0-alpha.202" css: "npm:^3.0.0" fs-extra: "npm:^11.2.0" languageName: unknown From 625a5d49aeee96773abf15d0c489b7e54aaebdea Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 26 Jul 2024 08:43:21 -0400 Subject: [PATCH 2/7] dont't require children --- packages/react-core/src/components/Masthead/MastheadBrand.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Masthead/MastheadBrand.tsx b/packages/react-core/src/components/Masthead/MastheadBrand.tsx index 835030cff38..e255a473298 100644 --- a/packages/react-core/src/components/Masthead/MastheadBrand.tsx +++ b/packages/react-core/src/components/Masthead/MastheadBrand.tsx @@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles'; export interface MastheadBrandProps extends React.DetailedHTMLProps, HTMLDivElement> { /** Content rendered inside of the masthead brand. */ - children: React.ReactNode; + children?: React.ReactNode; /** Additional classes added to the masthead brand. */ className?: string; } From 5b6ecce098605704a9fe7d83d450945a3982d971 Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 26 Jul 2024 10:07:50 -0400 Subject: [PATCH 3/7] update copy --- .../react-core/src/components/Masthead/examples/Masthead.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/Masthead/examples/Masthead.md b/packages/react-core/src/components/Masthead/examples/Masthead.md index 63777e6cf3a..dd8efce4282 100644 --- a/packages/react-core/src/components/Masthead/examples/Masthead.md +++ b/packages/react-core/src/components/Masthead/examples/Masthead.md @@ -11,7 +11,7 @@ import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg'; `Masthead` should contain the following components to maintain proper layout and formatting: `MastheadMain`, and `MastheadContent`. -`MastheadMain` represents the smaller area taken up by a logo, and will typically contain a `MastheadLogo`. `MastheadContent` represents the main portion of the masthead area and will typically contain a `Toolbar` or other menu-like content such as `Dropdown`. +`MastheadMain` represents the smaller area taken up by a toggle and logo, and will typically contain a `MastheadToggle` and a `MastheadLogo`. `MastheadContent` represents the main portion of the masthead area and will typically contain a `Toolbar` or other menu-like content such as `Dropdown`. ## Examples From 2307cc311bdafc68f193c16f5474a49200e05e13 Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 26 Jul 2024 11:19:15 -0400 Subject: [PATCH 4/7] updates for copy comments --- .../react-core/src/components/Masthead/examples/Masthead.md | 4 ++-- packages/react-core/src/components/Page/examples/Page.md | 5 ++++- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/react-core/src/components/Masthead/examples/Masthead.md b/packages/react-core/src/components/Masthead/examples/Masthead.md index dd8efce4282..b629c9a87bd 100644 --- a/packages/react-core/src/components/Masthead/examples/Masthead.md +++ b/packages/react-core/src/components/Masthead/examples/Masthead.md @@ -9,9 +9,9 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; import { Link } from '@reach/router'; import pfIcon from '../../assets/PF-HorizontalLogo-Color.svg'; -`Masthead` should contain the following components to maintain proper layout and formatting: `MastheadMain`, and `MastheadContent`. +To maintain proper layout and formatting, a `` should contain both a `` and `` component. -`MastheadMain` represents the smaller area taken up by a toggle and logo, and will typically contain a `MastheadToggle` and a `MastheadLogo`. `MastheadContent` represents the main portion of the masthead area and will typically contain a `Toolbar` or other menu-like content such as `Dropdown`. + Mastheads contain the `` that wraps a `` and ``. The `` wraps ``. The masthead also contains the page's header toolbar within ``. ## Examples diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md index 4e22622227c..1ab3953cd31 100644 --- a/packages/react-core/src/components/Page/examples/Page.md +++ b/packages/react-core/src/components/Page/examples/Page.md @@ -16,7 +16,10 @@ import c_page_section_m_limit_width_MaxWidth from '@patternfly/react-tokens/dist A page will typically contain the following components: - A `` with a `masthead` prop that often contains a [masthead](/components/masthead) component - - Mastheads contain the `` that wraps a `` and ``. The `` wraps ``. The masthead also contains the page's header toolbar within ``. + +The `` component includes the smaller area that typically contains the `` and a ``. `` represents the main portion of the masthead, and will typically contain a `` or other menu-like components, like a ``. + + - Mastheads contain a `` component, which includes the ``, a ``, and the page's toolbar (via ``.) The `` component contains a ``, and the `` component contains a ``. - 1 or more `` components inside `` for vertical navigation or other sidebar content - 1 or more `` components From 943e87530010e25a20878b20695864dc5232e201 Mon Sep 17 00:00:00 2001 From: Titani Date: Fri, 26 Jul 2024 11:43:38 -0400 Subject: [PATCH 5/7] bump core alphas --- packages/react-core/package.json | 2 +- packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 2 +- packages/react-styles/package.json | 2 +- packages/react-tokens/package.json | 2 +- yarn.lock | 18 +++++++++--------- 6 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 02c1a0c811a..08d930f8990 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -55,7 +55,7 @@ "tslib": "^2.6.2" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.202", + "@patternfly/patternfly": "6.0.0-alpha.203", "case-anything": "^2.1.13", "css": "^3.0.0", "fs-extra": "^11.2.0" diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index a2e60a64226..23e25f6b7d5 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -23,7 +23,7 @@ "test:a11y": "patternfly-a11y --config patternfly-a11y.config" }, "dependencies": { - "@patternfly/patternfly": "6.0.0-alpha.202", + "@patternfly/patternfly": "6.0.0-alpha.203", "@patternfly/react-charts": "workspace:^", "@patternfly/react-code-editor": "workspace:^", "@patternfly/react-core": "workspace:^", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 28eaed92a8d..ed5554d06c7 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -33,7 +33,7 @@ "@fortawesome/free-brands-svg-icons": "^5.15.4", "@fortawesome/free-regular-svg-icons": "^5.15.4", "@fortawesome/free-solid-svg-icons": "^5.15.4", - "@patternfly/patternfly": "6.0.0-alpha.202", + "@patternfly/patternfly": "6.0.0-alpha.203", "fs-extra": "^11.2.0", "tslib": "^2.6.2" }, diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index c6c06bf1956..e227e23979f 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -19,7 +19,7 @@ "clean": "rimraf dist css" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.202", + "@patternfly/patternfly": "6.0.0-alpha.203", "change-case": "^5.4.4", "fs-extra": "^11.2.0" }, diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index e27f7fa1c01..34b54572609 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -29,7 +29,7 @@ "clean": "rimraf dist" }, "devDependencies": { - "@patternfly/patternfly": "6.0.0-alpha.202", + "@patternfly/patternfly": "6.0.0-alpha.203", "css": "^3.0.0", "fs-extra": "^11.2.0" } diff --git a/yarn.lock b/yarn.lock index e68d3007c87..f85ff570436 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3131,10 +3131,10 @@ __metadata: languageName: node linkType: hard -"@patternfly/patternfly@npm:6.0.0-alpha.202": - version: 6.0.0-alpha.202 - resolution: "@patternfly/patternfly@npm:6.0.0-alpha.202" - checksum: 10c0/d6f0b795e320d0df68f4bffaab616baf4a08407c640f25feb60f80ecb6111f2eefaa1f384ff5714a47a96c091038b8e6c8d6df0aaf67c9bec9e6dfbce57110ba +"@patternfly/patternfly@npm:6.0.0-alpha.203": + version: 6.0.0-alpha.203 + resolution: "@patternfly/patternfly@npm:6.0.0-alpha.203" + checksum: 10c0/ce60d78f0571a96546f9fd8ee6f5f56ecd506715639994ad368e25ac177845b6fb9cd73651167397794495b0820adb90670d205677ea6c35eda36d60459429f6 languageName: node linkType: hard @@ -3193,7 +3193,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-core@workspace:packages/react-core" dependencies: - "@patternfly/patternfly": "npm:6.0.0-alpha.202" + "@patternfly/patternfly": "npm:6.0.0-alpha.203" "@patternfly/react-icons": "workspace:^" "@patternfly/react-styles": "workspace:^" "@patternfly/react-tokens": "workspace:^" @@ -3214,7 +3214,7 @@ __metadata: resolution: "@patternfly/react-docs@workspace:packages/react-docs" dependencies: "@patternfly/documentation-framework": "npm:^6.0.0-alpha.66" - "@patternfly/patternfly": "npm:6.0.0-alpha.202" + "@patternfly/patternfly": "npm:6.0.0-alpha.203" "@patternfly/patternfly-a11y": "npm:4.3.1" "@patternfly/react-charts": "workspace:^" "@patternfly/react-code-editor": "workspace:^" @@ -3252,7 +3252,7 @@ __metadata: "@fortawesome/free-brands-svg-icons": "npm:^5.15.4" "@fortawesome/free-regular-svg-icons": "npm:^5.15.4" "@fortawesome/free-solid-svg-icons": "npm:^5.15.4" - "@patternfly/patternfly": "npm:6.0.0-alpha.202" + "@patternfly/patternfly": "npm:6.0.0-alpha.203" fs-extra: "npm:^11.2.0" tslib: "npm:^2.6.2" peerDependencies: @@ -3330,7 +3330,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-styles@workspace:packages/react-styles" dependencies: - "@patternfly/patternfly": "npm:6.0.0-alpha.202" + "@patternfly/patternfly": "npm:6.0.0-alpha.203" change-case: "npm:^5.4.4" fs-extra: "npm:^11.2.0" languageName: unknown @@ -3371,7 +3371,7 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-tokens@workspace:packages/react-tokens" dependencies: - "@patternfly/patternfly": "npm:6.0.0-alpha.202" + "@patternfly/patternfly": "npm:6.0.0-alpha.203" css: "npm:^3.0.0" fs-extra: "npm:^11.2.0" languageName: unknown From 46113e77e76e91955b732e83d4cb65c2778045e5 Mon Sep 17 00:00:00 2001 From: Titani Date: Mon, 29 Jul 2024 11:11:21 -0400 Subject: [PATCH 6/7] fix error in demo --- packages/react-core/src/demos/Masthead.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-core/src/demos/Masthead.md b/packages/react-core/src/demos/Masthead.md index f4eac187f19..c7fa879f0cd 100644 --- a/packages/react-core/src/demos/Masthead.md +++ b/packages/react-core/src/demos/Masthead.md @@ -8,6 +8,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; +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'; From 08fd394cdb3d6197ce51d85973a0c4bb4088657f Mon Sep 17 00:00:00 2001 From: Titani Date: Mon, 29 Jul 2024 11:42:55 -0400 Subject: [PATCH 7/7] fix demo --- packages/react-core/src/demos/Masthead.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-core/src/demos/Masthead.md b/packages/react-core/src/demos/Masthead.md index c7fa879f0cd..17059f97b8a 100644 --- a/packages/react-core/src/demos/Masthead.md +++ b/packages/react-core/src/demos/Masthead.md @@ -4,6 +4,7 @@ section: components --- import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; +import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';