@patternfly/react-core 4.268.2 → 5.0.0-alpha.2

package/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Page Check dark page against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -65,7 +65,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -129,7 +129,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -296,7 +296,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -463,7 +463,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -749,7 +749,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -1040,7 +1040,7 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -1219,7 +1219,7 @@ exports[`Page Check page to verify skip to content points to main content region
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     data-testid="page-test-id"
     id="PageId"
   >
@@ -1394,7 +1394,7 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -1455,7 +1455,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -1622,7 +1622,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -1789,7 +1789,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header
@@ -1956,7 +1956,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
 <DocumentFragment>
   <div
     aria-label="Page layout"
-    class="pf-c-page pf-m-resize-observer pf-m-breakpoint-default pf-m-height-breakpoint-sm my-page-class"
+    class="pf-c-page my-page-class"
     id="PageId"
   >
     <header

package/src/components/Page/examples/Page.md

@@ -23,99 +23,49 @@ import './page.css';
 
 ## Examples
 
-### Basic page components
-
-A page will typically contain the following components: 
-
-- A `<Page>` with a `header` that often contains a [masthead](/components/masthead)
-  - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`. 
-- A `<PageSidebar>` for vertical navigation 
-- 1 or more `<PageSection>` components
-
-### Vertical navigation
-
-To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, use the `nav` property of the `<PageSidebar>`. 
-
-The `isNavOpen` property helps facilitate the opening and closing of the sidebar and should be 'true' when the navigation sidebar is visible. 
+### Vertical nav
 
 ```ts file="./PageVerticalNav.tsx"
 ```
 
-### Legacy page header
-
-This example shows the legacy implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than `<PageHeader>` and `<PageHeaderTools>` as shown in the following example.
-
-```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
-```
-
-### Horizontal navigation
-
-To add horizontal navigation to the top of a `<Page>`, add the navigation inside of a `<ToolbarItem>` in the `<Toolbar>` that is passed to the `<MastheadContent>` of the `<Masthead>`.
+### Horizontal nav
 
 ```ts file="./PageHorizontalNav.tsx"
 ```
 
-### Legacy tertiary navigation
-
-[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation. 
-
-Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the `tertiaryNav` property. The following example passes `tertiaryNav="Navigation"` into a `<Page>` component.
+### Tertiary nav
 
 ```ts file="./PageTertiaryNav.tsx"
 ```
 
-### Uncontrolled navigation
-
-When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isNavOpen` into the `<PageSidebar>` and `onNavToggle` into the `<PageHeader>`.
-
-```ts file="./PageUncontrolledNav.tsx"
-```
-
-### Filled page sections
-
-By default, the last page section is "filled", meaning it fills the available vertical space of a page.
-
-To change the default behavior, use the `isFilled` property. To make other page sections "filled", set `isFilled` equal to "true". To disable the last page section from being "filled", set `isFilled` equal to "false".
+### With or without fill
 
 ```ts file="./PageWithOrWithoutFill.tsx"
 ```
 
 ### Main section padding
 
-To adjust the padding of a `<PageSection>`, you can pass in different values to the `padding` property. These values should be aligned to a specific breakpoint: 'default', 'sm', 'md', 'lg', 'xl', and '2xl'. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’. 
-
-As the page's viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on 'lg' also applies to 'xl' and '2xl'. 
-
-To remove padding entirely, pass 'noPadding' to the `default` breakpoint. For example, the second section in this example passes in `padding={{ default: 'noPadding' }}`. Since no specific breakpoints are mentioned, every breakpoint will have 'noPadding'.
-
-To add padding at specific breakpoints, pass in "padding" at those breakpoints. For example, the third section in this example passes in `padding={{ default: 'noPadding', md: 'padding' }}`. At 'md', 'lg',  'xl', and '2xl' breakpoints, the default value will be overwritten, and padding will be added.
-
-To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoints. For example, the fourth section in this example passes in `padding={{ md: 'noPadding' }}`, which means that 'md', 'lg'  'xl', and '2xl' breakpoints will have `noPadding`.
-
 ```ts file="./PageMainSectionPadding.tsx"
 ```
 
-### Group section
+### Uncontrolled nav
 
-To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`. 
+```ts file="./PageUncontrolledNav.tsx"
+```
 
-The following example adds a group containing `<PageNavigation>`, `<PageBreadcrumb>`, and `<PageSection>` components.
+### Group section
 
-To add additional components and information to a group, you may use the following properties: 
+```ts file="./PageGroupSection.tsx"
+```
 
-- To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`. 
-- To indicate that tertiary navigation should be in a group, use `isTertiaryNavGrouped`.
-- To specify additional group content, use `additionalGroupedContent`. 
+### Vertical nav using PageHeader component
 
+This example is provided because PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.
 
-```ts file="./PageGroupSection.tsx"
+```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
 ```
 
 ### Centered section
 
-By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property.  When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
-
-The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
-
 ```ts file="./PageCenteredSection.tsx"
 ```

package/src/components/Page/examples/PageMainSectionPadding.tsx

@@ -61,7 +61,9 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
       <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
         Section with no padding
       </PageSection>
-      <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
+      <PageSection padding={{ default: 'noPadding', md: 'padding', lg: 'padding' }}>
+        Section with padding only on medium/large
+      </PageSection>
       <PageSection variant={PageSectionVariants.light} padding={{ md: 'noPadding' }}>
         Section with no padding on medium
       </PageSection>

package/src/components/Pagination/Navigation.tsx

@@ -14,7 +14,7 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** Additional classes for the pagination navigation container. */
   className?: string;
   /** Accessible label for the input displaying the current page. */
-  currPage?: string;
+  currPageAriaLabel?: string;
   /** The number of first page where pagination starts. */
   firstPage?: number;
   /** Flag indicating if the pagination is compact. */
@@ -34,17 +34,17 @@ export interface NavigationProps extends React.HTMLProps<HTMLElement> {
   /** The title of a page displayed beside the page number (the plural form). */
   pagesTitlePlural?: string;
   /** Accessible label for the pagination component. */
-  paginationTitle?: string;
+  paginationAriaLabel?: string;
   /** Number of items per page. */
   perPage?: number;
   /** Accessible label for the button which moves to the first page. */
-  toFirstPage?: string;
+  toFirstPageAriaLabel?: string;
   /** Accessible label for the button which moves to the last page. */
-  toLastPage?: string;
+  toLastPageAriaLabel?: string;
   /** Accessible label for the button which moves to the next page. */
-  toNextPage?: string;
+  toNextPageAriaLabel?: string;
   /** Accessible label for the button which moves to the previous page. */
-  toPreviousPage?: string;
+  toPreviousPageAriaLabel?: string;
   /** Function called when user clicks to navigate to first page. */
   onFirstClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
   /** Function called when user clicks to navigate to last page. */
@@ -78,12 +78,12 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     firstPage: 0,
     pagesTitle: '',
     pagesTitlePlural: '',
-    toLastPage: 'Go to last page',
-    toNextPage: 'Go to next page',
-    toFirstPage: 'Go to first page',
-    toPreviousPage: 'Go to previous page',
-    currPage: 'Current page',
-    paginationTitle: 'Pagination',
+    toLastPageAriaLabel: 'Go to last page',
+    toNextPageAriaLabel: 'Go to next page',
+    toFirstPageAriaLabel: 'Go to first page',
+    toPreviousPageAriaLabel: 'Go to previous page',
+    currPageAriaLabel: 'Current page',
+    paginationAriaLabel: 'Pagination',
     ofWord: 'of',
     onNextClick: () => undefined as any,
     onPreviousClick: () => undefined as any,
@@ -150,12 +150,12 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
       firstPage,
       pagesTitle,
       pagesTitlePlural,
-      toLastPage,
-      toNextPage,
-      toFirstPage,
-      toPreviousPage,
-      currPage,
-      paginationTitle,
+      toLastPageAriaLabel,
+      toNextPageAriaLabel,
+      toFirstPageAriaLabel,
+      toPreviousPageAriaLabel,
+      currPageAriaLabel,
+      paginationAriaLabel,
       ofWord,
       onNextClick,
       onPreviousClick,
@@ -168,13 +168,13 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
     } = this.props;
     const { userInputPage } = this.state;
     return (
-      <nav className={css(styles.paginationNav, className)} aria-label={paginationTitle} {...props}>
+      <nav className={css(styles.paginationNav, className)} aria-label={paginationAriaLabel} {...props}>
         {!isCompact && (
           <div className={css(styles.paginationNavControl, styles.modifiers.first)}>
             <Button
               variant={ButtonVariant.plain}
               isDisabled={isDisabled || page === firstPage || page === 0}
-              aria-label={toFirstPage}
+              aria-label={toFirstPageAriaLabel}
               data-action="first"
               onClick={event => {
                 onFirstClick(event, 1);
@@ -197,7 +197,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
               this.handleNewPage(event, newPage);
               this.setState({ userInputPage: newPage });
             }}
-            aria-label={toPreviousPage}
+            aria-label={toPreviousPageAriaLabel}
           >
             <AngleLeftIcon />
           </Button>
@@ -206,7 +206,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
           <div className={styles.paginationNavPageSelect}>
             <input
               className={css(styles.formControl)}
-              aria-label={currPage}
+              aria-label={currPageAriaLabel}
               type="number"
               disabled={
                 isDisabled || (itemCount && page === firstPage && page === lastPage && itemCount >= 0) || page === 0
@@ -228,7 +228,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
           <Button
             variant={ButtonVariant.plain}
             isDisabled={isDisabled || page === lastPage}
-            aria-label={toNextPage}
+            aria-label={toNextPageAriaLabel}
             data-action="next"
             onClick={event => {
               const newPage = (page as number) + 1 <= lastPage ? (page as number) + 1 : lastPage;
@@ -245,7 +245,7 @@ export class Navigation extends React.Component<NavigationProps, NavigationState
             <Button
               variant={ButtonVariant.plain}
               isDisabled={isDisabled || page === lastPage}
-              aria-label={toLastPage}
+              aria-label={toLastPageAriaLabel}
               data-action="last"
               onClick={event => {
                 onLastClick(event, lastPage);