@patternfly/react-core 6.5.0-prerelease.49 → 6.5.0-prerelease.50

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.5.0-prerelease.48","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.5.0-prerelease.49","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.5.0-prerelease.48","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.5.0-prerelease.49","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.5.0-prerelease.48","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.5.0-prerelease.49","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.49",
+  "version": "6.5.0-prerelease.50",
   "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.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.20",
-    "@patternfly/react-styles": "^6.5.0-prerelease.15",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.14",
+    "@patternfly/react-icons": "^6.5.0-prerelease.21",
+    "@patternfly/react-styles": "^6.5.0-prerelease.16",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.15",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.62",
+    "@patternfly/patternfly": "6.5.0-prerelease.65",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "a7a847c33ba834994e3a1db186ee071e7fbdd7ad"
+  "gitHead": "911223aa1a6b9309d90d31245bc29f3e1a9c675c"
 }

package/src/components/Page/Page.tsx

@@ -348,7 +348,13 @@ class Page extends Component<PageProps, PageState> {
           )}
         >
           {skipToContent}
-          {variant === 'docked' ? <div className={css(styles.pageDock)}>{masthead}</div> : masthead}
+          {variant === 'docked' ? (
+            <div className={css(styles.pageDock)}>
+              <div className={css(styles.pageDockMain)}>{masthead}</div>
+            </div>
+          ) : (
+            masthead
+          )}
           {sidebar}
           {notificationDrawer && (
             <div className={css(styles.pageDrawer)}>

package/src/components/Page/PageGroup.tsx

@@ -27,6 +27,10 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
   hasOverflowScroll?: boolean;
   /** Adds an accessible name to the page group when the hasOverflowScroll prop is set to true. */
   'aria-label'?: string;
+  /** Adds plain styling to the page group. */
+  isPlain?: boolean;
+  /** @beta Prevents the page group from automatically applying plain styling when glass theme is enabled. */
+  isNoPlainOnGlass?: boolean;
 }
 
 export const PageGroup = ({
@@ -38,6 +42,8 @@ export const PageGroup = ({
   hasShadowBottom = false,
   hasOverflowScroll = false,
   'aria-label': ariaLabel,
+  isPlain = false,
+  isNoPlainOnGlass = false,
   ...props
 }: PageGroupProps) => {
   const { height, getVerticalBreakpoint } = useContext(PageContext);
@@ -60,6 +66,8 @@ export const PageGroup = ({
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,
+        isPlain && styles.modifiers.plain,
+        isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0, role: 'region', 'aria-label': ariaLabel })}

package/src/components/Page/PageSection.tsx

@@ -67,6 +67,10 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   'aria-label'?: string;
   /** Sets the base component to render. Defaults to section */
   component?: keyof React.JSX.IntrinsicElements;
+  /** Adds plain styling to the page section. */
+  isPlain?: boolean;
+  /** @beta Prevents the page section from automatically applying plain styling when glass theme is enabled. */
+  isNoPlainOnGlass?: boolean;
 }
 
 const variantType = {
@@ -98,6 +102,8 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   'aria-label': ariaLabel,
   component = 'section',
   hasBodyWrapper = true,
+  isPlain = false,
+  isNoPlainOnGlass = false,
   ...props
 }: PageSectionProps) => {
   const { height, getVerticalBreakpoint } = useContext(PageContext);
@@ -126,6 +132,8 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,
+        isPlain && styles.modifiers.plain,
+        isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
         className
       )}
       {...(hasOverflowScroll && { tabIndex: 0 })}

package/src/components/Page/PageSidebar.tsx

@@ -50,7 +50,9 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           aria-hidden={!sidebarOpen}
           {...props}
         >
-          <PageSidebarContext.Provider value={{ isSidebarOpen: sidebarOpen }}>{children}</PageSidebarContext.Provider>
+          <PageSidebarContext.Provider value={{ isSidebarOpen: sidebarOpen }}>
+            <div className={css(styles.pageSidebarMain)}>{children}</div>
+          </PageSidebarContext.Provider>
         </div>
       );
     }}

package/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap

@@ -7,8 +7,12 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
     class="pf-v6-c-page__sidebar ''"
     id="page-sidebar"
   >
-    <div>
-      ReactNode
+    <div
+      class="pf-v6-c-page__sidebar-main"
+    >
+      <div>
+        ReactNode
+      </div>
     </div>
   </div>
 </DocumentFragment>

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

@@ -406,4 +406,11 @@ describe('Page', () => {
     render(<Page data-testid="page"></Page>);
     expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock);
   });
