@patternfly/react-core 4.276.6 → 5.0.0-alpha.10

package/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();
 });
 

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
@@ -13,11 +13,11 @@ exports[`Page Check dark page against snapshot 1`] = `
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       PageHeaderTools | Avatar
     </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
@@ -74,11 +74,11 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"
@@ -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
@@ -138,11 +138,11 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"
@@ -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
@@ -305,11 +305,11 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"
@@ -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
@@ -472,11 +472,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"
@@ -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
@@ -758,11 +758,11 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"
@@ -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
@@ -1049,11 +1049,11 @@ exports[`Page Check page to verify nav is created - PageNavigation syntax 1`] =
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"
@@ -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"
   >
@@ -1235,11 +1235,11 @@ exports[`Page Check page to verify skip to content points to main content region
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"
@@ -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
@@ -1403,11 +1403,11 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       PageHeaderTools | Avatar
     </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
@@ -1464,11 +1464,11 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"
@@ -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
@@ -1631,11 +1631,11 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"
@@ -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
@@ -1798,11 +1798,11 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"
@@ -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
@@ -1965,11 +1965,11 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
       <div
         class="pf-c-page__header-brand"
       >
-        <a
+        <span
           class="pf-c-page__header-brand-link"
         >
           Logo
-        </a>
+        </span>
       </div>
       <div
         class="pf-c-page__header-nav"

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

@@ -1,6 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Check page vertical layout example against snapshot 1`] = `
+<DocumentFragment>
+  <header
+    class="pf-c-page__header"
+  >
+    <div
+      class="pf-c-page__header-brand"
+    >
+      <span
+        class="pf-c-page__header-brand-link"
+      >
+        Logo
+      </span>
+    </div>
+    PageHeaderTools | Avatar
+  </header>
+</DocumentFragment>
+`;
+
+exports[`Test that logoComponent with href is an anchor 1`] = `
 <DocumentFragment>
   <header
     class="pf-c-page__header"
@@ -10,6 +29,7 @@ exports[`Check page vertical layout example against snapshot 1`] = `
     >
       <a
         class="pf-c-page__header-brand-link"
+        href="#"
       >
         Logo
       </a>
@@ -18,3 +38,22 @@ exports[`Check page vertical layout example against snapshot 1`] = `
   </header>
 </DocumentFragment>
 `;
+
+exports[`Test that passed logoComponent overrides default 1`] = `
+<DocumentFragment>
+  <header
+    class="pf-c-page__header"
+  >
+    <div
+      class="pf-c-page__header-brand"
+    >
+      <div
+        class="pf-c-page__header-brand-link"
+      >
+        Logo
+      </div>
+    </div>
+    PageHeaderTools | Avatar
+  </header>
+</DocumentFragment>
+`;

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);