diff --git a/packages/react-core/src/components/Page/Page.tsx b/packages/react-core/src/components/Page/Page.tsx index 5ecf9d6dfdc..735d50550ba 100644 --- a/packages/react-core/src/components/Page/Page.tsx +++ b/packages/react-core/src/components/Page/Page.tsx @@ -4,11 +4,12 @@ import { css } from '@patternfly/react-styles'; import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl'; import { debounce, canUseDOM } from '../../helpers/util'; import { Drawer, DrawerContent, DrawerContentBody, DrawerPanelContent } from '../Drawer'; -import { PageBreadcrumbProps } from './PageBreadcrumb'; +import { PageBreadcrumb, PageBreadcrumbProps } from './PageBreadcrumb'; import { PageGroup, PageGroupProps } from './PageGroup'; import { getResizeObserver } from '../../helpers/resizeObserver'; -import { formatBreakpointMods, getBreakpoint, getVerticalBreakpoint } from '../../helpers/util'; +import { getBreakpoint, getVerticalBreakpoint } from '../../helpers/util'; import { PageContextProvider } from './PageContext'; +import { PageBody } from './PageBody'; export enum PageLayouts { vertical = 'vertical', @@ -263,32 +264,21 @@ class Page extends React.Component { }; let nav = null; - if (horizontalSubnav && isHorizontalSubnavWidthLimited) { + if (horizontalSubnav) { nav = ( -
-
{horizontalSubnav}
+
+ {horizontalSubnav}
); - } else if (horizontalSubnav) { - nav =
{horizontalSubnav}
; } const crumb = breadcrumb ? ( -
- {isBreadcrumbWidthLimited ?
{breadcrumb}
: breadcrumb} -
+ {breadcrumb} + ) : null; const isGrouped = isHorizontalSubnavGrouped || isBreadcrumbGrouped || additionalGroupedContent; diff --git a/packages/react-core/src/components/Page/PageBody.tsx b/packages/react-core/src/components/Page/PageBody.tsx new file mode 100644 index 00000000000..808e7a8259e --- /dev/null +++ b/packages/react-core/src/components/Page/PageBody.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import styles from '@patternfly/react-styles/css/components/Page/page'; +import { css } from '@patternfly/react-styles'; + +export interface PageBodyProps extends React.HTMLProps { + /** Content rendered inside the section */ + children?: React.ReactNode; + /** Additional classes added to the section */ + className?: string; +} + +export const PageBody: React.FunctionComponent = ({ className, children, ...props }: PageBodyProps) => ( +
+ {children} +
+); + +PageBody.displayName = 'PageBody'; diff --git a/packages/react-core/src/components/Page/PageBreadcrumb.tsx b/packages/react-core/src/components/Page/PageBreadcrumb.tsx index c8c8ad7e6cd..e948503e8d3 100644 --- a/packages/react-core/src/components/Page/PageBreadcrumb.tsx +++ b/packages/react-core/src/components/Page/PageBreadcrumb.tsx @@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Page/page'; import { formatBreakpointMods, Mods } from '../../helpers/util'; import { PageContext } from './PageContext'; +import { PageBody } from './PageBody'; export interface PageBreadcrumbProps extends React.HTMLProps { /** Additional classes to apply to the PageBreadcrumb */ @@ -26,6 +27,10 @@ export interface PageBreadcrumbProps extends React.HTMLProps { hasShadowBottom?: boolean; /** Flag indicating if the PageBreadcrumb has a scrolling overflow */ hasOverflowScroll?: boolean; + /** @beta Flag indicating whether children passed to the component should be wrapped by a PageBody. + * Set this to false in order to pass multiple, custom PageBody's as children. + */ + hasBodyWrapper?: boolean; /** Adds an accessible name to the breadcrumb section. Required when the hasOverflowScroll prop is set to true. */ 'aria-label'?: string; } @@ -39,6 +44,7 @@ export const PageBreadcrumb = ({ hasShadowBottom = false, hasOverflowScroll = false, 'aria-label': ariaLabel, + hasBodyWrapper = true, ...props }: PageBreadcrumbProps) => { const { height, getVerticalBreakpoint } = React.useContext(PageContext); @@ -65,8 +71,7 @@ export const PageBreadcrumb = ({ aria-label={ariaLabel} {...props} > - {isWidthLimited &&
{children}
} - {!isWidthLimited && children} + {hasBodyWrapper ? {children} : children} ); }; diff --git a/packages/react-core/src/components/Page/PageNavigation.tsx b/packages/react-core/src/components/Page/PageNavigation.tsx deleted file mode 100644 index 33845792385..00000000000 --- a/packages/react-core/src/components/Page/PageNavigation.tsx +++ /dev/null @@ -1,72 +0,0 @@ -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 { PageContext } from './PageContext'; - -export interface PageNavigationProps extends React.HTMLProps { - /** Additional classes to apply to the PageNavigation */ - className?: string; - /** Content rendered inside of the PageNavigation */ - children?: React.ReactNode; - /** Limits the width of the PageNavigation */ - isWidthLimited?: boolean; - /** Modifier indicating if the PageBreadcrumb is sticky to the top or bottom at various breakpoints */ - stickyOnBreakpoint?: { - default?: 'top' | 'bottom'; - sm?: 'top' | 'bottom'; - md?: 'top' | 'bottom'; - lg?: 'top' | 'bottom'; - xl?: 'top' | 'bottom'; - '2xl'?: 'top' | 'bottom'; - }; - /** Flag indicating if PageNavigation should have a shadow at the top */ - hasShadowTop?: boolean; - /** Flag indicating if PageNavigation should have a shadow at the bottom */ - hasShadowBottom?: boolean; - /** Flag indicating if the PageNavigation has a scrolling overflow */ - hasOverflowScroll?: boolean; - /** Adds an accessible name to the page navigation when the hasOverflowScroll prop is set to true. */ - 'aria-label'?: string; -} - -export const PageNavigation = ({ - className = '', - children, - isWidthLimited, - stickyOnBreakpoint, - hasShadowTop = false, - hasShadowBottom = false, - hasOverflowScroll = false, - 'aria-label': ariaLabel, - ...props -}: PageNavigationProps) => { - const { height, getVerticalBreakpoint } = React.useContext(PageContext); - - React.useEffect(() => { - if (hasOverflowScroll && !ariaLabel) { - /* eslint-disable no-console */ - console.warn('PageNavigation: An accessible aria-label is required when hasOverflowScroll is set to true.'); - } - }, [hasOverflowScroll, ariaLabel]); - - return ( -
- {isWidthLimited &&
{children}
} - {!isWidthLimited && children} -
- ); -}; -PageNavigation.displayName = 'PageNavigation'; diff --git a/packages/react-core/src/components/Page/PageSection.tsx b/packages/react-core/src/components/Page/PageSection.tsx index dee8237f8c7..e030f694cc7 100644 --- a/packages/react-core/src/components/Page/PageSection.tsx +++ b/packages/react-core/src/components/Page/PageSection.tsx @@ -3,6 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Page/page'; import { css } from '@patternfly/react-styles'; import { formatBreakpointMods } from '../../helpers/util'; import { PageContext } from './PageContext'; +import { PageBody } from './PageBody'; export enum PageSectionVariants { default = 'default', @@ -11,7 +12,6 @@ export enum PageSectionVariants { export enum PageSectionTypes { default = 'default', - nav = 'nav', subNav = 'subnav', breadcrumb = 'breadcrumb', tabs = 'tabs', @@ -26,7 +26,7 @@ export interface PageSectionProps extends React.HTMLProps { /** Section background color variant. This will only apply when the type prop has the "default" value. */ variant?: 'default' | 'secondary'; /** Section type variant */ - type?: 'default' | 'nav' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard'; + type?: 'default' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard'; /** Enables the page section to fill the available vertical space */ isFilled?: boolean; /** Limits the width of the section */ @@ -57,6 +57,10 @@ export interface PageSectionProps extends React.HTMLProps { hasShadowBottom?: boolean; /** Flag indicating if the PageSection has a scrolling overflow */ hasOverflowScroll?: boolean; + /** @beta Flag indicating whether children passed to the component should be wrapped by a PageBody. + * Set this to false in order to pass multiple, custom PageBody's as children. + */ + hasBodyWrapper?: boolean; /** Adds an accessible name to the page section. Required when the hasOverflowScroll prop is set to true. * This prop should also be passed in if a heading is not being used to describe the content of the page section. */ @@ -67,7 +71,6 @@ export interface PageSectionProps extends React.HTMLProps { const variantType = { [PageSectionTypes.default]: styles.pageMainSection, - [PageSectionTypes.nav]: styles.pageMainNav, [PageSectionTypes.subNav]: styles.pageMainSubnav, [PageSectionTypes.breadcrumb]: styles.pageMainBreadcrumb, [PageSectionTypes.tabs]: styles.pageMainTabs, @@ -94,6 +97,7 @@ export const PageSection: React.FunctionComponent = ({ hasOverflowScroll = false, 'aria-label': ariaLabel, component = 'section', + hasBodyWrapper = true, ...props }: PageSectionProps) => { const { height, getVerticalBreakpoint } = React.useContext(PageContext); @@ -127,8 +131,7 @@ export const PageSection: React.FunctionComponent = ({ {...(hasOverflowScroll && { tabIndex: 0 })} aria-label={ariaLabel} > - {isWidthLimited &&
{children}
} - {!isWidthLimited && children} + {hasBodyWrapper ? {children} : children} ); }; 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 a72f3400ee1..e2a3e20cbfa 100644 --- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx +++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx @@ -10,7 +10,6 @@ import { Breadcrumb, BreadcrumbItem } from '../../Breadcrumb'; import { Nav, NavList, NavItem } from '../../Nav'; import { SkipToContent } from '../../SkipToContent'; import { PageBreadcrumb } from '../PageBreadcrumb'; -import { PageNavigation } from '../PageNavigation'; import { PageGroup } from '../PageGroup'; import { Masthead } from '../../Masthead'; @@ -228,33 +227,6 @@ describe('Page', () => { expect(asFragment()).toMatchSnapshot(); }); - test('Check page to verify nav is created - PageNavigation syntax', () => { - const masthead = ; - const Sidebar = ; - - const { asFragment } = render( - - - - - Section with default background - - ); - - expect(screen.getByRole('main')).not.toHaveAttribute('id'); - expect(asFragment()).toMatchSnapshot(); - }); - test('Check page to verify grouped nav and breadcrumb - new components syntax', () => { const masthead = ; const Sidebar = ; @@ -272,19 +244,17 @@ describe('Page', () => { - - - + Section with default background diff --git a/packages/react-core/src/components/Page/__tests__/PageBody.test.tsx b/packages/react-core/src/components/Page/__tests__/PageBody.test.tsx new file mode 100644 index 00000000000..b2238f2d6db --- /dev/null +++ b/packages/react-core/src/components/Page/__tests__/PageBody.test.tsx @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { render, screen } from '@testing-library/react'; +import { PageBody } from '../PageBody'; +import styles from '@patternfly/react-styles/css/components/Page/page'; + +test('Renders without children', () => { + render(); + + expect(screen.getByTestId('page-main-body')).toBeVisible(); +}); +test('Renders children', () => { + render(Test); + + expect(screen.getByText('Test')).toBeVisible(); +}); +test(`Renders with class ${styles.pageMainBody} by default`, () => { + render(Test); + + expect(screen.getByText('Test')).toHaveClass(styles.pageMainBody); +}); +test(`Renders with custom classes when className is passed`, () => { + render(Test); + + expect(screen.getByText('Test')).toHaveClass('custom-class'); +}); +test(`Renders with spread props`, () => { + render(Test); + + expect(screen.getByText('Test')).toHaveAttribute('id', 'custom-id'); +}); +test('Matches snapshot', () => { + const { asFragment } = render(Test); + expect(asFragment()).toMatchSnapshot(); +}); 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 63742eb0de6..d018da31caa 100644 --- a/packages/react-core/src/components/Page/__tests__/PageBreadcrumb.test.tsx +++ b/packages/react-core/src/components/Page/__tests__/PageBreadcrumb.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { PageBreadcrumb } from '../PageBreadcrumb'; +import styles from '@patternfly/react-styles/css/components/Page/page'; describe('page breadcrumb', () => { test('Verify basic render', () => { @@ -32,6 +33,7 @@ describe('page breadcrumb', () => { expect(asFragment()).toMatchSnapshot(); }); + // Old snapshot tests end here. The following tests can be kept if Page test suites need a revamp test('Renders without an aria-label by default', () => { render(test); @@ -41,7 +43,7 @@ describe('page breadcrumb', () => { test('Renders with the passed aria-label applied', () => { render(test); - expect(screen.getByText('test')).toHaveAccessibleName('Test label'); + expect(screen.getByText('test').parentElement).toHaveAccessibleName('Test label'); }); test('Does not log a warning in the console by default', () => { @@ -71,4 +73,15 @@ describe('page breadcrumb', () => { expect(consoleWarning).toHaveBeenCalled(); }); + + test('Renders with PageBody wrapper by default', () => { + render(test); + + expect(screen.getByText('test')).toHaveClass(styles.pageMainBody); + }); + test('Does not render with PageBody wrapper when hasBodyWrapper is false', () => { + render(test); + + expect(screen.getByText('test')).not.toHaveClass(styles.pageMainBody); + }); }); diff --git a/packages/react-core/src/components/Page/__tests__/PageNavigation.test.tsx b/packages/react-core/src/components/Page/__tests__/PageNavigation.test.tsx deleted file mode 100644 index 8f9d77dbe0a..00000000000 --- a/packages/react-core/src/components/Page/__tests__/PageNavigation.test.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from 'react'; -import { render, screen } from '@testing-library/react'; -import { PageNavigation } from '../PageNavigation'; - -describe('page navigation', () => { - test('Verify basic render', () => { - const { asFragment } = render(test); - expect(asFragment()).toMatchSnapshot(); - }); - test('Verify limited width', () => { - 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(); - }); -}); 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 ceed384957f..f9cc0c49e5f 100644 --- a/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx +++ b/packages/react-core/src/components/Page/__tests__/PageSection.test.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { render, screen } from '@testing-library/react'; import { PageSection, PageSectionTypes } from '../PageSection'; +import styles from '@patternfly/react-styles/css/components/Page/page'; jest.mock('../Page'); @@ -89,6 +90,7 @@ test('Verify page section overflow scroll', () => { expect(asFragment()).toMatchSnapshot(); }); +// Old snapshot tests end here. The following tests can be kept if Page test suites need a revamp test('Renders without an aria-label by default', () => { render(test); @@ -98,7 +100,7 @@ test('Renders without an aria-label by default', () => { test('Renders with the passed aria-label applied', () => { render(test); - expect(screen.getByText('test')).toHaveAccessibleName('Test label'); + expect(screen.getByText('test').parentElement).toHaveAccessibleName('Test label'); }); test('Does not log a warning in the console by default', () => { @@ -132,7 +134,7 @@ test('Logs a warning in the console when an aria-label is not included with hasO test('Renders as a section by default', () => { render(test); - expect(screen.getByText('test')).toHaveProperty('nodeName', 'SECTION'); + expect(screen.getByText('test').parentElement).toHaveProperty('nodeName', 'SECTION'); }); test('Renders as other elements when a different element type is passed using the component prop', () => { @@ -140,3 +142,14 @@ test('Renders as other elements when a different element type is passed using th expect(screen.getByRole('main')).toHaveTextContent('test'); }); + +test('Renders with PageBody wrapper by default', () => { + render(test); + + expect(screen.getByText('test')).toHaveClass(styles.pageMainBody); +}); +test('Does not render with PageBody wrapper when hasBodyWrapper is false', () => { + render(test); + + expect(screen.getByText('test')).not.toHaveClass(styles.pageMainBody); +}); 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 42de7325643..1581ee45ee7 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 @@ -31,7 +31,11 @@ exports[`Page Check dark page against snapshot 1`] = `
- Section with default background +
+ Section with default background +
@@ -64,144 +68,11 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
- Section with default background -
- - - - -`; - -exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = ` - -
-
-
-
-
-
- -
-
- Section with default background + Section with default background +
@@ -209,7 +80,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax `; -exports[`Page Check page to verify breadcrumb is created 1`] = ` +exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax 1`] = `
- - -
- Section with default background -
- -
-
- -`; - -exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = ` - -
-
-
-
-
-
-
-
-
-
-
+
- Section with default background +
+ Section with default background +
@@ -585,7 +225,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s `; -exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = ` +exports[`Page Check page to verify breadcrumb is created 1`] = `
-
- + + Section Landing + + + + +
+
+ +
+
+ Section with default background
+
+ +
+
+ +`; + +exports[`Page Check page to verify grouped nav and breadcrumb - new components syntax 1`] = ` + +
+
+
+
+
+
-
-
+
-
-
- Section with default background -
- -
-
- -`; - -exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] = ` - -
-
-
-
-
-
+
+
+ +`; + +exports[`Page Check page to verify grouped nav and breadcrumb - old / props syntax 1`] = ` + +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+ Section with default background +
@@ -1007,111 +928,123 @@ exports[`Page Check page to verify skip to content points to main content region
- + + + + + Section Title + + +
  • + + + + + Section Landing + +
    • + + +
    +
    - Section with default background +
    + Section with default background +
    @@ -1150,7 +1083,11 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
    - Section with default background +
    + Section with default background +
    @@ -1183,111 +1120,119 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
    - + + + + + Section Landing + + + + +
    - Section with default background +
    + Section with default background +
    @@ -1320,111 +1265,123 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
    - + + + + + Section Title + + +
  • + + + + + Section Landing + +
    • + + + +
    - Section with default background +
    + Section with default background +
    @@ -1457,111 +1414,119 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
    - + + + + + Section Landing + + + + +
    - Section with default background +
    + Section with default background +
    @@ -1594,111 +1559,123 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
    - + + + + + Section Title + + +
  • + + + + + Section Landing + +
    • + + + +
    - Section with default background +
    + Section with default background +
    diff --git a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBody.test.tsx.snap b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBody.test.tsx.snap new file mode 100644 index 00000000000..6a71598f848 --- /dev/null +++ b/packages/react-core/src/components/Page/__tests__/__snapshots__/PageBody.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Matches snapshot 1`] = ` + +
    + Test +
    +     +`; 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 628242e47e2..468121291eb 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 @@ -5,7 +5,11 @@ exports[`page breadcrumb Verify basic render 1`] = `
    - test +
    + test +
    `; @@ -15,7 +19,11 @@ exports[`page breadcrumb Verify bottom shadow 1`] = `
    - test +
    + test +
    `; @@ -25,7 +33,11 @@ exports[`page breadcrumb Verify bottom sticky 1`] = `
    - test +
    + test +
    `; @@ -50,7 +62,11 @@ exports[`page breadcrumb Verify overflow scroll 1`] = ` class="pf-v6-c-page__main-breadcrumb pf-m-overflow-scroll" tabindex="0" > - test +
    + test +
    `; @@ -60,7 +76,11 @@ exports[`page breadcrumb Verify top shadow 1`] = `
    - test +
    + test +
    `; @@ -70,7 +90,11 @@ exports[`page breadcrumb Verify top sticky 1`] = `
    - test +
    + test +
    `; 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 deleted file mode 100644 index 7363d3cff31..00000000000 --- a/packages/react-core/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap +++ /dev/null @@ -1,77 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`page navigation Verify basic render 1`] = ` - -
    - test -
    -     -`; - -exports[`page navigation Verify bottom shadow 1`] = ` - -
    - test -
    -     -`; - -exports[`page navigation Verify bottom sticky 1`] = ` - -
    - test -
    -     -`; - -exports[`page navigation Verify limited width 1`] = ` - -
    -
    - test -
    -
    -     -`; - -exports[`page navigation Verify overflow scroll 1`] = ` - -
    - test -
    -     -`; - -exports[`page navigation Verify top shadow 1`] = ` - -
    - test -
    -     -`; - -exports[`page navigation Verify top sticky 1`] = ` - -
    - test -
    -     -`; 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 23e77cf82b0..1cdcd0b33bd 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 @@ -4,15 +4,23 @@ exports[`Check page main breadcrumb section against snapshot 1`] = `
    + > +
    +
    `; exports[`Check page main nav section against snapshot 1`] = `
    + class="pf-v6-c-page__main-section" + > +
    +
    `; @@ -20,7 +28,11 @@ exports[`Check page main subnav section against snapshot 1`] = `
    + > +
    +
    `; @@ -28,7 +40,11 @@ exports[`Check page main tabs section against snapshot 1`] = `
    + > +
    +
    `; @@ -48,7 +64,11 @@ exports[`Check page section with fill and no padding example against snapshot 1`
    + > +
    +
    `; @@ -56,7 +76,11 @@ exports[`Check page section with fill example against snapshot 1`] = `
    + > +
    +
    `; @@ -76,7 +100,11 @@ exports[`Check page section with no fill example against snapshot 1`] = `
    + > +
    +
    `; @@ -84,7 +112,11 @@ exports[`Check page section with no padding example against snapshot 1`] = `
    + > +
    +
    `; @@ -93,7 +125,11 @@ exports[`Verify page section bottom shadow 1`] = `
    - test +
    + test +
    `; @@ -103,7 +139,11 @@ exports[`Verify page section bottom sticky 1`] = `
    - test +
    + test +
    `; @@ -114,7 +154,11 @@ exports[`Verify page section overflow scroll 1`] = ` class="pf-v6-c-page__main-section pf-m-overflow-scroll" tabindex="0" > - test +
    + test +
    `; @@ -124,7 +168,11 @@ exports[`Verify page section top shadow 1`] = `
    - test +
    + test +
    `; @@ -134,7 +182,11 @@ exports[`Verify page section top sticky 1`] = `
    - test +
    + test +
    `; diff --git a/packages/react-core/src/components/Page/examples/Page.md b/packages/react-core/src/components/Page/examples/Page.md index fb197ab4920..3b3654f6b86 100644 --- a/packages/react-core/src/components/Page/examples/Page.md +++ b/packages/react-core/src/components/Page/examples/Page.md @@ -3,16 +3,7 @@ id: Page section: components cssPrefix: pf-v5-c-page propComponents: - [ - 'Page', - 'PageSidebar', - 'PageSidebarBody', - 'PageSection', - 'PageGroup', - 'PageBreadcrumb', - 'PageNavigation', - 'PageToggleButton' - ] + ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton'] --- import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon'; @@ -107,7 +98,7 @@ This example shows all types of page sections. To group page content sections, add 1 or more `` components to a ``. -The following example adds a group containing ``, ``, and `` components. +The following example adds a group containing `` and `` components. To add additional components and information to a group, you may use the following properties: diff --git a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx index 62d3dc190c3..8bba7b76509 100644 --- a/packages/react-core/src/components/Page/examples/PageGroupSection.tsx +++ b/packages/react-core/src/components/Page/examples/PageGroupSection.tsx @@ -11,7 +11,6 @@ import { PageSection, PageGroup, PageBreadcrumb, - PageNavigation, PageToggleButton, Breadcrumb, BreadcrumbItem, @@ -70,27 +69,25 @@ export const PageGroupSection: React.FunctionComponent = () => { return ( - - - + Section home diff --git a/packages/react-core/src/components/Page/index.ts b/packages/react-core/src/components/Page/index.ts index fd3bc29fe52..5afe6f03b36 100644 --- a/packages/react-core/src/components/Page/index.ts +++ b/packages/react-core/src/components/Page/index.ts @@ -1,9 +1,9 @@ export * from './Page'; +export * from './PageBody'; export * from './PageBreadcrumb'; export * from './PageGroup'; export * from './PageSidebar'; export * from './PageSidebarBody'; export * from './PageSection'; -export * from './PageNavigation'; export * from './PageToggleButton'; export * from './PageContext'; diff --git a/packages/react-integration/cypress/integration/wizarddeprecated.spec.ts b/packages/react-integration/cypress/integration/wizarddeprecated.spec.ts index a46f7882bbc..c14200815b2 100644 --- a/packages/react-integration/cypress/integration/wizarddeprecated.spec.ts +++ b/packages/react-integration/cypress/integration/wizarddeprecated.spec.ts @@ -6,7 +6,11 @@ describe('Wizard Deprecated Demo Test', () => { it('Verify wizard in modal launches in a dialog and has a custom width', () => { cy.get('#launchWiz').click(); cy.get('#modalWizId.pf-v6-c-wizard').should('exist'); - cy.get('.pf-v6-c-modal-box').should('have.attr', 'style', '--pf-v6-c-modal-box--Width:710px;'); + cy.get('.pf-v6-c-modal-box').then((modalBox) => { + expect(modalBox) + .to.have.attr('style') + .match(/--pf-v6-c-modal-box--Width:\s*710px;/); + }); cy.focused().click(); }); diff --git a/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx index f4034caaa41..91119986abf 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/WizardDeprecatedDemo/WizardDeprecatedDemo.tsx @@ -210,7 +210,7 @@ export class WizardDeprecatedDemo extends React.Component