chore(Page) remove deprecated props (#8220)

* chore(Page) remove deprecated props * update tests * update docs and integration tests * fix snapshots, remove isManagedSidebar prop
patternfly · Oct 13, 2022 · d390c87 · d390c87
1 parent 68ae9a6
commit d390c87
Show file tree

Hide file tree

Showing 11 changed files with 12 additions and 40 deletions.
diff --git 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> {
@@ -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,
@@ -57,10 +54,8 @@ 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,
-        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
@@ -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/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/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
@@ -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,

diff --git 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
@@ -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
@@ -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
@@ -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-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
@@ -168,7 +168,7 @@ export const ComposableTableStickyColumnsAndHeader: React.FunctionComponent = ()
         </PageSection>
       }
       groupProps={{
-        sticky: 'top'
+        stickyOnBreakpoint: { default: 'top' }
       }}
     >
       <PageSection hasOverflowScroll>