From 8d5fc53dacca971c4f99a3845c142f536e248092 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 25 Mar 2026 16:40:11 -0400 Subject: [PATCH 1/3] feat(Page): added styles for glass --- .../react-core/src/components/Page/Page.tsx | 8 +- .../src/components/Page/PageGroup.tsx | 8 + .../src/components/Page/PageSection.tsx | 8 + .../src/components/Page/PageSidebar.tsx | 4 +- .../__snapshots__/PageSidebar.test.tsx.snap | 8 +- .../components/Page/__tests__/Page.test.tsx | 14 ++ .../Page/__tests__/PageGroup.test.tsx | 186 +++++++++--------- .../Page/__tests__/PageSection.test.tsx | 12 ++ .../Page/__tests__/PageSidebar.test.tsx | 9 + .../__snapshots__/Page.test.tsx.snap | 76 +++++-- 10 files changed, 227 insertions(+), 106 deletions(-) create mode 100644 packages/react-core/src/components/Page/__tests__/PageSidebar.test.tsx diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx index d2d4cab4e67..c0b02c4caec 100644 --- a/packages/react-core/src/components/Page/Page.tsx +++ b/packages/react-core/src/components/Page/Page.tsx @@ -348,7 +348,13 @@ class Page extends Component { )} > {skipToContent} - {variant === 'docked' ?
{masthead}
: masthead} + {variant === 'docked' ? ( +
+
{masthead}
+
+ ) : ( + masthead + )} {sidebar} {notificationDrawer && (
diff --git a/packages/react-core/src/components/Page/PageGroup.tsx b/packages/react-core/src/components/Page/PageGroup.tsx index 105a9979ec6..71cebd170ed 100644 --- a/packages/react-core/src/components/Page/PageGroup.tsx +++ b/packages/react-core/src/components/Page/PageGroup.tsx @@ -27,6 +27,10 @@ export interface PageGroupProps extends React.HTMLProps { 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 })} diff --git a/packages/react-core/src/components/Page/PageSection.tsx b/packages/react-core/src/components/Page/PageSection.tsx index f1f829ac2da..08956ae0aa2 100644 --- a/packages/react-core/src/components/Page/PageSection.tsx +++ b/packages/react-core/src/components/Page/PageSection.tsx @@ -67,6 +67,10 @@ export interface PageSectionProps extends React.HTMLProps { '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 = ({ '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 = ({ hasShadowTop && styles.modifiers.shadowTop, hasShadowBottom && styles.modifiers.shadowBottom, hasOverflowScroll && styles.modifiers.overflowScroll, + isPlain && styles.modifiers.plain, + isNoPlainOnGlass && styles.modifiers.noPlainOnGlass, className )} {...(hasOverflowScroll && { tabIndex: 0 })} diff --git a/packages/react-core/src/components/Page/PageSidebar.tsx b/packages/react-core/src/components/Page/PageSidebar.tsx index 17efcebeccc..9568d467edc 100644 --- a/packages/react-core/src/components/Page/PageSidebar.tsx +++ b/packages/react-core/src/components/Page/PageSidebar.tsx @@ -50,7 +50,9 @@ export const PageSidebar: React.FunctionComponent = ({ aria-hidden={!sidebarOpen} {...props} > - {children} + +
{children}
+
); }} diff --git a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap index 838c24de82a..6466a982884 100644 --- a/packages/react-core/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap +++ b/packages/react-core/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" > -
- ReactNode +
+
+ ReactNode +
diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx index 78ca03fb714..35bec5ff94c 100644 --- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx +++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx @@ -406,4 +406,18 @@ describe('Page', () => { render(); expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.dock); }); + + test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => { + render(Masthead} data-testid="page">); + + const pageDockMain = screen.getByText('Masthead').closest(`.${styles.pageDockMain}`); + expect(pageDockMain).not.toBeInTheDocument(); + }); + + test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => { + render(Masthead} data-testid="page">); + + const pageDockMain = screen.getByText('Masthead').closest(`.${styles.pageDockMain}`); + expect(pageDockMain).toBeInTheDocument(); + }); }); diff --git a/packages/react-core/src/components/Page/__tests__/PageGroup.test.tsx b/packages/react-core/src/components/Page/__tests__/PageGroup.test.tsx index 6ff0d053100..4737bd87523 100644 --- a/packages/react-core/src/components/Page/__tests__/PageGroup.test.tsx +++ b/packages/react-core/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(test); - expect(asFragment()).toMatchSnapshot(); - }); - test('Verify top sticky', () => { - const { asFragment } = render(test); - expect(asFragment()).toMatchSnapshot(); - }); - test('Verify bottom sticky', () => { - const { asFragment } = render(test); - expect(asFragment()).toMatchSnapshot(); - }); - test('Verify top shadow', () => { - const { asFragment } = render(test); - expect(asFragment()).toMatchSnapshot(); - }); - test('Verify bottom shadow', () => { - const { asFragment } = render(test); - expect(asFragment()).toMatchSnapshot(); - }); - test('Verify overflow scroll', () => { - const { asFragment } = render(test); - expect(asFragment()).toMatchSnapshot(); - }); - - test('Renders without an aria-label by default', () => { - render(test); - - expect(screen.getByText('test')).not.toHaveAccessibleName('Test label'); - }); - - test('Renders with the passed aria-label applied', () => { - render( - - test - - ); - - 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(test); - - 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( - - test - - ); - - 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(test); - - expect(consoleWarning).toHaveBeenCalled(); - }); - - test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isFilled is not passed`, () => { - render(test); - - 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(test); - - expect(screen.getByText('test')).toHaveClass(styles.modifiers.fill); - }); - - test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, () => { - render(test); - - expect(screen.getByText('test')).toHaveClass(styles.modifiers.noFill); - }); +test('Verify basic render', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); +test('Verify top sticky', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); +test('Verify bottom sticky', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); +test('Verify top shadow', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); +test('Verify bottom shadow', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); +test('Verify overflow scroll', () => { + const { asFragment } = render(test); + expect(asFragment()).toMatchSnapshot(); +}); + +test('Renders without an aria-label by default', () => { + render(test); + + expect(screen.getByText('test')).not.toHaveAccessibleName('Test label'); +}); + +test('Renders with the passed aria-label applied', () => { + render( + + test + + ); + + 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(test); + + 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( + + test + + ); + + 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(test); + + expect(consoleWarning).toHaveBeenCalled(); +}); + +test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isFilled is not passed`, () => { + render(test); + + 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(test); + + expect(screen.getByText('test')).toHaveClass(styles.modifiers.fill); +}); + +test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, () => { + render(test); + + expect(screen.getByText('test')).toHaveClass(styles.modifiers.noFill); +}); + +test(`Renders with ${styles.modifiers.plain} class when isPlain is true`, () => { + render(test); + + expect(screen.getByText('test')).toHaveClass(styles.modifiers.plain); +}); + +test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isPlain is true`, () => { + render(test); + + expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPlainOnGlass); }); diff --git a/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx b/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx index d0662dead9c..5113fd99820 100644 --- a/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx +++ b/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx @@ -179,3 +179,15 @@ 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(test); + + expect(screen.getByText('test')).toHaveClass(styles.modifiers.plain); +}); + +test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isPlain is true`, () => { + render(test); + + expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPlainOnGlass); +}); diff --git a/packages/react-core/src/components/Page/__tests__/PageSidebar.test.tsx b/packages/react-core/src/components/Page/__tests__/PageSidebar.test.tsx new file mode 100644 index 00000000000..75fb742bd38 --- /dev/null +++ b/packages/react-core/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(Test); + + expect(screen.getByText('Test')).toHaveClass(styles.pageSidebarMain); +}); diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap index d8db2b9dd77..1231eabac50 100644 --- a/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap +++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap @@ -16,9 +16,13 @@ exports[`Page Check dark page against snapshot 1`] = ` id="page-sidebar" >
- Navigation +
+ Navigation +
+ > +
+
@@ -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" - /> + > +
+
@@ -275,7 +287,11 @@ exports[`Page Check page to verify breadcrumb is created 1`] = ` aria-hidden="false" class="pf-v6-c-page__sidebar" id="page-sidebar" - /> + > +
+
@@ -460,7 +476,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" - /> + > +
+
@@ -739,7 +759,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" - /> + > +
+
@@ -1059,7 +1083,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" - /> + > +
+
@@ -1247,9 +1275,13 @@ exports[`Page Check page vertical layout example against snapshot 1`] = ` id="page-sidebar" >
- Navigation +
+ Navigation +
+ > +
+
@@ -1469,7 +1505,11 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = ` aria-hidden="false" class="pf-v6-c-page__sidebar" id="page-sidebar" - /> + > +
+
@@ -1654,7 +1694,11 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread aria-hidden="false" class="pf-v6-c-page__sidebar" id="page-sidebar" - /> + > +
+
@@ -1835,7 +1879,11 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = ` aria-hidden="false" class="pf-v6-c-page__sidebar" id="page-sidebar" - /> + > +
+
From e2c2040e222b8390662a936432e5e2b15957d3aa Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 26 Mar 2026 10:53:12 -0400 Subject: [PATCH 2/3] Added console warning --- .../src/components/Page/PageGroup.tsx | 9 +++++- .../src/components/Page/PageSection.tsx | 9 +++++- .../Page/__tests__/PageGroup.test.tsx | 30 +++++++++++++++++++ .../Page/__tests__/PageSection.test.tsx | 30 +++++++++++++++++++ 4 files changed, 76 insertions(+), 2 deletions(-) diff --git a/packages/react-core/src/components/Page/PageGroup.tsx b/packages/react-core/src/components/Page/PageGroup.tsx index 71cebd170ed..d906599003e 100644 --- a/packages/react-core/src/components/Page/PageGroup.tsx +++ b/packages/react-core/src/components/Page/PageGroup.tsx @@ -29,7 +29,7 @@ export interface PageGroupProps extends React.HTMLProps { '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. */ + /** @beta Prevents the page group from automatically applying plain styling when glass theme is enabled. When both this and isPlain are true, isPlain takes precedence. */ isNoPlainOnGlass?: boolean; } @@ -46,6 +46,13 @@ export const PageGroup = ({ isNoPlainOnGlass = false, ...props }: PageGroupProps) => { + if (isPlain && isNoPlainOnGlass) { + // eslint-disable-next-line no-console + console.warn( + `PageGroup: When both isPlain and isNoPlainOnGlass are true, isPlain will take precedence and isNoPlainOnGlass will have no effect. It's recommended to pass only one prop according to the current theme.` + ); + } + const { height, getVerticalBreakpoint } = useContext(PageContext); useEffect(() => { diff --git a/packages/react-core/src/components/Page/PageSection.tsx b/packages/react-core/src/components/Page/PageSection.tsx index 08956ae0aa2..2f18b7d6907 100644 --- a/packages/react-core/src/components/Page/PageSection.tsx +++ b/packages/react-core/src/components/Page/PageSection.tsx @@ -69,7 +69,7 @@ export interface PageSectionProps extends React.HTMLProps { 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. */ + /** @beta Prevents the page section from automatically applying plain styling when glass theme is enabled. When both this and isPlain are true, isPlain takes precedence. */ isNoPlainOnGlass?: boolean; } @@ -106,6 +106,13 @@ export const PageSection: React.FunctionComponent = ({ isNoPlainOnGlass = false, ...props }: PageSectionProps) => { + if (isPlain && isNoPlainOnGlass) { + // eslint-disable-next-line no-console + console.warn( + `PageSection: When both isPlain and isNoPlainOnGlass are true, isPlain will take precedence and isNoPlainOnGlass will have no effect. It's recommended to pass only one prop according to the current theme.` + ); + } + const { height, getVerticalBreakpoint } = useContext(PageContext); useEffect(() => { diff --git a/packages/react-core/src/components/Page/__tests__/PageGroup.test.tsx b/packages/react-core/src/components/Page/__tests__/PageGroup.test.tsx index 4737bd87523..904a595c95d 100644 --- a/packages/react-core/src/components/Page/__tests__/PageGroup.test.tsx +++ b/packages/react-core/src/components/Page/__tests__/PageGroup.test.tsx @@ -101,3 +101,33 @@ test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isPlain is true expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPlainOnGlass); }); + +test('Does not log a warning when only isPlain is passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render(test); + + expect(consoleWarning).not.toHaveBeenCalled(); +}); + +test('Does not log a warning when only isNoPlainOnGlass is passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render(test); + + expect(consoleWarning).not.toHaveBeenCalled(); +}); + +test('Logs a warning when both isPlain and isNoPlainOnGlass are passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render( + + test + + ); + + expect(consoleWarning).toHaveBeenCalledWith( + `PageGroup: When both isPlain and isNoPlainOnGlass are true, isPlain will take precedence and isNoPlainOnGlass will have no effect. It's recommended to pass only one prop according to the current theme.` + ); +}); diff --git a/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx b/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx index 5113fd99820..56855d84721 100644 --- a/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx +++ b/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx @@ -191,3 +191,33 @@ test(`Renders with ${styles.modifiers.noPlainOnGlass} class when isPlain is true expect(screen.getByText('test')).toHaveClass(styles.modifiers.noPlainOnGlass); }); + +test('Does not log a warning when only isPlain is passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render(test); + + expect(consoleWarning).not.toHaveBeenCalled(); +}); + +test('Does not log a warning when only isNoPlainOnGlass is passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render(test); + + expect(consoleWarning).not.toHaveBeenCalled(); +}); + +test('Logs a warning when both isPlain and isNoPlainOnGlass are passed', () => { + const consoleWarning = jest.spyOn(console, 'warn').mockImplementation(); + + render( + + test + + ); + + expect(consoleWarning).toHaveBeenCalledWith( + `PageSection: When both isPlain and isNoPlainOnGlass are true, isPlain will take precedence and isNoPlainOnGlass will have no effect. It's recommended to pass only one prop according to the current theme.` + ); +}); From 34582532609a74602236892fd3e53de84efea136 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 26 Mar 2026 11:17:30 -0400 Subject: [PATCH 3/3] Added plain example --- .../src/components/Page/examples/Page.md | 10 +- .../Page/examples/PagePlainSections.tsx | 93 +++++++++++++++++++ 2 files changed, 102 insertions(+), 1 deletion(-) create mode 100644 packages/react-core/src/components/Page/examples/PagePlainSections.tsx diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md index f08a895f0c7..67c8fae40a2 100644 --- a/packages/react-core/src/components/Page/examples/Page.md +++ b/packages/react-core/src/components/Page/examples/Page.md @@ -20,7 +20,7 @@ A page will typically contain the following components: 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 ``. +- 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 @@ -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 `` or `` components. + +```ts file="./PagePlainSections.tsx" + +``` diff --git a/packages/react-core/src/components/Page/examples/PagePlainSections.tsx b/packages/react-core/src/components/Page/examples/PagePlainSections.tsx new file mode 100644 index 00000000000..1fcf047ebf7 --- /dev/null +++ b/packages/react-core/src/components/Page/examples/PagePlainSections.tsx @@ -0,0 +1,93 @@ +import { useState } from 'react'; +import { + Page, + Masthead, + MastheadMain, + MastheadToggle, + MastheadBrand, + MastheadLogo, + MastheadContent, + PageSidebar, + PageSidebarBody, + PageSection, + PageGroup, + PageToggleButton, + Toolbar, + ToolbarContent, + ToolbarItem +} from '@patternfly/react-core'; + +export const PagePlainSections: React.FunctionComponent = () => { + const [isSidebarOpen, setIsSidebarOpen] = useState(true); + + const onSidebarToggle = () => { + setIsSidebarOpen(!isSidebarOpen); + }; + + const headerToolbar = ( + + + header-tools + + + ); + + const masthead = ( + + + + + + + + Logo + + + + {headerToolbar} + + ); + + const sidebar = ( + + Navigation + + ); + + return ( + + +

Plain PageSection

+

+ This section uses isPlain to apply plain styling with no background color. +

+ + +

Default PageSection

+

This section has the default styling with a background color.

+ + + +

PageSection inside Plain PageGroup

+

+ This section is inside a PageGroup with isPlain applied. +

+ + +

Another Section in Plain Group

+

Both sections are grouped with plain styling.

+ + + +

Secondary Variant Section

+

This section uses the secondary variant for contrast.

+ + + ); +};