diff --git a/packages/react-core/src/components/Page/PageBreadcrumb.tsx b/packages/react-core/src/components/Page/PageBreadcrumb.tsx index 527de45cb90..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 { @@ -11,8 +11,6 @@ export interface PageBreadcrumbProps extends React.HTMLProps { 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 = ({
{ 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 { 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 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 { 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
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 = ({ 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 = ({ ...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 ( {({ 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 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 { 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 { 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 = ({ isFilled, isWidthLimited = false, isCenterAligned = false, - sticky, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, @@ -126,8 +123,6 @@ export const PageSection: React.FunctionComponent = ({ 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 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(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); test('Verify bottom sticky', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); 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(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); test('Verify bottom sticky', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); 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(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); test('Verify bottom sticky', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); 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(test); + const { asFragment } = render(test); expect(asFragment()).toMatchSnapshot(); }); test('Verify page section bottom sticky', () => { - const { asFragment } = render(test); + const { asFragment } = render(test); 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 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 ( - + {headings.map(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 = () } groupProps={{ - sticky: 'top' + stickyOnBreakpoint: { default: 'top' } }} >