feat(Page): Added support for sidebar-less layout (#11760)

Author: thatblindgeye

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.28",
+    "@patternfly/patternfly": "6.3.0-prerelease.6",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"

packages/react-core/src/components/Page/Page.tsx

@@ -22,7 +22,9 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Masthead component (e.g. <Masthead />) */
   masthead?: React.ReactNode;
-  /** Sidebar component for a side nav (e.g. <PageSidebar />) */
+  /** Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout
+   * will render without a sidebar.
+   */
   sidebar?: React.ReactNode;
   /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
   notificationDrawer?: React.ReactNode;
@@ -336,6 +338,7 @@ class Page extends Component<PageProps, PageState> {
             width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
+            sidebar === null && styles.modifiers.noSidebar,
             className
           )}
         >

packages/react-core/src/components/Page/__tests__/Page.test.tsx

@@ -353,6 +353,24 @@ describe('Page', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test(`Does not render with class ${styles.modifiers.noSidebar} by default`, () => {
+    render(<Page data-testid="page"></Page>);
+
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.noSidebar);
+  });
+
+  test(`Does not render with class ${styles.modifiers.noSidebar} when sidebar prop is passed with valid content`, () => {
+    render(<Page data-testid="page" sidebar={<div>sidebar content</div>}></Page>);
+
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.noSidebar);
+  });
+
+  test(`Renders with class ${styles.modifiers.noSidebar} when sidebar is set to null`, () => {
+    render(<Page data-testid="page" sidebar={null}></Page>);
+
+    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.noSidebar);
+  });
+
   test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isContentFilled is not passed`, () => {
     render(<Page {...props} role="main"></Page>);
 

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.28",
+    "@patternfly/patternfly": "6.3.0-prerelease.6",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

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.2.0-prerelease.28",
+    "@patternfly/patternfly": "6.3.0-prerelease.6",
     "fs-extra": "^11.3.0",
     "tslib": "^2.8.1"
   },

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.28",
+    "@patternfly/patternfly": "6.3.0-prerelease.6",
     "change-case": "^5.4.4",
     "fs-extra": "^11.3.0"
   },

packages/react-tokens/package.json

@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.2.0-prerelease.28",
+    "@patternfly/patternfly": "6.3.0-prerelease.6",
     "css": "^3.0.0",
     "fs-extra": "^11.3.0"
   }

yarn.lock

@@ -3632,10 +3632,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.2.0-prerelease.28":
-  version: 6.2.0-prerelease.28
-  resolution: "@patternfly/patternfly@npm:6.2.0-prerelease.28"
-  checksum: 10c0/36a9acb6973471deb741f67922b13baf38258e5a1b400d67ec87caf76e48000b1188216d74f9bc5f348d6b33f7373858adb7ac8dd62887eb4d75b772abdab3db
+"@patternfly/patternfly@npm:6.3.0-prerelease.6":
+  version: 6.3.0-prerelease.6
+  resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.6"
+  checksum: 10c0/ceace4e78eaa5b5ea6da6cecf121a5d9c281d423be4a806332af8f90489f1ef80723762a3b3071e78653545ab89e7f9e773cffe215b6251c4eec34dee06dbcab
   languageName: node
   linkType: hard
 
@@ -3733,7 +3733,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.2.0-prerelease.28"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.6"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -3754,7 +3754,7 @@ __metadata:
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
     "@patternfly/documentation-framework": "npm:^6.5.20"
-    "@patternfly/patternfly": "npm:6.2.0-prerelease.28"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.6"
     "@patternfly/patternfly-a11y": "npm:5.1.0"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -3794,7 +3794,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.2.0-prerelease.28"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.6"
     fs-extra: "npm:^11.3.0"
     tslib: "npm:^2.8.1"
   peerDependencies:
@@ -3878,7 +3878,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.2.0-prerelease.28"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.6"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.3.0"
   languageName: unknown
@@ -3919,7 +3919,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
   dependencies:
-    "@patternfly/patternfly": "npm:6.2.0-prerelease.28"
+    "@patternfly/patternfly": "npm:6.3.0-prerelease.6"
     css: "npm:^3.0.0"
     fs-extra: "npm:^11.3.0"
   languageName: unknown