+
+  test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => {
+    render(<Page variant="docked" masthead={<>Masthead</>} data-testid="page"></Page>);
+
+    const pageDockMain = screen.getByText('Masthead').closest(`.${styles.pageDockMain}`);
+    expect(pageDockMain).toBeInTheDocument();
+  });
 });

package/src/components/Page/__tests__/PageGroup.test.tsx

@@ -2,92 +2,102 @@ import { render, screen } from '@testing-library/react';
 import { PageGroup } from '../PageGroup';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 
-describe('page group', () => {
-  test('Verify basic render', () => {
-    const { asFragment } = render(<PageGroup>test</PageGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify top sticky', () => {
-    const { asFragment } = render(<PageGroup stickyOnBreakpoint={{ default: 'top' }}>test</PageGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify bottom sticky', () => {
-    const { asFragment } = render(<PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>test</PageGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify top shadow', () => {
-    const { asFragment } = render(<PageGroup hasShadowTop>test</PageGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify bottom shadow', () => {
-    const { asFragment } = render(<PageGroup hasShadowBottom>test</PageGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-  test('Verify overflow scroll', () => {
-    const { asFragment } = render(<PageGroup hasOverflowScroll>test</PageGroup>);
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  test('Renders without an aria-label by default', () => {
-    render(<PageGroup>test</PageGroup>);
-
-    expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
-  });
-
-  test('Renders with the passed aria-label applied', () => {
-    render(
-      <PageGroup aria-label="Test label" hasOverflowScroll>
-        test
-      </PageGroup>
-    );
-
-    expect(screen.getByText('test')).toHaveAccessibleName('Test label');
-  });
-
-  test('Does not log a warning in the console by default', () => {
-    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
-
-    render(<PageGroup>test</PageGroup>);
-
-    expect(consoleWarning).not.toHaveBeenCalled();
-  });
-
-  test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
-    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
-
-    render(
-      <PageGroup hasOverflowScroll aria-label="Test label">
-        test
-      </PageGroup>
-    );
-
-    expect(consoleWarning).not.toHaveBeenCalled();
-  });
-
-  test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
-    const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
-
-    render(<PageGroup hasOverflowScroll>test</PageGroup>);
-
-    expect(consoleWarning).toHaveBeenCalled();
-  });
-
-  test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isFilled is not passed`, () => {
-    render(<PageGroup>test</PageGroup>);
-
-    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.fill);
-    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.noFill);
-  });
-
-  test(`Renders with ${styles.modifiers.fill} if isFilled={true} is passed`, () => {
-    render(<PageGroup isFilled={true}>test</PageGroup>);
-
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers.fill);
-  });
-
-  test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, () => {
-    render(<PageGroup isFilled={false}>test</PageGroup>);
-
-    expect(screen.getByText('test')).toHaveClass(styles.modifiers.noFill);
-  });
+test('Verify basic render', () => {
+  const { asFragment } = render(<PageGroup>test</PageGroup>);
+  expect(asFragment()).toMatchSnapshot();
+});
+test('Verify top sticky', () => {
+  const { asFragment } = render(<PageGroup stickyOnBreakpoint={{ default: 'top' }}>test</PageGroup>);
+  expect(asFragment()).toMatchSnapshot();
+});
+test('Verify bottom sticky', () => {
+  const { asFragment } = render(<PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>test</PageGroup>);
+  expect(asFragment()).toMatchSnapshot();
+});
+test('Verify top shadow', () => {
+  const { asFragment } = render(<PageGroup hasShadowTop>test</PageGroup>);
+  expect(asFragment()).toMatchSnapshot();
+});
+test('Verify bottom shadow', () => {
+  const { asFragment } = render(<PageGroup hasShadowBottom>test</PageGroup>);
+  expect(asFragment()).toMatchSnapshot();
+});
+test('Verify overflow scroll', () => {
+  const { asFragment } = render(<PageGroup hasOverflowScroll>test</PageGroup>);
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Renders without an aria-label by default', () => {
+  render(<PageGroup>test</PageGroup>);
+
+  expect(screen.getByText('test')).not.toHaveAccessibleName('Test label');
+});
+
+test('Renders with the passed aria-label applied', () => {
+  render(
+    <PageGroup aria-label="Test label" hasOverflowScroll>
+      test
+    </PageGroup>
+  );
+
+  expect(screen.getByText('test')).toHaveAccessibleName('Test label');
+});
+
+test('Does not log a warning in the console by default', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(<PageGroup>test</PageGroup>);
+
+  expect(consoleWarning).not.toHaveBeenCalled();
+});
+
+test('Does not log a warning in the console when an aria-label is included with hasOverflowScroll', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(
+    <PageGroup hasOverflowScroll aria-label="Test label">
+      test
+    </PageGroup>
+  );
+
+  expect(consoleWarning).not.toHaveBeenCalled();
+});
+
+test('Logs a warning in the console when an aria-label is not included with hasOverflowScroll', () => {
+  const consoleWarning = jest.spyOn(console, 'warn').mockImplementation();
+
+  render(<PageGroup hasOverflowScroll>test</PageGroup>);
+
+  expect(consoleWarning).toHaveBeenCalled();
+});
+
+test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isFilled is not passed`, () => {
+  render(<PageGroup>test</PageGroup>);
+
+  expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.fill);
+  expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.noFill);
+});
+
+test(`Renders with ${styles.modifiers.fill} if isFilled={true} is passed`, () => {
+  render(<PageGroup isFilled={true}>test</PageGroup>);
+
+  expect(screen.getByText('test')).toHaveClass(styles.modifiers.fill);
+});
+
+test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, () => {
+  render(<PageGroup isFilled={false}>test</PageGroup>);
+
+  expect(screen.getByText('test')).toHaveClass(styles.modifiers.noFill);
+});
+
+test(`Renders with ${styles.modifiers.plain} class when isPlain is true`, () => {
+  render(<PageGroup isPlain>test</PageGroup>);
+
+  expect(screen.getByText('test')).toHaveClass(styles.modifiers.plain);
+});
+
+test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlass is true`, () => {
+  render(<PageGroup isNoPlainOnGlass>test</PageGroup>);
+
+  expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPlainOnGlass);
 });

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -179,3 +179,23 @@ test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, ()
 
   expect(screen.getByRole('main')).toHaveClass(styles.modifiers.noFill);
 });
+
+test(`Renders with ${styles.modifiers.plain} class when isPlain is true`, () => {
+  render(
+    <PageSection hasBodyWrapper={false} isPlain>
+      test
+    </PageSection>
+  );
+
+  expect(screen.getByText('test')).toHaveClass(styles.modifiers.plain);
+});
+
+test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isNoPlainOnGlass is true`, () => {
+  render(
+    <PageSection hasBodyWrapper={false} isNoPlainOnGlass>
+      test
+    </PageSection>
+  );
+
+  expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPlainOnGlass);
+});

package/src/components/Page/__tests__/PageSidebar.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from '@testing-library/react';
+import { PageSidebar } from '../PageSidebar';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+
+test(`Renders with ${styles.pageSidebarMain} wrapper`, () => {
+  render(<PageSidebar data-testid="sidebar">Test</PageSidebar>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.pageSidebarMain);
+});

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

@@ -16,9 +16,13 @@ exports[`Page Check dark page against snapshot 1`] = `
       id="page-sidebar"
     >
       <div
-        class="pf-v6-c-page__sidebar-body"
+        class="pf-v6-c-page__sidebar-main"
       >
-        Navigation
+        <div
+          class="pf-v6-c-page__sidebar-body"
+        >
+          Navigation
+        </div>
       </div>
     </div>
     <div
@@ -57,7 +61,11 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
       aria-hidden="false"
       class="pf-v6-c-page__sidebar"
       id="page-sidebar"
-    />
+    >
+      <div
+        class="pf-v6-c-page__sidebar-main"
+      />
+    </div>
     <div
       class="pf-v6-c-page__main-container"
     >
@@ -94,7 +102,11 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
       aria-hidden="false"
       class="pf-v6-c-page__sidebar"
       id="page-sidebar"
-    />
+    >
+      <div
+        class="pf-v6-c-page__sidebar-main"
+      />
+    </div>
     <div
       class="pf-v6-c-page__main-container"
     >
@@ -239,7 +251,11 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
       aria-hidden="false"
       class="pf-v6-c-page__sidebar"
       id="page-sidebar"
-    />
+    >
+      <div
+        class="pf-v6-c-page__sidebar-main"
+      />
+    </div>
     <div
       class="pf-v6-c-page__main-container"
     >
@@ -388,7 +404,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
       aria-hidden="false"
       class="pf-v6-c-page__sidebar"
       id="page-sidebar"
-    />
+    >
+      <div
+        class="pf-v6-c-page__sidebar-main"
+      />
+    </div>
     <div
       class="pf-v6-c-page__main-container"
     >
@@ -631,7 +651,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       aria-hidden="false"
       class="pf-v6-c-page__sidebar"
       id="page-sidebar"
-    />
+    >
+      <div
+        class="pf-v6-c-page__sidebar-main"
+      />
+    </div>
     <div
       class="pf-v6-c-page__main-container"
     >
@@ -915,7 +939,11 @@ exports[`Page Check page to verify skip to content points to main content region
       aria-hidden="false"
       class="pf-v6-c-page__sidebar"
       id="page-sidebar"
-    />
+    >
+      <div
+        class="pf-v6-c-page__sidebar-main"
+      />
+    </div>
     <div
       class="pf-v6-c-page__main-container"
     >
@@ -1067,9 +1095,13 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
       id="page-sidebar"
     >
       <div
-        class="pf-v6-c-page__sidebar-body"
+        class="pf-v6-c-page__sidebar-main"
       >
-        Navigation
+        <div
+          class="pf-v6-c-page__sidebar-body"
+        >
+          Navigation
+        </div>
       </div>
     </div>
     <div
@@ -1108,7 +1140,11 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
       aria-hidden="false"
       class="pf-v6-c-page__sidebar"
       id="page-sidebar"
-    />
+    >
+      <div
+        class="pf-v6-c-page__sidebar-main"
+      />
+    </div>
     <div
       class="pf-v6-c-page__main-container"
     >
@@ -1253,7 +1289,11 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
       aria-hidden="false"
       class="pf-v6-c-page__sidebar"
       id="page-sidebar"
-    />
+    >
+      <div
+        class="pf-v6-c-page__sidebar-main"
+      />
+    </div>
     <div
       class="pf-v6-c-page__main-container"
     >
@@ -1402,7 +1442,11 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
       aria-hidden="false"
       class="pf-v6-c-page__sidebar"
       id="page-sidebar"
-    />
+    >
+      <div
+        class="pf-v6-c-page__sidebar-main"
+      />
+    </div>
     <div
       class="pf-v6-c-page__main-container"
     >
@@ -1547,7 +1591,11 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
       aria-hidden="false"
       class="pf-v6-c-page__sidebar"
       id="page-sidebar"
-    />
+    >
+      <div
+        class="pf-v6-c-page__sidebar-main"
+      />
+    </div>
     <div
       class="pf-v6-c-page__main-container"
     >

package/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`page group Verify basic render 1`] = `
+exports[`Verify basic render 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group"
@@ -10,7 +10,7 @@ exports[`page group Verify basic render 1`] = `
 </DocumentFragment>
 `;
 
