From dc58fa8fa88b88de829f493b53a2fb2061209a1d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Fri, 7 Oct 2022 12:52:29 +0200
Subject: [PATCH 1/4] chore(Page) remove deprecated props

---
 packages/react-core/src/components/Page/PageBreadcrumb.tsx | 5 -----
 packages/react-core/src/components/Page/PageGroup.tsx      | 5 -----
 packages/react-core/src/components/Page/PageNavigation.tsx | 5 -----
 packages/react-core/src/components/Page/PageSection.tsx    | 5 -----
 4 files changed, 20 deletions(-)

diff --git a/packages/react-core/src/components/Page/PageBreadcrumb.tsx b/packages/react-core/src/components/Page/PageBreadcrumb.tsx
index 527de45cb90..5f768f67201 100644
--- a/packages/react-core/src/components/Page/PageBreadcrumb.tsx
+++ b/packages/react-core/src/components/Page/PageBreadcrumb.tsx
@@ -11,8 +11,6 @@ export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
   children?: React.ReactNode;
   /** Limits the width of the breadcrumb */
   isWidthLimited?: boolean;
-  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
-  sticky?: 'top' | 'bottom';
   /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
   stickyOnBreakpoint?: {
     default?: 'top' | 'bottom';
@@ -36,7 +34,6 @@ export const PageBreadcrumb = ({
   className = '',
   children,
   isWidthLimited,
-  sticky,
   stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
@@ -59,8 +56,6 @@ export const PageBreadcrumb = ({
         styles.pageMainBreadcrumb,
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
         isWidthLimited && styles.modifiers.limitWidth,
-        sticky === 'top' && styles.modifiers.stickyTop,
-        sticky === 'bottom' && styles.modifiers.stickyBottom,
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,
diff --git a/packages/react-core/src/components/Page/PageGroup.tsx b/packages/react-core/src/components/Page/PageGroup.tsx
index fa14eb9842b..1b88bf5083d 100644
--- a/packages/react-core/src/components/Page/PageGroup.tsx
+++ b/packages/react-core/src/components/Page/PageGroup.tsx
@@ -8,8 +8,6 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Content rendered inside of the PageGroup */
   children?: React.ReactNode;
-  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
-  sticky?: 'top' | 'bottom';
   /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
   stickyOnBreakpoint?: {
     default?: 'top' | 'bottom';
@@ -32,7 +30,6 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
 export const PageGroup = ({
   className = '',
   children,
-  sticky,
   stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
@@ -55,8 +52,6 @@ export const PageGroup = ({
       className={css(
         styles.pageMainGroup,
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
-        sticky === 'top' && styles.modifiers.stickyTop,
-        sticky === 'bottom' && styles.modifiers.stickyBottom,
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,
diff --git a/packages/react-core/src/components/Page/PageNavigation.tsx b/packages/react-core/src/components/Page/PageNavigation.tsx
index 1a6ad1117bc..9024c1fe4d0 100644
--- a/packages/react-core/src/components/Page/PageNavigation.tsx
+++ b/packages/react-core/src/components/Page/PageNavigation.tsx
@@ -11,8 +11,6 @@ export interface PageNavigationProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Limits the width of the PageNavigation */
   isWidthLimited?: boolean;
-  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
-  sticky?: 'top' | 'bottom';
   /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
   stickyOnBreakpoint?: {
     default?: 'top' | 'bottom';
@@ -36,7 +34,6 @@ export const PageNavigation = ({
   className = '',
   children,
   isWidthLimited,
-  sticky,
   stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
@@ -59,8 +56,6 @@ export const PageNavigation = ({
         styles.pageMainNav,
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
         isWidthLimited && styles.modifiers.limitWidth,
-        sticky === 'top' && styles.modifiers.stickyTop,
-        sticky === 'bottom' && styles.modifiers.stickyBottom,
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,
diff --git a/packages/react-core/src/components/Page/PageSection.tsx b/packages/react-core/src/components/Page/PageSection.tsx
index 88343b2a26f..0793f85d83e 100644
--- a/packages/react-core/src/components/Page/PageSection.tsx
+++ b/packages/react-core/src/components/Page/PageSection.tsx
@@ -44,8 +44,6 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'padding' | 'noPadding';
     '2xl'?: 'padding' | 'noPadding';
   };
-  /**  @deprecated Use the stickyOnBreakpoint prop instead - Modifier indicating if the PageBreadcrumb is sticky to the top or bottom */
-  sticky?: 'top' | 'bottom';
   /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */
   stickyOnBreakpoint?: {
     default?: 'top' | 'bottom';
@@ -94,7 +92,6 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
   isFilled,
   isWidthLimited = false,
   isCenterAligned = false,
-  sticky,
   stickyOnBreakpoint,
   hasShadowTop = false,
   hasShadowBottom = false,
@@ -126,8 +123,6 @@ export const PageSection: React.FunctionComponent<PageSectionProps> = ({
         isFilled === true && styles.modifiers.fill,
         isWidthLimited && styles.modifiers.limitWidth,
         isWidthLimited && isCenterAligned && type !== PageSectionTypes.subNav && styles.modifiers.alignCenter,
-        sticky === 'top' && styles.modifiers.stickyTop,
-        sticky === 'bottom' && styles.modifiers.stickyBottom,
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,

From 94761e0b310cdfbc1d866fe3cf92d4eba8921d48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Fri, 7 Oct 2022 13:52:30 +0200
Subject: [PATCH 2/4] update tests

---
 .../__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap    | 6 ++++--
 .../Page/__tests__/__snapshots__/PageGroup.test.tsx.snap    | 6 ++++--
 .../__tests__/__snapshots__/PageNavigation.test.tsx.snap    | 6 ++++--
 .../Page/__tests__/__snapshots__/PageSection.test.tsx.snap  | 6 ++++--
 4 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap
index ea682f969bc..80202076f25 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap
@@ -23,7 +23,8 @@ exports[`page breadcrumb Verify bottom shadow 1`] = `
 exports[`page breadcrumb Verify bottom sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb pf-m-sticky-bottom"
+    class="pf-c-page__main-breadcrumb"
+    sticky="bottom"
   >
     test
   </section>
@@ -68,7 +69,8 @@ exports[`page breadcrumb Verify top shadow 1`] = `
 exports[`page breadcrumb Verify top sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb pf-m-sticky-top"
+    class="pf-c-page__main-breadcrumb"
+    sticky="top"
   >
     test
   </section>
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap
index 92a2ecc6653..315b92d9740 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap
@@ -23,7 +23,8 @@ exports[`page group Verify bottom shadow 1`] = `
 exports[`page group Verify bottom sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-group pf-m-sticky-bottom"
+    class="pf-c-page__main-group"
+    sticky="bottom"
   >
     test
   </div>
@@ -54,7 +55,8 @@ exports[`page group Verify top shadow 1`] = `
 exports[`page group Verify top sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-group pf-m-sticky-top"
+    class="pf-c-page__main-group"
+    sticky="top"
   >
     test
   </div>
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap
index b93ca524104..a5f7c24d6c1 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap
@@ -23,7 +23,8 @@ exports[`page navigation Verify bottom shadow 1`] = `
 exports[`page navigation Verify bottom sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav pf-m-sticky-bottom"
+    class="pf-c-page__main-nav"
+    sticky="bottom"
   >
     test
   </div>
@@ -68,7 +69,8 @@ exports[`page navigation Verify top shadow 1`] = `
 exports[`page navigation Verify top sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav pf-m-sticky-top"
+    class="pf-c-page__main-nav"
+    sticky="top"
   >
     test
   </div>
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap
index 53f45801a62..6c1e6158dfe 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap
@@ -101,7 +101,8 @@ exports[`Verify page section bottom shadow 1`] = `
 exports[`Verify page section bottom sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-sticky-bottom"
+    class="pf-c-page__main-section"
+    sticky="bottom"
   >
     test
   </section>
@@ -132,7 +133,8 @@ exports[`Verify page section top shadow 1`] = `
 exports[`Verify page section top sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-sticky-top"
+    class="pf-c-page__main-section"
+    sticky="top"
   >
     test
   </section>

From 57c022cf58fa773351ad18700fb08dc3e1946f02 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Fri, 7 Oct 2022 14:40:00 +0200
Subject: [PATCH 3/4] update docs and integration tests

---
 .../src/components/demos/JumpLinksDemo/JumpLinksDemo.tsx        | 2 +-
 .../src/docs/examples/ComposableTableStickyToolbar.tsx          | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/JumpLinksDemo/JumpLinksDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/JumpLinksDemo/JumpLinksDemo.tsx
index c5739e0a211..269261b1b49 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/JumpLinksDemo/JumpLinksDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/JumpLinksDemo/JumpLinksDemo.tsx
@@ -6,7 +6,7 @@ export const JumpLinksDemo = () => {
 
   return (
     <React.Fragment>
-      <PageSection sticky="top">
+      <PageSection stickyOnBreakpoint={{ default: 'top' }}>
         <JumpLinks isCentered label="Jump to section" scrollableSelector="#scrollable-element">
           {headings.map(i => (
             <JumpLinksItem key={i} id={`#heading-${i}`} href={`#heading-${i}`}>
diff --git a/packages/react-table/src/docs/examples/ComposableTableStickyToolbar.tsx b/packages/react-table/src/docs/examples/ComposableTableStickyToolbar.tsx
index 51d6f44d719..217dec6887f 100644
--- a/packages/react-table/src/docs/examples/ComposableTableStickyToolbar.tsx
+++ b/packages/react-table/src/docs/examples/ComposableTableStickyToolbar.tsx
@@ -168,7 +168,7 @@ export const ComposableTableStickyColumnsAndHeader: React.FunctionComponent = ()
         </PageSection>
       }
       groupProps={{
-        sticky: 'top'
+        stickyOnBreakpoint: { default: 'top' }
       }}
     >
       <PageSection hasOverflowScroll>

From a3fdc273d3667f386efc00fdc982f248209de050 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dominik=20Pet=C5=99=C3=ADk?= <dominik.petrik@tiscali.cz>
Date: Thu, 13 Oct 2022 12:45:59 +0200
Subject: [PATCH 4/4] fix snapshots, remove isManagedSidebar prop

---
 .../react-core/src/components/Page/PageBreadcrumb.tsx     | 4 ++--
 packages/react-core/src/components/Page/PageHeader.tsx    | 8 --------
 .../src/components/Page/__tests__/PageBreadcrumb.test.tsx | 4 ++--
 .../src/components/Page/__tests__/PageGroup.test.tsx      | 4 ++--
 .../src/components/Page/__tests__/PageNavigation.test.tsx | 4 ++--
 .../src/components/Page/__tests__/PageSection.test.tsx    | 4 ++--
 .../__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap  | 6 ++----
 .../Page/__tests__/__snapshots__/PageGroup.test.tsx.snap  | 6 ++----
 .../__tests__/__snapshots__/PageNavigation.test.tsx.snap  | 6 ++----
 .../__tests__/__snapshots__/PageSection.test.tsx.snap     | 6 ++----
 10 files changed, 18 insertions(+), 34 deletions(-)

diff --git a/packages/react-core/src/components/Page/PageBreadcrumb.tsx b/packages/react-core/src/components/Page/PageBreadcrumb.tsx
index 5f768f67201..c8c8ad7e6cd 100644
--- a/packages/react-core/src/components/Page/PageBreadcrumb.tsx
+++ b/packages/react-core/src/components/Page/PageBreadcrumb.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Page/page';
-import { formatBreakpointMods } from '../../helpers/util';
+import { formatBreakpointMods, Mods } from '../../helpers/util';
 import { PageContext } from './PageContext';
 
 export interface PageBreadcrumbProps extends React.HTMLProps<HTMLElement> {
@@ -54,7 +54,7 @@ export const PageBreadcrumb = ({
     <section
       className={css(
         styles.pageMainBreadcrumb,
-        formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        formatBreakpointMods(stickyOnBreakpoint as Mods, styles, 'sticky-', getVerticalBreakpoint(height), true),
         isWidthLimited && styles.modifiers.limitWidth,
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
diff --git a/packages/react-core/src/components/Page/PageHeader.tsx b/packages/react-core/src/components/Page/PageHeader.tsx
index 0c5af921442..0cb2db3de90 100644
--- a/packages/react-core/src/components/Page/PageHeader.tsx
+++ b/packages/react-core/src/components/Page/PageHeader.tsx
@@ -25,8 +25,6 @@ export interface PageHeaderProps extends React.HTMLProps<HTMLDivElement> {
   navToggleId?: string;
   /** True if the side nav is shown  */
   isNavOpen?: boolean;
-  /** This prop is no longer managed through PageHeader but in the Page component. */
-  isManagedSidebar?: boolean;
   /** Sets the value for role on the <main> element */
   role?: string;
   /** Callback function to handle the side nav toggle button, managed by the Page component if the Page isManagedSidebar prop is set to true */
@@ -43,7 +41,6 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   headerTools = null as React.ReactNode,
   topNav = null as React.ReactNode,
   isNavOpen = true,
-  isManagedSidebar: deprecatedIsManagedSidebar = undefined,
   role = undefined as string,
   showNavToggle = false,
   navToggleId = 'nav-toggle',
@@ -53,11 +50,6 @@ export const PageHeader: React.FunctionComponent<PageHeaderProps> = ({
   ...props
 }: PageHeaderProps) => {
   const LogoComponent = logoComponent as any;
-  if ([false, true].includes(deprecatedIsManagedSidebar)) {
-    console.warn(
-      'isManagedSidebar is deprecated in the PageHeader component. To make the sidebar toggle uncontrolled, pass this prop in the Page component'
-    );
-  }
   return (
     <PageContextConsumer>
       {({ isManagedSidebar, onNavToggle: managedOnNavToggle, isNavOpen: managedIsNavOpen }: PageContextProps) => {
diff --git a/packages/react-core/src/components/Page/__tests__/PageBreadcrumb.test.tsx b/packages/react-core/src/components/Page/__tests__/PageBreadcrumb.test.tsx
index 913838f7473..63742eb0de6 100644
--- a/packages/react-core/src/components/Page/__tests__/PageBreadcrumb.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/PageBreadcrumb.test.tsx
@@ -12,11 +12,11 @@ describe('page breadcrumb', () => {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top sticky', () => {
-    const { asFragment } = render(<PageBreadcrumb sticky="top">test</PageBreadcrumb>);
+    const { asFragment } = render(<PageBreadcrumb stickyOnBreakpoint={{ default: 'top' }}>test</PageBreadcrumb>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify bottom sticky', () => {
-    const { asFragment } = render(<PageBreadcrumb sticky="bottom">test</PageBreadcrumb>);
+    const { asFragment } = render(<PageBreadcrumb stickyOnBreakpoint={{ default: 'bottom' }}>test</PageBreadcrumb>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top shadow', () => {
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 f4bb73fd370..8ac64dd01c2 100644
--- a/packages/react-core/src/components/Page/__tests__/PageGroup.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/PageGroup.test.tsx
@@ -8,11 +8,11 @@ describe('page group', () => {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top sticky', () => {
-    const { asFragment } = render(<PageGroup sticky="top">test</PageGroup>);
+    const { asFragment } = render(<PageGroup stickyOnBreakpoint={{ default: 'top' }}>test</PageGroup>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify bottom sticky', () => {
-    const { asFragment } = render(<PageGroup sticky="bottom">test</PageGroup>);
+    const { asFragment } = render(<PageGroup stickyOnBreakpoint={{ default: 'bottom' }}>test</PageGroup>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top shadow', () => {
diff --git a/packages/react-core/src/components/Page/__tests__/PageNavigation.test.tsx b/packages/react-core/src/components/Page/__tests__/PageNavigation.test.tsx
index 80e3c6556d3..8577c1cc4d5 100644
--- a/packages/react-core/src/components/Page/__tests__/PageNavigation.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/PageNavigation.test.tsx
@@ -12,11 +12,11 @@ describe('page navigation', () => {
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top sticky', () => {
-    const { asFragment } = render(<PageNavigation sticky="top">test</PageNavigation>);
+    const { asFragment } = render(<PageNavigation stickyOnBreakpoint={{ default: 'top' }}>test</PageNavigation>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify bottom sticky', () => {
-    const { asFragment } = render(<PageNavigation sticky="bottom">test</PageNavigation>);
+    const { asFragment } = render(<PageNavigation stickyOnBreakpoint={{ default: 'bottom' }}>test</PageNavigation>);
     expect(asFragment()).toMatchSnapshot();
   });
   test('Verify top shadow', () => {
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 3bdf925f9b1..ceed384957f 100644
--- a/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx
+++ b/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx
@@ -65,12 +65,12 @@ test('Check page section with fill and no padding example against snapshot', ()
 });
 
 test('Verify page section top sticky', () => {
-  const { asFragment } = render(<PageSection sticky="top">test</PageSection>);
+  const { asFragment } = render(<PageSection stickyOnBreakpoint={{ default: 'top' }}>test</PageSection>);
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('Verify page section bottom sticky', () => {
-  const { asFragment } = render(<PageSection sticky="bottom">test</PageSection>);
+  const { asFragment } = render(<PageSection stickyOnBreakpoint={{ default: 'bottom' }}>test</PageSection>);
   expect(asFragment()).toMatchSnapshot();
 });
 
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap
index 80202076f25..ea682f969bc 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap
@@ -23,8 +23,7 @@ exports[`page breadcrumb Verify bottom shadow 1`] = `
 exports[`page breadcrumb Verify bottom sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb"
-    sticky="bottom"
+    class="pf-c-page__main-breadcrumb pf-m-sticky-bottom"
   >
     test
   </section>
@@ -69,8 +68,7 @@ exports[`page breadcrumb Verify top shadow 1`] = `
 exports[`page breadcrumb Verify top sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb"
-    sticky="top"
+    class="pf-c-page__main-breadcrumb pf-m-sticky-top"
   >
     test
   </section>
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap
index 315b92d9740..92a2ecc6653 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap
@@ -23,8 +23,7 @@ exports[`page group Verify bottom shadow 1`] = `
 exports[`page group Verify bottom sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-group"
-    sticky="bottom"
+    class="pf-c-page__main-group pf-m-sticky-bottom"
   >
     test
   </div>
@@ -55,8 +54,7 @@ exports[`page group Verify top shadow 1`] = `
 exports[`page group Verify top sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-group"
-    sticky="top"
+    class="pf-c-page__main-group pf-m-sticky-top"
   >
     test
   </div>
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap
index a5f7c24d6c1..b93ca524104 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap
@@ -23,8 +23,7 @@ exports[`page navigation Verify bottom shadow 1`] = `
 exports[`page navigation Verify bottom sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav"
-    sticky="bottom"
+    class="pf-c-page__main-nav pf-m-sticky-bottom"
   >
     test
   </div>
@@ -69,8 +68,7 @@ exports[`page navigation Verify top shadow 1`] = `
 exports[`page navigation Verify top sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav"
-    sticky="top"
+    class="pf-c-page__main-nav pf-m-sticky-top"
   >
     test
   </div>
diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap
index 6c1e6158dfe..53f45801a62 100644
--- a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap
+++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap
@@ -101,8 +101,7 @@ exports[`Verify page section bottom shadow 1`] = `
 exports[`Verify page section bottom sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section"
-    sticky="bottom"
+    class="pf-c-page__main-section pf-m-sticky-bottom"
   >
     test
   </section>
@@ -133,8 +132,7 @@ exports[`Verify page section top shadow 1`] = `
 exports[`Verify page section top sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section"
-    sticky="top"
+    class="pf-c-page__main-section pf-m-sticky-top"
   >
     test
   </section>