-exports[`page group Verify bottom shadow 1`] = `
+exports[`Verify bottom shadow 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group pf-m-shadow-bottom"
@@ -20,7 +20,7 @@ exports[`page group Verify bottom shadow 1`] = `
 </DocumentFragment>
 `;
 
-exports[`page group Verify bottom sticky 1`] = `
+exports[`Verify bottom sticky 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group pf-m-sticky-bottom"
@@ -30,7 +30,7 @@ exports[`page group Verify bottom sticky 1`] = `
 </DocumentFragment>
 `;
 
-exports[`page group Verify overflow scroll 1`] = `
+exports[`Verify overflow scroll 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group pf-m-overflow-scroll"
@@ -42,7 +42,7 @@ exports[`page group Verify overflow scroll 1`] = `
 </DocumentFragment>
 `;
 
-exports[`page group Verify top shadow 1`] = `
+exports[`Verify top shadow 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group pf-m-shadow-top"
@@ -52,7 +52,7 @@ exports[`page group Verify top shadow 1`] = `
 </DocumentFragment>
 `;
 
-exports[`page group Verify top sticky 1`] = `
+exports[`Verify top sticky 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-page__main-group pf-m-sticky-top"

package/src/components/Page/examples/Page.md

@@ -20,7 +20,7 @@ A page will typically contain the following components:
 
 The `<MastheadMain>` component includes the smaller area that typically contains the `<MastheadToggle>` and a `<MastheadLogo>`. `<MastheadContent>` represents the main portion of the masthead, and will typically contain a `<Toolbar>` or other menu-like components, like a `<Dropdown>`.
 
-  - Mastheads contain a `<MastheadMain>` component, which includes the `<MastheadToggle>`, a `<MastheadLogo>`,  and the page's toolbar (via `<MastheadContent>`.) The `<MastheadToggle>` component contains a `<PageToggleButton>`, and the `<MastheadLogo>` component contains a `<MastheadBrand>`. 
+- Mastheads contain a `<MastheadMain>` component, which includes the `<MastheadToggle>`, a `<MastheadLogo>`, and the page's toolbar (via `<MastheadContent>`.) The `<MastheadToggle>` component contains a `<PageToggleButton>`, and the `<MastheadLogo>` component contains a `<MastheadBrand>`.
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
@@ -123,3 +123,11 @@ The content in this example is placed in a card to better illustrate how the sec
 ```ts file="./PageCenteredSection.tsx"
 
 ```
+
+### Plain sections and groups
+
+To remove the default background color from a page section or group, use the `isPlain` property on `<PageSection>` or `<PageGroup>` components.
+
+```ts file="./PagePlainSections.tsx"
+
+```